امروز برای شما آموزشی را آماده کرده ام که بسیار ساده و در عین حال کاملا کاربردی می باشد. قطعا برای شما اتفاق افتاده است که هنگام خواندن مطلب سایتی به دکمه های اشتراک گذاری برخورده باشید.

این مقاله در تاریخ 1 آبان 1396 بروزرسانی شده است.

وردپرس دارای افزونه های بسیار زیادی برای اشتراک گذاری است اما ممکن است بسیاری از ما با ظاهر یا محل قرار گیری آنها  مشکل داشته باشیم. با این آموزش کوتاه و مفید می توانیم افزودن دکمه های اشتراک گذاری بدون افزونه و مطابق با استایل سفارشی داشته باشیم

فیلم آموزش افزودن دکمه های اشتراک گذاری بدون افزونه

 

در ابتدا کد های زیر را جایی که می خواهیم دکمه ها نمایش یابند می گذاریم:

<div class="social">
    <div class="icons">
        <!--Twitter-->
        <a class="twitter" href="https://twitter.com/home?status=Reading: <?php the_permalink(); ?>" title="Share this post on Twitter!" target="_blank">Twitter</a>
        <!--Facebook-->
        <a class="facebook" href="https://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="_blank">Facebook</a>
        <!--Google Plus-->
        <a class="google-plus" target="_blank" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="window.open('https://plus.google.com/share?url=<?php the_permalink(); ?>','gplusshare','width=600,height=400,left='+(screen.availWidth/2-225)+',top='+(screen.availHeight/2-150)+'');return false;">Google+</a>
         <!--Linkedin-->
         <a class="linkedin" href="http://www.linkedin.com/shareArticle?mini=true&amp;title=<?php the_title(); ?>&amp;url=<?php the_permalink(); ?>" title="Share on LinkedIn" rel="external nofollow" rel="nofollow" target="_blank">Share on LinkedIn</a>
         <!--Pinterest-->
         <a class="pinterest" href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo $url; ?>" title="Pinterest" rel="nofollow" target="_blank">Pinterest</a>
         <!--Telegram-->
        <a class="telegram" href="https://t.me/share/url?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="share on Telegram" rel="nofollow" target="_blank">Telegram</a>
            <!--whatsapp-->
        <a class="whatsapp" href="whatsapp://send?text=<?php the_permalink(); ?>" data-action="share/whatsapp/share">Whatsapp</a>
    </div>
</div>

صفحه را بارگذاری کنید. می بینید که لینک ها به صورت متن و نا مرتب چیده شده اند.

حالا نوبت به استایل دهی می رسد.

در اینجا استایلی که من انتخاب کرده ام ساده و در عین حال زیبا و سبک است

.social {
    text-align: center;
}
.social a {
    font-size: 0;
    width: 50px;
    height: 50px;
    display: inline-block;
    float: none;
    border-radius: 50%;
}
.twitter {
    background: url(social-images.png) no-repeat;
    background-position: 0px -159px;
}
/*Facebook*/
.facebook {
    background: url(social-images.png) no-repeat;
    background-position: 0px -108px;
}
/*Google Plus*/
.google-plus {
    background: url(social-images.png) no-repeat;
    background-position: 0px -307px;
}
/*LinkedIn*/
.linkedin{
    background: url(social-images.png) no-repeat;
    background-position: 0px -10px;
}
/*Pinterest*/
.pinterest{
    background: url(social-images.png) no-repeat;
    background-position:0px -258px;
}
/*Telegram*/
.telegram{
    background: url(social-images.png) no-repeat;
    background-position:0px -358px;
}
/* Whatsapp*/
.whatsapp{
    background: url(social-images.png) no-repeat;
    background-position:0px -59px;
}
.social a:hover {
    opacity: 0.7;
}

من برای این آموزش از عکس زیر برای آیکن ها استفاده  کردم. کد استایل بالا رو داخل فایل style.css قرار داده ام  با توجه به این مورد من عکس زیر رو داخل فولدر پوسته قرار دادم.

خب آموزش امروز هم به پایان رسید. شما باید به راحتی افزودن دکمه های اشتراک گذاری بدون افزونه را پیاده سازی کرده باشید. همچنین می توانید دکمه ها را با سلیقه خودتان استایل دهی کرده و درست کنید.

موفق باشید

 

34 دیدگاه برای “افزودن دکمه های اشتراک گذاری بدون افزونه + فیلم آموزشی

  • محمد
    - ۲۵ فروردین , ۱۳۹۳

    سلام
    من از کدها استفاده کردم . اما استایل شما کامل نیست . گرد شدن گوشه آیکون ها مربوط به قسمت دیگه ای از فایل استایل قالب شماست که در این مطلب ننوشتید . هنگامی که کاربر استایل رو اضافه میکنه فقط دور نوشته ها یه مستطیل رنگی اضافه میشه که ظاهر خوبی نداره و اون چیزی که شما اینجا تصورش رو گذاشتید از آب در نمیاد.

    ممنون.

    • الناز
      - ۲۵ فروردین , ۱۳۹۳

      سلام دوست عزیز. بله درست میگید.
      استایل را تغییر دادم الان دیگه مشکلی نخواهد داشت
      ممنون بابت اطلاع رسانی

      • محمد
        - ۲۵ فروردین , ۱۳۹۳

        ممنونم از پیگیریتون.

  • آیلین
    - ۳۰ فروردین , ۱۳۹۳

    سلام،
    این کدها فقط داخل حلقه کارایی دارند، ولی من میخوام در هدر قرارشون بدم!!!

    • الناز
      - ۳۱ فروردین , ۱۳۹۳

      سلام دوست عزیز. یعنی دکمه های اشتراک گذاری در هدر سایت باشند؟ مشکلی ندارد فقط بهتر است از آیکن استفاده کنید و داخل هدر قرار دهید

  • سئو
    - ۱۷ خرداد , ۱۳۹۳

    تشکر مفید بود

  • آناز
    - ۲۸ خرداد , ۱۳۹۳

    با سلام
    کدها عالی بود ممنون بسیار کارم را حل کرد .از مطالب مفید سایتان تشکر می کنم.

  • طراحی سایت
    - ۱۲ مرداد , ۱۳۹۳

    سایت خیلی خوبی دارین موفق باشین

  • Mohammad
    - ۱۸ آذر , ۱۳۹۳

    زیبا!

  • دانلود رایگان نرم افزار
    - ۴ بهمن , ۱۳۹۳

    بهتر بود اگه کلاس ها و آی دی ها رو عجیب غریب می گرفتید که یه وقت تو قالب موجود نباشه من استایل رو گذاشتم قالب پوکید!

    • الناز بیک زاده
      - ۶ بهمن , ۱۳۹۳

      دوست عزیز میتونید خودتون اسم کلاس ها و آی دی هارو تغییر بدید و عجیب غریب بزارید 😀

  • شبکه اجتماعی
    - ۲۷ اردیبهشت , ۱۳۹۴

    سلام
    ممنون مطلب بسیار خوبی بود
    اگه امکان داره بهترین سایت های اشتراک گذاری رو به ترتیب تو یه پست جداگانه نام ببرید
    البته ترتیبشون معلومه ولی منظور بنده از نظر اهمیتی هست که گوگل میده
    با احترام

    • الناز
      - ۲۷ اردیبهشت , ۱۳۹۴

      سلام دوست عزیز. چشم اگر مقاله ای در این خصوص پیدا کردم حتما براتون آماده میکنم

  • mohsen
    - ۳۰ مرداد , ۱۳۹۴

    سلام و احترام. کلوب و فیس نما، دنبالر و پی سی گپ رو قرار بدید عالی میشه. اینا ک نصفشون بسته فیل… هست

  • سایه روشن
    - ۱۶ شهریور , ۱۳۹۴

    با سلام و خسته نباشید
    به نضر من اگه تو استایلش کد :
    }a hover
    { ; opacity: 0.7
    اضافه کنید قشنگتر بشه
    ممنون از مطالب مفیدتون

    • الناز
      - ۱۶ شهریور , ۱۳۹۴

      سلام. ممنونم دوست من. چشم واسه استایلش اضافه می کنم

  • sam
    - ۲۸ آذر , ۱۳۹۴

    مطلب جالبی بود.

  • علی
    - ۲۵ شهریور , ۱۳۹۵

    ممنون از اموزش خوبتون همیشه با آمزش هاتون مشکلات همه رو حل میکنید
    ممنون از سایت خوبتون

    مرسی

  • معماری
    - ۱۸ مهر , ۱۳۹۵

    سلام و خسته نباشید. این دکمه های اشتراک گذاری سایت خودتون از همین کد استفاده می کنه؟

    • الناز
      - ۶ آبان , ۱۳۹۵

      سلام. بله

  • مهدی طیبی
    - ۱ آبان , ۱۳۹۶

    سلام . لطفا این مقاله رو بروزرسانی کنید و نحوه اشتراک گذاری مطلب درون تلگرام نیز بفرمایید . ممنون .

    • الناز
      - ۱ آبان , ۱۳۹۶

      سلام دوست عزیز. بله حتما

      • مهدی طیبی
        - ۱ آبان , ۱۳۹۶

        ممنون بابت آپدیت و بروز رسانی این مقالتون .

  • سورنا RT
    - ۲۲ بهمن , ۱۳۹۶

    سلام و احترام
    وقت بخیر – سپاس از آموزش خوب ، ساده و کاربردیتون. بار اولی هستش که به سایت شما وارد شدم و خیلی خوشهالم که از امروز دانش آموز مدرسه وردپرس هستم.

    یک سوال در خصوص در ج کد های اشتراک گذاری بدون افزونه …
    من از قالب مارکت پلیس (kivi) استفاده میکنم و دارای بخش مطالب و محصولات هستش و طبیعتا مسیر ها و فولدر هایی که شما برای درج کد ها در فایل ها، فرمودید اصلا در قالب من نیستش و متفاوته.
    با توجه به قالب خودم ، کد ها رو در کدوم مسیر و فایل و در کدوم قسمت فایل، قرار بدم .
    الته عرض کنم زیاد هم از مسائل فنی سر در نمیارم … کلافه شدم از بس کد ها رو زیر و رو کردم.
    راهنمایی شما برام کمک بزرگیه.
    موفق سربلند باشید.

    • الناز
      - ۲۲ بهمن , ۱۳۹۶

      سلام دوست عزیز. شما می خوایید که دکمه های اشتراک گذاری توی کدوم صفحات نمایش داده بشه؟ نوشته ها؟ برگه ها؟ محصولات؟ کدوم صفحه ها؟

  • سورنا RT
    - ۲۲ بهمن , ۱۳۹۶

    سلام و احترام
    ممنون از پاسخ دهی شما
    میخوام در نوشته ها و محصولات نمایش داده بشه . بینهایت سپاس گذارم.

    • الناز
      - ۲۳ بهمن , ۱۳۹۶

      دوست عزیز بررسی میکنم تم رو و نتیجه رو به ایمیلتون ارسال میکنم.

      • سورنا RT
        - ۲۳ بهمن , ۱۳۹۶

        سپاس از محبت بی دریغ شما. همیشه موفق باشید.

      • سورنا RT
        - ۱۲ اسفند , ۱۳۹۶

        سلام وقت بخیر
        منتظر دریافت ایمیلتون بودم ولی هنوز پاسخی ارسال نشده .
        البته سوال در خصوص درج کد های اشتراک گذاری بدون افزونه در قالب مارکت پلیس (kivi) بوده… که فرمودید بررسی میکنم.
        به هر حال ممنون از شما و وبسایت بسیار ارزشمندتون.

        • سیروس
          - ۱۲ اسفند , ۱۳۹۶

          با سلام
          ببخشید که دیر پاسخ دادیم
          متاسفانه ما قالب مورد نظر شما را نداریم تا مشکل رو بررسی کنیم ، در صورتی که این قالب را آنلاین جایی نصب دارید اطلاعات لاگین رو برای تلگرام ما بفرستید تا بررسی انجام بدیم.
          با تشکر از شما
          https://t.me/wpschool_support

  • دانلود فیلم جدید
    - ۲۸ اسفند , ۱۳۹۶

    سلام.ممنون .خیلی خوب بود.از دست اندرکاران وبسایت به
    این خوبی سپاسگزارم

  • سعید
    - ۸ آذر , ۱۳۹۷

    باسلام
    خیلی خوب بود
    اگر امکانش هست بیزحمت دکمه های اشتراک در آپارات، اینستاگرام، سروش و بیسفون رو هم قرار بدین

  • امیر
    - ۲۲ آذر , ۱۳۹۹

    سلام امکانش هست برای پیام رسان های داخلی هم بگید

  • mohammad
    - ۱۴ اسفند , ۱۳۹۹

    با سلام ووقت بخیر من میخواهم اشتراک فیلم با زرین پال درست کنم به این منظور کاربر گزینه یک ماه خرید اشتراک میزنه من چه دستوری بزنم که اول زمان روز مشخص باشه وقتی به اتمام رسید پیغام بده خرید اشتراک شما به پابان رسیده است

دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

-- بارگیری کد امنیتی --