★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

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

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

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

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

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

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

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

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

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

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

WordPress管理画面にて - なぜか管理バーのアイコンが表示されなくなった

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

WordPress編集画面にて - 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のトラブル解決相談始めました!

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

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

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

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。