web-dev-qa-db-ja.com

管理バーのロゴを置き換える

WordPress 3.8が出ましたadminバーのロゴを削除するための以下のコードがあります。

 function no_wp_logo_admin_bar_remove() {
    global $wp_admin_bar;
    $wp_admin_bar->remove_menu('wp-logo');
}
add_action('wp_before_admin_bar_render', 'no_wp_logo_admin_bar_remove', 0);

しかし、どのようにしてそれを私のロゴではなく私自身のロゴ（アップロード）に置き換えることができるのか知りたいですか？

admin-barlogo
2
Oudin

それはDashicon（フォントアイコン）とbefore文によって制御されます。

#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
content: '\f120';
top: 2px;
}

あなたが欲しいのはコンテンツ呼び出しを置き換えることです。

ここから内蔵Dashiconを使用してください： http://melchoyce.github.io/dashicons/ /

そのため、スマイリーはcontent: '\f328; `になります。

2
Ipstenu

このプラグインを使用 https://wordpress.org/plugins/white-label-cms/

または

このコードを試してください

function wpb_custom_logo() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/custom-logo.png) !important;
background-position: 0 0;
color:rgba(0, 0, 0, 0);
}
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
</style>
';
}

//hook into the administrative header output
add_action('wp_before_admin_bar_render', 'wpb_custom_logo');
0
Maher Aldous

あなたはこのようにそこにあなた自身のロゴを置くことができます：

function custom_admin_logo(){
    echo '
        <style type="text/css">
            #wp-admin-bar-wp-logo .ab-icon:before{ content:"" !important; }
            #wp-admin-bar-wp-logo .ab-icon{ background-image: url(path/to/your/logo.png) !important; }
        </style>
    ';
}
add_action( 'admin_head', 'custom_admin_logo' );

しかし、Wロゴとそのサブメニューを含む、対応するWordpressのメニューを完全に削除してから独自のロゴを追加する場合は、次のようにします。

function remove_wp_logo( $wp_admin_bar ){
    $wp_admin_bar->remove_node( 'wp-logo' );
}
add_action( 'admin_bar_menu', 'remove_wp_logo', 100 );

function add_my_own_logo( $wp_admin_bar ) {
    $args = array(
        'id'    => 'my-logo',
        'meta'  => array( 'class' => 'my-logo', 'title' => 'logo' )
    );
    $wp_admin_bar->add_node( $args );
}
add_action( 'admin_bar_menu', 'add_my_own_logo', 1 );

それからいくつかのCSSがあなたのために残りの部分をやらせてください：

.my-logo div{
    width: 32px;
    height: 32px;
    background-image: url( path/to/logo.png ) no-repeat;
}
0
Pmpr