子テーマでCSS重複・反映されない場合のwp_enqueue_styleの対処法

子テーマを作成する時は、子テーマフォルダに作成したfunctions.php内に「wp_enqueue_style」を記述してstyle.cssを読み込ませて子テーマを有効にします。

基本は下記のように、親テーマのcssを指定して、子テーマのcssを読み込ませていると思います。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}

「parent-style」の行だけでも子テーマは起動します。
親テーマのcssを読み込んでその後ろに子テーマ（child-style）のcssを読み込ませるということを明示的にやっています。

子テーマでcss重複・反映されない場合は、まずHTMLソースコードを確認する必要があります。表示されたhtmlのソースコードを見ることで、css重複や読み込み順を確認することができ、cssが反映されない理由などが確認できます。

重複を省くことで読み込み速度が速くなり、読み込み順をなおすことでcssが正しく反映されるようになります。

重複している場合

子テーマを作成してHTMLコードを確認し、style.cssが重複表示（2回読み込まれている）場合、親テーマ側で子テーマのstyle.cssを読み込む記述が追加されている可能性があります。

読み込み順がparent-styleの後になっていれば、上記の子テーマのfunctions.phpに書いているwp_enqueue_styleの「child-style」は不要なので削除します。

子テーマのcssが反映されない

子テーマのcssが反映されない場合は、読み込み順がおかしい場合があります。
※parent-styleと指定しても、うまく読み込まれない場合があります。

HTMLソースコードを確認して、「一番最後のcssのid（親テーマのcssよりも後にあるcssのid）」を確認し、その後ろに子テーマのstyle.cssが追加されるようにwp_enqueue_styleを修正します。

cssの読み込み順は、wp_enqueue_styleの３番目のパラメーター（array部分）で指定できます。array部分にHTMLソースコードで確認したcssのidをを指定することで、このidの後に読み込まれるようになります。

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('cssの最後のidを指定する'));

※htmlソースコードで表示されるidの最後の「-css」自動で付与されるので、これを取り除いた部分をarrayで指定します。
例：my-hogehoge-cssと表示されていれば、arrayに指定するのはmy-hogehogeになります。