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

نوار ابزار وردپرس یا ادمین بار ، ابزاری است که برای دسترسی سریع کاربران به صفحات خاص مدیریت سایت وردپرس تعبیه شده است. این ویژگی از وردپرس ورژن 3.0.1 به بعد در هسته ی وردپرس ایجاد شده است و به کاربران این اجازه را می دهد که بتوانند مدیریت سریع تر و حرفه ای شده ای را در فضای کار با سیستم وردپرس داشته باشند.

نوار ابزار وردپرس در کجای هسته ی وردپرس قرار دارد ؟

کلاس اصلی نوار ابزار وردپرس به نام WP_Admin_Bar که در فایل با مسیر  wp-includes/class-wp-admin-bar.php قرار دارد.این کلاس وظیفه دارد لیست کامل منو ها و بخش های نوار ابزار وردپرس که به آن ها اصولا Node گفته می شود را ایجاد کند و به سیستم وردپرس انتقال دهد.همانند دیگر بخش های وردپرس برای راحتی یک توسعه دهنده وردپرس مجموعه ای توابعی را ایجاد نموده که در فایل به آدرس wp-includes/admin-bar.php وجود دارد که در ادامه به بررسی آن ها می پردازیم.

چگونه نوار ابزار وردپرس را غیر فعال کنیم ؟

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

1. زمانی که کاربر در بخش مدیریت وب سایت وردپرس قرار داشته باشد.
2. زمانی که کاربر در حال نمایش صفحات سایت وردپرس باشد و حتما لاگین (Login) کرده باشد.

در تابع is_admin_bar_showing در هسته ی وردپرس وظیفه ی تشخیص شرایط منطقی نوار ابزار وردپرس بررسی می شود.

اگر به دقت کد های Admin Bar وردپرس را نگاه کنید در ابتدا بررسی می کند که اگر وردپرس در حال انجام درخواست های خاص مثل Ajax یا درخواست های REST API باشد اصلا کلاس ادمین بار وردپرس بار گزاری نشود.
توسط تابع is_admin بیان کرده که اگر کاربر در قسمت مدیریت وردپرس باشد بالاجبار نوار ابزار وردپرس نمایش داده خواهد. و در پایان نیز توسط تابع is_user_logged_in بررسی میکند اگر در وب سایت کاربر لاگین بود نوار ابزار را نمایش دهد.

نکته ی جالب این تابع خط آخر آن هست که اجازه می دهد توسط هوک وردپرس بتوانیم نوار ابزار وردپرس را برای کاربران غیر فعال کنیم. هوک وردپرس show_admin_bar که با گرفتن مقدار های true یا false برای تشخیص این کار به کار می آید.اگر با هوک های وردپرس آشنایی ندارید پیشنهاد میکنم مطلب زیر را در ابتدا مطالعه کنید:

حتما بخوانید : هوک وردپرس و استفاده از اکشن و فیلتر در توسعه پذیری وردپرس

برای شروع کار ابتدا یک افزونه در وردپرس خود ایجاد میکنیم به نام admin-bar ، برای این کار براحتی می توانید در خط فرمان از دستور:

wp scaffold plugin admin-bar

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

بعد از ایجاد افزونه وارد پوشه ی wp-content/admin-bar در فایل های وردپرس شوید و فایل Admin-bar.php را با یک ویرایشگر باز کنید.برای غیر فعال کردن نوار ابزار وردپرس کافیست کد زیر را در آن فایل قرار دهید.

add_filter( 'show_admin_bar', '__return_false' );

اگر بخواهیم نوار ابزار وردپرس را برای تمامی کاربرانی که نقش subscriber یا مشترک را دارند حذف کنیم و برای مدیر ها همچنان نمایش داده شود خواهیم داشت:

add_filter('show_admin_bar', 'check_show_admin_bar');
function check_show_admin_bar($show)
{
    $current_user = wp_get_current_user();
    if (in_array('subscriber', $current_user->roles, true)) {
        return false;
    }

    return true;
}

برای تمامی کاربران وب سایت وردپرسی شما در جدول wp_usermeta ، یک یوزر متا وجود دارد به نام show_admin_bar_front که اگر مقدار آن برابر با false باشد ، نوار ابزار وردپرس برای آن کاربر زمانی که لاگین هست نمایش داده نمی شود.پس اگر بخواهیم نوار ابزار وردپرس را برای یک کاربر خاص غیر فعال کنیم کافیست مقدار یوزر متای آن کاربر را برابر با false کنیم.

من همیشه در استارتاپ های وردپرسی که برنامه نویسی میکنم در زمان ایجاد یک کاربر نوار ابزار آن را با همین یوزر متا کاملا غیر فعال میکنم. همان طور که می دانید هوک وردپرس در زمان ایجاد یک کاربر user_register می باشد:

add_action('user_register', 'disable_show_admin_bar_after_register', 10, 1);
function disable_show_admin_bar_after_register($user_id)
{
    $user = get_userdata($user_id);
    if (in_array('subscriber', $user->roles, true)) {
        update_user_meta($user_id, 'show_admin_bar_front', 'false');
    }
}

در کد بالا بعد از ثبت نام یک کاربر ، ابتدا مشخصات آن را میگیریم و اگر کاربر نقش subscriber (مشترک) داشت یزور متای آن را برابر با false قرار می دیهم و این بدین معناست که دیگر نوار ابزار وردپرس برای آن به نمایش در نمی آید.

برای دوستانی که توسعه دهنده وردپرس نیستند نیز در قسمت مدیریت کاربران اگر روی ویرایش یک کاربر کلیک کنند گزینه ای وجود دارد به نام “نمایش نوارابزار هنگام مشاهده سایت” که با برداشتن تیک این گزینه و ذخیره دقیقا همان اتفاق بالا برای کاربر می افتد و یوزر متای آن تغییر می کند.

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

add_action('wp_head', 'alert_for_show_admin_bar');
function alert_for_show_admin_bar()
{
    if (is_admin_bar_showing()) {
        echo '<script>alert("نوار ابزار شما در حالت نمایش قرار دارد")</script>';
    }
}

در کد بالا ابتدا بررسی کردیم که نوار ابزار وردپرس در حالت نمایش قرار دارد یا خیر و در صورت وجود پیغامی به کاربر نمایش داده خواهد شد.

ساز و کار نوار ابزار وردپرس به چه صورت هست ؟

نوار ادمین بار وردپرس از بخش هایی تشکیل شده که هر کدام را در اصطلاح یک Menu می نامیم. هر منو می تواند دارای زیر منوها یا زیر مجموعه هایی باشد که آن ها را Node نام گذاری می کنند. تابع wp_admin_bar_init که وظیفه ی ایجاد و تشکیل منو های نوار ادمین بار وردپرس را دارد. ابتدا کلاس اصلی نوار ابزار وردپرس به نام WP_Admin_Bar را بارگذاری می کند. سپس آن را برابر با یک متغیر به نام wp_admin_bar$  که بصورت Global تعریف شده هست. قرار می دهد. پس ما تنها با تغییر در متغیر wp_admin_bar می توانیم آیتم هایی را به آن حذف یا اضافه کنیم.

یکی از نکاتی جالبی که در این بخش وجود دارد فیلتر wp_admin_bar_class هست که به شما این امکان را می دهد از پایه کلاس ادمین بار وردپرس را پیاده سازی کنید بدون در نظر گرفتن مقادیر پیش فرض. و این می تواند فوق العاده باشد برای ایجاد استارتاپ های اختصاصی مبتنی بر هسته ی وردپرس. زیرا انعطاف پذیری آن کامل هست.

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

برای حذف یک منو از ادمین بار وردپرس میتوان از تابع remove_menu استفاده کرد. هر منو در ادمین بار وردپرس دارای یک ID یا شناسه ی یکتا هست که میتوان بر مبنای آن دستورات لازم را اجرا نمود.

به عنوان مثال برای حذف لوگوی وردپرس از سمت راست نوار ابزار وردپرس خواهیم داشت:

add_action('admin_bar_menu', 'remove_wp_logo_admin_bar', 99);
function remove_wp_logo_admin_bar($wp_admin_bar)
{
    $wp_admin_bar->remove_menu('wp-logo');
}

اگر مدیریت وردپرس خود را مشاهده کنید خواهید دید که لوگو وردپرس حذف شده است. در کد بالا ما از هوک و اکشن admin_bar_menu برای انجام تغییرات در آن استفاده کردیم. همچنین می توانید دستور بالا را توسط اکشن wp_before_admin_bar_render نیز بنویسید:

add_action('wp_before_admin_bar_render', 'remove_wp_logo_admin_bar', 99);
function remove_wp_logo_admin_bar()
{
    global $wp_admin_bar;
    $wp_admin_bar->remove_menu('wp-logo');
}

یکی از ساده ترین راه های تشخیص شناسه ها (ID) قسمت های ادمین بار ، استفاده از تکنیک Inspect Element در مرورگر هایی چون گوگل کروم یا فایرفاکس هست.

همان طور که در تصویر بالا مشاهده می کنید در زمان Inspect کردن ادمین بار وردپرس شناسه هر بخش در کد HTML آن وجود دارد. به عنوان مثلا بخش نظرات شناسه ی آن comments می باشد پس براحتی مینواتیم با دستور زیر آن را حذف کنیم :

add_action('admin_bar_menu', 'remove_comments_admin_bar', 99);
function remove_comments_admin_bar($wp_admin_bar)
{
    global $pagenow;
    if ($pagenow == "index.php") {
        $wp_admin_bar->remove_menu('comments');
    }
}

در کد بالا اگر کاربر در صفحه پیشخوان مدیریت وردپرس قرار داشت در قسمت ادمین بار گزینه ی نظرات نمایش داده نخواهد شد. تابع remove_node با remove_menu هیچ تغاوتی ندارد و شما می توانید از هر کدام به دلخواه استفاده کنید.

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

جهت افزودن منو به ادمین بار وردپرس از تابع add_menu بهره میگیریم. به مثال زیر دقت کنید:

add_action( 'wp_before_admin_bar_render', 'add_admin_bar_menu' );
function add_admin_bar_menu() {
    global $wp_admin_bar;

    // Add Item in WordPress Admin Bar
    $wp_admin_bar->add_menu( array(
        'id'    => 'my-link',
        'title' => 'لینک های من',
        'href'  => home_url(),
        'meta' => array(
            'class' => 'custom-class-name'
        )
    ));

    // Add a Sub Item To Parent Menu
    $wp_admin_bar->add_menu( array(
        'id'    => 'sub-1',
        'title' => 'پیشخوان وردپرس',
        'href'  => admin_url(),
        'parent'=>'my-link'
    ));
    $wp_admin_bar->add_menu( array(
        'id'    => 'sub-2',
        'title' => 'افزودن نوشته در وردپرس',
        'href'  => admin_url('post-new.php'),
        'parent'=>'my-link'
    ));
}

حال اگر ادمین بار وردپرس خود را مشاهده کنید خواهیم داشت:

تابع add_menu دارای 5 پارامتر اصلی می باشد :

1. پارامتر id که همان شناسه یکتا برای منو های ادمین بار وردپرس می باشد. سعی کنید برای ایجاد از شناسه هایی که قبلا توسط خوده وردپرس گرفته شده اند مثل comments استفاده نشود.
2. پارامتر title که عنوان نوار ابزار شما را بیان می کند
3. پارامتر href که بیان می کند کاربر بعد از کلیک به کدام صفحه منتقل منتقل شود.
4. پارامتر parent که بیان کننده زیر منو های یک منو می باشد. به عنوان مثال ما برای منوی خود شناسه یکتای my-link را انتخاب کردیم. حال برای افزودن زیر مجموعه کافیست parent منو ها را برابر با my-link قرار دهیم.
5. پارامتر meta که شامل تنظیمات اضافی برای منوی شما می باشد و اجباری نیست ، به عنوان مثال اگر می خواهید یک کلاس اختصاصی در Css به منوی خود اضافه کنید میتوانید از آن بهره مند شوید.لیست پارامتر های meta را می توانید در تابع add_node مشاهده کنید.

قرار دادن منوی در سمت چپ ادمین بار وردپرس

برای اینکه بتوانید منوی خود را در سمت چپ ادمین بار وردپرس قرار دهید می بایست مقدار parent منوی اصلی خود را با top-secondary مقدار دهی کنید. به عنوان مثال:

add_action('wp_before_admin_bar_render', 'add_admin_bar_menu');
function add_admin_bar_menu()
{
    global $wp_admin_bar;

    $wp_admin_bar->add_menu(array(
        'id' => 'menu-in-left',
        'parent' => 'top-secondary',
        'title' => 'نمایش سایت',
        'href' => home_url(),
    ));
    $wp_admin_bar->add_menu(array(
        'id' => 'left-1',
        'parent' => 'menu-in-left',
        'title' => 'تنظیمات سایت',
        'href' => admin_url("options-general.php"),
    ));
}

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

افزودن آیکون به نوار ابزار وردپرس

اگر منوی های اصلی هسته ی وردپرس در ادمین بار را بررسی کنیم متوجه خواهیم شد که برای قرار دادن آیکون فونت های Dashicons در وردپرس از کلاس ab-icons بهره گرفته شده است.پس برای قرار دادن آیکون در WordPress Admin Bar میبایست پارامتر title را بصورت زیر تغییر دهیم :

add_action('wp_before_admin_bar_render', 'add_admin_bar_menu');
function add_admin_bar_menu()
{
    global $wp_admin_bar;

    $wp_admin_bar->add_menu(array(
        'id' => 'custom-menu',
        'title' => '<span class="ab-icon"></span><span class="ab-label">نمایش سایت</span>',
        'href' => home_url(),
    ));
}

add_action('admin_head', 'add_icon_css_admin_bar');
function add_icon_css_admin_bar()
{
    ?>
    <style>
        #wpadminbar #wp-admin-bar-custom-menu .ab-icon:before {
            content: "\f463";
            top: 2px;
        }
    </style>
    <?php
}

شما میبایست Css Content برای آیکون خود را در اینجا قرار دهید. همچنین دقت کنید که کلاس Css رد بخشی از نام خود از ID یا شناسه ی منوی ما که همان custom-menu می باشد بهره گرفته هست و می بایست طبق شناسه شما تغییر یابد.