Come aggiungere un'icona a una nuova voce nella barra di amministrazione?

Question

Come aggiungere un'icona a una nuova voce nella barra di amministrazione?

22 dic 2014, 02:39:03

Visualizzazioni: 16.2K

Voti: 12

Ho una funzione che aggiunge elementi alla toolbar di WordPress. Ad esempio:

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

Come posso aggiungere un'icona a sinistra di questa nuova voce?

Ho provato a usare 'meta' ma l'icona non viene visualizzata.

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

Ho letto che si può aggiungere l'immagine al 'title' ma vorrei che questa icona fosse simile alla bolla dei commenti.

LPH

808

admin bar

Tutte le risposte alla domanda

Per ampliare la risposta di Kaiser, puoi anche sostituire l'icona con un URL di un'immagine personalizzata e inserire gli stili inline (o separatamente, se preferisci), ad esempio un'icona di 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 = __( 'Esempio', 'some-textdomain' ),

quindi utilizza per il valore del titolo:

'title' => $iconspan.$title,

majick

5.14K

23 ago 2015 08:15:50

In WP 6.6.1, è sufficiente aggiungere questo codice in CSS:

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

Trova la tua icona su https://elementor.github.io/elementor-icons/

InformaPic

1

2 set 2024 11:47:51

Qualcuno sa da quale file PHP proviene questo codice? Crea una scheda di intestazione WP per il supporto nel backend di WordPress. Voglio rimuoverlo.

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

Supporto telefonico Supporto Facebook

user223055

1

11 giu 2022 11:41:23

Commenti

Se hai una nuova domanda, per favore formulala cliccando il pulsante Fai una Domanda. Includi un link a questa domanda se può aiutare a fornire contesto. - Dalla Revisione

Nilambar Sharma

14 giu 2022 12:44:45

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

Esempio completo

Un plugin (mu-) rapido come esempio:

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

Che genera il seguente HTML come primo elemento (e quindi rende anche la nostra barra di amministrazione inutilizzabile, ma non è questo il punto di questo esempio):

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

Ora che abbiamo una base, possiamo occuparci di...

Aggiungere Icone

La brutta notizia: non c'è un modo semplice per farlo. Almeno non senza aggiungere il proprio foglio di stile. Come puoi leggere (nel codice), ci sono alcune cose che accadono: ho anteposto l'HTML necessario per avvolgere una Dashicon prima dell'elemento effettivo. Poi ho aggiunto un numero intero molto alto come ultimo numero all'azione - è quello che decide la posizione dell'elemento nella barra di amministrazione.

<?php
/** Plugin Name: Aggiungi Icona Admin Bar */
add_action( 'admin_bar_menu', function( \WP_Admin_Bar $bar )
{
    $bar->add_menu( array(
        'id'     => 'wpse',
        'title'  => '<span class="ab-icon"></span>'.__( 'Esempio', 'some-textdomain' ),
        'href'   => get_edit_profile_url( get_current_user_id() ),
        'meta'   => array(
            'target'   => '_self',
            'title'    => __( 'Ahoy!', 'some-textdomain' ),
            'html'     => '<!-- HTML personalizzato che va sotto l\'elemento -->',
        ),
    ) );
}, 210 ); // <-- QUESTO INTERO DECIDE DOVE VIENE AGGIUNTO L'ELEMENTO (Basso = sinistra, Alto = destra)

add_action( 'wp_enqueue_scripts', function()
{
    wp_enqueue_style( /* registra il tuo foglio di stile */ );
}

Infine dovrai aggiungere alcune regole CSS nel tuo foglio di stile. L'unica parte variabile è il wpse nell'#/id. Il resto è costante e uguale per tutti gli elementi/nodi della barra di amministrazione. Potresti anche dover regolare la posizione top per adattarla alla Dashicon. Basta scegliere una Dashicon dal loro sito e aggiungere il codice fXXX nel CSS qui sotto.

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