Steamer Lane Studio技術備忘録WordPress

WordPressの小細工-adminバーのアイコンを任意の画像に変える

wordpress WordPressの小細工-adminバーのアイコンを任意の画像に変える
最終更新日: 2024年6月18日

小細工だが、管理画面adminバーのWPアイコンを任意の画像に変える。
ここでやっているサイトは基本コードにwp-ほにゃららを出さない。
ついでにここを何かのロゴにでも変えてやれば喜ばれる?

function change_admin_bar_logo() { ?><style>#wpadminbar #wp-admin-bar-wp-logo>.ab-item .ab-icon {width: 100px;height: 20px;}#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon::before {position:relative;display: inline-block;content: '';width: 100px;height: 20px;background-image: url(画像のパス);background-repeat:no-repeat;background-size:contain;filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(100%) contrast(100%);}</style><?php }add_action( 'wp_head', 'change_admin_bar_logo', 100 );add_action( 'admin_head', 'change_admin_bar_logo', 100 );

上記コードだと生成ページにstyleが入るので修正、is_adminで管理画面のみ適用へ。

// adminバーにあるロゴを変更
function change_admin_bar_logo() { ?>
<style>
#wpadminbar #wp-admin-bar-wp-logo>.ab-item .ab-icon {
width: 100px; height: 20px;
}
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon::before {
position: relative;
display: inline-block;
content: '';
width: 100px;
height: 20px;
background-image: url(https://inorinohi.ishitomo.com/images/inr_01.png);
background-repeat: no-repeat;
background-size: contain;
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(100%) contrast(100%);
}
</style>
<?php }
if (is_admin()) {
add_action('admin_head', 'change_admin_bar_logo', 100);
}