在WordPress上添加一个彩虹管理栏

WPOCN WordPress教程评论阅读模式

在WordPress上添加一个彩虹管理栏-图片1

WordPress上将其管理栏从正常的黑色或蓝色更改为彩虹色。

将以下代码添加到当前主题函数模板functions.php 中:

<?php

/*
* 在WordPress上添加一个彩虹管理栏 - 糖果博客
* https://www.tghello.com/1556.html
*/

function rainbow_bar() {
?>
<style type="text/css">
#wpadminbar {
background: linear-gradient(
to bottom,
#e24c3e 0%,
#e24c3e 16.66667%,
#f47d3b 16.66667%,
#f47d3b 33.33333%,
#fdb813 33.33333%,
#fdb813 50%,
#74bb5d 50%,
#74bb5d 66.66667%,
#38a6d7 66.66667%,
#38a6d7 83.33333%,
#8c7ab8 83.33333%,
#8c7ab8 100% );
}

#wpadminbar,
#wpadminbar .quicklinks > ul > li {
-webkit-box-shadow: unset;
-moz-box-shadow: unset;
box-shadow: unset;
}

#wpadminbar .ab-top-menu > li > a {
background-color: rgba( 50, 55, 60, .85 );
}
</style>
<?php
}
add_action( 'wp_before_admin_bar_render', 'rainbow_bar' );

将下面代码:

#wpadminbar .ab-top-menu > li > a {
background-color: rgba( 50, 55, 60, .85 );
}

更改为:

#wpadminbar .ab-item, #wpadminbar a.ab-item, #wpadminbar > #wp-toolbar span.ab-label, #wpadminbar > #wp-toolbar span.noticon,
#wpadminbar .ab-icon, #wpadminbar .ab-icon:before, #wpadminbar .ab-item:before, #wpadminbar .ab-item:after {
color: #000;
}

效果如下:

在WordPress上添加一个彩虹管理栏-图片2

仅对已登录的用户显示(除非您使用某些代码始终显示管理栏)。

文章末尾固定信息

weinxin
我的微信
微信扫一扫
 
WPOCN
  • 本文由 WPOCN 发表于 2020年12月8日08:28:53
  • 转载请务必保留本文链接:https://www.tghello.com/1556.html

发表评论