Cómo agregar un ícono a un nuevo elemento en la barra de administración de WordPress

Question

Cómo agregar un ícono a un nuevo elemento en la barra de administración de WordPress

22 dic 2014, 02:39:03

Vistas: 16.2K

Votos: 12

Tengo una función que agrega elementos a la barra de herramientas de WordPress. Por ejemplo:

$args2 = array(
    'id'    => 'conversations_unread',
    'title' => $visitor['conversations_unread'] . ' &nbsp ',
    'href'  => XenForo_Application::get('options')->boardUrl . '/conversations'
);

¿Cómo puedo agregar un ícono a la izquierda de este nuevo elemento?

Intenté usar 'meta' pero el ícono no aparece.

'meta' => array( 'class' => 'ib-icon' ),

Leí una referencia sobre agregar la imagen al 'title' pero me gustaría que este ícono sea como la burbuja de comentarios.

LPH

808

barra de administracion

Todas las respuestas a la pregunta

para ampliar la respuesta de kaiser, también puedes sobrescribir el icono con una URL de imagen personalizada y poner los estilos en línea (o por separado si lo prefieres) ej. un icono de 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 = __( 'Ejemplo', 'some-textdomain' ),

luego usa para el valor del título:

'title' => $iconspan.$title,

majick

5.14K

23 ago 2015 08:15:50

En WP 6.6.1, simplemente añade esto en CSS:

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

Encuentra tu icono en https://elementor.github.io/elementor-icons/

InformaPic

1

2 sept 2024 11:47:51

¿Alguien sabe de qué archivo PHP proviene este código? Crea una pestaña de encabezado de WP para soporte en el backend de WordPress. Quiero eliminarlo.

<li id="wp-admin-bar-child_menu_id"><a class="ab-item" href="https://www.rubixhost.com.au" target="_blank">Soporte de Hosting</a></li>

Soporte por Teléfono Soporte por Facebook

user223055

1

11 jun 2022 11:41:23

Comentarios

Si tienes una nueva pregunta, por favor hazla haciendo clic en el botón Hacer una pregunta. Incluye un enlace a esta pregunta si ayuda a proporcionar contexto. - Desde la revisión

Nilambar Sharma

14 jun 2022 12:44:45

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

Ejemplo completo

Un (mu-)plugin rápido como ejemplo:

<?php
/** Plugin Name: Añadir icono a la barra de administración */
add_action( 'admin_bar_menu', function( \WP_Admin_Bar $bar )
{
    $bar->add_menu( array(
        'id'     => 'wpse',
        'parent' => null,
        'group'  => null,
        'title'  => __( 'Ejemplo', 'some-textdomain' ),
        'href'   => get_edit_profile_url( get_current_user_id() ),
        'meta'   => array(
            'target'   => '_self',
            'title'    => __( 'Hola', 'some-textdomain' ),
            'html'     => '<p>Hola</p>',
            'class'    => 'wpse--item',
            'rel'      => 'friend',
            'onclick'  => "alert('Hola');",
            'tabindex' => PHP_INT_MAX,
        ),
    ) );
} );

Que renderiza el siguiente HTML como primer elemento (y por lo tanto también hace nuestra barra de administración inútil, pero ese no es el punto de este ejemplo):

<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(\'Hola\');" target="_self" title="Hola" rel="friend">Ejemplo</a>
    <p>Hola</p>
</li>

Ahora que tenemos una base, podemos ocuparnos de...

Añadir iconos

Las malas noticias: No hay una manera fácil de hacerlo. Al menos no sin añadir tu propia hoja de estilos. Como puedes leer (en el código), hay algunas cosas sucediendo: Antepuse el HTML necesario para envolver un Dashicon antes del elemento actual. Luego añadí un número entero muy alto como último número a la acción - eso es lo que decide la posición del elemento en la barra de administración.

<?php
/** Plugin Name: Añadir icono a la barra de administración */
add_action( 'admin_bar_menu', function( \WP_Admin_Bar $bar )
{
    $bar->add_menu( array(
        'id'     => 'wpse',
        'title'  => '<span class="ab-icon"></span>'.__( 'Ejemplo', 'some-textdomain' ),
        'href'   => get_edit_profile_url( get_current_user_id() ),
        'meta'   => array(
            'target'   => '_self',
            'title'    => __( '¡Ahoy!', 'some-textdomain' ),
            'html'     => '<!-- HTML personalizado que va debajo del elemento -->',
        ),
    ) );
}, 210 ); // <-- ESTE ENTERO DECIDE DÓNDE SE AÑADE EL ELEMENTO (Bajo = izquierda, Alto = derecha)

add_action( 'wp_enqueue_scripts', function()
{
    wp_enqueue_style( /* registra tu hoja de estilos */ );
}

Finalmente necesitarás añadir algunas reglas CSS en tu propia hoja de estilos. La única parte variable es el wpse en el #/id. El resto es constante e igual para todos los elementos/nodos de la barra de administración. También podrías necesitar ajustar la posición top para que encaje el Dashicon. Simplemente elige un Dashicon de su sitio y añade el código fXXX en el CSS de abajo.

#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;
}