it-swarm.com.de

Wie füge ich einem neuen Element in der Administrationsleiste ein Symbol hinzu?

Ich habe eine Funktion, die Elemente zur WordPress-Symbolleiste hinzufügt. Zum Beispiel:

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

Wie erhalte ich ein Symbol links von diesem neuen Artikel?

Ich habe versucht, das "Meta" zu verwenden, aber das Symbol wird nicht angezeigt.

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

Ich habe einen Verweis zum Hinzufügen des Bildes zum 'Titel' gelesen, möchte aber, dass dieses Symbol wie die Kommentarblase aussieht.

9
LPH

Vollständiges Beispiel

Ein schnelles (Mu-) Plugin als Beispiel:

<?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,
        ),
    ) );
} );

Wodurch der folgende HTML-Code als erstes Element gerendert wird (und daher auch unsere Admin-Leiste unbrauchbar wird, aber darum geht es in diesem Beispiel nicht):

<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>

Jetzt, wo wir eine Basis haben, können wir uns kümmern um ...

Icons hinzufügen

Die traurige Nachricht: Es gibt keine einfache Möglichkeit, dies zu tun. Zumindest nicht ohne ein eigenes Stylesheet hinzuzufügen. Wie Sie (im Code) lesen können, geschieht Folgendes: Ich habe den HTML-Code vorangestellt, der erforderlich ist, um ein Dashicon vor dem eigentlichen Element zu setzen. Dann habe ich der Aktion eine sehr hohe Ganzzahl als letzte Zahl hinzugefügt - das bestimmt die Position des Elements in der Administrationsleiste.

<?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 */ );
}

Schließlich müssen Sie einige CSS-Regeln in Ihr eigenes Stylesheet einfügen. Der einzige bewegliche Teil ist die wpse im #/id. Der Rest ist konstant und für alle Elemente/Knoten der Administrationsleiste gleich. Möglicherweise müssen Sie auch die Position top anpassen, um sie an das Dashicon anzupassen. Wählen Sie einfach ein Dashicon von der Site aus und fügen Sie den Code fXXX in das unten stehende CSS ein.

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

um die Antwort von Kaiser zu erweitern, können Sie das Symbol auch mit einer benutzerdefinierten Bild-URL überschreiben und die Stile inline setzen (oder separat, wenn Sie möchten), z. ein 22 x 22 Pixel großes Symbol ...

$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' ),

dann benutze für den Titelwert:

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