画像のスライドショー(スライダー)を作成・表示できるプラグイン

複数の画像をスライドショー形式で表示する「スライダー」機能が使える、WordPress プラグインを紹介します。設定画面がシンプルで使いやすく、レスポンシブウェブデザインにも対応しています。

このサイトで使っているテーマ「SWELL」では、記事スライダー機能が実装されています。

記事スライダーは、投稿記事のサムネイル画像をスライド表示する機能です。SWELLテーマは、プラグインを使わなくても簡単に記事スライダーを表示させることができます。

SWELLの公式サイトを見る

記事スライダーの解説を見る

画像のスライドショー(スライダー)を作成・表示できるプラグイン

Webページ上に複数の画像をスライドショー形式で表示する機能は、スライダーと呼ばれます。WordPress で作成したブログ・サイト上にも、スライダーを簡単に導入できるプラグインがあります。

スライダーを作成・表示できるプラグインはたくさんありますが、ここではシンプルな機能で人気の高い「Meta slider」を紹介します。

Meta slider プラグインの主な特徴

Meta slider プラグインを使うと、下のようなスライドショーを簡単に作成できます。

Meta slider プラグインの主な特徴は、次のとおりです。

• 設定画面がシンプルで扱いやすい
• 投稿・固定ページ・テンプレート内・ウィジェットに挿入できる
• レスポンシブウェブデザインに対応

プラグインの特徴① 設定画面がシンプルで扱いやすい

Meta slider プラグインの設定画面は、とてもシンプルです。画像の選択や並べ替えなども、マウス操作で簡単にできます。

プラグインの特徴② 投稿・固定ページ・テンプレート内・ウィジェットに挿入できる

投稿や固定ページ、テーマ内のテンプレートファイルに「ショートコード」を貼り付けるだけで、スライダーを表示することができます。また、ウィジェットも利用できるので、サイドバーなどへのスライダー表示も簡単です。

プラグインの特徴③ レスポンシブウェブデザインに対応

Meta slider プラグインで作成したスライダーは、レスポンシブウェブデザインに対応します。レスポンシブウェブデザインは、サイト訪問者の画面サイズに応じて自動的にコンテンツのサイズが切り替わる手法です。

一部のスライダーは、レスポンシブウェブデザイン非対応です。

Meta slider プラグインのインストールと有効化

Meta slider は公式プラグインとして登録されているので、管理画面で簡単にインストールできます。

1. 管理画面［プラグイン］＞［新規追加］からプラグインのインストール画面を開く
2. キーワードに「Meta slider」と入力し、検索
3. いますぐインストールをクリック
4. プラグインを有効化をクリック

関連ページ

WordPressプラグインの使い方【基礎知識と追加・停止・削除方法】

Meta slider プラグインの使い方

Meta slider プラグインをインストール・有効化すると、WordPress管理画面のメニューにMeta sliderが追加されます。ここをクリックします。

すると、スライダーの編集画面が表示されます。「最初のスライドショーを作成」横の＋ボタンをクリックします。

スライダーのタイトル変更

スライダーのタイトルは、任意のものに変更することができます。

今回は、「スライダー①」に変更しました。

画像の追加

画像を追加するには、スライドを追加をクリックします。

メディアライブラリが表示されます。すでにアップロードした画像や、新たにファイルをアップロードしてスライダーに加えることができます。画像を選択後、スライダーに追加をクリックします。

メディアライブラリについては、画像を挿入する方法を参照してください。

画像ごとの設定

それぞれの画像には、キャプション（説明文）を付けたり、任意のページにリンクを張ることができます。

切り抜きの位置を指定することもできます。

保存とプレビュー

ここまでの作業ができたところで、いったん保存してプレビューをクリックしてみましょう。

スライダーのプレビューを確認することができます。

スライドショーの種類

Meta slider プラグインでは、4種類のスライドショーが用意されています。

遷移エフェクトとは、画像が切り替わるときの視覚効果のことです。

カルーセルモードとは、画像をスムーズにスライドさせる表示方法です。

スライドショーの設定

スライドショーの幅や高さ、効果（遷移エフェクト）、テーマ（外観）などを設定できます。各設定項目の内容は、マウスオーバーすると確認できます。

高度な設定をクリックすると、さらに細かい設定が可能です。各画像の表示時間なども、ここで設定します。

表示時間の単位は、ms（ミリ秒）です。1000ms ＝ 1秒となります。

設定がすべて完了したら、保存してプレビューまたは保存をクリックします。

スライドショーをWebページ上に表示する方法

スライドショーをWebページ上に表示するための方法は、下記の3つがあります。

• 投稿／固定ページに挿入する
• テーマ内のテンプレートファイルに挿入する
• ウィジェットを使う

スライドショー表示方法① 投稿／固定ページに挿入する

投稿や固定ページの編集画面に、専用のショートコードを貼り付けます。

スライドショーを表示させたい場所にマウスカーソルを合わせ、スライダーを追加をクリックします。

表示したいスライドショーを選択し、スライドショーを挿入をクリックします。

投稿編集画面にショートコードが挿入されます。プレビューを確認してみましょう。

ページにスライドショーが表示されました。

スライドショー表示方法② テーマ内のテンプレートファイルに挿入する

テーマ内のテンプレートファイルに、専用のコードを貼り付けます。どのテンプレートファイルに貼り付けるかは、スライドショーを表示させたい場所や利用しているテーマによって異なります。

まず、プラグイン設定画面下部にある「テンプレートに含める」をクリックし、コードをコピーします。

たとえば、標準テーマ「Twenty Seventeen」を利用していてトップページの最上部にスライドショーを表示させたい場合は、テンプレートファイルindex.php内のget_header(); ?>の直後あたりにコードを貼り付けます。

get_header(); ?>

// ここにコードを貼り付け
<?php
    echo do_shortcode("[metaslider id=xxxx]"); 
?>

フロントページの表示を固定ページに変更している場合は、index.php内にコードを貼り付けてもスライドショーは表示されません。これには、テンプレート階層が関係しています。

トップページにスライドショーが表示されました。

上の例では、「高度な設定」の中央揃えにチェックを入れています。

スライドショー表示方法③ ウィジェットを使う

Meta slider プラグインは、ウィジェットを利用することができます。

関連ページ

ウィジェットの追加と編集

ウィジェット設定画面で、「Meta slider」を任意の場所に追加します。例として、標準テーマ「Twenty Seventeen」のサイドバーに追加してみます。

タイトルを入力し、スライダーを選択して保存をクリックします。

サイドバーにスライドショーを表示することができました。

このサイトで使っているテーマ「SWELL」では、記事スライダー機能が実装されています。

記事スライダーは、投稿記事のサムネイル画像をスライド表示する機能です。SWELLテーマは、プラグインを使わなくても簡単に記事スライダーを表示させることができます。

SWELLの公式サイトを見る

記事スライダーの解説を見る