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,
),
) );
} );
Dies macht den folgenden HTML-Code als erstes Element (und macht daher auch unsere Admin-Leiste unbrauchbar, 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 um ... kümmern.
Hinzufügen von Symbolen
Die traurige Nachricht: Es gibt keinen einfachen Weg, dies zu tun. Zumindest nicht ohne ein eigenes Stylesheet hinzuzufügen. Wie Sie lesen können (im Code), passieren einige Dinge: Ich habe den HTML-Code vorangestellt, der zum Umschließen eines Dashikons vor dem eigentlichen Element erforderlich ist. Dann habe ich der Aktion eine sehr hohe Ganzzahl als letzte Zahl hinzugefügt - das bestimmt die Position des Elements in der Admin-Leiste.
<?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 der wpse
in der #/id
. Der Rest ist konstant und für alle Elemente / Knoten der Admin-Leiste gleich. Möglicherweise müssen Sie auch die top
Position an das Dashicon anpassen. Wählen Sie einfach ein Dashicon von der Website aus und fügen Sie den fXXX
Code im folgenden CSS hinzu.
#wpadminbar #wp-admin-bar-wpse .ab-icon:before {
content: '\f306';
top: 3px;
}