새 관리자 모음 항목에 아이콘을 추가하려면 어떻게합니까?

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

— LPH
소스

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. 나머지는 모든 관리 표시 줄 항목 / 노드에 대해 일정하고 동일합니다. topDashicon에 맞게 위치를 조정해야 할 수도 있습니다 . 사이트에서 Dashicon을 선택하고 fXXX아래 CSS에 코드를 추가하십시오 .

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

— 황제
소스

2

카이저의 답변을 확장하기 위해 사용자 정의 이미지 URL로 아이콘을 재정의하고 스타일을 인라인으로 (또는 원하는 경우 다시 개별적으로) 넣을 수도 있습니다. 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,

— 마빅
소스