如何将图标添加到新的管理栏项目？

10

我有一个将项目添加到WordPress工具栏的功能。例如：

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

如何在此新项目的左侧获得图标？

我尝试使用“元”，但图标未显示。

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

我阅读了有关将图像添加到“标题”的参考，但我希望此图标像评论气泡一样。

admin-bar

— 液化石油气
source

13

完整的例子

以快速（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规则。唯一的运动部件是wpse在#/id。其余部分是恒定的，并且对于所有管理栏项目/节点都是相同的。您可能还需要调整top位置以适合Dashicon。只需从他们的站点中选择一个Dashicon并将fXXX代码添加到下面的CSS中即可。

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

— 凯撒
source

2

为了扩展kaiser的答案，您还可以使用自定义图片网址覆盖该图标，然后将样式内联（或根据需要再次单独放置），例如。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 = __( 'Example', 'some-textdomain' ),

然后使用标题值：

'title' => $iconspan.$title,

— 马吉克
source