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

• 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のトラブル解決相談始めました！

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

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

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

The post WordPress管理画面でアイコン表示されない時の簡単な対処法 first appeared on Fukuro Press.

WordPressでは管理者としてログインしてる場合、管理バー(ツールバー)が表示されます。

管理画面だけに表示ならいいんですが、投稿ページを編集して下書きした記事やプレビューを見た時にも表示されてしまうので、サイトデザインが確認しにくいです。

そこで WordPressで全編集ユーザーに対して管理バー非表示にする方法 を解説します。

管理バー（ツールバー）が邪魔に感じる

そもそも管理バーとはWordPress3.1以降で追加された管理画面などの上部に表示される次のようなバーのことです。

トップページや編集画面へのリンクや記事の編集ボタンなどが表示されています。

管理画面でこれが表示される分には問題ないですが、ページプレビューでも管理バーは表示されてしまいます。

サイトのデザインが正しく確認できなくなるうえに。ページのプレビュー画面だと管理バーは管理画面に戻るくらいしか使いません。

だから表示する意味はあまりなし。非表示推奨です。

ユーザー単位で管理バーを非表示にする方法

最初に各ユーザーで個別に管理バーを非表示にする方法を解説します。

まず管理バーを非表示にするにはメニューの「ユーザー」ー＞「あなたのプロフィール」で現在ログインしているユーザーのプロフィール画面を開きます。

プロフィールの中で次のような「ツールバー」という設定項目を探します。

上の画像のように「サイトを見るときにツールバーを表示する」にチェックが入っていると思うので次のようにチェックを外してください。

チェックを外したら下の方にある「プロフィールを更新」ボタンを押すとプロフィールが更新され、サイトを開いたときに管理バーが表示されなくなります。

全てのユーザーで管理バーを非表示にする方法

次にWPログインしている全ユーザーに対して管理バーを非表示にする方法を解説します。

一括で非表示にするには「Hide Admin Bar」というプラグインが便利。

メニューから「プラグイン」ー＞「新規追加」と進んで「admin bar」などと入力して検索すると、検索結果に次のプラグインが表示されるので「今すぐインストール」を押してインストールしてください。

以下のURLから直接ダウンロードして使うことも可能です。

https://ja.wordpress.org/plugins/hide-admin-bar/

インストールしたら「有効化」ボタンを押して有効化してください。
これだけでサイトを開いたときに管理バーが非表示 になります。

特に設定画面もない模様。
プラグインを入れ続けていれば管理バーが表示されなくなるようです。

まとめ

管理バーがサイトにまで表示されると正しいデザインが確認できない上にあまり役立つことは無いので非表示にした方がいいです。

今回紹介したように、管理バーを非表示にするにはプロフィールから管理バーを非表示にする設定をするか、「Hide Admin Bar」などのプラグインを使って非表示にする２つの方法があります。

複数人で運営しているのでないならプラグインを入れなくてもプロフィールから設定で十分です。もし複数人で運営しているならプラグインを導入しましょう。

The post WordPressで管理バー(ツールバー)を全てのユーザーで非表示にする方法 first appeared on Fukuro Press.