こんにちわ、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 -NAOT-(なおらいと、なおと、と呼んでください)はそんな思いをカタチにする、WordPressのテーマです。