カテゴリー

お問い合わせ

WordPressのブロックエディタを、デフォルトのCSSで公開画面とスタイルを合わせる一番簡単な方法


ここでは、標準で用意されているブロックエディタ（コアブロック）のクラス名を利用してスタイルをカスタマイズする方法をご紹介します。


スクリプトでコアブロックを覆うHTMLを生成したものにスタイルを適用したり、編集画面でも表示画面であるフロント側と同じcssを適用できるように、フロント側に存在するクラスを編集画面の入力エリアの直上に差し込むなどの方法があるみたいですが、運用していく中でいずれ必要になったときに挑戦してみます。

編集画面用のcssファイルを用意

フロント側である公開ページの見た目と、投稿を入力する編集画面の見た目を揃えるには、フロント側のcssとは別に編集画面用のcssファイルを読み込ませる方法をとることが多いです。


フロント用と同じ階層に新しく編集画面用のeditor-style.cssを追加します。


CSSファイルの場所

フロント用
/wp-content/themes/mytemplate/assets/css/app.css

編集画面用
/wp-content/themes/mytemplate/assets/css/editor-style.css



編集画面用のcssファイルを読み込ませるコードをfunctions.phpに記述します。
/wp-content/themes/mytemplate/functions.php

/**
 *ブロックエディタにcssを読み込む
 */
add_action('after_setup_theme','my_editor_support');
function my_editor_support(){
    add_theme_support('editor-styles');
    add_editor_style('assets/css/editor-style.css');
}

編集画面から標準ブロックエディタを呼び出す

WordPressのデフォルトで用意されているブロックをコアブロックと呼びます。

今回は、リストブロックを選択し、下書き保存します。

コアブロックのクラス名を調べる

フロント用のcssをそのままコピーしても編集画面では反映されないことがあります。

例えば投稿ページ用の構造が以下の場合、

/wp-content/themes/mytemplate/single.php

          <div class="post__content">
            <div class="content">
              <?php the_content(); ?>
            </div>
          </div>

app.css

.post__content ul li {
  padding-left: 1.25em;
  position: relative;
  line-height: 1.5;
  margin: .25em 0;
}


.post__content ul li:before {
  background-color: currentcolor;
  border-radius: 50%;
  color: inherit;
  content: "";
  display: block;
  height: 6px;
  left: 2px;
  position: absolute;
  top: calc(.75em - 3px);
  width: 6px;
  letter-spacing: normal;
}

編集画面では
<?php the_content(); ?>配下から展開されるのみなので、<div class=”post__content”>は存在しません。

この場合、app.cssから「.post__content」を削除したものをeditor-style.cssに書いてしまってもの良いのですが、管理画面の中にある全てのul liにスタイルが適用されてしまいます。

そんな時は、呼び出したブロックのクラス名を調査して、editor-style.cssに記述すれば良いでしょう。

検証ツールで編集画面のHTMLを調査

ブラウザの検証ツールで調べたいHTMLにカーソルを合わせると、複数のクラスが付与されているのが確認できます。

この中には「wp-block-⚫︎⚫︎⚫︎」があり、それがコアブロックのクラスになります。

リストブロックには「wp-block-list」が付与されていることが分かります。

フロント側のcssを編集画面用に手直し


今回は、フロント側css（app.css）の「.post__content ul」を.wp-block-listに置き換えて、editor-style.cssに貼り付けます。

保存して編集画面を確認すると、フロント画面と同じスタイルが適用されていることがわかります。

検証ツールでHTMLを選択すると、「 .wp-block-list li」の前に「.editor-styles-wrapper」クラスが追加されていることが分かります。

これは、wordpressが管理画面HTMLのルートの方に用意しているもので、自動で挿入されます。

ちなみに、リストブロックには以前は「wp-block-⚫︎⚫︎⚫︎」と言うクラス名がなく、近年付与されたそうです。

今後、WordPressの仕様が大きく変更されない限り、コアブロックには「wp-block-⚫︎⚫︎⚫︎」と言うクラス名が適用されると考えていますので、
開発中にカスタマイズしたコアブロックのクラス名を定期的に以下の表に追加していきたいと思います。

ブロック名ブロック表示クラス名
リストwp-block-list

以上で、コアブロックに手軽にcssをカスタマイズする方法の紹介を終わります。

PAGE TOP