امروز برای شما آموزشی را آماده کرده ام که بسیار ساده و در عین حال کاملا کاربردی می باشد. قطعا برای شما اتفاق افتاده است که هنگام خواندن مطلب سایتی به دکمه های اشتراک گذاری برخورده باشید.
این مقاله در تاریخ 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&title=<?php the_title(); ?>&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(); ?>&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 قرار داده ام با توجه به این مورد من عکس زیر رو داخل فولدر پوسته قرار دادم.
خب آموزش امروز هم به پایان رسید. شما باید به راحتی افزودن دکمه های اشتراک گذاری بدون افزونه را پیاده سازی کرده باشید. همچنین می توانید دکمه ها را با سلیقه خودتان استایل دهی کرده و درست کنید.
موفق باشید
سلام
من از کدها استفاده کردم . اما استایل شما کامل نیست . گرد شدن گوشه آیکون ها مربوط به قسمت دیگه ای از فایل استایل قالب شماست که در این مطلب ننوشتید . هنگامی که کاربر استایل رو اضافه میکنه فقط دور نوشته ها یه مستطیل رنگی اضافه میشه که ظاهر خوبی نداره و اون چیزی که شما اینجا تصورش رو گذاشتید از آب در نمیاد.
ممنون.
سلام دوست عزیز. بله درست میگید.
استایل را تغییر دادم الان دیگه مشکلی نخواهد داشت
ممنون بابت اطلاع رسانی
ممنونم از پیگیریتون.
سلام،
این کدها فقط داخل حلقه کارایی دارند، ولی من میخوام در هدر قرارشون بدم!!!
سلام دوست عزیز. یعنی دکمه های اشتراک گذاری در هدر سایت باشند؟ مشکلی ندارد فقط بهتر است از آیکن استفاده کنید و داخل هدر قرار دهید
تشکر مفید بود
با سلام
کدها عالی بود ممنون بسیار کارم را حل کرد .از مطالب مفید سایتان تشکر می کنم.
سایت خیلی خوبی دارین موفق باشین
زیبا!
بهتر بود اگه کلاس ها و آی دی ها رو عجیب غریب می گرفتید که یه وقت تو قالب موجود نباشه من استایل رو گذاشتم قالب پوکید!
دوست عزیز میتونید خودتون اسم کلاس ها و آی دی هارو تغییر بدید و عجیب غریب بزارید 😀
سلام
ممنون مطلب بسیار خوبی بود
اگه امکان داره بهترین سایت های اشتراک گذاری رو به ترتیب تو یه پست جداگانه نام ببرید
البته ترتیبشون معلومه ولی منظور بنده از نظر اهمیتی هست که گوگل میده
با احترام
سلام دوست عزیز. چشم اگر مقاله ای در این خصوص پیدا کردم حتما براتون آماده میکنم
سلام و احترام. کلوب و فیس نما، دنبالر و پی سی گپ رو قرار بدید عالی میشه. اینا ک نصفشون بسته فیل… هست
با سلام و خسته نباشید
به نضر من اگه تو استایلش کد :
}a hover
{ ; opacity: 0.7
اضافه کنید قشنگتر بشه
ممنون از مطالب مفیدتون
سلام. ممنونم دوست من. چشم واسه استایلش اضافه می کنم
مطلب جالبی بود.
ممنون از اموزش خوبتون همیشه با آمزش هاتون مشکلات همه رو حل میکنید
ممنون از سایت خوبتون
مرسی
سلام و خسته نباشید. این دکمه های اشتراک گذاری سایت خودتون از همین کد استفاده می کنه؟
سلام. بله
سلام . لطفا این مقاله رو بروزرسانی کنید و نحوه اشتراک گذاری مطلب درون تلگرام نیز بفرمایید . ممنون .
سلام دوست عزیز. بله حتما
ممنون بابت آپدیت و بروز رسانی این مقالتون .
سلام و احترام
وقت بخیر – سپاس از آموزش خوب ، ساده و کاربردیتون. بار اولی هستش که به سایت شما وارد شدم و خیلی خوشهالم که از امروز دانش آموز مدرسه وردپرس هستم.
یک سوال در خصوص در ج کد های اشتراک گذاری بدون افزونه …
من از قالب مارکت پلیس (kivi) استفاده میکنم و دارای بخش مطالب و محصولات هستش و طبیعتا مسیر ها و فولدر هایی که شما برای درج کد ها در فایل ها، فرمودید اصلا در قالب من نیستش و متفاوته.
با توجه به قالب خودم ، کد ها رو در کدوم مسیر و فایل و در کدوم قسمت فایل، قرار بدم .
الته عرض کنم زیاد هم از مسائل فنی سر در نمیارم … کلافه شدم از بس کد ها رو زیر و رو کردم.
راهنمایی شما برام کمک بزرگیه.
موفق سربلند باشید.
سلام دوست عزیز. شما می خوایید که دکمه های اشتراک گذاری توی کدوم صفحات نمایش داده بشه؟ نوشته ها؟ برگه ها؟ محصولات؟ کدوم صفحه ها؟
سلام و احترام
ممنون از پاسخ دهی شما
میخوام در نوشته ها و محصولات نمایش داده بشه . بینهایت سپاس گذارم.
دوست عزیز بررسی میکنم تم رو و نتیجه رو به ایمیلتون ارسال میکنم.
سپاس از محبت بی دریغ شما. همیشه موفق باشید.
سلام وقت بخیر
منتظر دریافت ایمیلتون بودم ولی هنوز پاسخی ارسال نشده .
البته سوال در خصوص درج کد های اشتراک گذاری بدون افزونه در قالب مارکت پلیس (kivi) بوده… که فرمودید بررسی میکنم.
به هر حال ممنون از شما و وبسایت بسیار ارزشمندتون.
با سلام
ببخشید که دیر پاسخ دادیم
متاسفانه ما قالب مورد نظر شما را نداریم تا مشکل رو بررسی کنیم ، در صورتی که این قالب را آنلاین جایی نصب دارید اطلاعات لاگین رو برای تلگرام ما بفرستید تا بررسی انجام بدیم.
با تشکر از شما
https://t.me/wpschool_support
سلام.ممنون .خیلی خوب بود.از دست اندرکاران وبسایت به
این خوبی سپاسگزارم
باسلام
خیلی خوب بود
اگر امکانش هست بیزحمت دکمه های اشتراک در آپارات، اینستاگرام، سروش و بیسفون رو هم قرار بدین
سلام امکانش هست برای پیام رسان های داخلی هم بگید
با سلام ووقت بخیر من میخواهم اشتراک فیلم با زرین پال درست کنم به این منظور کاربر گزینه یک ماه خرید اشتراک میزنه من چه دستوری بزنم که اول زمان روز مشخص باشه وقتی به اتمام رسید پیغام بده خرید اشتراک شما به پابان رسیده است
کانال تلگرام
عضویت در کانال
سایر مقالات
ورود به مدرسه وردپرس
عضویت در مدرسه وردپرس