【コピペでOK】プラグインなしでWordpressの投稿記事をスライダーで表示する方法

こんにちは、マルオです。
WordPressを使って10年ほど経ちます。

10年もWordpressを使っていると、使うプラグインはかなり限定されます。

Contents

WordPressのプラグインの数を少なくする理由
よく使うUI カルーセルスライダー
プラグインなしの投稿記事カルーセルスライダー実装方法

WordPressのプラグインの数を少なくする理由

みなさんはプラグインは、いくつ使っていますか？
サイトの規模や機能にもよりますが、ボクは5個くらいでしょうか。

なるべく多くのプラグインは使いません。
理由としては、

サイト表示スピードが落ちる
サイトエラーが発生する可能性が増す
プラグインの保守が大変になる
競合するプラグインを入れると誤作動・エラーが発生する

などの理由があります。

WordPressには便利で優秀なプラグインはたくさんありますし、
そういったプラグインを簡単に使えるのが魅力のひとつではありますが、
とはいえ、やっぱりプラグインのインストール数が少ないに越したことはありません。

よく使うUI カルーセルスライダー

WEBサイト制作する上でよく使うUIの中に、
投稿記事をカルーセルスライダーで表示することがあります。

トップページなどに新着記事を何件か表示するようなパターンですね。

このような場合もプラグインで実装させることはできます。
例えば、こちらのようなプラグインがあります。

【Post Carousel】Wordpressプラグインちょうどいいカルーセルスライダー

wordpressで投稿した記事をカルーセルスライダーで表示させたい。その要望をかなえるプラグインはないかと探したところちょうどいいのがありました。「Post...

ですが、
今回はプラグインなしで投稿記事をカルーセルスライダーで表示できる方法を紹介します。
テーマファイルにコピペで実装できる方法になります。

スライダーの実装には、JSライブラリーSwiper.jsを利用します。

プラグインなしの投稿記事カルーセルスライダー実装方法

STEP1．投稿記事を表示する

まずは表示したい投稿記事のコードを用意します。
表示したい箇所のphpファイルにコピペしましょう。

例えば、トップページに表示したい場合は、front-page.phpのファイルにペーストします。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <?php
    $loop = new WP_Query(array(
      'post_type' => 'post', // ポストタイプを設定 デフォルト投稿はそのまま
      'posts_per_page' => 5 // 記事数を設定
    ));
    ?>
    <?php
    /* Start the Loop */
    while ($loop->have_posts()) : $loop->the_post();
    ?>
      <div class="swiper-slide">
        <div class="swiper-slide__inner">
          <div class="swiper-slide__inner--item">
            <?php if (has_post_thumbnail()) : ?>
              <figure class="post__thumb--img">
                <a href="<?php the_permalink(); ?>" style="background-image: url('<?php the_post_thumbnail_url('thumbnail'); ?>')"></a>
              </figure>
            <?php else : ?>
              <figure class="post__thumb--img">
                <!-- アイキャッチ画像がない場合  -->
                <a href="<?php the_permalink(); ?>" style="background-image: url('<?= get_template_directory_uri(); ?>/img/no-image.jpg')"></a>
              </figure>
            <?php endif; ?>
            <div class="text-block">
              <div class="meta-block">
                <span class="date"><?php the_time('Y.m.d'); ?></span>
                <?php
                $cats = get_the_category();
                foreach ($cats as $cat) :
                  if ($cat) echo '<span class="cat">' . $cat->cat_name . '</span>';
                endforeach;
                ?>
              </div>
              <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?= $post->post_title; ?>">
                <?php echo $post->post_title; ?>
              </a>
            </div>
          </div>
        </div>
      </div>
    <?php
    endwhile;
    wp_reset_query();
    ?>
  </div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

STEP2．functions.phpに追加

使用中のテーマ内にあるfunctions.phpに追記します。
Swiper.jsライブラリーのcssとjsファイルを読み込むためのコードになります。

function add_slider_files() {
  //スタイルシートの読み込み
  wp_enqueue_style( 'swiper-style', 'https://unpkg.com/swiper/swiper-bundle.min.css');

  //JavaScript の読み込み
  wp_enqueue_script( 'swiper-js', 'https://unpkg.com/swiper/swiper-bundle.min.js', '', '', true);
}
add_action('wp_enqueue_scripts', 'add_slider_files');

STEP3．Swiper.js設定用のJavascriptファイルの追加

次にSwiper.jsの設定用Javascriptを用意します。
footer.phpに追記しましょう。

<?php wp_footer(); ?>の直後にJavascriptを追記しましょう。

<?php wp_footer(); ?>
<!-- swiper設定用js -->
<script>
  let mySwiper = new Swiper('.post-slider', {
    // デフォルトの設定
    slidesPerView: 1,
    spaceBetween: 0,
    loop: true,
    breakpoints: {
      640: {
        slidesPerView: 2,
        spaceBetween: 5,
        loop: true
      },
      980: {
        slidesPerView: 3,
        spaceBetween: 10,
        loop: true
      }
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })
</script>
</body>
</html>

STEP4．CSSでカルーセルスライダーのデザイン調整

あくまで簡易的ですが、CSSでカルーセルスライダーのデザインを調整しましょう。
テーマに合わせて変更してください。

.swiper-slide .post__thumb--img {
  margin: 0 0 15px;
}
.swiper-slide .post__thumb--img a {
  padding-top: 62.5%;
  width: 100%;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

以上で、実装は可能です。
さぁこれさえ覚えておけば、もうプラグインを使う必要はないです。

プラグイン頼りのWordpressによるWEBサイト構築から、卒業しましょう！
シンプルにわかりやすいコードを！