例えば当HPではコードを表示する際、ファイル名を下記のようにデザインしています。
このファイル名は用意されたものではなく、自分で作成したものなのですが、エディタでは反映されていません。
これでは記事を書いているときに、ファイル名のデザインを適用させただろうか？と不安になって確認するのが手間でした。
そこで今回は、エディタに自作したCSSを適用させる方法について解説していきます。
ブロックエディタ、クラシックエディタの両方で解説しますね。
エディタにCSSデザインを反映させる
ブロックエディタにCSSデザインを適用
今回はWordPress管理画面の「テーマ」→「テーマファイルエディター」を開くと出てくる「style.css」に独自のCSSを記載することとします。
ここに書きたくない場合や、専用のCSSファイルを用意したい場合はお手数ですが、契約しているサーバーの管理ページからWordPressフォルダに入り、CSSファイルを配置するようにしてください。
さて、テーマに用意されている「functions.php」を開き、以下を末尾に追加してください。
|
1 2 3 4 5 6 7 8 |
//ブロックエディターに追加CSSを反映 function block_editor_css() { add_theme_support( 'editor-styles' ); add_editor_style( 'style.css' ); //add_editor_style( 'style2.css' ); 複数指定も可能 } // アクションフックに登録 add_action('after_setup_theme', 'block_editor_css'); |
お使いのWordPressサイトに機能を追加することを許可します。
今回はeditor-style、つまりエディタにCSSを反映させることを許可しました。
CSSファイルを追加しています。自作したCSSファイルを使用する場合は()の中を変更してください。
また複数指定することも可能で、その場合はadd_editor～の1行をコピーしてすぐ下に貼り付けてください。
WordPressで先ほど定義したblock_editor_css関数をフックしています。
after_setup_themeはfunctions.phpを読み込んだ後のタイミングを示します。
この処理で、エディタにCSSが適用されることになります。
コード追加後はfunctions.phpを保存して、エディターを開いてみましょう。
適用されていれば成功です。
クラシックエディタにCSSデザインを適用
プラグイン等を使用してクラシックエディタを使用している場合も、functions.phpの編集でCSSデザインの反映が可能です。
クラシックエディタの場合はブロックエディタよりも簡単で、functions.phpに下記のコードを追加するだけです。
|
1 2 |
//クラシックエディターに追加CSSを反映 add_editor_style('style.css'); |
これだけで、以下のようにエディタにCSSが反映されます。
以上、WordPressのエディタにCSSデザインを反映させる方法でした。
プレビューを見るよりも、執筆中にデザインが見えることでスピードも意欲も上がると思います。
お使いのWordPressに反映する助けになったのならば幸いです。