ایجاد دکمه های اشتراک گذاری در وردپرس
امروز برای شما آموزشی را آماده کرده ایم که بسیار ساده و در عین حال کاملا کاربردی می باشد. قطعا برای شما اتفاق افتاده است که هنگام خواندن مطلب سایتی به دکمه های اشتراک گذاری برخورده باشید.
وردپرس دارای افزونه های بسیار زیادی برای اشتراک گذاری است اما ممکن است بسیاری از ما با ظاهر یا محل قرار گیری آنها مشکل داشته باشیم. با این آموزش کوتاه و مفید می توانیم دکمه های اشتراک گذاری بدون افزونه و مطابق با استایل سفارشی داشته باشیم.
در ابتدا کد های زیر را جایی که می خواهیم دکمه ها نمایش یابند می گذاریم
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="social"> <p>اشتراک گذاری نوشته در:</p> <!--Twitter--> <div class="icons"> <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> <!--Reddit--> <a class="reddit" href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Reddit" rel="nofollow" target="_blank">Reddit</a> <!--Stumbleupon--> <a class="stumbleupon" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Stumble it" rel="nofollow" target="_blank">Stumble it</a> <!--Digg--> <a class="digg" href="http://digg.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Digg this!" rel="nofollow" target="_blank">Digg this!</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> <!--Del.icio.us--> <a class="delicious" href="http://del.icio.us/post?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Bookmark on del.icio.us" rel="nofollow" target="_blank">Del.icio.us</a> </div></div> |
صفحه را بارگذاری کنید. می بینید که لینک ها به صورت متن و نا مرتب چیده شده اند.
حالا نوبت به استایل دهی می رسد.
در اینجا استایلی که من انتخاب کرده ام ساده و در عین حال زیبا و سبک است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
p{ direction:rtl; font:12px tahoma;
} a{border:1px solid transparent; border-radius:5px; padding:5px; color:#fff; text-decoration:none; font:12px tahoma;} .twitter{ background:#9AE4E8; } /*Facebook*/ .facebook{ background:#3B5998; } /*Google Plus*/ .google-plus{ background:#D34836; } /*LinkedIn*/ .linkedin{ background:#0e76a8; } /*StumbleUpon*/ .stumbleupon{ background:#EF4916; } /*Reddit*/ .reddit{ background:#CEE3F8; } /*Digg*/ .digg{ background:#1B5790; } /*Pinterest*/ .pinterest{ background:#C92228; }
/*Delicious*/ .delicious{ background:#0b79e5; }
.icons{ float:right; } |
خب دیگه خسته نباشید .
