WordPress外観＞カスタマイズに追加項目「フォントオプション」を設定

オリジナルテーマを作成している際に、カスタマイザーに独自項目を追加したいことがあるかと思います。無料配布されているテーマや有料テーマでは当然のように設置されている「どのフォントにしますか？」のような項目を自分で追加設置する時に軽くハマってしまったので、完全に備忘録で記事にしました。

まずはfunctions.phpに記述

function add_customizer_options($wp_customize) {
    // カスタマイズセクションの追加
    $wp_customize->add_section('font_options', array(
        'title' => 'フォントオプション',
        'priority' => 10,
    ));

    // フォント選択オプションの追加
    $wp_customize->add_setting('font_family', array(
        'default' => 'default',
        'sanitize_callback' => 'sanitize_text_field',
    ));

    $wp_customize->add_control('font_family', array(
        'type' => 'radio',
        'section' => 'font_options',
        'label' => 'フォント選択',
        'choices' => array(
            ' "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif' => 'ゴシック体',
            ' "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif' => '明朝体',
            ' "Noto Sans JP", sans-serif' => 'NotoSans JP',
        ),
    ));
}
add_action('customize_register', 'add_customizer_options');

そんな細かくは設定しない前提で、よく使うであろう3パターンだけラジオボタンで設置

• ゴシック体を選択したら
  “Hiragino Sans W3”, “Hiragino Kaku Gothic ProN”, “ヒラギノ角ゴ ProN W3”, “メイリオ”, Meiryo, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif’
• 明朝体を選択したら
  “游明朝”, YuMincho, “Hiragino Mincho ProN W3”, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “HG明朝E”, “ＭＳ Ｐ明朝”, “ＭＳ 明朝”, serif’
• NotoSans JPを選択したら
  “Noto Sans JP”, sans-serif’

こんな感じで「font-family:”ここに反映”;」ここに反映されるものを設定します。

header.phpかfooter.phpに記述

<style>
body,p {
  font-family: <?php echo get_theme_mod( 'font_family', '"メイリオ"' ); ?>;
}
</style>

すべてに反映するには追記が必要ですが、ひとまずbodyとpに効かせます。

何も選択しないとメイリオになる設定です（設定しないことはないと思いますが）

ちゃんと反映されるか確認する

ここではアンダースコアでダウンロードしたダンプテーマを反映させて、特になにもいじくってない状態で上記のカスタマイザー追加を試みてうまくいきました。

他記事でも幾度となく書いてますがfunctions.phpの取り扱いは本当に気を付けてください！

ということで備忘録失礼しました。