مدیریت سایت
خانه » آموزش وردپرس » افزودن دکمه های اشتراک گذاری بدون نیاز به افزونه
افزودن دکمه های اشتراک گذاری بدون افزونه
افزودن دکمه های اشتراک گذاری بدون افزونه

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

افزودن دکمه های اشتراک گذاری بدون نیاز به افزونهReviewed by حسین احمدپور on Apr 15Rating: 5.0افزودن دکمه های اشتراک گذاری بدون نیاز به افزونهوردپرس دارای افزونه های بسیار زیادی برای اشتراک گذاری است اما ممکن است بسیاری از ما با ظاهر یا محل قرار گیری آنها مشکل داشته باشیم. با این آموزش کوتاه و مفید می توانیم دکمه های اشتراک گذاری بدون افزونه و مطابق با استایل سفارشی داشته باشیم

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

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

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

<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(); ?>&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>

 

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

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

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

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;
}</pre>
<pre>

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

منبع : مدرسه وردپرس

جمع آوری اطلاعات توسط : دوین نت

درباره علی گل پور

علی گلپور هستم رشته مهندسی نرم افزار, حدود 4 ساله که کارم رو بصورت حرفه ای در زمینه وردپرس شروع کردم و خوشحال میشم کمکی به شما در زمینه وردپرس و توسعه وب انجام بدهم.

اینم امکان داره بدردتون بخوره

آموزش افزودن پسوند های دیگر جهت آپلود در وردپرس

آموزش افزودن پسوند های دیگر جهت آپلود در وردپرس

آموزش افزودن پسوند های دیگر جهت آپلود در وردپرس برای امنیت بیشتر وردپرس اجازه آپلود ...

پاسخ دهید

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

*

code

Click to Insert Smiley

SmileBig SmileGrinLaughFrownBig FrownCryNeutralWinkKissRazzChicCoolAngryReally AngryConfusedQuestionThinkingPainShockYesNoLOLSillyBeautyLashesCuteShyBlushKissedIn LoveDroolGiggleSnickerHeh!SmirkWiltWeepIDKStruggleSide FrownDazedHypnotizedSweatEek!Roll EyesSarcasmDisdainSmugMoney MouthFoot in MouthShut MouthQuietShameBeat UpMeanEvil GrinGrit TeethShoutPissed OffReally PissedMad RazzDrunken RazzSickYawnSleepyDanceClapJumpHandshakeHigh FiveHug LeftHug RightKiss BlowKissingByeGo AwayCall MeOn the PhoneSecretMeetingWavingStopTime OutTalk to the HandLoserLyingDOH!Fingers CrossedWaitingSuspenseTremblePrayWorshipStarvingEatVictoryCurseAlienAngelClownCowboyCyclopsDevilDoctorFemale FighterMale FighterMohawkMusicNerdPartyPirateSkywalkerSnowmanSoldierVampireZombie KillerGhostSkeletonBunnyCatCat 2ChickChickenChicken 2CowCow 2DogDog 2DuckGoatHippoKoalaLionMonkeyMonkey 2MousePandaPigPig 2SheepSheep 2ReindeerSnailTigerTurtleBeerDrinkLiquorCoffeeCakePizzaWatermelonBowlPlateCanFemaleMaleHeartBroken HeartRoseDead RosePeaceYin YangUS FlagMoonStarSunCloudyRainThunderUmbrellaRainbowMusic NoteAirplaneCarIslandAnnouncebrbMailCellPhoneCameraFilmTVClockLampSearchCoinsComputerConsolePresentSoccerCloverPumpkinBombHammerKnifeHandcuffsPillPoopCigarette