ホーム > 投稿記事 > エディタのフォントを設定する方法(WordPress5.4以降)

エディタのフォントを設定する方法(WordPress5.4以降)

投稿日 : 2020年04月14日
カテゴリー : WordPress
エディタのフォントを設定する方法(WordPress5.4以降)の画像

こんにちわ、PHPエンジニアのエンジニア婦人(@naho_osada)です。
私はPHPエンジニアとして6年~の経験があります。WordPressは2年~の経験があります。
ここでは主に過去に納品した案件や自サイト運営(エンジニア婦人ノート)で遭遇したことについて書いています。

WordPress5.4以上のアップデートに伴い、Nao Lightは
「管理画面のエディタのフォントが適用されていない!」
問題を修正しました。

しかし、従来は適用されていたのに、どうして適用されなくなったのか?

原因:「そのクラスCSSが適用されなくなったから」

単純な話です。指定していたクラスのCSSが適用されなくなりました。

どうも、指定はちゃんと入っているものの、別のCSSで上書きされていたようです。

適用できる新しい書き方

管理画面のエディタに指定のフォントを適用するには、テーマ直下に「editor-style.css」を配置します。
そのファイルをfunction.phpで読みこませるように指定することで、その中に書いたCSSが反映されます。

editor-style.cssは以下の通りです。

div.editor-styles-wrapper {
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}

「div.editor-styles-wrapper」です。divタグの中のeditor-styles-wrapperに適用させることで、エディタに指定のフォントを反映されるようになります。

参考)従来の書き方

.editor-block-list__block {
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}

今まではこれで適用されましたし、検索するとこのやり方が当たると思います。
しかし、適用範囲を確認してみるとわかりますが、これだと5.4以降は上書きされています。

参考)管理画面のエディタにeditor-style.cssを適用させるfunction.phpの書き方

以下のようになります。「enqueue_block_editor_assets」にアクションフックをかけます。

function customEditorSettings() {
    wp_enqueue_style('theme-editor-style', get_stylesheet_directory_uri() . '/editor-style.css');
}
add_action('enqueue_block_editor_assets', 'customEditorSettings');

楽しい物造りを

NaoLight

自分のブログやサイトを、楽しく作ってもらえたら。

プログラムを使って望み通りに、拡張しやすく、自分の思うように。

できたときに、すごく楽しい!と思ったら。

控えめに言って、「最高です」。

NaoLight -NAOT-(なおらいと、なおと、と呼んでください)はそんな思いをカタチにする、WordPressのテーマです。

ご購入はこちらからお願いします(BOOTHへ移動します)。

Nao Light-NAOT-公式サイト



この記事にコメントする

入力エリアすべてが必須項目です。承認制のため、表示までに時間がかかる場合があります。

CAPTCHA


内容を確認の上、コメントをお願いします。