رفتن به مطلب

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


پست های پیشنهاد شده

گام اول : افزودن کدهای html و php اولیه دکمه ها به قالب

 

 

در ایتدا باید markup HTML مربوط به دکمه شبکه های اجتماعی را بنویسیم و از طریق توابع PHP اطلاعات لازمی مثل نام نوشته و آدرس نوشته را در آنها قرار دهیم. در اینجا به دلیل محبوبیت بیشتر سه شبکه اجتماعی فیسبوک, توییتر, گوگل پلاس و لینکداین تنها کدهای مربوط به این شبکه های اجتماعی را قرار می دهیم. اما شما می توانید خودتان کد های مربوط به شبکه های اجتماعی دیگر را نیز به آنها اضاف کنید.

 

 

 

 

[color=#000000][/color]<div class="rokesh-social-buttons"><h4>به اشتراک بگذارید :</h4><ul><li class="fb"><a href="https://go.20script.ir/index.php?url= لینک ها تنها برای اعضای سایت قابل نمایش است.   the_permalink(); ?>" target="_blank" rel="nofollow">اشتراک گذاری در فیسبوک</a></li><li class="tw"><a href="https://go.20script.ir/index.php?url= لینک ها تنها برای اعضای سایت قابل نمایش است.   the_title(); ?>&url=<?php the_permalink(); ?>" target="_blank" rel="nofollow">اشتراک گذاری در توییتر</a></li><li class="pl"><a href="https://go.20script.ir/index.php?url= لینک ها تنها برای اعضای سایت قابل نمایش است.   the_permalink(); ?>" target="_blank" rel="nofollow">اشتراک گذاری در گوگل پلاس</a></li><li class="li"><a href="https://go.20script.ir/index.php?url= لینک ها تنها برای اعضای سایت قابل نمایش است.   the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow">اشتراک گذاری در لینکداین</a></li>   </ul>     [color=#000000]</div>[/color]

 

 

 

 

 

کد های بالا را هر جایی از قالب سایت خود که می خواهید می توانید قرار دهید. مثلا اگر بخواهید دکمه ها در صفحه مطالب باشند فایل single.php را باز کنید و این کد ها را در حلقه وردپرس و جایی که می خواهید دکمه ها دیده شوند قرار دهید.

 

 

 

 

گام دوم : تغییر ظاهر دکمه ها با افزودن کد های css به فایل استایل قالب

 

 

حال باید ظاهر دکمه ها را شکل دهیم برای این کار یک سری کد css نوشته ام که شکل کلی دکمه ها و همچنین مکان آنها را ایجاد می کند. شما می توانید با ویرایش کدهای css زیر هر نوع ظاهری که می خواهید به دکمه ها بدهید.

 

 

 

 

 

 

 

 

[color=#000000]/* rokesh-social-buttons */[/color].rokesh-social-buttons {    background-color: #F5F5F5;    border: 1px solid #EBEBEB;    clear: both;    display: block;    height: 32px;    margin: 20px 0px 5px;    padding: 1% 1% 1% 2%;    width: 97%;}.rokesh-social-buttons h4, .rokesh-social-buttons ul {    display: block;    float: right;}.rokesh-social-buttons h4 {    color: #868686;    font-family: tahoma;    font-size: 12px;    font-weight: bold;    line-height: 32px;    margin: 0px;}.rokesh-social-buttons ul {    height: auto;    list-style: none outside none;    margin: 0px 10px 0px 0px;    max-height: 32px;    max-width: 100%;    padding: 0px;    min-width: 150px;}.rokesh-social-buttons li {   float: right;   margin: 0 !important;   padding: 0 !important;}.rokesh-social-buttons a {    background-image: url("share-buttons.png");    display: block;    float: right;    font-size: 0px;    height: 32px;    margin-left: 5px;    opacity: 0.85;    transition: all 0.1s ease 0s;    width: 32px;}.rokesh-social-buttons a:hover {    opacity: 1;    transform: translateY(-1px);}.rokesh-social-buttons li.tw a {    background-position: 0px -32px;}.rokesh-social-buttons li.pl a {    background-position: 0px -64px;}.rokesh-social-buttons li.li a {    background-position: 0px -96px; [color=#000000]}[/color]

 

 

 

 

 

کد های css را در فایل style.css قرار دهید و آن را ذخیره کنید. برای اینکه سرعت بارگزاری دکمه های اشتراک گذاری بالا برود در کد های css از خاصیت Css Sprites استفاده کردیم پس کلا برای ۴ تا آیکون به یک عکس نیاز دارید. تصویر زیر مربوط به آیکون ها می باشد که باید آن را در فایل قالب قرار دهید.

 

 

 

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

 

 

 

 

[color=#000000].rokesh-social-buttons a {[/color]    background-image: url("share-buttons.png");    display: block;    float: right;    font-size: 0px;    height: 32px;    margin-left: 5px;    opacity: 0.85;    transition: all 0.1s ease 0s;    width: 32px; [color=#000000]}[/color]

 

 

 

 

 

 

 

لینک ها تنها برای اعضای سایت قابل نمایش است.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...