Cum adaug o pictogramă la un element nou din bara de administrare?

Question

Cum adaug o pictogramă la un element nou din bara de administrare?

22 dec. 2014, 02:39:03

Vizualizări: 16.2K

Voturi: 12

Am o funcție care adaugă elemente în bara de unelte WordPress. De exemplu:

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

Cum pot adăuga o pictogramă în stânga acestui element nou?

Am încercat să folosesc 'meta' dar pictograma nu apare.

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

Am citit o referință despre adăugarea imaginii în 'title', dar aș dori ca această pictogramă să fie ca bule de comentariu.

LPH

808

admin bar

Toate răspunsurile la întrebare

pentru a extinde răspunsul lui kaiser, poți suprascrie de asemenea iconița cu o adresă URL personalizată a imaginii și poți pune stilurile inline (sau din nou separat, dacă preferi) de ex. o iconiță 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 = __( 'Exemplu', 'some-textdomain' ),

apoi folosește pentru valoarea titlului:

'title' => $iconspan.$title,

majick

5.14K

23 aug. 2015 08:15:50

În WP 6.6.1, pur și simplu adăugați acest cod în CSS:

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

Găsiți pictograma dorită pe https://elementor.github.io/elementor-icons/

InformaPic

1

2 sept. 2024 11:47:51

Cine știe din ce fișier PHP provine acest cod? Acesta creează un tab în antetul WP pentru suport în backend-ul wp. Vreau să îl elimin.

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

Suport Telefonic Suport Facebook

user223055

1

11 iun. 2022 11:41:23

Comentarii

Dacă ai o întrebare nouă, te rugăm să o adresezi apăsând butonul Pune o Întrebare. Include un link către această întrebare dacă ajută la oferirea de context. - Din Revizuire

Nilambar Sharma

14 iun. 2022 12:44:45

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

Exemplu complet

Un (mu-)plugin rapid ca exemplu:

<?php
/** Plugin Name: Adaugă Pictogramă în Bara de Administrare */
add_action( 'admin_bar_menu', function( \WP_Admin_Bar $bar )
{
    $bar->add_menu( array(
        'id'     => 'wpse',
        'parent' => null,
        'group'  => null,
        'title'  => __( 'Exemplu', 'some-textdomain' ),
        'href'   => get_edit_profile_url( get_current_user_id() ),
        'meta'   => array(
            'target'   => '_self',
            'title'    => __( 'Salut', 'some-textdomain' ),
            'html'     => '<p>Salut</p>',
            'class'    => 'wpse--item',
            'rel'      => 'friend',
            'onclick'  => "alert('Salut');",
            'tabindex' => PHP_INT_MAX,
        ),
    ) );
} );

Care generează următorul HTML ca prim element (și, prin urmare, face și bara noastră de administrare inutilă, dar nu acesta este scopul acestui exemplu):

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

Acum că avem o bază, putem să ne ocupăm de...

Adăugarea Pictogramelor

Vestea tristă: Nu există o modalitate ușoară de a face acest lucru. Cel puțin nu fără a adăuga propriul fișier de stiluri. După cum puteți citi (în cod), se întâmplă câteva lucruri: Am adăugat HTML-ul necesar pentru a înfășura o pictogramă Dashicon înaintea elementului actual. Apoi am adăugat un număr întreg foarte mare ca ultim număr la acțiune - acesta este ceea ce decide poziția elementului în bara de administrare.

<?php
/** Plugin Name: Adaugă Pictogramă în Bara de Administrare */
add_action( 'admin_bar_menu', function( \WP_Admin_Bar $bar )
{
    $bar->add_menu( array(
        'id'     => 'wpse',
        'title'  => '<span class="ab-icon"></span>'.__( 'Exemplu', 'some-textdomain' ),
        'href'   => get_edit_profile_url( get_current_user_id() ),
        'meta'   => array(
            'target'   => '_self',
            'title'    => __( 'Salut!', 'some-textdomain' ),
            'html'     => '<!-- HTML personalizat care apare sub element -->',
        ),
    ) );
}, 210 ); // <-- ACEST NUMĂR ÎNTREG DECIDE UNDE SE ADAUGĂ ELEMENTUL (Mic = stânga, Mare = dreapta)

add_action( 'wp_enqueue_scripts', function()
{
    wp_enqueue_style( /* înregistrează fișierul tău de stiluri */ );
}

În final, va trebui să adăugați câteva reguli CSS în propriul fișier de stiluri. Singura parte variabilă este wpse din #/id. Restul este constant și egal pentru toate elementele/nodurile din bara de administrare. S-ar putea să fie nevoie să ajustați poziția top pentru a se potrivi cu Dashicon. Alegeți pur și simplu un Dashicon de pe site-ul lor și adăugați codul fXXX în CSS-ul de mai jos.

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