web-dev-qa-db-fra.com

Comment ajouter une icône à un nouvel élément de la barre d'administration?

J'ai une fonction qui ajoute des éléments à la barre d'outils WordPress. Par exemple:

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

Comment puis-je obtenir une icône à gauche de ce nouvel élément?

J'ai essayé d'utiliser le 'méta' mais l'icône ne s'affiche pas.

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

J'ai lu une référence à l'ajout de l'image au titre, mais j'aimerais que cette icône ressemble à la bulle de commentaire.

admin-bar
9
LPH

Exemple complet

Un plugin (mu-) rapide à titre d'exemple:

<?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'  => __( 'Example', 'some-textdomain' ),
        'href'   => get_edit_profile_url( get_current_user_id() ),
        'meta'   => array(
            'target'   => '_self',
            'title'    => __( 'Hello', 'some-textdomain' ),
            'html'     => '<p>Hello</p>',
            'class'    => 'wpse--item',
            'rel'      => 'friend',
            'onclick'  => "alert('Hello');",
            'tabindex' => PHP_INT_MAX,
        ),
    ) );
} );

Ce qui rend le code HTML suivant comme premier élément (et donc rend également notre barre d’administration inutile, mais ce n’est pas le but de cet exemple):

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

Maintenant que nous avons une base, nous pouvons nous occuper de ...

Ajout d'icônes

La triste nouvelle: il n'y a pas de moyen facile de le faire. Du moins pas sans ajouter votre propre feuille de style. Comme vous pouvez le lire (dans le code), il se passe certaines choses: J'ai ajouté le code HTML nécessaire pour insérer un Dashicon avant l'élément réel. Ensuite, j'ai ajouté un nombre très élevé comme dernier chiffre à l'action - c'est ce qui détermine la position de l'élément dans la barre d'administration.

<?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>'.__( 'Example', 'some-textdomain' ),
        'href'   => get_edit_profile_url( get_current_user_id() ),
        'meta'   => array(
            'target'   => '_self',
            'title'    => __( 'Ahoi!', 'some-textdomain' ),
            'html'     => '<!-- Custom HTML that goes below the item -->',
        ),
    ) );
}, 210 ); // <-- THIS INTEGER DECIDES WHERE THE ITEM GETS ADDED (Low = left, High = right)

add_action( 'wp_enqueue_scripts', function()
{
    wp_enqueue_style( /* register your stylesheet */ );
}

Enfin, vous devrez ajouter des règles CSS dans votre propre feuille de style. La seule pièce mobile est la wpse dans le #/id. Le reste est constant et égal pour tous les éléments/nœuds de la barre d'administration. Vous devrez peut-être également ajuster la position top pour l’adapter au Dashicon. Il suffit de choisir un Dashicon sur leur site et d’ajouter le code fXXX au CSS ci-dessous.

#wpadminbar #wp-admin-bar-wpse .ab-icon:before {
    content: '\f306';
    top: 3px;
}
12
kaiser

pour développer la réponse de kaiser, vous pouvez également remplacer l’icône par une URL d’image personnalisée et insérer les styles en ligne (ou encore séparément si vous le souhaitez), par exemple. une icône 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 = __( 'Example', 'some-textdomain' ),

puis utilisez pour la valeur du titre:

'title' => $iconspan.$title,
2
majick