WordPress自作テーマ制作記録⑯子テーマ作成、カスタマイザー機能追加

こちらの続きです。

親テーマがだいたいできたので、カスタマイズしやすいように今回は子テーマを作ったり、カスタマイザーの機能追加をやりました。

①子テーマの作成
②functions.php修正
③カスタマイザー機能追加（親テーマ）

子テーマの作成

style.css作成
functions.php作成

functions.php修正

単純に子テーマを作ると、cssの読み込みが思ったようにいかなかったので、親テーマのfunctions.phpを修正した。

【発生した問題】

functions.phpは子テーマ・親テーマの順に読まれるので、

子テーマのfunctions.phpで
①親テーマのcss読み込み
②子テーマのcss読み込み

親テーマのfunctions.phpで
③親テーマのcss読み込み（reset.css、style.css）

という順番になってしまった。

想定している順で読み込んでほしいので、
子テーマのfunctions.phpでcss読み込みした場合は、親テーマのfunctions.phpではcss読み込みしないよう修正。

【修正内容】

親テーマ：

// CSS読み込み
if ( ! function_exists( 'add_my_styles')) {
   function add_my_styles(){
       wp_enqueue_style('my-reset', get_theme_file_uri( '/css/reset.css'));
       wp_enqueue_style('my-style', get_theme_file_uri( '/css/style.css'), array(), filemtime( get_theme_file_path( '/css/style.css')));
   }
   add_action( 'wp_enqueue_scripts', 'add_my_styles');    
}

子テーマ：

function add_my_styles(){
   wp_enqueue_style('reset-style', get_parent_theme_file_uri( '/css/reset.css'));
   wp_enqueue_style( 'parent-style', get_parent_theme_file_uri( '/css/style.css'));
   wp_enqueue_style('child-style', get_theme_file_uri( '/css/style.css'), array('parent-style'), filemtime( get_theme_file_path( '/css/style.css')));
}
add_action( 'wp_enqueue_scripts', 'add_my_styles' );

カスタマイザー機能追加

色をカスタマイザーで設定できるようにした。

このあたりを参考に。
https://kunoichiwp.com/faq/2365

css変数を使ったので、IE対応でponyfillを使った。
wp_enqueue_scriptのところに追加

       // css-vars-ponyfill
       $ua = $_SERVER['HTTP_USER_AGENT'];
       if (strstr($ua, 'Trident') || strstr($ua, 'MSIE')) {
           wp_enqueue_script( 
               'css-vars-ponyfill', 
               '//cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js'
           );
       }

TODO

・readme.txt用意
・screenshot.png用意

検討

・トップページ

【対応不要にしたもの】

・faviconの設定
→標準のカスタマイザーでできた。
・先頭固定表示にしたときのウィジェット、アーカイブページ
→今まで使っていたテーマでもやってないのでやらない。
・post_classを全部につけるかどうか。（アーカイブやウィジェット・関連記事）
→今まで使っていたテーマでもやってないのでやらない。
・「さらに読む」の文言
→本体の翻訳ファイルを参照している箇所で、普通の方法では変更できなさそう。
使わない予定なので対応しないことにする。→対応できた。

・ラインなど、エディタにある項目のcssをどうするか
→一旦対応不要として、既存サイトにこのテーマを反映したときにおかしな点があれば対応することにする。