احتمالا در سایتهای زیادی امکان لایک یا پسندیدن نوشته ها را مشاهده کرده اید. در این حالت با کلیک برو روی عبارت یا تصویری که معمولا به شکل قلب یا انگشت اشاره رو به بالا (لایک فیسبوک) است، عددی در کنار آیکون اضاه میشود که مفهوم پسندیده شدن توسط بازدیدکنندگان را دارد. در این مطلب به آموزش ایجاد سیستم لایک مطالب و دیدگاه وردپرس بدون افزونه به شکل ایجکس میپردازیم تا بتوانید در پروژه های طراحی قالب وردپرس تان از آن استفاده کنید، پس تا انتها همراه ما باشید.
همینطور که میدانید با اندکی جستجو در اینترنت به کدها و روش های گوناگونی برای ساخت سیستم لایک وردپرس بدون افزونه میرسید، ما در این مطلب از توابعی که به صورت رایگان و متن باز توسط آقای جان مسترسون (Jon Masterson) در سایت گیت هاب (github) به آدرس WordPress-Post-Like-Systemمنتشر شده استفاده میکنیم.
برخی از ویژگی های سیستم لایک نوشته و نظرات آقای جان مسترسون عبارتند از:
برای شروع کار ابتدا فایل های افزونه را از سرور گیت هاب و یا از لینک wordpress post and comment like دانلود میکنیم. پس از استخراج فایل از حالت فشرده، فایل پی اچ پی post-like.php را در کنار سایر فایلهای قالب وردپرس مان کپی میکنیم. سپس قطعه کد زیر را در فایل فانکشن پوسته که با نام functions.php شناخته میشود قرار میدهیم تا توابع افزونه لایک را فراخوانی کنیم.
include_once('post-like.php');
در پوشه js فایلی با نام simple-likes-public.js وجود دارد که برای ایجاد قابلیت ایجکس مورد استفاده قرار میگیرد.
این فایل جی کوئری را نیز به پوشه js قالب منتقل میکنیم. (اگر پوسته وردپرس تان پوشه js ندارد آنرا بسازید و فایل simple-likes-public.js را درون آن کپی کنید)
در پوشه css فایلی با نام simple-likes-public.css وجود دارد که باید کدهای استایل موجود در آنرا کپی کرده و در استایل پوسته که با نام style.css شناخته میشود قرار دهید. تقریبا کار فراخوانی و شناساندن توابع سیستم لایک مطالب و دیدگاه وردپرس بدون افزونه تمام شده و اکنون میتوانید با استفاده از توابع زیر در حلقه و کوئری وردپرس بخش لایک مطالب را نمایش دهید.
تابع لایک مطالب <?php echo get_simple_likes_button(get_the_ID()); ?> تابع لایک دیدگاه ها <?php echo get_simple_likes_button(get_comment_ID(),1); ?>
برای تغییر آیکون های لایک و دیسلایک فایل post-like.php را در ویرایشگر php اجرا کنید سپس به عبارت get_liked_icon و get_unliked_icon را جستجو کنید، اکنون میتوانید با تغییر ایکون svg پیشفرض (خط ۳۰۵ و ۳۱۵) به فونت آیکون دلخواه یا ایکون تصویری، شخصی سازی های لازم را انجام دهید.
برای نمایش مطالبی که بیشترین لایک را دریافت کرده اند، از کوئری زیر استفاده کنید.
<?php $sticky = get_option('sticky_posts');
$arms = array(
'post_type' => 'post','post__not_in' => $sticky,
'post_status' => 'publish',
'meta_key' => '_post_like_count','orderby' => 'meta_value_num',
'order' => 'DESC','posts_per_page' => 10);
$the_query = new WP_Query($arms);
if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>
<li><a target="_blank" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; wp_reset_postdata(); else : ?>
<li><?php _e( 'متاسفم مطلبی برای نمایش وجود ندارد' ); ?></li>
<?php endif; ?>
در کد بالا تعداد ۱۰ عنوان به همراه لینک مطلب نمایش داده میشود برای تغییر تعداد مطالب قابل نمایش مقدار متغییر posts_per_page را تغییر دهید.
در صورتیکه سوال یا مشکلی دارید در بخش دیدگاه های همین آموزش مطرح کنید.
