Как использовать Dashicons в теме или плагине WordPress

Наряду с обновленным WP-Admin, WordPress 3.8 также принес набор совершенно новых значков под названием Dashicons, Dashicons – это значок шрифта, разработанный Мел Чойс он был создан в основном для размещения нового пользовательского интерфейса WP-Admin, от редактора экрана контента до меню администрирования, как вы можете видеть на скриншоте ниже.

Поскольку WordPress теперь использует его для доставки значков в WP-Admin, вы также должны использовать его в своих темах и плагинах. Используя набор значков шрифтов, например Dashicons, вы можете легко настроить вывод с помощью CSS. Если вы разработчик, который хочет обновить ваши плагины или темы, в соответствии с последним дизайном WordPress, а также с использованием его новых свойств, эта статья определенно для вас.

Рекомендуемое чтение: настройка цветовой схемы администратора WordPress

Dashicons в меню администратора

Предполагая, что вы включаете Пользовательский тип сообщения в вашу тему или плагин, вы можете использовать Dashicons следующим образом. Пользовательский тип сообщения использует menu_icon для отображения значка. До версии WordPress 3.8 вы можете добавить в нее путь к значку изображения. В версии 3.8 этот параметр также можно использовать для объявления значка из Dashicons.

Во-первых, посетите Сайт Dashicons, Нажмите на один из значков. Вы можете видеть, что выбранный значок отражается в заголовке, и он отображает имя значка с опциями для его копирования в нескольких форматах: CSS, HTML и Glyph.

Скопируйте имя значка и добавьте его в menu_icon функции Custom Post Type, например, так. Обратите внимание, что я сократил код, чтобы сделать эту статью короче. Полная длина кода можно найти здесь,

$ args = array (
‘label’ => __ (‘book’, ‘book’),
‘description’ => __ (‘Описание типа сообщения’, ‘book’),
‘ярлыки’ => $ метки,
‘поддерживает’ => массив (),
‘taxonomies’ => array (‘category’, ‘post_tag’),
‘menu_position’ => 20,
‘menu_icon’ => ‘dashicons-book’,
‘ability_type ‘=>’ post ‘,
);

В этом примере я создал пользовательский тип публикации для публикации книг. И как вы можете видеть ниже, значок книги появляется рядом с ним.

Страница меню

Плагины также могут использовать add_page_menu функция, чтобы добавить Меню администрирования, В этом случае вы можете просто указать имя значка Dashicons в качестве шестого параметра. В следующем примере мы отобразим значок «гаечный ключ» на нашей странице параметров.

function hkdc_custom_menu_page () {
add_menu_page (
«Страница опций»,
‘Опции’,
‘manage_options’,
‘MyPlugin / option.php’,
”,
‘dashicons-admin-tools’, 81
);
}
add_action (‘admin_menu’, ‘hkdc_custom_menu_page’);

Перейдите к WP-Admin, и вы должны увидеть значок, как показано.

Резервный

Никогда не предполагайте, что все ваши пользователи обновятся до последней версии WordPress. В некоторых случаях они этого не делают. Возможно, они установили плагин для отключения автоматических обновлений. Таким образом, необходимо предоставить запасной вариант, поддерживающий более старую версию WordPress. Если мы этого не сделаем, сторона со значком будет отображаться в виде разорванного изображения (например, что происходит на этом изображении рядом с Книгами).

Прежде чем продолжить, убедитесь, что вы поместили значок изображения в вашу тему или каталог плагинов. Затем мы можем указать значок с помощью условной функции следующим образом:

Сначала мы устанавливаем значение по умолчанию, которое использует Dashicons.

$ icon = ‘dashicons-book-alt’;

И мы заменим значение переменной $ icon, если оно в WordPress 3.7 и ниже.

if (version_compare ($ GLOBALS[‘wp_version’], ‘3.8’, ‘<‘)) {
$ icon = get_template_directory_uri (). ‘/Extra/img/book-brown.png’;
}

Замените параметр значка в пользовательском типе записи (а также в функции add_menu_page) на переменную $ icon.

$ args = array (
‘label’ => __ (‘book’, ‘book’),
‘description’ => __ (‘Описание типа сообщения’, ‘book’),
‘ярлыки’ => $ метки,
‘поддерживает’ => массив (),
‘menu_position’ => 20,
‘menu_icon’ => $ icon,
);
register_post_type (‘book’, $ args);

И мы сделали. Он будет использовать Dashicons для WordPress 3.8 при отображении значка «изображение» в более старых версиях.