slide-show

サイトに複数の画像や記事を切り替えるスライドを設置すれば、ユーザーに対して視覚的に訴えるとともに、限られたスペースを最大限に活用して、発信したいことを届けることが出来ます。


当記事では、WordPressにスライドショーを設置するためのプラグイン「Easing Slider」のインストール方法と使い方を丁寧にご紹介します。



Easing Sliderを導入するメリット

このプラグインを導入することによって、以下のようなスライドをサイトの「ヘッダー」「本文」「フッター」に設置することが出来ます。


[easingslider id=”18132″]

まずは、設置するための手順をご覧ください。


  • Easing Sliderをインストールして有効化する
  • 表示させる画像をアップロードする
  • 全体の設定をする
  • 表示条件の設定をする
  • スライドを設置する

以上がEasing Sliderを使う手順になります。


Easing Sliderをインストールして有効化する

管理画面のプラグインから「新規追加」をクリックします。

new-plugin

キーワードに「Easing Slider」と入力して検索したら「今すぐインストール」をクリックします。

easing-slider

「有効化」をクリックします。

activate

全体の設定をする

管理画面に戻り「Sliders」から「settings」をクリックします。

setting

サイトの表示速度を落とさないために「Load in Footer」にはチェックを入れます。これでCSSとjavascriptをフッターで読み込ませることが出来ます。Easing Sliderを完全に削除した場合、残っている全てのデータを消すには「remove data on uninstall?」にもチェックを入れます。

general-setting

「変更と保存」をクリックします。


表示する画像をアップロードする

管理画面の「Sliders」から「Add New」をクリックします。

new-add

まずはスライドの名前を入力します。関連記事のスライドを作る場合、カテゴリーやタグの名前をつけると管理しやすいかと思います。


ランダム式に表示させるには、「Randomize the slide order」にチェックを入れてから「Add Slides」をクリックします。

add-slidename

ファイルをアップロードするか、メディアファイルからスライドに使う画像を選択してから「Insert into Slider」をクリックします。ここでは後者の方法で画像を追加しています。

insert-into-slider

スライドの設定をする

各種設定は以下のようにします。

Dimensions(大きさ)

初期設定では「横640x縦400」になっていますが、必要がある場合は変更して下さい。通常はこのままです。

demensions

Transitions(移り変わり)

「Effect」では「Fade」か「Slide」を選択してください。「Duration」は初期設定で「400」になっていますが実際に表示させて調整すると良いと思います。

transitions

Preloading

初期設定でチェックが入っています。チェックされていることで読み込み時間を短縮してサイトのスピードをアップさせることが出来ます。

preloading

Next&Previous Arrow

「Arrows」では矢印の表示の有無を選びます。「On Hover」はユーザーによってスライドショーが止められたときにのみ矢印を表示させるか否か選択できます。「Position」では矢印の位置を選択します。ここはこのままでOkです。

next-previous-arrow

「Pagination Icons」と「Automatic Playback」は初期設定のままで良いと思います。

pagination-icons-automatic-playback

画像にリンクを貼る

画像に記事のリンクを貼るには、画像にカーソルを置いて「鉛筆のマーク」をクリックします。

edit

「Link To」が「None」になっているので「Custom URL」に変更します。

custom url

リンクしたいページのURLを入力します。別ウィンドウで表示する場合は「Open link in a new window/tab」にチェックを入れます。


「Title Attribute」は空白のままで「Alternative Text」には画像のタイトルを入力します。

edit-slide

「update」をクリックします。


「Publish」をクリックします。

publish

管理画面の「All Sliders」をクリックします。

all-sliders

すると作成したスライドショーの一覧が表示されています。

all-sliders-lists

本文への設置方法

記事本文にスライドショーを設置する方法を説明します。ここでは投稿を使っていますが、「固定ページ」と「投稿」のどちらでも設定可能です。


まずは「メディアを追加」のとなりに「Add Slider」がありますのでスライドを設置する場所を決めたら「Add Slider」をクリックします。※ここで使用するのはテキストエディタです。

add-slider-buttun

「Select a slider」のボックスをクリックすると登録したスライドが表示されます。

select-a-slider-box

設置するスライドを選択して「Insert Slider」をクリックします。

insert-slider

コードが挿入されます。

insert-code

実際に投稿を表示して下さい。スライドが設置されているのを確認できます。

slide-display

ヘッダーやフッターへの設置方法

ヘッダーやフッターにスライドを表示させるには、「Sliders」の一覧に表示されている「Template Function」のコードを「header.php」や「footer.php」に貼り付けます。(注)初期設定の大きさ(640×400)では上手くいかないと思いますので幅の調整が必要です。

ヘッダーに設置する手順

まずは「Template Function」のコードをコピーして管理画面の「外観」から「テーマの編集」をクリックします。


theme-edit

テーマヘッダー(header.php)を選択します。


header-php

</head>のすぐ前にコピーしたコードを貼り付けます。

inseart-templete-function

「ファイルを更新」をクリックします。

save

「ファイルの編集に成功しました。」と表示されたら画面左上の「サイトを表示」をクリックします。

check-display

これでヘッダーのスライドは完了です。

header-display

フッターに設置する手順

「テーマの編集」から「テーマフッター(footer.php)」を選択します。

footer

</footer>の直前に「Template Function」のコードを貼り付けます。

add-templete-function

「ファイルの更新」をクリックしてから「サイトを表示」をクリックします。画面を表示させてみると…

footer-display 

フッターにスライドが表示されています。


サイドバーに設置する手順

管理画面の「外観」から「ウィジェット」をクリックします。

widget

利用できる「ウィジェット」の中に「Slider」があるのでドラッグ&ドロップで「ウィジェットエリア」に移動して▼をクリッします。

widget-area

「Slider」のタイトルを入力してから「select Slider」をクリックして表示させるスライドを選択します。

select-slider

「保存」をクリックしてから「完了」をクリックします。

save

表示を確認します。

slide-sidebar

以上がEasing Sliderの使い方になります。