Cocoonでトップページはカルーセルを使っていないと、slick.min.jsが読み込まれないようになっている。昔のCocoonのバージョンでは、カルーセルをつかっていなくてもslick.min.jsが読み込まれるようになっていたのだが、最近のバージョン（2.0あたり？）からカルーセル非使用時はslick.min.jsを読み込まないようにしているようです。
Cocoonでカルーセル非使用時でもslick.min.jsを読み込ませるには？
カルーセル非使用時でもslick.min.jsを読み込ませたい理由は、カルーセル以外のコンテンツでslickスライダーを使いたいからなのですが、jsが読み込まれないから使えないとなるとちょっと話にならない。
ですがこの問題、同じように悩んでいる人がいたようでフォーラムにも質問があがっていました。
最近のアップデートによってカルーセル非使用時は、slickに関する読み込みが行われないように仕様変更されましたが、
私はカルーセルを使っていない状態でslickを使うことが多く、現状の解決方法もわかりません。
わいひらさんはこれの解決方法としてCocoon独自の関数であるwp_enqueue_slick()を使う方法提示していらっしゃいましたが、ためしてみたところうまく動作しないことを確認しました。ちなみにfunctions.phpに以下のコードを記入しました。
add_action('wp_enqueue_scripts', function (){
if (is_front_page()) {
wp_enqueue_slick();
}
});
このコードのis_front_page()をis_single()にかえるなどして記事ページでslick.min.jsを読み込ませようとしたのですが、失敗におわりました。これには理由があるようです。
after_setup_themeにフックさせる必要がある
wp_enqueue_slick()は内部でis_carousel_visible()の判定が入っているため、設定でカルーセルを「表示しない」にしているとtrueにならず実行されない引用元: CocoonのSlickに関するメモ
別の方法でslick.min.jsを読み込む
以下のコードをfunctions.phpに記述することでslick.min.jsを読み込むことができました。
カルーセルを使用していた場合、二重読み込みになっていないかとかは確認してません。
add_action('wp_enqueue_scripts', function (){
if (is_single()) {
wp_enqueue_style( 'slick-theme-style', get_template_directory_uri() . '/plugins/slick/slick-theme.css' );
wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/plugins/slick/slick.min.js', array( 'jquery' ), false, true );
}
});
ちなみに想定している環境はトップページではカルーセルを使っているが、記事ページではカルーセルを使っていない状況を想定しています。ですので、is_single()で記事ページだけslick.min.jsを読み込むようにしてあります。
需要がない記事ですいません。では。
コメント