WordPress 管理画面の favicon と ツールバーのアイコンをロゴにしたい - かもメモ

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

WordPress 管理画面の favicon と ツールバーのアイコンをロゴにしたい

WordPress PHP Tips CSS

⛳️ Goals

WordPress で作ったサイトの管理画面にログインしてる時、とのサイトだっけ？ってならないように管理画面の favicon と ツールバーの home アイコンをロゴに変更したい (納品するサイトの場合、こういうちょっとした部分で評価高くなりますし)

Wordpress Admin

Versions

WordPress 6.7
PHP 8

1. favicon の変更

ログイン画面の head に何かを出力できる login_head アクションと、管理画面の head に何かを出力できる admin_head アクションを使って、favicon の HTML を出力すれば OK

function.php

<?php
add_action('login_head', 'my_custom_admin_head');
add_action('admin_head', 'my_custom_admin_head');
function my_custom_admin_head() {
  $template_uri = get_template_directory_uri();
  $favicon = esc_url( $template_uri . 'favicon.svg');
  echo '<link rel="icon" type="image/svg+xml" href="' .  $favicon . '">';
}

2. ツールバーのアイコンの変更

管理画面に CSS を追加して、ツールバーのアイコンをロゴに変更する WordPress の用意しているアイコンを使う場合は content を変更すれば良いが、今回は自前で用意した SVG のロゴを使用する 先の関数内で CSS を出力するようにすればOK

functions.php

<?php
add_action('login_head', 'my_custom_admin_head');
add_action('admin_head', 'my_custom_admin_head');
function my_custom_admin_head() {
  $template_uri = get_template_directory_uri();
  // favicon を追加
  $favicon = esc_url( $template_uri . 'favicon.svg');
  echo '<link rel="icon" type="image/svg+xml" href="' .  $favicon . '">';
  
  // ツールバーのアイコンをロゴに変更$style = <<< EOM
<style type="text/css">
.wp-admin #wpadminbar #wp-admin-bar-site-name > .ab-item:before {
  content: " ";
  // WordPress の CSS を打ち消すために !important が必要
  background-image: url({$template_uri}/images/logo.svg) !important;
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
  width: 20px;
  height: 30px;
  top: 2px;
  padding: 0;
  box-sizing: border-box;
}
</style>
EOM;

  echo $style;
}

変更したい箇所のセレクタを拾ってきて、background-image でロゴ画像を表示させるようにするだけ
WordPress デフォルトの CSS で !important が使われている場合があるので、セレクタの詳細度で上書きできるように CSS ちからが少し必要になる

これで favicon と ツールバーのアイコンを ロゴに変更することができた！

WordPress 管理画面の favicon と ツールバーのアイコンをロゴに変更

📝 WordPress のアイコンを使う方法

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

対象のとなるセレクタの content に使用したいアイコンのコードを指定すれば良い
アイコンのコードは Dashicons | Developer.WordPress.org から取得できる

おわり

[参考]

WordPressオリジナルテーマ制作入門

WordPressオリジナルテーマ制作入門

Amazon

機動戦士ガンダム 水星の魔女 Original Soundtrack (アナログ盤) (特典なし) [Analog]

機動戦士ガンダム 水星の魔女 Original Soundtrack (アナログ盤) (特典なし) [Analog]

Amazon