会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

【Cocoon】(上手くいかないパターン)editor-style.cssでSEO、カスタムCSS、カスタムJavascript欄を非表示にしてみる

WordPress(ワードプレス)
この記事は約3分で読めます。

Cocoonの投稿のパネル設定でON・OFF

前回は、投稿のパネル設定で「SEO、カスタムCSS、カスタムJavascript欄を非表示にする方法」について書きましたが、前回の方法の場合は、「ブラウザ単位」での設定になっているようでしたので、ブラウザを変更したり別のPCでは毎回オン・オフの設定をするという手間が掛かります。

同じユーザーでもブラウザが変わると設定が初期化されてしまう?

今回は「editor-style.css」を編集して、すべてのユーザーに対して、投稿画面上から不要なパネルを非表示にする方法について試してみたいと思います。

ビジュアルエディターのスタイルシート (editor-style.css)

このビジュアルエディターのスタイルシート (editor-style.css)を使うと、投稿や固定ページの新規追加や編集時のエディタ画面のCSSをカスタマイズすることができます。

Editor Style - WordPress Codex 日本語版
関数リファレンス/add editor style - WordPress Codex 日本語版

この子テーマの「editor-style.css」にエディター画面のCSSを上書きしたり新たに追加することで、エディター画面のデザインを変更することができます。

タイトルのフォントサイズを変更

.editor-post-title .editor-post-title__input {
    font-size: 4.625rem;
}

例えばこのように変更すると、もともと設定してあるフォントサイズを大きくすることができます。タイトルを打ち込みやすいようにフォントサイズを大きくしたい・・・という場合などに便利です。

editor-style.cssが効かない(反映されない)?

もしCSSを追記してもCSSが変わらない場合は、cocoon設定の可能性もあります。

Cocoon設定>エディター

Cocoon設定>「エディター」の中に「エディタースタイル」という設定があります。

エディタースタイル

エディターにテーマスタイルを反映させる
(i)無効にするとWordPressデフォルトのエディターになります。

こちらの設定が解除されていないか?確認してみましょう。

edit-post-layout__metaboxes

「edit-post-layout__metaboxes」部分が「SEO、カスタムCSS、カスタムJavascript欄」を表示しているCSSのクラス名のようでしたので、こちらの表示をdisplay: none;することで欄が消えそうです。

・・・が、うんともすんとも消えませんでした。もしかすると、この「SEO、カスタムCSS、カスタムJavascript欄」は、このeditor-style.cssよりも後に読み込まれている?可能性がありそうです。

まとめ

editor-style.cssを使ってエディター画面のCSSを変更する方法でした。

タイトルのフォントサイズやエディター内のフォントファミリーなどは変更できましたが、「SEO、カスタムCSS、カスタムJavascript欄」が今回のCSS設定では上手く変更することができませんでした。

カスタムCSSあたりはアクションフックで読み込んでいるかと思われますので、おそらく読み込む順番の問題かな・・・?などと考えましたが、今のところ、まだ分かっておりません・・・><。また分かりましたら追記したいと思います。

次回は別の方法を試してみたいと思います。ご参考ください😃

タイトルとURLをコピーしました