WordPress管理画面でアイコン表示されない時の簡単な対処法

つい最近こういう現象に遭遇しました。

• WordPressを最新版にアップデート
• 管理画面で一部アイコンが表示されない
• TinyMCEとかのアイコンも表示されない

アイコンはなくても困らないものの…
表示されないと少しモヤモヤします。

その修正方法とかをまとめてみました。

経緯．WordPress5.8.1更新でそのトラブルは起きた

WordPress4.x.xで運営してたブログがあります。

それを最新の5.8.1に更新した時のことです。

更新は成功したけど何か違和感があるんですよね。

↓ 管理画面バーのアイコンが表示されてない！

↓ TinyMCEのアイコンは全部 □ になっていた...

まず気づいたのは管理バーの異変でした。左上のWordPressマークも表示されていないし、その他のアイコンも表示されないようになってしまってます。

そしてさらに驚いたのは編集画面です。クラシック編集する時のTinyMCEのアイコンがごっそり消えてしまってました。さすがにこれは困ります (-_-;)

というわけで修正を試みました。

原因．アイコン表示されない原因は何だったのか

まず原因から探ってみることに

例えば管理バーではこんなHTML・CSSが適用されていました。

↓ 左上WordPressアイコンのHTML

<a class="ab-item" aria-haspopup="true" href="http://www.jis-school.jp/wp-admin/about.php"><span class="ab-icon" aria-hidden="true"></span><span class="screen-reader-text">WordPress について</span></a>

↓ アイコン表示に使われてたCSS

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

どうやら .ab-icon というのがアイコン共通のクラス名で、あとはそれを囲んでる要素のID・クラスで表示するアイコンを変えてるみたいです。

上記CSSの content: "\f120"; みたいなのがアイコンの中身を表す記号なんですが、その読み込みに失敗しているようでした。その修正が必要だと判明します。

修正．font-family: 'dashicons'; を指定すればOK

それでググってみたところ・・・

WPではDashiconsでアイコン表示してるようです。

↓ WP開発者向けの解説

Dashicons is the official icon font of the WordPress admin as of 3.8.The Dashicons project is no longer accepting icon requests.

引用元 : https://developer.wordpress.org/resource/dashicons/

↓ このようなことが書いてある

DashiconsはWordPress3.8以降の公式なアイコンフォントです。ただしDashiconsプロジェクトは新しいアイコンの追加に応じるということはありません。

独自のアイコンセットを使用してたんですね。

だから明示的にfont-familyを指定すれば解決します。

具体的にはテーマに直接コード追加します。

追加場所は使用中テーマの functions.php です。

▼ fucntions.phpに以下PHPコードを追加

/***
 * 管理画面のアイコン非表示を修正
 ***/ 
add_action('admin_head', 'fkr_custom_stylesheet');
function fkr_custom_stylesheet() {
  echo <<<EOM
 <style>
.ab-icon::before,
.mce-ico::before{
  font-family: 'dashicons'
}
 </style>
EOM;
}

単純に管理画面ヘッダーでCSS出力し、その中で font-family: 'dashicons' をアイコン要素に指定しているだけです。これで正常にアイコン表示されるようになりました。

ただし慎重に追加してください！

もし上コードの意味が全く分からず、「PHPってなに？ functions.phpってなに？ (　ﾟдﾟ)」という理解度なら絶対に試さないでください。自己責任でお願いします。

最後に．もし自力での問題解決が難しいなら…

アイコン表示されないなら、この方法を試してください。

でもどうしても自力で解決が難しいなら・・・

こういったサービスでの相談も受け付けています。

↓ WordPressのトラブル解決相談始めました！

Fukuro Press

WordPressのトラブル解決相談始めました！

こんにちは、フク郎という者です。WordPressでこういうトラブルに遭遇したことないですか？ 突然画面が真っ白になった ブログのデザインが崩れてしまった なぜかログインできなくなった カスタマイズが上手くいかない・・・なんでもググれば解決する世の中とはいえ・・・なかには自分の知識ではどうしようもない悩みってあるはずです。 そこで！WordPressのトラブル解決相談をココナラで始めました。↓ こちらのサービスWordPressトラブルの相談・解決します なんでも相談OK！作業の代行依頼も可能です!function(d,s,id){var j...

もちろん以下のような問題にも対応可能です。

• 突然画面が真っ白になった
• ブログのデザインが崩れてしまった
• なぜかログインできなくなった
• カスタマイズが上手くいかない・・・

以上、WP管理画面でアイコン表示されない対処法でした。