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

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

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

لینک سفارشی نوار ابزار

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

function tcCustomToolbarLink($wp_admin_bar)
{
    $args = array(
        'id' => 'tcCustomMenu',
        'title' => 'پشتیبانی توسی',
        'href' => 'https://tooc.ir',
    );
    $wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'tcCustomToolbarLink', 100);

در این کد با استفاده از admin_bar_menu، تابع خود را فراخوانی می کنیم. در این تابع یک آرایه از شناسه، عنوان و لینک مورد نظر خود را به لیست منو های فعلی نوار ابزار وردپرس اضافه می کنیم. به همین سادگی یک لینک سفارشی به نوار ابزار اضافه کردیم. برای افزودن لینک های دیگر نیز باید آرایه جدید را در همین تابع به لیست خود اضافه کنیم. برای مثال در کد زیر ۲ لینک به تولبار وردپرس اضافه کردیم:

function tcCustomToolbarLink($wp_admin_bar)
{
    $args = array(
        'id' => 'tcCustomMenu',
        'title' => 'پشتیبانی توسی',
        'href' => 'https://tooc.ir',
    );
    $wp_admin_bar->add_node($args);
    $args = array(
        'id' => 'tcCustomMenu2',
        'title' => 'لینک دلخواه',
        'href' => '#',
    );
    $wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'tcCustomToolbarLink', 100);

ساخت گروه سفارشی در toolbar

یکی از قابلیت های وردپرس در این بخش، امکان گروه بندی و یا ساخت زیر منو برای لینک های نوار ابزار است. در این صورت می توان چند لینک را به صورت تو در تو و زیر منو ایجاد کرد. برای پیاده سازی این قابلیت تنها باید شناسه منوی اصلی را به عنوان parent منو های داخلی ثبت کنیم. برای مثال:

function tcCustomToolbarLink($wp_admin_bar)
{
    $args = array(
        'id' => 'tcCustomMenu',
        'title' => 'پشتیبانی توسی',
        'href' => 'https://tooc.ir',
    );
    $wp_admin_bar->add_node($args);

    $args = array(
        'id' => 'tcCustomMenuCh1',
        'title' => 'زیر منوی اول',
        'href' => '#',
        'parent' => 'tcCustomMenu',
    );
    $wp_admin_bar->add_node($args);

    $args = array(
        'id' => 'tcCustomMenuCh2',
        'title' => 'زیر منوی دوم',
        'href' => '#',
        'parent' => 'tcCustomMenu',
    );
    $wp_admin_bar->add_node($args);

    $args = array(
        'id' => 'tcCustomMenuCh3',
        'title' => 'زیر زیر منوی دوم!',
        'href' => '#',
        'parent' => 'tcCustomMenuCh2',
    );
    $wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'tcCustomToolbarLink', 100);

در کد بالا با استفاده از parent و شناسه منوی اصلی، ۲ زیر منو برای آن ایجاد کرده ایم. در نهایت نیز یک زیر منو برای یکی از زیر منو ها اضافه می کنیم. این گروه به صورت یک منوی آبشاری در نوار ابزار وردپرس نمایش داده می شود.

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

یکی از قابلیت های شخصی سازی در این بخش، افزودن آیکون به منوی سفارشی است. برای این کار باید از CSS ها و فونت آیکون وردپرس استفاده کنیم. اما قبل از هرکاری باید کد های افزودن لینک به نوار ابزار وردپرس خود را کمی بروز کنیم:

function tcCustomToolbarLink($wp_admin_bar)
{
    $args = array(
        'id' => 'tcCustomMenu',
        'title' => '<span class="ab-icon"></span><span class="ab-label">پشتیبانی توسی</span>',
        'href' => 'https://tooc.ir',
    );
    $wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'tcCustomToolbarLink', 100);

در این کد title را با استفاده از html کمی شخصی سازی کرده ایم. با این کار محل نمایش آیکون و عنوان منو بر اساس استاندارد وردپرس تغییر می کند. سپس کد زیر را برای افزودن کد های سی اس اس لازم به فایل functions.php اضافه می کنیم:

function tcToolbarIc()
{
	echo '<style>
    #wpadminbar #wp-admin-bar-tcCustomMenu .ab-icon:before {
		content: "\f525";
		top: 4px;
	}
  </style>';
}
add_action('admin_head', 'tcToolbarIc');

در کد بالا یک فونت آیکون از لیست آیکون های موجود در وردپرس را به این منو اضافه می کنیم. لیست «dashicons وردپرس» را از طریق این لینک میتوانید مشاهده کنید. تنها نکته مهم در این کد، نوشتن شناسه منوی اصلی در کد های CSS نوشته شده است. در مثال ما لینک اصلی با شناسه tcCustomMenu تعریف شده است. بر همین اساس نیز ما شناسه wp-admin-bar-tcCustomMenu را برای استایل خود می نویسیم. با استفاده از این کد های CSS، امکان شخصی سازی و تغییر رنگ و موارد دیگر نیز وجود دارد.