WordPressテーマCocoonで投稿ページでもslick.jsを使いたい場合

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 フォーラム

わいひらさんはこれの解決方法として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を読み込むようにしてあります。

需要がない記事ですいません。では。

コメント

タイトルとURLをコピーしました