Replace admin bar logo

时间：2013-12-12 作者：Oudin

WordPress 3.8已发布，我有以下代码来删除管理栏徽标。

 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);

但是，我想知道如何用我自己的徽标（上传）而不是dashicon来替换它？

4 个回复

SO网友:Ipstenu

由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;`

SO网友:Behemoth

我也在寻找同样的方法，但没有找到“胡克”的方法来改变它。但这里有另一种解决方案：它有两种可能的方法。假设我们使用的是那边的一些图像图标，让它成为您的品牌/站点图标
First method: (Easy) 在函数中使用上载的png徽标。php/插件文件

function dashboard_logo() {
    echo \'
        <style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo>.ab-item {
    padding: 0 7px;
    background-image: url([URL]LOGO.PNG) !important;
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
}
#wpadminbar #wp-admin-bar-wp-logo>.ab-item .ab-icon:before {
    content: " ";
    top: 2px;
}
        </style>
    \';
}
add_action(\'wp_before_admin_bar_render\', \'dashboard_logo\');

Second method: Dashicon方法：使用自定义dashicons/图标字体
Create your own icon files.
您可以使用IcoMoon。How to create the icon file?
在SVG中创建图标，并使用icomoon从SVG生成字体文件
现在将字体添加到标记中。

function dashboard_logo() {
    echo \'
        <style type="text/css">
@font-face {
    font-family: "UR_ICON_NAME";
    src: url(\'[TEMPLATE_DIRECTORY]/fonts/UR_ICON_NAME.ttf\'),
         url(\'[TEMPLATE_DIRECTORY]/fonts/UR_ICON_NAME.eot\');
}
#wpadminbar #wp-admin-bar-wp-logo>.ab-item .ab-icon:before {
    content: "[\\UNICODE]";
    top: 2px;
}
        </style>
    \';
}
add_action(\'wp_before_admin_bar_render\', \'dashboard_logo\');

请根据您的需要使用准确的URL和unicode
更换[TEMPLATE_DIRECTORY] 和[\\UNICODE].
Explanation:
我没有找到任何钩子来以非常简单的方式改变这一点，而且它在旧版本中也不可用。如果有，请在下面的评论中告诉我
不过，我们的想法是覆盖css并使用您自己的图标文件，而不是默认的图标文件。在以前的版本中，WP使用了带有背景属性的png图像图标，但该属性很容易覆盖
最新版本的WordPress正在为此使用图标字体（dashicons）方法，而且此图标集还有其他图标。因此，如果你只想更改WordPress图标，就不能简单地删除它。

SO网友:Pmpr

您可以这样放置自己的徽标：

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\' );

但是，如果您想完全删除相应的Wordpress菜单，包括W徽标及其子菜单内容，然后添加您自己的徽标，您可以这样做：

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;
}

SO网友:Maher Aldous

使用此插件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\');

结束

小码农CODE

Replace admin bar logo

相关推荐

Different logo on homepage