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

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

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

SWELLの記事スライダー表示例
SWELL「記事スライダー」の表示例

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

目次

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

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

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

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

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

Meta slider プラグインで作成したスライドショーの例
Meta slider プラグインで作成したスライドショーの例

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

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

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

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

Meta slider プラグインの設定画面
Meta slider プラグインの設定画面

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

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

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

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

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

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

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

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

Meta slider プラグインの使い方

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

WordPress管理画面[Meta slider]メニュー

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

[最初のスライドショーを作成]横の+ボタンをクリック

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

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

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

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

画像の追加

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

スライドを追加をクリック

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

画像を選択後、スライダーに追加をクリック

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

画像ごとの設定

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

画像ごとのキャプション・リンク設定

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

切り抜きの位置を指定

保存とプレビュー

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

保存してプレビューをクリック

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

スライダーのプレビューを確認

スライドショーの種類

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

スライドショーの種類
Flex Slider

2つの遷移エフェクト、カルーセルモード利用可。レスポンシブ対応。

R.Slides

軽量。レスポンシブ対応。

Nivo Slider

16の遷移エフェクト、4つのテーマ(外観)。レスポンシブ対応。

Coin 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」のサイドバーに追加してみます。

「Twenty Seventeen」のサイドバーに追加

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

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

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

サイドバーにスライドショーを表示

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

SWELLの記事スライダー表示例
SWELL「記事スライダー」の表示例

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

目次