Как добавить иконку к новому элементу в админ-панели?

Question

Как добавить иконку к новому элементу в админ-панели?

22 дек. 2014 г., 02:39:03

Просмотры: 16.2K

Голосов: 12

У меня есть функция, которая добавляет элементы в панель инструментов WordPress. Например:

$args2 = array(
    'id'    => 'conversations_unread', // Идентификатор элемента
    'title' => $visitor['conversations_unread'] . ' &nbsp ', // Заголовок с количеством непрочитанных
    'href'  => XenForo_Application::get('options')->boardUrl . '/conversations' // Ссылка
);

Как добавить иконку слева от этого нового элемента?

Я пробовал использовать 'meta', но иконка не отображается.

'meta' => array( 'class' => 'ib-icon' ), // Попытка добавить CSS класс

Я видел упоминание о добавлении изображения в 'title', но хочу, чтобы иконка была как пузырек комментария.

LPH

808

админ панель

Все ответы на вопрос

чтобы расширить ответ Kaiser, вы также можете переопределить иконку с помощью пользовательского URL изображения и добавить стили прямо в коде (или отдельно, если предпочитаете), например, иконка 22px x 22px...

$iconurl = '/images/custom-icon.png';

$iconspan = '<span class="custom-icon" style="
    float:left; width:22px !important; height:22px !important;
    margin-left: 5px !important; margin-top: 5px !important;
    background-image:url(\''.$iconurl.'\');"></span>';

$title = __( 'Пример', 'some-textdomain' ),

затем использовать для значения title:

'title' => $iconspan.$title,

majick

5.14K

23 авг. 2015 г. 08:15:50

В WP 6.6.1 просто добавьте этот CSS:

#wp-admin-bar-YOUR_ID_ITEM>.ab-item:before {
    content: "\eXXX";
    font-family: eicons;
    top: 3px;
    font-size: 18px;
}

Найдите свой значок на https://elementor.github.io/elementor-icons/

InformaPic

1

2 сент. 2024 г. 11:47:51

Кто-нибудь знает, из какого PHP-файла этот код? Он создает вкладку поддержки в хедере WP в админке. Хочу его удалить.

<li id="wp-admin-bar-child_menu_id"><a class="ab-item" href="https://www.rubixhost.com.au" target="_blank">Поддержка хостинга</a></li>

Телефонная поддержка Поддержка через Facebook

user223055

1

11 июн. 2022 г. 11:41:23

Комментарии

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

Nilambar Sharma

14 июн. 2022 г. 12:44:45

kaiser 50.8K · Accepted Answer · 2014-12-22T03:23:48Z

Полный пример

Быстрый (mu-)плагин в качестве примера:

<?php
/** Plugin Name: Add Admin Bar Icon */
add_action( 'admin_bar_menu', function( \WP_Admin_Bar $bar )
{
    $bar->add_menu( array(
        'id'     => 'wpse',
        'parent' => null,
        'group'  => null,
        'title'  => __( 'Пример', 'some-textdomain' ),
        'href'   => get_edit_profile_url( get_current_user_id() ),
        'meta'   => array(
            'target'   => '_self',
            'title'    => __( 'Привет', 'some-textdomain' ),
            'html'     => '<p>Привет</p>',
            'class'    => 'wpse--item',
            'rel'      => 'friend',
            'onclick'  => "alert('Привет');",
            'tabindex' => PHP_INT_MAX,
        ),
    ) );
} );

Что генерирует следующий HTML в качестве первого элемента (и тем самым делает нашу панель администратора бесполезной, но это не суть данного примера):

<li id="wp-admin-bar-wpse" class="wpse--item">
    <a class="ab-item" tabindex="9223372036854775807" href="http://astro.dev/wp-admin/profile.php" onclick="alert(\'Привет\');" target="_self" title="Привет" rel="friend">Пример</a>
    <p>Привет</p>
</li>

Теперь, когда у нас есть база, мы можем позаботиться о...

Добавление иконок

Печальная новость: нет простого способа сделать это. По крайней мере, без добавления собственной таблицы стилей. Как вы можете прочитать (в коде), происходит следующее: я добавил HTML, необходимый для обертки Dashicon, перед самим элементом. Затем я добавил очень большое целое число в качестве последнего параметра к действию — это определяет позицию элемента в панели администратора.

<?php
/** Plugin Name: Add Admin Bar Icon */
add_action( 'admin_bar_menu', function( \WP_Admin_Bar $bar )
{
    $bar->add_menu( array(
        'id'     => 'wpse',
        'title'  => '<span class="ab-icon"></span>'.__( 'Пример', 'some-textdomain' ),
        'href'   => get_edit_profile_url( get_current_user_id() ),
        'meta'   => array(
            'target'   => '_self',
            'title'    => __( 'Ахой!', 'some-textdomain' ),
            'html'     => '<!-- Пользовательский HTML, который идет ниже элемента -->',
        ),
    ) );
}, 210 ); // <-- ЭТО ЧИСЛО ОПРЕДЕЛЯЕТ, ГДЕ БУДЕТ ДОБАВЛЕН ЭЛЕМЕНТ (Низкое = слева, Высокое = справа)

add_action( 'wp_enqueue_scripts', function()
{
    wp_enqueue_style( /* зарегистрируйте свою таблицу стилей */ );
}

Наконец, вам нужно добавить несколько CSS-правил в свою таблицу стилей. Единственная изменяемая часть — это wpse в #/id. Остальное постоянно и одинаково для всех элементов/узлов панели администратора. Возможно, вам также потребуется настроить положение top, чтобы иконка Dashicon отображалась правильно. Просто выберите иконку Dashicon с их сайта и добавьте код fXXX в CSS ниже.

#wpadminbar #wp-admin-bar-wpse .ab-icon:before {
    font: normal 20px/1 dashicons;
    content: '\f306';
    position: relative;
    float: left;
    speak: never;
    padding: 4px 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: none !important;
    margin-right: 6px;
}