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

سلام و صدتا سلام به رفیق رایا وردپرسی گلم امیدوارم هر جا هستی و این پست رو میخونی حال دلت عالی باشه 🧡🌟

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

مشکل اینجاست که ظاهر پیش‌فرضش خیلی وقت‌ها برای کسی که دنبال یک داشبورد مرتب و اختصاصی هست، چندان جذاب نیست. (مثل تصویر زیر)

حالا تصور کن همین ویجت معمولی تبدیل بشه به چیزی شبیه تصویر زیر:

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

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

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

تو این آموزش دقیقاً همین کار رو انجام میدیم.

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

ویجت Activity وردپرس اصلاً چیست؟

اگر وارد پیشخوان وردپرس بشی، معمولاً یک باکس به نام Activity یا «فعالیت» می‌بینی.

این ویجت بخشی از خود هسته وردپرسه و در فرآیند راه‌اندازی داشبورد با شناسه dashboard_activity ثبت میشه. مستندات رسمی وردپرس هم نشون میده که این ویجت با Callback مخصوص فعالیت سایت ساخته میشه. (WordPress Developer Resources)

بنابراین ما لازم نیست برای ساختن چیزی که از قبل وجود داره، چرخ رو دوباره اختراع کنیم.

کاری که انجام میدیم اینه:

ویجت اصلی رو نگه می‌داریم ← Callback اش رو عوض می‌کنیم ← خروجی HTML خودمون رو می‌سازیم ← با CSS ظاهرش رو اختصاصی می‌کنیم.

این دقیقاً همون چیزییه که کد این آموزش انجام میده.

خروجی نهایی قرار است چه شکلی باشد؟

در نسخه‌ای که در تصویر می‌بینی، ویجت فعالیت به چند بخش تقسیم شده:

نمای کلی فعالیت

بالای ویجت یک هدر اختصاصی قرار گرفته که عنوان:

نمای کلی فعالیت

و زیرعنوان:

آخرین فعالیت‌های سایت شما

رو نمایش میده.

کنارش هم یک وضعیت ساده با عنوان «آخرین وضعیت» قرار داره. این بخش کاملاً توسط HTML و CSS سفارشی ساخته شده است.

آمار سریع سایت

بعد از هدر، سه کارت آماری نمایش داده میشه:

نوشته منتشرشده

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

در انتظار بررسی

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

برای شمارش نوشته‌های منتشرشده، کد از wp_count_posts() استفاده میکنه. وردپرس این تابع رو به‌طور اختصاصی برای گرفتن تعداد نوشته‌ها بر اساس وضعیت طراحی کرده و استفاده از آن نسبت به شمردن دستی نتایج یک get_posts() برای این هدف مناسب‌تر است.

برای دیدگاه‌ها هم wp_count_comments() استفاده شده که آمار دیدگاه‌ها را بر اساس وضعیت‌هایی مثل تأییدشده، در انتظار بررسی، اسپم و سطل زباله برمی‌گرداند.

تازه‌ترین نوشته‌ها

بخش بعدی مربوط به آخرین نوشته‌های سایت است.

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

برای انجام این کار از get_posts() استفاده شده .

get_posts() در وردپرس برای دریافت مجموعه‌ای از نوشته‌ها بر اساس پارامترهای مشخص استفاده میشه و یکی از کاربردهای معمول اش گرفتن لیست نوشته‌های اخیره.

در این قسمت:

'post_type'      => 'post',
'post_status'    => 'publish',
'posts_per_page' => 5,
'orderby'        => 'date',
'order'          => 'DESC',

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

یعنی:

• فقط نوشته‌های معمولی وردپرس
• فقط نوشته‌های منتشرشده
• حداکثر ۵ مورد
• مرتب‌شده بر اساس تاریخ
• جدیدترین نوشته در ابتدا

چرا برای هر نوشته لینک ویرایش ساخته‌ایم؟

یکی از قسمت‌های جذاب این ویجت همین‌جاست.

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

کد برای هر پست از:

get_edit_post_link()

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

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

در نتیجه ویجت فقط جنبه نمایشی نداره؛ تبدیل شده به یک میانبر مدیریتی واقعی.

یعنی به جای اینکه:

پیشخوان ← نوشته‌ها ← پیدا کردن نوشته ← ویرایش

بری به این مسیر هر بار، مستقیم از داشبورد روی همان نوشته می‌زنی.

نمایش تاریخ آخرین نوشته‌ها

برای هر نوشته، تاریخ به شکل:

get_the_date('j F، H:i', $post->ID)

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

گرفته میشه.

بعد تابع سفارشی خودمان اعداد رو به فارسی تبدیل میکنه تا نتیجه مثلاً به شکل:

۲۳ شهریور، ۱۰:۱۵ نمایش داده بشه.

کد برای تبدیل اعداد، دو تابع جداگانه داره:

rayawp_fa_digits()

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

و

rayawp_fa_number()

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

که کارشان متمرکز کردن تبدیل اعداد و قالب‌بندی عددیه.

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

بخش آخرین دیدگاه‌ها چه کار می‌کند؟

در این قسمت حداکثر ۴ دیدگاه تأییدشده و جدید دریافت میشه:

'number'  => 4,
'status'  => 'approve',
'orderby' => 'comment_date_gmt',
'order'   => 'DESC',

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

در نتیجه همیشه جدیدترین دیدگاه‌های تأییدشده رو می‌بینیم.

وردپرس برای دریافت لیست دیدگاه‌ها تابع get_comments() را در اختیار توسعه‌دهنده قرار داده و این تابع بر اساس پارامترهای مشخص، مجموعه‌ای از WP_Commentها رو برمیگردونه.

داخل هر دیدگاه چه چیزهایی نمایش داده می‌شود؟

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

نام نویسنده:

get_comment_author()

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

متن دیدگاه:

get_comment_text()

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

عنوان نوشته مرتبط:

get_the_title($comment->comment_post_ID)

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

تاریخ ثبت دیدگاه:

get_comment_date()

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

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

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

wp_trim_words(
    wp_strip_all_tags(get_comment_text($comment)),
    15,
    '…'
);

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

اینجا عملاً سه کار داریم:

HTML احتمالی حذف می‌شود ← متن کوتاه می‌شود ← خروجی در ویجت نمایش داده می‌شود.

لینک مستقیم مدیریت دیدگاه

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

این لینک با کد زیر ساخته شده:

get_edit_comment_link()

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

نکته خوب این تابع اینه که وردپرس خودش بررسی میکنه آیا کاربر اجازه ویرایش دیدگاه رو داره یا نه؛ بنابراین اگر کاربر مجوز لازم رو نداشته باشه، لینک ویرایش برنمیگرده.

سه دکمه پایین ویجت

در انتهای ویجت سه میانبر ساخته شده:

نوشته جدید

نوشته‌ها

دیدگاه‌ها

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

حالا برسیم به بخش مهم ماجرا؛ چطور ویجت اصلی وردپرس را عوض کرده‌ایم؟

اینجا قسمت PHP واقعاً جالب می‌شود.

اول این فیلتر را داریم:

add_filter(
    'wp_dashboard_widgets',
    'rayawp_keep_activity_widget',
    999
);

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

فیلتر wp_dashboard_widgets به ما اجازه میده لیست ویجت‌های داشبورد رو تغییر بدیم. مستندات رسمی وردپرس هم این Hook رو برای فیلتر کردن ویجت‌های داشبورد معرفی کرده است.

سپس بررسی می‌کنیم که آیا ویجت dashboard_activity داخل لیست هست یا نه.

اگر نبود، دوباره اضافه اش می‌کنیم.

یعنی:

if (!in_array('dashboard_activity', $widgets, true)) {
    $widgets[] = 'dashboard_activity';
}

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

بعد آرایه نهایی رو برمیگردونیم.

این کار باعث میشه اگر در شرایط خاصی ویجت فعالیت حذف شده بود، دوباره در داشبورد حضور داشته باشد.

قسمت حرفه‌ای‌تر؛ جایگزین کردن Callback ویجت

حالا ویجت رو نگه داشتیم، اما هنوز خروجی اش همون Activity پیش‌فرض وردپرسه.

پس باید Callback رو تغییر بدهیم.

کد در wp_dashboard_setup اجرا میشه و داخل ساختار $wp_meta_boxes به ویجت:

dashboard_activity

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

دسترسی پیدا میکنه و Callback رو روی تابع خودمون قرار میده:

rayawp_render_safe_activity

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

در نتیجه وقتی وردپرس میخاد ویجت Activity رو نمایش بده، به جای Callback اصلی، تابع سفارشی ما اجرا میشه.

به زبان ساده‌تر:

ظاهر و جایگاه ویجت مال وردپرس ← محتوای داخل ویجت مال ما

و این دقیقاً همون چیزی هست که دنبالش بودیم

چرا در این کد JavaScript و AJAX نداریم؟

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

خود کد هم صراحتاً بدون JavaScript و بدون AJAX طراحی شده!

یعنی قرار نیست بعد از لود صفحه، یک درخواست جداگانه با AJAX ارسال بشه و اطلاعات Activity دوباره گرفته بشه.

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

کش کردن اطلاعات؛ یک نکته حرفه‌ای که بد نیست بدانی

اینجا کد یک لایه کش هم داره:

$cache_key = 'rayawp_dashboard_activity_v1';

$cached = wp_cache_get(
    $cache_key,
    'rayawp'
);

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

اگر داده قبلاً در Cache باشه، همان داده استفاده میشه و دوباره Queryهای مربوط به نوشته‌ها و دیدگاه‌ها اجرا نمیشن.

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

wp_cache_set(
    $cache_key,
    $request_cache,
    'rayawp',
    30
);

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

در Object Cache قرار میگیره. wp_cache_get() برای خواندن داده و wp_cache_set() برای ذخیره آن در Object Cache هستن.

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

Object Cache در وردپرس به‌صورت پیش‌فرض دائمی نیست.

یعنی چی؟ 🤔
یعنی وردپرس اطلاعاتی که داخل Object Cache ذخیره می‌کنه، معمولاً فقط تا پایان همون درخواست قابل استفاده است.

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

برای اینکه Cache بین درخواست‌های مختلف هم باقی بمونه، باید از یک Persistent Object Cache مثل Redis یا Memcached استفاده کنی.

پس عدد 30 را این‌طور در نظر نگیر که «حتماً تمام کاربران و تمام لودهای داشبورد تا ۳۰ ثانیه کش می‌شوند».

اگر سایتت Redis، Memcached یا یک Persistent Object Cache مناسب داشته باشد، آن expiration معنی عملی بیشتری پیدا می‌کند.

چرا داخل Query چند گزینه بهینه‌سازی گذاشته‌ایم؟

در Query نوشته‌ها این موارد را داریم:

'ignore_sticky_posts' => true,
'no_found_rows' => true,
'update_post_meta_cache' => false,
'update_post_term_cache' => false,

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

هدف اینه که برای چنین ویجت کوچکی، اطلاعات اضافه‌ای که نیازی به آن‌ها نداریم بی‌دلیل گرفته نشن. مخصوصاً چون اینجا قرار نیست Pagination بسازیم یا برای هر نوشته اطلاعات کامل Meta و Term رو پردازش کنیم.

چرا کد فقط در پیشخوان لود می‌شود؟

این قسمت برای Performance خیلی مهم است.

CSS در:

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

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

قرار گرفته است.

index.php اینجا همان صفحه اصلی Dashboard وردپرسه.

در نتیجه CSS سفارشی ویجت قرار نیست روی صفحات سایت برای بازدیدکننده لود بشه.

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

این یکی از تفاوت‌های مهم بین یک Snippet تمیز و یک تکه CSS است که بی‌دلیل در کل سایت پخش میشه.

ظاهر ویجت چطور ساخته شده؟

بعد از بخش PHP، کد وارد قسمت CSS میشه.

از اینجا به بعد دیگر خبری از Query و Database نیست؛ داریم ظاهر خروجی را می‌سازیم.

ویجت اصلی با این استایل:

#dashboard_activity

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

کنترل میشه.

برای مثال:

border-radius: 16px;
background: #fff;
overflow: hidden;

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

باعث شده باکس اصلی ظاهر نرم‌تر و تمیزتری داشته باشد.

هدر هم با:

background: linear-gradient(
    135deg,
    #fffaf4 0%,
    #fff 72%
);

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

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

چرا رنگ نارنجی در بخش‌های مختلف تکرار شده؟

به جای اینکه برای هر قسمت یک رنگ جدا استفاده کنیم، رنگ اصلی را تقریباً در کل رابط کاربری یکدست نگه داشته‌ایم.

مثلاً:

#ef8719

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

برای رنگ اصلی استفاده شده و در بخش‌هایی مثل:

• آیکن
• عنوان بخش
• عددگذاری نوشته‌ها
• دکمه اصلی
• Hover
• لینک‌ها

تکرار شده است.

نتیجه این میشه که ویجت حس یک محصول طراحی‌شده داره، نه اینکه چند تکه CSS تصادفی کنار هم چیده شده باشن.

آیا این ویجت Responsive هم هست؟

بله.

در انتهای CSS دو Breakpoint داریم:

@media (max-width: 782px)

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

و:

@media (max-width: 520px)

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

در عرض‌های کوچک، کارت‌های آماری از حالت سه‌ستونه خارج میشن و Footer هم جمع‌تر میشه.

این نکته مخصوصاً در پیشخوان وردپرس مهمه، چون داشبورد فقط روی دسکتاپ استفاده نمیشه!

امنیت کد چطور رعایت شده؟

این قسمت رو دست‌کم نگیر.

هر چیزی که از دیتابیس میاد و قراره داخل HTML نمایش داده بشه، نباید همین‌طوری خام Echo بشه.

در کد ما برای متن‌ها از:

esc_html()

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

و برای URLها از:

esc_url()

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

استفاده شده است.

وردپرس هم در مستندات رسمی اش توصیه میکنه داده رو متناسب با Context و در زمان Output Escape کنیم؛ برای متن HTML از esc_html() و برای URL از esc_url() استفاده بشه.

مثلاً:

echo esc_html($post_title);

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

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

echo $post_title;

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

همین جزئیات کوچک هستند که یک Snippet معمولی را از یک کد قابل استفاده در پروژه واقعی جدا می‌کنند.

حالا چطور این کد را روی سایت خودت فعال کنیم؟

اینجا کار خیلی ساده هست.

فایل فانکشن (functions.php)

اگر قالب فرزند (چایلدتم) داری، بهترین جا برای چنین کدی معمولاً فایل:

functions.php

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

قالب فرزنده.

کد رو داخل این فایل قرار بده.

فقط حواست باشه اگر فایل از قبل با:

<?php

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

شروع شده، نباید دوباره یک <?php وسط فایل اضافه کنی.

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

یک نکته مهم قبل از قرار دادن کد

این کد را تکه‌تکه نکن.

چون بخش PHP و CSS به هم وابسته‌اند.

ساختار آن تقریباً این شکلی است:

Helpers
↓
Data / Cache
↓
نگه داشتن Activity
↓
جایگزینی Callback
↓
Render HTML
↓
CSS
↓
Responsive

اگر مثلاً فقط CSS رو برداری و قسمت PHP رو قرار ندی، ظاهر موردنظرت رو نخواهی داشت.

این کد دقیقاً چه چیزهایی را تغییر می‌دهد؟

بعد از فعال‌سازی، Activity شما به این ساختار تبدیل می‌شود:

۱. هدر اختصاصی

نمای کلی فعالیت + وضعیت

۲. سه آمار

تعداد نوشته‌های منتشرشده
تعداد دیدگاه‌های تأییدشده
تعداد دیدگاه‌های در انتظار بررسی

۳. آخرین نوشته‌ها

۵ نوشته آخر با عنوان، شماره، تاریخ و لینک ویرایش

۴. آخرین دیدگاه‌ها

۴ دیدگاه تأییدشده با آواتار، نام، تاریخ، متن کوتاه و نوشته مرتبط

۵. میانبرهای مدیریتی

نوشته جدید
نوشته‌ها
دیدگاه‌ها

تمام این ساختار مستقیماً داخل Callback سفارشی ساخته شده است.

چطور تعداد نوشته‌های نمایش داده‌شده را تغییر بدهیم؟

خیلی راحت.

در Query نوشته‌ها داریم:

'posts_per_page' => 5,

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

اگر بخای ۸ نوشته نمایش داده بشه:

'posts_per_page' => 8,

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

پیشنهاد من اینه که عدد رو خیلی بالا نبری، چون هدف Activity نمایش یک نمای سریع از وضعیت سایته، نه ساختن صفحه آرشیو. 😁

چطور تعداد دیدگاه‌ها را تغییر بدهیم؟

اینجا:

'number' => 4,

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

قرار گرفته.

مثلاً:

'number' => 6,

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

یعنی ۶ دیدگاه آخر نمایش داده شود.

آیا استفاده از این کد باعث کند شدن سایت می‌شود؟

در حالت کلی، کد فقط در پیشخوان اجرا و استایل داده میشه، نه در صفحات عمومی سایت. بنابراین سایت شما رو کند نمیکنه یعنی اونقدر تاثیر نداره روی سرعت لود سایت!

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

اول از همه بررسی کن کد PHP خطای Syntax نداشته باشد.

بعد این موارد را چک کن:

۱. کد دوبار در سایت قرار نگرفته باشه.

۲. <?php رو دوباره داخل functions.php تکرار نکرده باشی.

۳. Snippet فعال باشه.

۴. داخل PHP یک تابع همنام از قبل وجود نداشته باشه.

در کدی که اینجا داریم برای تعدادی از توابع از:

function_exists()

استفاده شده تا احتمال تداخل نام تابع کمتر بشه.

۵. بعد از فعال‌سازی، یک بار پیشخوان رو رفرش کن.

جمع‌بندی؛ آخر کار دقیقاً چه چیزی ساختیم؟

ما از یک ویجت ساده و معمولی وردپرس رسیدیم به یک Dashboard Activity Widget اختصاصی که:

• ظاهر آن کاملاً کاستوم شده
• با ساختار Activity خود وردپرس کار می‌کند
• تعداد نوشته‌ها را نمایش می‌دهد
• تعداد دیدگاه‌های تأییدشده را نمایش می‌دهد
• تعداد دیدگاه‌های در انتظار بررسی را نمایش می‌دهد
• ۵ نوشته اخیر را نمایش می‌دهد
• ۴ دیدگاه اخیر را نمایش می‌دهد
• برای نوشته‌ها لینک ویرایش دارد
• برای دیدگاه‌ها لینک مدیریت دارد
• دکمه‌های میانبر مدیریتی دارد
• اعداد فارسی دارد
• Responsive است
• بدون JavaScript کار می‌کند
• بدون AJAX کار می‌کند
• CSS را فقط در داشبورد لود می‌کند
• برای خروجی‌ها از Escapeهای مناسب وردپرس استفاده می‌کند
• و برای داده‌های ویجت نیز Object Cache را در نظر گرفته است.

از طرف دیگر، ساختار کلی کد هم با APIها و Hookهای رسمی وردپرس هماهنگ است؛ از wp_dashboard_widgets و wp_dashboard_setup گرفته تا get_posts(), get_comments(), wp_count_posts() و wp_count_comments(). (WordPress Developer Resources)

سخن پایانی

ببین رفیق، خیلی از آموزش‌های سفارشی‌سازی پیشخوان وردپرس نهایتاً می‌گن:

«این CSS رو بذار، خوشگل شد!»

ولی داستان واقعی اینجا فقط خوشگل کردن نیست.

ما باید بفهمیم خود وردپرس این ویجت رو چطور ساخته، داده رو از کجا میگیره، Callback کجاست، Hook مناسب چیست، Query چطور انجام میشه، خروجی چطور Escape میشه و بعد تازه برویم سراغ ظاهر.

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

چون اون موقع دیگر برای هر تغییری دنبال یک Snippet آماده نمی‌گردی؛ خودت می‌فهمی وردپس را باید از کجا دستکاری کنی.

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

کد رو درست نصب کن، یک بار پیشخوان را رفرش کن و نتیجه رو ببین.

اگه به کارت اومد، لایک و نظر یادت نره❤️ مرسی که تا پایان این آموزش منو با نگاه زیبات همراهی کردی سوال یا ابهامی داشتی مطرح کن در قسمت دیدگاه ها پاسخگوت هستم!