【wordpress】ブロックエディタのフォント変更

wordpressというものでこのブログを書いています。

世界のウェブサイトの8割だか9割だかはこれで作られてるという超大手ツール、お絵かきで言うphotshopのような存在です。

少し前にこの管理画面が大幅変更になりまして、エディタがブロックエディタというものになりました。

が、これがなんともまあ使いにくい。
慣れれば編集がドラッグドロップでできたりあれこれ埋め込みやすかったりと利点がなくはないんですが、なによりこの明朝体がいけすかねえ。

wordpressは開発が海外なのでそこはかとなく日本語フォントがおざなり。
この明朝が嫌すぎていつもメモ帳かgoogleドキュメントで下書きしてます。

が、エディタを表示画面と近づける方法があるみたいなので、実装の覚書としてここにかいときます。

実装方法

wordpressに機能追加をするには大きくわけて「プラグインを探してくる」「function.phpに記入する」の二つ。
前者も要はfunction.phpに変更を加えたかのようなプログラムの一式ってことなんですが、まあ。

/* ブロックエディタの見た目をテーマデザインに合わせる */
/* https://mimpiweb.net/block-editor-css-customize/ */
/* ------------------------------------------------ */
function custom_block_editor_css(){
    add_theme_support( 'editor-styles' ); // この1行を追加しないと、テーマ内の style-editor.css は読み込まれない
    add_editor_style( 'style-editor.css' ); // テーマ内にファイルを作成しておき、この中に必要な CSS を記述していく
}
add_action( 'after_setup_theme', 'custom_block_editor_css' );

エディタ用に読み込ませるcssに、ブロックエディタでどのフォントを使わせるか設定。
今回の場合style-editor.cssですね。

.wp-block * {
	font-family: Verdana, Roboto, "Droid Sans", "メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif !important;
}
/* ダッシュアイコンが上書きされないように追記 */
.wp-block[data-type="core/freeform"] .mce-btn i {
	font-family: dashicons !important;
}

ここが大事で、このmce-btnってclassのdashiconsがエディタの絵文字表記です。これがないとエディタのアイコンが表示されなくなるのでだいじ。

かわりました。

よかったよかった。