Используем Dashicons в темах и плагинах WordPress

Наряду с переработанной админкой, преподнесенной нам в версии WordPress 3.8, нам также представили совершенно новые иконки под названием Dashicons. Dashicons — это иконочный шрифт, разработанный Mel Choyce специально для того, чтобы облагородить новый интерфейс административной панели ВП, начиная от страницы редактора контента и до административного меню, что вы можете увидеть на скриншоте ниже.

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

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

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

Для начала посетите сайт Dashicons. Кликните на одну из этих иконок. Вы увидите, что выбранная иконка отобразится в хидере, а также выведется название иконки с возможностью ее скопировать в нескольких форматах: CSS, HTML, и Glyph.

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

    $args = array(
        'label'               => __( 'book', 'book' ),
        'description'         => __( 'Post Type Description', 'book' ),
        'labels'              => $labels,
        'supports'            => array( ),
        'taxonomies'          => array( 'category', 'post_tag' ),
        'menu_position'       => 20,
        'menu_icon'           => 'dashicons-book',
        'capability_type'     => 'post',
    );

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

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

Плагины также могут использовать функцию add_page_menu для добавления административного меню. В этом случае вы можете просто указать название иконки Dashicons в виде шестого параметра. На примере ниже мы будем выводить иконку “wrench” на странице наших настроек.

function hkdc_custom_menu_page() {
    add_menu_page(
        'Options Page',
        'Options',
        'manage_options',
        'myplugin/option.php',
        '',
        'dashicons-admin-tools', 81
        );
}
add_action( 'admin_menu', 'hkdc_custom_menu_page' );

Заходим в административную панель и видим соответствующую иконку.

Запасной вариант

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

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

Для начала мы укажем стандартную иконку, использующую 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'         => __( 'Post Type Description', 'book' ),
        'labels'              => $labels,
        'supports'            => array( ),
        'menu_position'       => 20,
        'menu_icon'           => $icon,
    );
register_post_type( 'book', $args );

Вот, собственно, и все. Функция будет использовать Dashicons для версии WordPress 3.8, в то же время отображая «картинковую» иконку в старых версиях движка.

Надеемся, что эта статья помогла вам начать использовать Dashicons в темах и плагинах WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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