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

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

وردپرس در برخی منوهای پنل مدیریتی خود از دایره ای قرمز رنگ استفاده می کند که به شمارنده اعلان(Notification Counter Bubble) یا شمارنده نوتیفیکیشن معروف است.

این شمارنده کاربردهای مفیدی دارد:

  • نمایش تعداد افزونه هایی که احتیاج به بروزرسانی دارند.
  • نمایش تعداد کامنت هایی که هنوز تایید نشده اند.
  • نمایش تعداد ریسک های امنیتی که افزونه ای مثل Wordfence گزارش می دهد.

هدف از پیاده سازی نوتیفیکیشن چیزی نیست جزء اطلاع رسانی و جلب توجه کاربران.

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

در این سناریو می خواهیم به جای نصب افزونه هایی مثل Contact form 7 یا Ninja Form خودمان دست به کد شده و یک فرم تماس با ما بنویسیم.

مراحل کلی کار بدین صورت است:

  • تعریف یک پست تایپ سفارشی(Custom Post Type) به نام contact
  • تعریف فیلد سفارشی(Custom Field) برای ذخیره نام، آدرس ایمیل و تلفن تماس کاربران
  • ایجاد قالب فرم تماس با ما و تعریف Shortcode برای لود این قالب در صفحه تماس با ما
  • ذخیره پیام های ارسالی کاربران در دیتابیس وردپرس با وضعیت در انتظار بازبینی(pending)
  • نمایش تعداد پیام های pending در منوی تماس با ما در پنل مدیریتی وردپرس

همانطور که ملاحظه می کنید در منوی “تماس با ما” تعداد پیام های در انتظار بازبینی نشان داده شده است.

نوتیفیکیش تعداد پیام های pending

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

فرض می کنیم با تابع register_post_type پست تایپ سفارشی contact را تعریف کرده اید، همچنین با تابع wp_insert_post پیام های ارسالی کاربران را به صورت پیش فرض در وضعیت pending ثبت می کنید.

حالا کدهای زیر را از طریق اکشن هوک admin_menu اجرا می کنیم.

function modiredev_contact_notification() {

    global $menu;

    $contact_menu_item = wp_list_filter( $menu, [ 2 => 'edit.php?post_type=contact' ] );

    if ( !empty( $contact_menu_item ) && is_array( $contact_menu_item ) ) {

        $results = get_posts(
            array(
                'post_type' => 'contact',
                'post_status' => 'pending'
            )
        );
        
        $pending_count = count( $results );

        $menu[ key( $contact_menu_item ) ][0] .= "
                         <span class='awaiting-mod count-" .
                            esc_attr( $pending_count ) . "'>
                           <span class='pending-count'>" .
                            absint( number_format_i18n( $pending_count ) ) .
                           '</span>
                         </span>';

        wp_reset_postdata();
    }
}

add_action( 'admin_menu', 'modiredev_contact_notification' );

برای دسترسی به منوهای پنل مدیریتی از متغیر سراسری menu$ کمک گرفتیم، با تابع wp_list_filter منوی تماس با ما را بر اساس URL آن فیلتر کردیم.

سپس تعداد پست هایی که در وضعیت pending هستند را بدست آوردیم، توجه داشته باشید که کلاس های awaiting-mode و pending-count متعلق به وردپرس هستند.

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

<span class="awaiting-mod count-2">
    <span class="pending-count">2</span>
</span>

اما در منوی افزونه ها به جای کلاس awaiting-mod از update-plugins استفاده می کند.

<span class="update-plugins count-2">
    <span class="plugin-count">2</span>
</span>

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

شمارنده را می توانید به هر منویی که مدنظرتان است اضافه نمایید، برای این منظور کافی است مشابه مثال قبلی به متغیر سراسری menu$ از طریق اکشن هوک admin_menu دسترسی پیدا کنید.

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

function modiredev_pages_notification(){

    global $menu;

    $page_menu_item = wp_list_filter( $menu, [ 2 => 'edit.php?post_type=page' ] );

    if ( !empty( $page_menu_item ) && is_array( $page_menu_item ) ) {

        $results = get_pages(
            array(
                'post_type' => 'page',
                'post_status' => 'publish'
            )
        );

        $published_count = count( $results );

        $menu[ key( $page_menu_item ) ][0] .= "
                         <span class='awaiting-mod count-" .
            esc_attr( $published_count ) . "'>
                           <span class='pending-count'>" .
            absint( number_format_i18n( $published_count ) ) .
            '</span>
                         </span>';

        wp_reset_postdata();
    }
}

add_action( 'admin_menu', 'modiredev_pages_notification' );

برای شناسایی URL سایر منوها آرایه menu$ را در خروجی مشاهده کنید.

echo '<pre>';
print_r( $menu );
echo '</pre>';
die;

افزودن شمارنده نوتیفیکیشن به صفحات مدیریتی وردپرس

در مطلب آموزش ساخت پنل تنظیمات در وردپرس بدون Settings API به طور کامل درباره ایجاد پنل یا صفحه تنظیمات صحبت کردیم.

برای ایجاد صفحات ادمین از تابع add_menu_page استفاده می کنیم.

function modiredev_add_settings_page() {

    $notification_count = 4;

    add_menu_page(
        'تنظیمات قالب',
        $notification_count ?
               sprintf( 'تنظیمات قالب <span class="awaiting-mod">%d</span>', $notification_count ) :
                'تنظیمات قالب',
        'manage_options',
        'panel-settings',
        'modiredev_render_settings_panel',
        'dashicons-admin-customizer',
        ۶۲
    );

}

add_action( 'admin_menu', 'modiredev_add_settings_page' );

function modiredev_render_settings_panel() {
    echo 'پنل تنظیمات';
}

خروجی نهایی را در تصویر زیر ملاحظه می کنید.

افزودن نوتیفیکیشن به صفحات مدیریتی وردپرس

همچنین می توانید از توابع زیر برای افزودن نوتیفیکیشن به منوهای اصلی وردپرس استفاده کنید.

  • ()add_submenu_page
  • ()add_media_page : منوی رسانه
  • ()add_posts_page : منوی نوشته ها
  • ()add_users_page : منوی کاربران
  • ()add_management_page : منوی ابزارها
  • ()add_options_page : منوی تنظیمات
  • ()add_dashboard_page : منوی پیشخوان

به عنوان نمونه با تابع ()add_options_page یک منو به نام “تماس با ما” به منوی تنظیمات وردپرس اضافه کردیم.

function modiredev_add_contact_settings_page() {

    $notification_count = 10;

    add_options_page(
        'تماس با ما',
        'تماس با ما <span class="awaiting-mod">' . $notification_count . '</span>',
        'manage_options',
        'contact_settings',
        'modiredev_render_contact_settings_page'
    );

}

add_action( 'admin_menu', 'modiredev_add_contact_settings_page' );

function modiredev_render_contact_settings_page() {
    echo '<h2>تنظیمات تماس با ما</h2>';
}

نتیجه کار بدین صورت خواهد بود.

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

جمع بندی

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

برچسب ها
سعید یاورنیا 118 نوشته 130 دیدگاه

توسعه دهنده PHP و Wordpress
توسعه وب سایت یکی از کارهایی است که تلاش می کنم تخصصم رو در اون بالا ببرم، یادگیری تکنولوژی های جدید یکی از چالش هایی است که به شدت به آن علاقمند هستم.

دیدگاه ‌ها

دیدگاهتان را بنویسید.

نشانی ایمیل شما منتشر نخواهد شد، بخش‌های موردنیاز با * مشخص شده‌اند.