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

سفارشی سازی ویجت آخرین دیدگاه‌های ووکامرس در پیشخوان وردپرس– برات پیش اومده وارد پیشخوان وردپرس بشی و بخوای ببینی مشتری‌ها آخرین نظراتشون رو درباره محصولاتت چی نوشتن، ولی ویجت پیش‌فرض ووکامرس اون چیزی نباشه که دنبالش هستی؟

ویجت پیش‌فرض ووکامرس اطلاعات لازم رو نشون میده، اما از نظر ظاهر و امکانات خیلی ساده است. مخصوصاً وقتی داری روی یک فروشگاه حرفه‌ای کار می‌کنی و دوست داری پیشخوان وردپرس هم مثل خود سایت مرتب، کاربردی و شخصی‌سازی‌شده باشه.

توی این آموزش می‌خوایم همین ویجت رو با کد PHP سفارشی تغییر بدیم و یک نسخه کاربردی‌تر از «آخرین دیدگاه‌های ووکامرس» داخل پیشخوان داشته باشیم.

بعد از انجام این کار، داخل همون پیشخوان می‌تونی آخرین دیدگاه‌های ثبت‌شده برای محصولات، نام کاربر، تاریخ، امتیاز ستاره‌ای، متن کوتاه‌شده دیدگاه و محصول مربوط به اون رو ببینی.

نکته خوب ماجرا اینه که برای انجام این کار لازم نیست یک افزونه جدید نصب کنی. فقط کافیه کد رو داخل functions.php قالب قرار بدی.

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

نکته: پیشنهاد می‌کنم این کد رو داخل functions.php قالب فرزند یا همان Child Theme قرار بدی تا با آپدیت قالب اصلی از بین نره.

این سفارشی سازی دقیقاً چه چیزی به پیشخوان اضافه می‌کنه؟

بعد از قرار دادن کد، ویجت آخرین دیدگاه‌های ووکامرس ظاهر متفاوتی پیدا می‌کنه.

در بالای ویجت یک هدر اختصاصی قرار می‌گیره و بعد از اون سه بخش آماری نمایش داده میشه:

• تعداد دیدگاه‌های تأییدشده
• تعداد محصولات منتشرشده
• تعداد دیدگاه‌های اخیر

پایین این قسمت هم آخرین Reviewهای محصولات نمایش داده میشن.

برای هر دیدگاه می‌تونی اطلاعاتی مثل نام نویسنده، تاریخ ثبت، امتیاز ستاره‌ای، بخشی از متن دیدگاه و محصول مرتبط رو ببینی. همچنین در صورت داشتن دسترسی لازم، امکان ویرایش دیدگاه هم در اختیار مدیر قرار می‌گیره.

قبل از شروع این نکته رو جدی بگیر

این کد برای WooCommerce نوشته شده و بدون فعال بودن ووکامرس کاربردی نداره.

از طرفی بهتره کد رو مستقیم داخل قالب اصلی نذاری. چون ممکنه بعداً قالب رو آپدیت کنی و تمام تغییراتی که داخل functions.php انجام دادی از بین بره.

بهترین کار اینه که کد رو داخل فایل زیر قرار بدی:

wp-content/themes/your-child-theme/functions.php

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

یعنی functions.php قالب فرزند.

کدی که برای این آموزش آماده شده باید مستقیماً داخل functions.php قرار بگیره.

قبل از ویرایش فایل هم بهتره یک نسخه پشتیبان داشته باشی؛ مخصوصاً اگر اولین باره داری functions.php رو ویرایش می‌کنی.

این کد چطور ویجت ووکامرس رو تغییر میده؟

اینجا قرار نیست یک ویجت کاملاً جدا از صفر بسازیم.

کد ابتدا ویجت مربوط به دیدگاه‌های ووکامرس رو پیدا می‌کنه و بعد Callback اون رو با تابع سفارشی خودمون جایگزین می‌کنه.

قسمت اصلی این کار با هوک زیر انجام میشه:

add_action(
    'wp_dashboard_setup',
    'rayawp_replace_wc_reviews_widget',
    1000
);

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

در واقع wp_dashboard_setup به ما اجازه میده با ویجت‌های داخل پیشخوان وردپرس کار کنیم.

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

پیدا کردن ویجت آخرین دیدگاه‌های ووکامرس

برای پیدا کردن ویجت، دو شناسه بررسی میشن:

$known_ids = array(
    'woocommerce_dashboard_recent_reviews',
    'woocommerce_dashboard_reviews',
);

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

وقتی یکی از این شناسه‌ها پیدا بشه، Callback ویجت به تابع سفارشی ما تغییر داده میشه:

$widgets[$widget_id]['callback']
    = 'rayawp_render_wc_reviews';

$widgets[$widget_id]['title']
    = 'آخرین دیدگاه‌های ووکامرس';

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

در نتیجه ساختار اصلی داشبورد باقی می‌مونه، ولی محتوای داخل ویجت با خروجی اختصاصی ما نمایش داده میشه.

آخرین دیدگاه‌های ووکامرس چطور دریافت میشن؟

حالا که ویجت رو در اختیار داریم، باید مشخص کنیم چه ریویوهایی داخلش نمایش داده بشن.

برای این کار از تابع:

rayawp_get_wc_reviews()

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

استفاده شده.

این تابع تعداد Reviewها رو محدود می‌کنه تا داشبورد بی‌دلیل شلوغ و سنگین نشه.

در کد فعلی، ویجت فقط ۵ دیدگاه آخر رو نمایش میده.

Query اصلی به این صورت ساخته شده:

get_comments(
    array(
        'number'      => $limit,
        'status'      => 'approve',
        'type'        => 'review',
        'post_type'   => 'product',
        'post_status' => 'publish',
        'orderby'     => 'comment_date_gmt',
        'order'       => 'DESC',
    )
);

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

یعنی چی؟

یعنی کد دنبال Reviewهای تأییدشده‌ای می‌گرده که مربوط به محصولات منتشرشده هستند و جدیدترین موارد رو اول برمی‌گردونه.

چرا فقط ۵ دیدگاه؟

شاید بگی چرا همه دیدگاه‌ها رو نمایش ندیم؟

چون هدف این ویجت، مدیریت سریع پیشخوانه؛ نه اینکه صدها دیدگاه رو داخل همون صفحه نمایش بدیم.

اگر قرار باشه مثلاً ۵۰۰ دیدگاه داخل داشبورد لود بشن، هم ظاهر ویجت خیلی طولانی میشه و هم پردازش اضافه‌ای ایجاد میشه.

برای همین تعداد Reviewها عمداً محدود شده و در نسخه فعلی:

$reviews = rayawp_get_wc_reviews(5);

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

فقط ۵ مورد اخیر نمایش داده میشه.

نمایش امتیاز ستاره‌ای محصولات

یکی از قسمت‌های جذاب این شخصی‌سازی، نمایش امتیاز محصول به شکل ستاره‌ایه.

کد مقدار امتیاز رو از متای Review دریافت می‌کنه:

$rating = get_comment_meta(
    $comment_id,
    'rating',
    true
);

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

بعد مقدار رو بین صفر تا پنج نگه می‌داره و بر اساس اون ستاره کامل و خالی ایجاد می‌کنه.

مثلاً امتیاز چهار نمایش داده میشه به شکل:

★★★★☆

منطق مربوط به این بخش داخل تابع اختصاصی امتیاز Review قرار گرفته.

اطلاعاتی که برای هر دیدگاه نمایش داده میشه

حالا برسیم به خود لیست دیدگاه‌ها.

برای هر Review چند اطلاعات مختلف دریافت میشه.

نام نویسنده:

get_comment_author($review);

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

متن دیدگاه:

get_comment_author($review);

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

عنوان محصول:

get_the_title($product_id);

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

تاریخ:

get_comment_date(
    'j F، H:i',
    $review
);

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

و آواتار کاربر هم با get_avatar() دریافت میشه.

به این ترتیب لازم نیست برای دیدن این اطلاعات وارد چند صفحه مختلف بشی.

همه‌چیز داخل همون ویجت پیشخوان جلوت قرار می‌گیره.

متن دیدگاه چرا کامل نمایش داده نمیشه؟

فرض کن یک مشتری یک Review خیلی طولانی ثبت کرده.

اگر کل متن همون‌جا نمایش داده بشه، ارتفاع ویجت بیش از حد زیاد میشه.

برای همین متن ابتدا از تگ‌های HTML پاک میشه:

$text = wp_strip_all_tags(
    get_comment_text($review)
);

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

بعد فقط ۱۸ کلمه اول نمایش داده میشه:

$text = wp_trim_words(
    $text,
    18,
    '…'
);

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

به این شکل ویجت جمع‌وجور باقی می‌مونه و اگر لازم بود می‌تونی وارد صفحه مدیریت دیدگاه بشی و متن کامل رو ببینی.

کنار هر دیدگاه محصول مربوط به اون هم نمایش داده میشه

یکی از چیزهایی که باعث میشه این ویجت کاربردی‌تر بشه، نمایش محصول مرتبط با Review هست.

کد شناسه محصول رو از دیدگاه می‌گیره:

$product_id = absint(
    $review->comment_post_ID
);

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

بعد عنوان محصول رو دریافت می‌کنه و لینک مربوط به اون رو می‌سازه.

در نتیجه وقتی یک Review رو می‌بینی، سریع متوجه میشی این نظر مربوط به کدوم محصول بوده.

دکمه ویرایش دیدگاه فقط برای کاربر مجاز نمایش داده میشه

این قسمت هم مهمه.

قبل از اینکه لینک ویرایش دیدگاه نمایش داده بشه، دسترسی کاربر بررسی میشه:

current_user_can('edit_comment')

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

اگر کاربر اجازه ویرایش Review رو داشته باشه، دکمه مربوط به ویرایش هم نمایش داده میشه.

پس قرار نیست لینک مدیریت دیدگاه بدون بررسی سطح دسترسی در اختیار همه قرار بگیره.

سه آمار کاربردی بالای ویجت

بالای ویجت سه کارت آماری قرار داده شده.

دیدگاه‌های تأییدشده

این مقدار از شمارنده عمومی دیدگاه‌های وردپرس گرفته میشه.

wp_count_comments();

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

اما یک نکته مهم وجود داره.

این عدد فقط Reviewهای محصولات ووکامرس نیست.

یعنی اگر روی نوشته‌های سایتت هم دیدگاه داشته باشی، اون‌ها هم داخل شمارش کلی وردپرس قرار می‌گیرن.

پس اگر اینجا عدد ۱۰۰ رو دیدی، نباید حتماً نتیجه بگیری که فروشگاهت دقیقاً ۱۰۰ Review محصول داره.

محصولات منتشرشده

برای این قسمت از:

wp_count_posts('product');

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

استفاده شده و تعداد محصولات منتشرشده گرفته میشه.

دیدگاه‌های اخیر

کارت سوم تعداد Reviewهایی رو نشون میده که همین حالا برای ویجت دریافت شدن.

از اونجایی که Query روی ۵ مورد محدود شده، این عدد هم در حالت عادی حداکثر ۵ خواهد بود.

ظاهر ویجت هم کاملاً سفارشی شده

کار فقط به PHP ختم نشده.

برای اینکه ویجت ظاهر مرتب‌تری داشته باشه، CSS اختصاصی هم داخل همین کد قرار گرفته.

این CSS فقط روی صفحه اصلی پیشخوان مدیریت لود میشه:

add_action(
    'admin_head-index.php',
    'rayawp_wc_reviews_css'
);

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

بنابراین قرار نیست این استایل‌ها روی صفحات سایت برای کاربران معمولی بارگذاری بشن.

طراحی ویجت هم شامل بخش‌هایی مثل هدر، کارت‌های آماری، لیست Reviewها، آواتار، امتیاز ستاره‌ای، دکمه‌های مدیریتی و حالت واکنش‌گراست.

روی موبایل هم مرتب میشه

حتی اگر گاهی با موبایل یا صفحه کوچک وارد پیشخوان بشی، ساختار ویجت به هم نمی‌ریزه.

در CSS برای عرض‌های مختلف، Breakpoint اختصاصی در نظر گرفته شده تا کارت‌ها و دکمه‌ها در فضای کمتر به شکل مناسب‌تری قرار بگیرن.

کد کامل رو کجا قرار بدم؟

حالا رسیدیم به مهم‌ترین بخش آموزش.

کد کامل این شخصی‌سازی باید داخل functions.php قالب قرار بگیره.

پیشنهاد من:

Child Theme
↓
functions.php
↓
قرار دادن کد

اگر از چایلد تم استفاده می‌کنی، همین فایل محل مناسبی برای قرار دادن کد کامل زیر هست:

فقط یادت باشه:

اگر فایل از قبل <?php داره، دوباره <?php اضافه نکن.

همچنین یک نسخه پشتیبان از functions.php داشته باش تا اگر هنگام قرار دادن کد اشتباهی رخ داد، بتونی سریع فایل قبلی رو برگردونی.

اگر بعد از قرار دادن کد چیزی تغییر نکرد چه کار کنیم؟

اول از همه بررسی کن WooCommerce فعال باشه.

بعد ببین کد رو دقیقاً داخل functions.php قالب فعال قرار دادی.

اگر ووکامرس فعاله ولی ویجت تغییر نکرد، شناسه ویجت هم باید بررسی بشه؛ چون کد فعلی بر اساس این شناسه‌ها کار می‌کنه:

woocommerce_dashboard_recent_reviews
woocommerce_dashboard_reviews

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

اگر ساختار ووکامرس در نسخه‌ای که استفاده می‌کنی متفاوت باشه، ممکنه نیاز به اصلاح این بخش وجود داشته باشه. خود کد نیز قبل از جایگزینی Callback همین شناسه‌ها رو بررسی می‌کنه.

آیا این کد سرعت سایت رو پایین میاره؟

این کد برای داشبورد مدیریت نوشته شده و استایل اون هم روی همان بخش مدیریت اعمال میشه.

از طرفی Query اصلی فقط تعداد محدودی Review دریافت می‌کنه و در نسخه فعلی روی ۵ مورد محدود شده.

بنابراین قرار نیست تمام Reviewهای فروشگاه در هر بار باز شدن داشبورد دریافت بشن.

البته در فروشگاه‌های خیلی بزرگ، تعداد محصولات، حجم Reviewها و شرایط سرور می‌تونه روی عملکرد واقعی داشبورد تأثیر بذاره؛ پس مثل همیشه بهتره نتیجه رو روی سایت واقعی خودت بررسی کنی.

جمع‌بندی

اگه برات مهمه که پیشخوان وردپرس فروشگاهت فقط همون ظاهر پیش‌فرض ووکامرس نباشه، سفارشی سازی ویجت‌های مدیریتی می‌تونه تغییر خیلی خوبی ایجاد کنه.

با این کد، ویجت آخرین دیدگاه‌های ووکامرس به شکل مرتب‌تر و کاربردی‌تری نمایش داده میشه و می‌تونی اطلاعاتی مثل:

نام مشتری، تاریخ، امتیاز، متن دیدگاه، محصول مرتبط و لینک مدیریت

رو مستقیماً داخل پیشخوان ببینی.

برای استفاده از این قابلیت هم نیازی به نصب یک افزونه جداگانه نداری.

فقط کافیه کد کامل رو داخل functions.php قالب فرزند قرار بدی و بعد وارد پیشخوان بشی.

اگه همیشه دوست داشتی وقتی وارد داشبورد فروشگاه میشی، آخرین نظرهای مشتری‌ها رو همون اول ببینی، این تغییر می‌تونه دقیقاً همون چیزی باشه که دنبالش بودی.