افزودن دکمه های اشتراک گذاری بدون افزونه
امروز یک آموزش ساده و کاربردی رو برای شما دوستان آماده کرده ام. همه شما با دکمه های اشتراک گذاری مطالب در سایت ها و شبکه های اجتماعی آشنایی دارید و در سایت های مختلفی این دکمه ها رو مشاهده کردید.
در وردپرس افزونه های بسیار زیاد و مختلفی برای اشتراک گذاری مطالب وجود دارد. اما ممکن است شما بخواهید این دکمه ها را مطابق میل و سلیقه خودتان تغییر داده و استایل شخصی خود را اعمال کنید.
برای اینکار ابتدا کدهای زیر را در جایی که میخواهید دکمه ها نمایش داده شوند قرار دهید :
<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> <!--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>
حالا برای نمایش بهتر دکمه ها، باید استایل را نیز بر روی کدهای HTML اعمال کنیم.
برای اینکار کد استایل زیر را در فایل style.css قرار دهید.
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; } a:hover{ opacity: 0.7; }
تغییرات را ذخیره کرده و صفحه را مجددا بارگزاری نمائید. نتیجه کار باید مشابه تصویر زیر باشد.
بدون دیدگاه