【WordPress】投稿記事をスライドで表示する方法

【WordPress】投稿記事をスライドで表示する方法 WordPress
2022.12.04

サイトのトップページなどに、おすすめ記事や新着記事をスライド（スライドショー）でおしゃれに表示する方法を紹介します。サムネイル画像を横にスッと切り替えたり、自動再生で目立たせたりでき、訪問者へのアピールにうってつけです。プラグインで手軽に作る方法と、slick・WP_Queryで自作する方法の2通りを解説します。

この記事でわかること

  • プラグイン「Meta Slider」での簡単なスライド作成
  • slick（jQueryスライダー）を読み込んで自作する方法
  • WP_Query でアイキャッチ付きの記事スライドを生成するコード
  • 新規開発ならjQuery不要のSwiper.jsがおすすめな理由
スポンサーリンク

プラグインを使用してお手軽に実装！（初心者向け）

手軽に実装したいなら、プラグインがおすすめです。ここでは定番のスライドプラグイン「Meta Slider」を使う方法を紹介します。

Meta Sliderをインストール

WordPress管理画面のメニューからプラグイン → 新規追加を選択します。

プラグイン新規追加

「Meta Slider」で検索し、一番上に出てくるものを今すぐインストール。完了したら有効化も忘れずに行います。

Meta Slider 検索・インストール

Meta Sliderの設定

インストールが完了したら、設定画面で実際にスライドを作成します。メニューから Meta Slider の設定画面へアクセスします。

Meta Slider 設定画面へ

英語の画面が表示されますが、右側の「Create blank slideshow」ボタンを選択します。

Create blank slideshow

スライド作成画面が表示されたら、上部の「スライドを追加」から表示する画像を追加します。右側のメニューで幅・高さなどを調整できますが、まずはスライドを作ってしまいましょう。

スライド作成画面

画像を設定するとこのようになります。URL欄に表示したい記事のURLを入力すればリンクを貼れます。右の「Open in a new window」にチェックを入れると別タブで開きます。設定が完了したら右上の「保存」でスライドを保存します。

スライド画像とリンク設定

ショートコードを貼り付けてスライドを設置

保存後に表示されるショートコードを、スライドを出したい場所に貼り付ければ完了です。テンプレート（index.php 等）に置く場合は do_shortcode() で出力します。

PHP：テンプレートにショートコードを出力
<?php echo do_shortcode('[metaslider id="作成したスライドのid"]'); ?>

固定ページや投稿の本文に表示する場合は、ショートコードをそのまま貼り付けます。

ショートコード（本文に直接貼り付け）
[metaslider id="作成したスライドのid"]

プラグインを使用せずに自分でスライドを作る（上級者向け）

ある程度コードが書けるなら、自作のほうが自由度が高くなります。

新規開発なら Swiper.js がおすすめ
この記事で使う slick は定番ですが2017年以降ほぼ更新されておらず、jQueryに依存します。新しく作るなら、jQuery不要・モバイル対応・活発にメンテされている Swiper.js が有力候補です。素のJavaScriptだけで作る方法はスライドショーの作り方完全ガイド（フェード・ドットナビ・タッチスワイプ）にまとめています。ここでは既存資産の多い slick での実装を紹介します。

slickを使用

スライド用の定番jQueryプラグインslickを使います。使い慣れたものがあればそちらでも構いません。

CDNを使う方法

CDNは公開URLを読み込むだけで使えて、ファイルのダウンロード・アップロードが不要で手軽です。slick公式サイトの「get it now」にあるCDN用コードを <head> 内または </body> の上に設置します。

HTML：CDNで読み込む
<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <!-- コンテンツ -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</body>
</html>

slick公式サイト

ダウンロードしたファイルをアップして使用する方法

自分でサーバーに置く場合は、公式サイトの「Download Now」からslickをダウンロードし、アップロードしてCDNと同じ要領で読み込みます。

HTML：ダウンロードしたファイルを読み込む
<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="stylesheet" type="text/css" href="./slick/slick.css"/>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <!-- コンテンツ -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript" src="./slick/slick.min.js"></script>
</body>
</html>

スライドのCSSとJS

スライド内の画像とタイトル帯のCSS例です。

CSS：スライドのスタイル
.slide-inner {
  position: relative;
}
.slide-inner img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
.slide-txt {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 18px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 16px;
}

slickの初期化はターゲット要素を指定して呼ぶだけです。

JavaScript：slickの初期化
// スライド
$(function () {
  $('#js-slide').slick({
    arrows: false, // 前・次のボタンを表示しない
    dots: true,    // ドットナビゲーションを表示する
  });
});

WP_Queryで記事スライドを出力する

投稿のアイキャッチとタイトルを WP_Query でループ出力し、その親要素（#js-slide）をslickで初期化します。アイキャッチ未設定の記事にはデフォルト画像を表示します。

PHP：WP_Queryで記事スライドを生成
<?php
$args = array(
  'post_type'      => 'post', // 投稿タイプ
  'posts_per_page' => 10,     // 表示する記事数
);
$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
?>
<!-- ループ前の開始タグ -->
<div class="slide" id="js-slide">
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
  <a href="<?php the_permalink(); ?>">
    <div class="slide-inner">
      <?php if (has_post_thumbnail()) : ?>
        <?php the_post_thumbnail(); ?>
      <?php else : ?>
        <!-- アイキャッチ未設定時に表示する画像 -->
        <img src="<?php echo get_template_directory_uri(); ?>/images/noimage.jpg" alt="">
      <?php endif; ?>
      <span class="slide-txt"><?php the_title(); ?></span>
    </div>
  </a>
<?php endwhile; ?>
</div>
<?php endif; wp_reset_postdata(); ?>

スライド・スライドショーの関連記事

用途に合わせて、以下も参考になります。

よくある質問（FAQ）

QWordPressでスライドショーを実装するには何を使えばよいですか？
ASwiper.js や slick などのJavaScriptライブラリを使う方法が一般的です。新規開発ならjQuery不要でメンテも活発な Swiper.js がおすすめです。テーマのCocoonには標準のスライダー機能があり、プラグインでは Meta Slider・Smart Slider が人気です。手間をかけたくない場合はCocoonの機能かプラグインが手軽です。
Qアイキャッチ画像をスライドショーに使うには？
AWP_Query で取得した記事の the_post_thumbnail() や get_the_post_thumbnail_url() でアイキャッチを取り出し、スライダーのHTMLに組み込みます。Cocoonのスライドショーウィジェットはアイキャッチを自動で使うため設定が簡単です。
Qスライドショーの画像サイズを統一するには？
Aadd_image_size() でカスタム画像サイズを登録し、そのサイズで the_post_thumbnail() を呼びます。例：add_image_size("slider", 1200, 600, true);（true=クロップ）。既存画像には「Regenerate Thumbnails」プラグインで再生成が必要です。

まとめ

  • 手軽に：Meta Slider などのプラグインで設定するだけ
  • 自由度重視：slick／Swiper.js ＋ WP_Query で自作（アイキャッチ＋タイトルを出力）
  • 新規開発：jQuery不要の Swiper.js が有力。素のJSなら完全ガイドを参照

目的とスキルに合わせて、プラグインか自作かを選んでスライド表示を実装してみてください。