[Wordpress] functions.phpでの css と js の読み込み方

Question

Wordpress4.5.3でテーマを作ることを勉強しています。

Bootstrap3のフリー配布ののテンプレートをWordpressのテーマに作り替えようと思います。
そこで、cssとjsファイルを読み込みたいのですが、functions.phpでcssとjsを指定したのですが、下記のように書きましたが、Goolge Chromeで確認すると、css/bootstrap.min.cssとjquery-2.1.3.min.js'は読み込まれているようですが、他は読み込まれていないようで、原因がわかりません。教えてください。おそらく書き方にあるのだと思いますが、いろいろためしているのですが、解決していません。

ネットは検索すると、jqueryやbootstrapがwordpress自体にも入っているということで、二重になるとの記事もありましたが、今回の問題と関連性はあるのでしょうか? もし分かりましたらよろしくお願いします。

function style_test_scripts() {

        //cssファイルの読み込み。
        wp_enqueue_style( 'css', get_template_directory_uri() . '/css/bootstrap.min.css', array() );
        wp_enqueue_style( 'css', get_template_directory_uri() . '/css/font-awesome.min.css', array('bootstrap.min') );
        wp_enqueue_style( 'css', get_template_directory_uri() . '/css/animate.css', array('bootstrap.min') );
        wp_enqueue_style( 'css', get_template_directory_uri() . '/css/owl.carousel.css', array('bootstrap.min') );
        wp_enqueue_style( 'css', get_template_directory_uri() . '/css/owl.theme.css', array('bootstrap.min') );
        wp_enqueue_style( 'css', get_template_directory_uri() . 'style.css', array() );         
  
	    //Jsファイルの読み込み。
        wp_enqueue_script( 'js', get_template_directory_uri() . '/js/jquery-2.1.3.min.js', array() );
        wp_enqueue_script( 'js', get_template_directory_uri() . '/js/modernizr.custom.97074.js', array() );
        wp_enqueue_script( 'js', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery-2.1.3.min' ), '20160412', true );
        wp_enqueue_script( 'js', get_template_directory_uri() . '/js/owl.carousel.js', array( 'jquery-2.1.3.min' ), '20160412', true );
        wp_enqueue_script( 'js', get_template_directory_uri() . '/js/jquery.hoverdir.js', array( 'jquery-2.1.3.min' ), '20160412', true );
}
add_action( 'wp_enqueue_scripts', 'style_test_scripts' );

Comments

[kei344]

「うまくできない」とはどのような状況でしょうか。出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。また、「真っ白になってしまう」場合、デバックモードで確認してください。⇒ http://mignonstyle.com/debug-mode/

[退会済みユーザー]

子テーマを作って、CSSはstyle.cssに@importしたりheader.phpにjsと一緒に記述してしまいえば良いかとも思いますが。。それだとダメです？理由があれば。

[xjaPANDA]

ありがどうございます。　header.phpに書いても問題なくうごきました。あまりwordpressよくわかっていないので、てっきり、他のサイトを見ていると、ヘッダーに書いてはだめなのかと思っていました。　あと、子テーマというやり方も知らないので、勉強していきたいと思います。感謝です。

Answer 1

wp_enqueue_style、wp_enqueue_scriptの第一引数である
'css'と'js'を、それぞれ固有の名称に変えてみるといかがでしょうか？

Comments

[xjaPANDA]

ありがとうございます。　wp_enqueue_styleやwp_enqueue_script関数の引数の解釈を間違えていました。 下記のように変更し解決しました。

wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array() );
wp_enqueue_style( 'bootstrap_min', get_template_directory_uri() . '/css/font-awesome.min.css', array() );
wp_enqueue_style( 'css', get_template_directory_uri() . '/css/animate.css', array() );
wp_enqueue_style( 'css', get_template_directory_uri() . '/css/owl.carousel.css' );
wp_enqueue_style( 'owl', get_template_directory_uri() . '/css/owl.theme.css' , array() );
wp_enqueue_style( 'style', get_stylesheet_uri() ); // Theme stylesheet.
//wp_enqueue_style( 'css', get_template_directory_uri() . 'style.css', array('css') );

wp_deregister_script('jquery'); //wordpressのもともとのjqueryを停止する。

wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-2.1.3.min.js', array() );
wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/js/modernizr.custom.97074.js', array() );
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array() );
wp_enqueue_script( 'js', get_template_directory_uri() . '/js/owl.carousel.js', array() );
wp_enqueue_script( 'hoverdir', get_template_directory_uri() . '/js/jquery.hoverdir.js', array() );

[qasev]

解決されたようでよかったです！
ちなみに、下記の第一引数が共に'css'になっているようですので、念のためお伝えいたします。
wp_enqueue_style( 'css', get_template_directory_uri() . '/css/animate.css', array() );
wp_enqueue_style( 'css', get_template_directory_uri() . '/css/owl.carousel.css' );

[xjaPANDA]

ありがとうございます。感謝します。。Chromeで確認したら、確かに、ひとつ読み込まれていませんでした。また、その部分だけ、スタイルが崩れていました。

[qasev]

良かったです。

'css'の部分はハンドル名なのですが、デフォルトで確保されているハンドル名と競合してしまうケースがあります。

例えば'common'など。

今後追加した際に読み込まないということが発生した場合、別のユニークな（被らないであろう）名称を付けて試してみる、ということを頭の片隅に入れておいていただければと思います。