投稿画面に:root{}で設定したフォントファミリー・フォントサイズを読み込んで、インラインCSSを適用する。

非常に分かりにくいので、要件を箇条書きにします。

d7r.comではオリジナルテーマを採用しています。
テーマではサイトで使用するフォントを選択できます。
基本フォントはゴシック体・明朝体を選択でき、functions.phpでfont_01に保存され、get_option(‘font_01’)で呼び出せます。
style.cssで下記を指定します。

:root {
--font-family01 : <?php echo get_option('font_01'); ?>;
}

この、サイトで使用するフォントを投稿画面にも反映させようと思ったのですが、ハマりました。

Table of Contents

functions.phpでテーマ設定画面を作成

ダッシュボードに「FWCフォント設定」メニューを設置

if ( !function_exists( 'fwc_font_settings_menu' ) ) {
add_action('admin_menu', 'fwc_font_settings_menu'); // 管理画面に「フォント設定」メニューを追加
function fwc_font_settings_menu() {
add_menu_page(
'FWCフォント設定',
'FWCフォント設定',
'administrator',
'fwc_font',
'fwc_font_settings_page',
'dashicons-editor-textcolor',
97
);
}

設定保存用変数設定

add_action( 'admin_init', 'register_fwc_font_settings' ); //設定を保存する変数をワードプレスが実行されるときに呼び出します
//設定をワードプレスに登録
function register_fwc_font_settings() {
//フォント01
register_setting( 'fwc_font_settings-group', 'font_01' );
//フォントサイズ
register_setting( 'fwc_font_settings-group', 'font_size' );
}
デフォルト値設定

// 文字サイズ・色・ボックスサイズのデフォルト値を設定
function fwc_set_default_option() {
if (get_option('font_01') == false) {
update_option(
'font_01',
"'Yu Gothic', YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif"
);
}
if (get_option('font_size') == false) {
update_option(
'font_size',
'16px'
);
}
}
add_action('admin_init', 'fwc_set_default_option');

指定表を作成

//指定表
function fwc_font_settings_page() {
echo "<div class=\"fwc_setting-wrap\">";
echo "<form method=\"post\" action=\"options.php\">";
settings_fields( 'fwc_font_settings-group' );
do_settings_sections( 'fwc_font_settings-group' );
echo "<h2>フォント指定</h2>";
echo "<div class=\"keyword_settings\">";
echo "<dl>";
echo "<dt>基本フォント（font-01）</dt>";
echo "<dd><select name=\"font_01\">";
if(strpos(get_option('font_01') , "Yu Gothic")) {$selected_gothic = "selected";}
echo "<option value=\"'Yu Gothic', YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif\"" . $selected_gothic . ">";
echo "ゴシック体";
echo "</option>";
if(strpos(get_option('font_01') , "Yu Mincho")) {$selected_micho = "selected";}
echo "<option value=\"'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', 'MS PMincho', serif\"" . $selected_micho . ">";
echo "明朝体";
echo "</option>";
echo "</select></dd>";
echo "</dl>";
echo "<dl>";
echo "<dt>ベースフォントサイズ</dt>
<dd><input type=\"text\" name=\"font_size\" value=\"" . esc_attr( get_option('font_size') ) . "\"/></dd>";
echo "</dl>";
echo "</div>";
echo "<p style=\"clear:both\"></p>";
submit_button();
echo "</form>";
echo "</div>";
}
}

サイトで設定の反映を確認

https://pochilog.jp/23538

設定を変更します。

反映されました。

ダッシュボードの投稿画面でもサイトと同じフォントを使いたい

functions.phpに下記を指定します。

/*--------------------------------------------------------------------------------------------------------------------------
管理画面にオリジナルのスタイルを適用
--------------------------------------------------------------------------------------------------------------------------*/
add_editor_style("css/fwc-admin.css");
add_editor_style("css/normalize.css");
add_editor_style("css/adsense.css");
add_editor_style("style.css");
add_editor_style("editor-style.css");
add_editor_style("webfonts/all.min.css");
if ( ! isset( $content_width ) ) $content_width = 1000;
function custom_editor_settings( $initArray ){
$initArray['body_id'] = 'primary';
$initArray['body_class'] = 'post';
return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

css/fwc-admin.cssの中身。

@charset "UTF-8";
/*--------------------------------------------------------------------------------------------------------------------
エディタ設定
--------------------------------------------------------------------------------------------------------------------*/
body.mceContentBody {
margin : 0 10px;
font-family : 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
font-size : 16px;
}
body.mceContentBody * {
}

font-familyを変数に変更。

body.mceContentBody {
margin : 0 10px;
font-family : var(--font-family01);
font-size : var(--font-size);
}
body.mceContentBody * {
}

すると、投稿画面にフォント指定が反映されません。

原因追及

css/fwc-admin.cssの中の変数が評価されない。
functions.phpに下記を追記しても有効にならない。

function fwc_set_root_style() {
include_once( get_template_directory_uri() . '/css/fwc-admin.css' );
}
add_action('admin_head', 'fwc_set_root_style');

これは、投稿画面の<head>に読み込まれるため。実際の投稿編集画面は<iframe>内に別の<head>〜<body>があるため、上記では有効化されない。

解決

/*--------------------------------------------------------------------------------------------------------------------------
投稿画面にfwc-root.phpで設定したフォントファミリー・フォントサイズを読み込んで、インラインCSSを適用する
--------------------------------------------------------------------------------------------------------------------------*/
function fwc_custom_tinymce_styles( $settings ) {
$font_family = get_option('font_01');
$font_size = get_option('font_size');
$settings['content_style'] = 'body.mceContentBody {font-family:' . $font_family . ';font-size:' . $font_size . ';}';
return $settings;
}
add_filter( 'tiny_mce_before_init', 'fwc_custom_tinymce_styles' );

ポイントはadd_filter( ‘tiny_mce_before_init’,でした。

add_editor_style("css/fwc-admin.css");

はTinyMCE（クラシック投稿エディタ）に独自のスタイルシートを読み込んでくれます。しかしスタイルシート以外のファイルを読み込んでくれる関数は用意されていません。

そこで

function fwc_custom_tinymce_styles( $settings ){}

で設定した$settingsをadd_filterでtiny_mce_before_initに渡しています。

スタイルシートfwc-admin.cssと、一部二重設定になって手間ですが、確実に動きます。

引き渡し項目が膨大な場合はちょっと困りそうですね。