WordPress で子テーマの CSS などを読み込ませたいときに注意すること。

WordPress で Javascript や CSS を記述したいときは header.php などを見ると wp_enqueue_style を使って記述されていると思う。

wp_enqueue_style( 'bootstrap',get_template_directory_uri().'/css/bootstrap.css','','','all');
wp_enqueue_style( 'bootstrap-responsive',get_template_directory_uri().'/css/bootstrap-responsive.css','','','all');
wp_enqueue_style( 'style',get_template_directory_uri().'/style.css','','','all');
wp_enqueue_style('prettyPhoto-css',get_template_directory_uri().'/css/prettyphoto.css','','','all');
wp_enqueue_style('custom-options',get_template_directory_uri().'/css/options.css','','','all');

この時、ファイルの頭に get_template_directory_uri() を付ければテーマのディレクトリパスが得られる。

さて、テーマをいじる際に定番なのが「子テーマ化」することだが、その場合、親テーマの header.php などはコピーした上でカスタマイズすることになる。で、注意するのが新たに独自の CSS や Javascript を追加する場合。
うっかりやってしまいがちなのが、以下のように wp_enqueue_style の行を単にコピペして、CSS ファイルの部分だけ書き換えたとき。

wp_enqueue_style('nincou',get_template_directory_uri().'/css/nincou.css','','','all');

このように、get_template_directory_uri() をそのまま使ってしまうと、CSS ファイルのディレクトリパスは親テーマのディレクトリパスになってしまう。もし、子テーマのディレクトリパスにしたいときは以下のように get_template_directory_uri() ではなく、 get_stylesheet_directory_uri() を使うと良い。

wp_enqueue_style('nincou',get_stylesheet_directory_uri().'/css/nincou.css','','','all');

参考サイト: http://ja.forums.wordpress.org/topic/11749 

ツイートツイート