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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

プラグインを初めて利用する方へ

プラグインの導入（インストール・有効化）について、くわしくは下記を参考にしてください。

プラグインの使い方(インストール・有効化)

Meta slider プラグインの使い方

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

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

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

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

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

画像の追加

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

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

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

画像ごとの設定

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

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

保存とプレビュー

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

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

スライドショーの種類

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

Flex Slider
R.Slides
Nivo Slider
Coin Slider

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

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

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