WordPress自作テーマ制作記録⑨カスタマイザー対応

こちらの続きです。

ThemeCheckに飽きてきたので、今回は気分を変えてカスタマイザー対応を行いました。

カスタマイザーでやったこと

・SNSのURLを管理画面で設定できるようにする。
・フッターのテキスト、URLを設定できるようにする。
・ロゴ画像を管理画面で設定できるようにする。

参考URL

https://wpdocs.osdn.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA_API#.E3.82.AB.E3.82.B9.E3.82.BF.E3.83.9E.E3.82.A4.E3.82.B6.E3.83.BC.E3.81.AE.E4.BD.9C.E6.88.90
https://notes.sharesl.net/articles/1645/
https://haniwaman.com/customizer/
https://e-joint.jp/1166/

コード例

カスタマイザー設定（抜粋）

function mytheme_customize_register( $wp_customize ) {

 /* テーマ設定 */
	$wp_customize->add_section( 'section_theme', array(
   'title' => 'テーマ設定',
   'priority' => 1,
 ));

 $wp_customize->add_setting( 'setting_url_logo', array(
   'type'  => 'option',
   'sanitize_callback' => 'esc_url_raw'
 ));
 $wp_customize->add_control(
     new WP_Customize_Image_Control(
       $wp_customize,
       'control_url_logo',
       array(
         'label' => 'ロゴ画像のURL',
         'section'  => 'section_theme',
         'settings' => 'setting_url_logo'
       )
     )
 );

 $wp_customize->add_setting( 'setting_url_copyright', array(
   'type'  => 'option',
   'sanitize_callback' => 'esc_url_raw'
 ));
 $wp_customize->add_control(
     new WP_Customize_Control(
       $wp_customize,
       'control_url_copyright',
       array(
         'label' => 'copyrightのURL',
         'section'  => 'section_theme',
         'settings' => 'setting_url_copyright',
         'type'     => 'text',
       )
     )
 );

 $wp_customize->add_setting( 'setting_text_copyright', array(
    'type'  => 'option',
    'sanitize_callback' => 'sanitize_text_field'
 ));
 $wp_customize->add_control(
     new WP_Customize_Control(
       $wp_customize,
       'control_text_copyright',
       array(
         'label' => 'copyrightのテキスト',
         'section'  => 'section_theme',
         'settings' => 'setting_text_copyright',
         'type'     => 'text',
       )
     )
 );
}
add_action( 'customize_register', 'mytheme_customize_register' );

カスタマイザーで設定した値を使用する例（抜粋）

<?php if ( get_option('setting_url_copyright') ): ?>
<div class="footer__copyright">
   <span class="copyright">&copy;&nbsp;
       <a href="<?php echo esc_url( get_option('setting_url_copyright')); ?>" class="copyright__link">
           <?php echo esc_html( get_option('setting_text_copyright', get_option('name')) ); ?>
       </a>
   </span>
</div>
<?php endif; ?>

【ハマったこと】

add_settingの引数に、'type' => 'option' を指定している場合、get_theme_mod() で取得できない。
get_option()で取得できる。

【esc_html、esc_attr、esc_urlの使い分けについて】

参考
https://www.webdesignleaves.com/pr/wp/wp_escape_functions.html

TODO

・テーマチェックのエラー対応
・続きを読む→対応しない
・faviconの設定→標準のカスタマイザーでできた。
・screenshot.png用意

検討

・ラインなど、エディタにある項目のcssをどうするか
・add_image_size で画像サイズを設定するかどうか
・function.phpの内容
・フッターのメニュー
・カテゴリ指定できるか？？（アイキャッチありの投稿ウィジェット）
・コンテンツ下ウィジェット
・トップページ
・リッチリザルト
・翻訳まわり
・先頭固定表示にしたときのウィジェット、アーカイブページ
・「さらに読む」の文言
・ロゴ画像のサイズ・CSS

カスタマイザーが思ったより難しくなかったので良かった。
これで今後テーマを使う時に便利になりそう。
また次回からはThemeCheckの続きかな。
TODOは減ってきましたが、検討事項はまだまだ残ってます。。