CocoonのSlickに関するメモ

WordPressのテーマ「Cocoon」に関するメモです。

特定の状況に対する個人的なメモなので、テーマの詳細などは省きます。

前提

• Cocoon | WordPress無料テーマ

テーマ内蔵のSlickの流用

1. cocoon-master-2.1.1.4使用
2. Cocoon設定でカルーセルの表示設定が「表示しない」の時に、のコンテンツにSlickを使いたい
3. テーマ内にすでにSlickのスクリプトが存在しているなら、それを使う方が効率的(と考えた)

上記のような意図で検索した場合、以下の情報が見つかります。

• カルーセル非使用時でもslickを使いたい | Cocoonテーマに関する質問 | Cocoon フォーラム

しかし上記の方法では以下の理由により動作しません。

• after_setup_themeにフックさせる必要がある
• wp_enqueue_slick()は内部でis_carousel_visible()の判定が入っているため、設定でカルーセルを「表示しない」にしているとtrueにならず実行されない

そのため以下のように微妙にCocoonの内蔵関数を利用しつつ直接読み込ませる方法が検討できます。

//Cocoonのlib/utils.php内のwp_enqueue_slick()内の記述を少し改造して移植
add_action('wp_enqueue_scripts', function (){
 if (is_front_page()) {
  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  );
  //minify_js()はテーマ内蔵関数なのでその点留意が必要
  //以下の設定は各サイトごとに値や項目を検討して記載
  $data = minify_js('
   (function($){
    $(".carousel-content").slick({
     dots: true,
     autoplay: true,
     autoplaySpeed: '.strval(5*1000).',
     infinite: true,
     slidesToShow: 6,
     slidesToScroll: 6,
    responsive: [
      {
       breakpoint: 1240,
       settings: {
        slidesToShow: 5,
        slidesToScroll: 5
       }
      },
    {
       breakpoint: 1023,
       settings: {
        slidesToShow: 4,
        slidesToScroll: 4
       }
      },
      {
       breakpoint: 834,
       settings: {
        slidesToShow: 3,
        slidesToScroll: 3
       }
      },
      {
       breakpoint: 480,
       settings: {
        slidesToShow: 2,
        slidesToScroll: 2
       }
      }
     ]
    });
   })(jQuery);
  ');
  wp_add_inline_script( 'slick-js', $data, 'after' ) ;
 }
});

ただし上記方法では、以下の可能性からリスクを抱えることになります。

• 今後CocoonのアップデートでSlickがなくなる可能性
• パスが変わる可能性

親テーマのアップデートに対応して子テーマもアップデートすれば対応できますが、安全策としては以下が適当に思えます。

• 子テーマ用にSlickを用意して読み込ませる

結び

今回は自分で細部を調べましたが、公式のサポートフォーラムでそれなりの数や種類の具体例が確認できるので、基本的にはそこからの情報でどうにかできるのではと思います。