WordPressのツールバーにアイテムを追加する機能があります。例えば:
$args2 = array(
'id' => 'conversations_unread',
'title' => $visitor['conversations_unread'] . '   ',
'href' => XenForo_Application::get('options')->boardUrl . '/conversations'
);
この新しいアイテムの左側にアイコンを表示するにはどうすればよいですか。
'meta'を使用しようとしましたが、アイコンが表示されません。
'meta' => array( 'class' => 'ib-icon' ),
私は「タイトル」に画像を追加することへの参照を読みましたが、私はこのアイコンをコメントバブルのようにしたいです。
例として簡単な(mu)プラグイン:
<?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,
),
) );
} );
これは、最初の要素として次のHTMLをレンダリングします(したがって、管理バーも役に立たなくなりますが、これはこの例の目的ではありません)。
<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>
基地ができたので、気にすることができます...
悲しいニュース:それをする簡単な方法はありません。少なくともあなた自身のスタイルシートを追加せずに。あなたが(コードで)読むことができるように、起こることがいくつかあります:私は実際のアイテムの前に Dashicon をラップするために必要なHTMLを追加しました。それからアクションの最後の数字として非常に高い整数を追加しました - それが管理バーの項目の位置を決めるものです。
<?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 */ );
}
最後に、あなた自身のスタイルシートにいくつかのCSSルールを追加する必要があります。唯一の動いている部分は#/id
のwpse
です。残りは一定で、すべての管理バー項目/ノードで同じです。 Dashiconに合わせてtop
の位置を調整する必要があるかもしれません。自分のサイトからDashiconを選択して、以下のCSSにfXXX
コードを追加するだけです。
#wpadminbar #wp-admin-bar-wpse .ab-icon:before {
content: '\f306';
top: 3px;
}
カイザーの答えを広げるために、カスタム画像のURLでアイコンを上書きしてスタイルをインラインにすることもできます(または、必要に応じて別々に)。 22ピクセルx 22ピクセルのアイコン...
$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' ),
それからタイトルの値に使用します。
'title' => $iconspan.$title,