【カルーセル】表示される記事の数を1つにする方法『Cocoon×Custom』

Cocoon×Custom
この記事は約7分で読めます。

どうもSiBです。

今回の記事はWordpress「Cocoonテーマ」の目玉機能の1つでもある「カルーセル」(スライダー)をスマートフォンで表示したとき表示される記事を1つだけにする方法を紹介していきます。

「カルーセル」とは任意の記事をスライドショーで表示させる機能になります。(自動でスライドさせることも可能)

見た目もインパクトがあるので目を引きやすく、表示されている記事が読まれやすいという利点もありますが「カルーセル」をスマートフォンで表示させると表示される記事がデフォルトの場合2つになっています。

そこで今回はスマートフォン表示で記事が2つ表示されていると、少しインパクトに欠けるので記事の表示数を1つにするため「functions php」へコードを追加していきます。

「functions php」へコードをコピペする場合、1文字でもコピーをミスすると画面が真っ白になったりすることがあるので、必ずコピペする前にはバックアップを取って下さい。

それでは解説です。

[スポンサーリンク]

表示させる記事を1つにしたときのイメージ

当ブログでは「カルーセル」ヘッダーメニューの下に設置してあります。今回のカスタマイズをするとどんな感じに動くのか見たい方はコチラご覧ください。

デフォルトの表示される記事が2つの場合

記事の表示数が2つでもいいのですが、やはりインパクトに欠けると思うので表示数を変えてみます。

表示させる記事を1つにした場合

やはり表示させる記事を1つだけにした方が見た目のインパクトがありますね。

それでは「カルーセル」の表示設定から進めていきましょう。

「カルーセル」を表示させる

まずフロントページ「カルーセル」を表示させます。

「ダッシュボード」から「cocoon設定」「カルーセル」

次に「カルーセルの表示」から「カルーセル」を表示するページを設定し、「スマートフォンで表示」のところにチェックを入れます。

続いて「表示内容」を設定していきます。「人気記事」「カテゴリー」「タグ」など表示させたい記事を選択して下さい。

他にも「カルーセルの並び替え」「最大表示数」「枠線の表示」などありますが、お好みで設定してもらって大丈夫です。

これでフロントページ「カルーセル」が表示されました。

表示される記事数を変更する

次にデフォルトでは「カルーセル」表示される記事が2つになっているので「テーマのための関数」(functions php)へ下記のコードを追加して表示される記事を1つにしていきます。

「functions php」へコードをコピペする場合、1文字でもコピーをミスすると画面が真っ白になったりすることがあるので、必ずコピペする前にはバックアップを取って下さい。

「functions php」とか「コードを追加」とか聞きなれない言葉だと思いますが、コードをコピペするだけなのでとても簡単です。まず下記のコードをコピーして下さい。

//カルーセルを1枚ずつスライドする。
if ( !function_exists( 'wp_enqueue_slick' ) ):
function wp_enqueue_slick(){
  if (is_carousel_visible()) {
    wp_enqueue_style( 'slick-theme-style', get_template_directory_uri() . '/plugins/slick/slick-theme.css' );
    //Slickスクリプトの呼び出し
    wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/plugins/slick/slick.min.js', array( 'jquery' ), false, true  );
    $autoplay = null;
    if (is_carousel_autoplay_enable()) {
      $autoplay = 'autoplay: true,';
    }
    $data = minify_js('
              (function($){
                $(".carousel-content").slick({
                  dots: true,'.
                  $autoplay.
                  'autoplaySpeed: '.strval(intval(get_carousel_autoplay_interval())*1000).',
                  infinite: true,
                  slidesToShow: 6,
                  slidesToScroll: 1,
                  responsive: [
                      {
                        breakpoint: 1240,
                        settings: {
                          slidesToShow: 5,
                          slidesToScroll: 1
                        }
                      },
                      {
                        breakpoint: 1023,
                        settings: {
                          slidesToShow: 4,
                          slidesToScroll: 1
                        }
                      },
                      {
                        breakpoint: 834,
                        settings: {
                          slidesToShow: 3,
                          slidesToScroll: 1
                        }
                      },
                      {
                        breakpoint: 480,
                        settings: {
                          slidesToShow: 1,
                          slidesToScroll: 1
                        }
                      }
                    ]
                });
              })(jQuery);
            ');
    wp_add_inline_script( 'slick-js', $data, 'after' ) ;
  }

}
endif;

続いて「ダッシュボード」から「外観」「テーマファイルエディター」「テーマのための関数(functions php)」をクリック

「以下に子テーマ用の関数を書く」をいう行の下に、先ほどコピーしたコードをペーストしたら最後に「ファイルを更新」をクリックします。

これでスマートフォン表示のとき「カルーセル」に表示される記事が1つだけになります。

コチラの記事を参考にさせて頂きました。

いかがでしたか?「カルーセル」の記事を2つ表示させるより、記事を1つだけ表示させた方がインパクトがあり見やすくなりますよね。

他にもWordpressの「Cocoonテーマ」で簡単にできるカスタマイズを紹介しているのでよろしければこちらの記事もご覧下さい。