WordPress で Javascript や CSS を記述したいときは header.php などを見ると wp_enqueue_style を使って記述されていると思う。
1 | wp_enqueue_style( 'bootstrap' ,get_template_directory_uri(). '/css/bootstrap.css' , '' , '' , 'all' ); |
2 | wp_enqueue_style( 'bootstrap-responsive' ,get_template_directory_uri(). '/css/bootstrap-responsive.css' , '' , '' , 'all' ); |
3 | wp_enqueue_style( 'style' ,get_template_directory_uri(). '/style.css' , '' , '' , 'all' ); |
4 | wp_enqueue_style( 'prettyPhoto-css' ,get_template_directory_uri(). '/css/prettyphoto.css' , '' , '' , 'all' ); |
5 | 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 ファイルの部分だけ書き換えたとき。
1 | 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() を使うと良い。
1 | wp_enqueue_style( 'nincou' ,get_stylesheet_directory_uri(). '/css/nincou.css' , '' , '' , 'all' ); |
参考サイト: http://ja.forums.wordpress.org/topic/11749