WP_Admin_Bar::add_node()
Добавляет элемент (ссылку) в Админ бар (верхнее меню на фронте).
Это алиас метода: WP_Admin_Bar::add_menu().
Использовать этот метод нужно на хуке admin_bar_menu.
Читайте также 11 хаков для Админ-бара.
Метод класса: WP_Admin_Bar{}
Хуков нет.
Возвращает
null. Ничего.
Использование
$WP_Admin_Bar = new WP_Admin_Bar(); $WP_Admin_Bar->add_node( $args );
- $args(массив) (обязательный)
Аргументы добавляемого элемента. Массив может содержать следующие ключи:
-
id(строка) (обязательный)
ID элемента.Если не указан, то будет создан из title с выводом предупреждения "ID меню не должен быть пустым", если включен дебаг.
-
title(строка) (обязательный)
Заголовок/анкор ссылки. Тут можно использовать HTML теги, например чтобы добавить иконку. -
href(строка)
УРЛ ссылки.Если не указать, то ссылка не будет сформирована и будет выведен элемент с текстом. Такое может пригодится, когда например надо сделать родительский пункт, который никуда не должен вести. Или вывести какую-то информацию (текст), в виде элемента админ бара.
По умолчанию: false -
parent(строка)
ID родительского элемента, к которому подбавляемый элемент должен стать дочерним.
По умолчанию: false -
group(логический)
Является ли ссылка групповой. Принадлежит ли она к какой-либо группе.
По умолчанию: false -
meta(массив)
Дополнительные данные ссылки. Доп. атрибуты тега A. Может быть:html- любой HTML код или просто текст, который будет выведен сразу после тега A.class- атрибут 'class' для элемента lirel- атрибут 'rel'onclick- атрибут 'onclick' для элемента atarget- как открывать ссылку '_blank' - в новом окнеtitle- атрибут titletabindex- порядок при нажатии на клавишу TAB
По умолчанию: array()
-
Примеры
#1 Как добавить dashicon иконку в WP Admin Bar (Toolbar)
Для этого в параметре В результате мы получим: Dashicons можно найти здесь: https://developer.wordpress.org/resource/dashicons/title нужно добавить HTML тег dashicons, а также дополнительно к его классам добавить класс ab-icon. Рассмотрим такой пример:add_action( 'admin_bar_menu', 'add_toolbar_link', 70 );
function add_toolbar_link( $wp_admin_bar ){
$wp_admin_bar->add_menu( [
'id' => 'chartlink',
'title' => '<span class="ab-icon dashicons-visibility" style="top:2px"></span><span class="ab-label">Views</span>',
'href' => '#',
] );
}
#2 Добавим ссылку и дочернюю ссылку в панель
// Добавляет ссылку в админ бар
add_action( 'admin_bar_menu', 'my_admin_bar_menu', 30 );
function my_admin_bar_menu( $wp_admin_bar ){
$wp_admin_bar->add_menu( array(
'id' => 'menu_id',
'title' => 'Внешняя ссылка',
'href' => 'http://example.com',
) );
// дочерняя ссылка
$wp_admin_bar->add_menu( array(
'parent' => 'menu_id', // параметр id из первой ссылки
'id' => 'some_id', // свой id, чтобы можно было добавить дочерние ссылки
'title' => 'Дочерняя ссылка',
'href' => 'http://example.com/subpage',
) );
}
В результате получим:
Чтобы изменить положение всего блока ссылок, пункта (поставить его до или после какого-то блока), измените число 30 — чем больше, тем ближе к концу.
#3 Дочерняя ссылка в меню сайта на страницу плагинов
// дочерняя ссылка в меню сайта на страницу плагинов
if( ! is_admin() ){
add_action( 'admin_bar_menu', function ( $wp_admin_bar ) {
$wp_admin_bar->add_menu( array(
'parent' => 'site-name', // id родительского элемента
'id' => 'plugins_link', // свой id, чтобы можно было добавить дочерние ссылки
'title' => 'Плагины',
'href' => admin_url('plugins.php'),
) );
}, 100 );
} #4 Как найти нужные идентификатор элемента меню
Чтобы настроить пункт меню, необходимо сначала найти правильный id (узел) ссылки.
Щелкните правой кнопкой мыши на ссылке меню в браузере и выберите Inspect Element - откроется инспектор, где можно увидеть html страницы.
Найдите тег id у выбранного элемента.
Например, если мне нужно настроить выпадающий список сайтов - я найду id: wp-admin-bar-site-name.
ID который нам нужен - это site-name, т.е. нужно удалить wp-admin-bar-.
Список ID (узлов)
На панели инструментов администратора имеются различные узлы верхнего уровня и подменю:
wp-logo about wporg documentation support-forum feedback site-name dashboard themes customize widgets menus customize-background customize-header comments new-content new-post new-media new-page new-user edit user-actions (справа - рядом с изображением вашего аватара) user-info edit-profile logout
При удалении узла верхнего уровня удаляется ссылка и подменю (если оно есть).
Примеры использования
Следующий код добавляет ссылку на медиатеку в выпадающее меню названия сайта.
add_action( 'admin_bar_menu', 'add_link_to_admin_bar',999 );
function add_link_to_admin_bar( $admin_bar ) {
$args = array(
'parent' => 'site-name',
'id' => 'media-libray',
'title' => 'Media Library',
'href' => esc_url( admin_url( 'upload.php' ) ),
'meta' => false
);
$admin_bar->add_node( $args );
}
Следующий код добавляет медиатеку и ссылку на плагины в выпадающее меню сайта.
add_action( 'admin_bar_menu', 'add_links_to_admin_bar',999 );
function add_links_to_admin_bar( $admin_bar ) {
$args = array(
'parent' => 'site-name',
'id' => 'media-libray',
'title' => 'Media Library',
'href' => esc_url( admin_url( 'upload.php' ) ),
'meta' => false
);
$admin_bar->add_node( $args );
$args = array(
'parent' => 'site-name',
'id' => 'plugins',
'title' => 'Plugins',
'href' => esc_url( admin_url( 'plugins.php' ) ),
'meta' => false
);
$admin_bar->add_node( $args );
}
Следующий код добавляет ссылку верхнего уровня и ссылки подменю медиатеки и плагинов в выпадающий список Custom Made.
add_action( 'admin_bar_menu', 'add_top_link_to_admin_bar',999 );
function add_top_link_to_admin_bar( $admin_bar ) {
// add a parent item
$args = array(
'id' => 'custom',
'title' => 'Custom Made',
'href' => 'http://example.com/', // Showing how to add an external link
);
$admin_bar->add_node( $args );
// add a child item to our parent item
$args = array(
'parent' => 'custom',
'id' => 'media-libray',
'title' => 'Media Library',
'href' => esc_url( admin_url( 'upload.php' ) ),
'meta' => false
);
$admin_bar->add_node( $args );
// add a child item to our parent item
$args = array(
'parent' => 'custom',
'id' => 'plugins',
'title' => 'Plugins',
'href' => esc_url( admin_url( 'plugins.php' ) ),
'meta' => false
);
$admin_bar->add_node( $args );
} #5 Превращение существующего дочернего узла в родительский узел
В этом примере заменим существующий узел идентификатора этого узла. Следующий код сделает дочерний узел с ID "new-post" (New > Post) родительским узлом.
add_action( 'admin_bar_menu', 'make_parent_node', 999 );
/**
* Modifies the "Add New Post" Toolbar item to move it to the top-level.
*
* @param WP_Admin_Bar $wp_admin_bar Toolbar instance.
*/
function make_parent_node( $wp_admin_bar ) {
$args = array(
'id' => 'new-post', // id of the existing child node (New > Post)
'title' => __( 'Add New Post', 'textdomain' ), // alter the title of existing node
'parent' => false, // set parent to false to make it a top level (parent) node
);
$wp_admin_bar->add_node( $args );
}
Список изменений
| С версии 3.1.0 | Введена. |
| С версии 4.5.0 | Added the ability to pass 'lang' and 'dir' meta data. |
| С версии 6.5.0 | Added the ability to pass 'menu_title' for an ARIA menu name. |