wordpress popular postsでカルーセル表示

本文中にアフィリエイトリンクが含まれる場合があります。
表示が乱れた場合は再ロードをお試しください。

WordPressサイトに人気記事をカルーセル表示で魅力的に紹介したいとお考えですか？本記事では、プラグイン「WordPress Popular Posts」を活用し、スライダーライブラリ「slick.js」を組み合わせて、人気記事をカルーセル形式で表示する方法を詳しく解説します。サイトのユーザーエンゲージメント向上を目指す方は、ぜひ参考にしてください。

忘備ログ的に書いておきます。

プログラミングに関しては説明が少ないかもしれませんが、ご了承ください。

私のテーマは全て自分で書いているため、有料・無料のテーマとの互換性は確認していません。バックアップを取ってから変更するようにしてください。

WordPress　popular postsとは

WordPress　popular postsは人気記事を表示するプラグインとなっています。

表示だけではなくレポートなども確認できる、定番のプラグインです。

ここでは特に設定をせず、インストール→有効化で大丈夫です。

カルーセル表示のためのslickの使い方

カルーセル表示とは

カルーセル表示とは、私のサイト(スマホ表示)のように、記事を自動でスクロールさせるものです。

パソコンの大きさになると、右のように普通の表示になるようにしています。

slickの導入

slickの導入には二種類の方法があります。

ローカルファイルにダウンロード
CDNを利用する

ローカルファイルに保存する方は、以下のサイトからダウンロードする必要があります。

https://kenwheeler.github.io/slick

私はローカルに入れているので、function.phpに以下のコードを追加します。

ファイルの保存場所などは個人で変更してください。

注意点としては、jqueryを読み込んでから、slickを読み込む必要があります。

    add_action('wp_enqueue_scripts', 'add_styles');
  function add_styles() {
    wp_register_style(
      'slick_style',
      get_template_directory_uri() . '/slick/slick.css',
      array('reset_style'),
      '1.0'
    );
    wp_register_style(
      'slick2_style',
      get_template_directory_uri() . '/slick/slick-theme.css',
      array('reset_style'),
      '1.0'
    );
}
  // jsの読み込み
add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts() {
  // デフォルトのjQueryを削除
  wp_deregister_script('jquery');

  // jQueryを読み込む
  wp_register_script(
    'jquery_script',
    'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js',
    array(),
    '1.0'
  );
 
 // jQueryを読み込む
  wp_register_script(
    'jquery_script',
    'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js',
    array(),
    '1.0'
  );

  // メインのスクリプトを読み込む
  wp_register_script(
    'slick_script',
    get_template_directory_uri() . '/slick/slick.min.js',
    array('jquery_script'),
    '1.0'
  );
  wp_enqueue_script(
    'main_script',
    get_template_directory_uri() . '/js/main.js',
    array('jquery_script','swiper_script', 'slick_script'),
    '1.0'
  );
}

場合によってはcdnの方が簡単かもしれませんが、他サイトの方が説明は分かりやすいと思うので、そちらで調べてみてください。

以下はmain.jsに追加するコードです。

slickには色々なオプションがあるので、より細かく設定したい方は専門的なサイトで調べてみてください。

今回は、3枚のスライドが自動でスクロールするような感じになっています。

 const CHANGE_WIDTH = 1080; // 変更を検知する横幅
const ADD_CLASS = "slick"; // 追加するクラス

$(window).on("load resize", function () {
  var i_width = $(window).outerWidth(true);
  if (i_width > CHANGE_WIDTH) {
    if ($(".ran").hasClass(ADD_CLASS)) {
      $(".ran").eq(0).removeClass(ADD_CLASS);
    }
  } else {
    if (!$(".ran").hasClass(ADD_CLASS)) {
      $(".ran").eq(0).addClass(ADD_CLASS);
    }

  }
  $(".slick ").slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: true,
    autoplay: true, // 自動再生
    autoplaySpeed: 4000, // 再生速度（ミリ秒設定） 1000ミリ秒=1秒
    infinite: true, // 無限スライド
  });

【Amazon.co.jp 限定】生成AIで世界はこう変わる(DL特典動画生成AI「Sora」解説) (SB新書 642)

Amazon

コード

以下がコードになります。

表示したい位置に以下のコードを貼り付けます。

<?php 
if (class_exists('\WordPressPopularPosts\Query')) {
global $post;
  $args = array(
    'range' => 'monthly',//集計する期間 {daily(1日), weekly(1週間), monthly(1ヶ月), all(全期間)}
    'order_by' => 'views',//表示順｛views（閲覧数),comments（コメント数）,avg（1日の平均）}
    'post_type' => 'post',//複数の場合は'post, name1, nem2'
    'limit' => 5, //表示数
  );
  $wpp_query = new \WordPressPopularPosts\Query($args);
  $wpp_posts = $wpp_query->get_posts();
  if ($wpp_posts) { ?>
    <!--ランキングの表示-->  
    <h2>Monthly Ranking</h2>
    <ol class="ranking-list ">
      <?php 
      foreach ($wpp_posts as $wpp_post) {
        $post = get_post($wpp_post->id);
        setup_postdata($post);
        $cat = get_the_category();$cat = $cat[0]; //記事のカテゴリ情報取得
      ?>
      <!--記事の表示内容-->
      <li>
        <a href="<?php the_permalink();?>">
          <figure>
            <?php 
            if(has_post_thumbnail()){ //アイキャッチ
              the_post_thumbnail('large', array('alt' => get_the_title()));
              }else{ //アイキャッチのない場合に表示する画像?>
            <img src="<?php echo get_template_directory_uri(); ?>/img/no-img.jpg" alt="no image">
            <?php };?>
          </figure>
          <h3 class="post-ttl"><?php the_title();?></h3>
          <span class="post-cat"><?php echo $cat->cat_name;?></span>
          <span class="post-date"><?php the_time('Y.m.d');?></span>
          <span class="post-view"><?php echo wpp_get_views($post->ID, 'monthly'); ?>views</span>
        </a>
      </li>
      <?php } ?>
    </ol>
    <?php 
    wp_reset_postdata();
  }
}
?>

アイキャッチのない場合に表示する画像などは、ご自身で用意していただき、ソースの部分を書き換える必要があります。

CSSについては、記事執筆時点では崩れているため、ご自身で合うように手直しする必要があります。時間があるときに直して、更新する予定です。

/*人気記事*/
@media screen and (max-width: 1079px) {
  .l_right {
    width: 100%;
  }
  ul.ranking-list {
    counter-reset: wpp-count -3;
  }
}
@media screen and (min-width: 1079px) {
  .l_right {
    margin-left: 24px;
    width: calc(100% / 3);
  }
  .ranking-img {
    object-fit: cover;
    height: 200px;
  }
  .ranking-title {
    color: white;
    padding-left: 12px;
    height: 84px;
    font-size: 18px;
    display: flex;
    align-items: center;
    text-shadow: 0 0 5px var(--sub-color), 0 0 5px var(--sub-color),
    0 0 5px var(--sub-color), 0 0 5px var(--sub-color),
    0 0 5px var(--sub-color), 0 0 5px var(--sub-color),
    0 0 5px var(--sub-color);
    margin-top: auto;
    margin-bottom: auto;
  }


}
.ranking-list{
  background: var(--background-color);
}
.ranking-img {
  background-size: cover;
  height: 200px;
}
.ranking-title {
  color: white;
  padding-left: 12px;
  height: 84px;
  text-shadow: 0 0 5px var(--sub-color), 0 0 5px var(--sub-color),
  0 0 5px var(--sub-color), 0 0 5px var(--sub-color),
  0 0 5px var(--sub-color), 0 0 5px var(--sub-color),
  0 0 5px var(--sub-color);
align-items: center;
  text-align: center;
  display: flex;
}
/* ランキング終わり */