CodeCode

なんか色々おぼえ書き。だいたいweb制作関連。

WordPress5のGutenbergに記事ページと同じスタイルを適応させる

12月6日にWordPress5がリリースされました。 前々から言われていた通り、新ビジュアルエディタ Gutenberg が正式実装され投稿画面のインターフェイスが大幅に変化しました。

Gutenbergに記事ページと同じスタイルを適応させる

以前のエディタでもやっていましたが、せっかくビジュアルが強化されたので、CSSも記事ページと同じにしてより直感的に使えるようにカスタマイズします。

functions.php に読み込むCSSを指定してやります。

function editor_style() {
    add_theme_support( 'editor-styles' );
    //CSSのパス
    add_editor_style( 'editor.css' );
}
add_action( 'after_setup_theme', 'editor_style' );

記事ページの記事本文用のCSSを抜き出したものを用意します。

.editor-post-title__input{
    font-size: 30px;
    color: #000;
}

h2{
    font-size: 20px;
    color: #000;
    border-left: solid 5px #58a1ff;
    padding-left: 1em;
}

p{
    font-size: 16px;
    color: #333;
}

Gutenberg は、add_editor_style 関数で指定した CSS のセレクタに .editor-styles-wrapper を自動で付与したCSS をインラインで出力しているため、毎回セレクタを調べて書く必要がなくなりました。 上のCSSのように、セレクタをそのまま記述できるのでメンテナンスしやすくなっています。

ただ、注意が必要なのは記事タイトルは h1 ではなく textarea になっているため、 .editor-post-title__input を指定しないといけません。

追記

デフォルトスタイルに @media only screen and (min-width: 768px)が指定してある場合があり、!important 等使わないと上書きできない場合があるようです。

トップへ戻る