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

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

در وردپرس افزونه های بسیار زیاد و مختلفی برای اشتراک گذاری مطالب وجود دارد. اما ممکن است شما بخواهید این دکمه ها را مطابق میل و سلیقه خودتان تغییر داده و استایل شخصی خود را اعمال کنید.

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

<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(); ?>&amp;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(); ?>&amp;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(); ?>&amp;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&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>
		<!--Del.icio.us-->
		<a class="delicious" href="http://del.icio.us/post?url=<?php the_permalink(); ?>&amp;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;
}

تغییرات را ذخیره کرده و صفحه را مجددا بارگزاری نمائید. نتیجه کار باید مشابه تصویر زیر باشد.