サイトに複数の画像や記事を切り替えるスライドを設置すれば、ユーザーに対して視覚的に訴えるとともに、限られたスペースを最大限に活用して、発信したいことを届けることが出来ます。
当記事では、WordPressにスライドショーを設置するためのプラグイン「Easing Slider」のインストール方法と使い方を丁寧にご紹介します。
このページの目次
Easing Sliderを導入するメリット
このプラグインを導入することによって、以下のようなスライドをサイトの「ヘッダー」「本文」「フッター」に設置することが出来ます。
まずは、設置するための手順をご覧ください。
- Easing Sliderをインストールして有効化する
- 表示させる画像をアップロードする
- 全体の設定をする
- 表示条件の設定をする
- スライドを設置する
以上がEasing Sliderを使う手順になります。
Easing Sliderをインストールして有効化する
管理画面のプラグインから「新規追加」をクリックします。
キーワードに「Easing Slider」と入力して検索したら「今すぐインストール」をクリックします。
「有効化」をクリックします。
全体の設定をする
管理画面に戻り「Sliders」から「settings」をクリックします。
サイトの表示速度を落とさないために「Load in Footer」にはチェックを入れます。これでCSSとjavascriptをフッターで読み込ませることが出来ます。Easing Sliderを完全に削除した場合、残っている全てのデータを消すには「remove data on uninstall?」にもチェックを入れます。
「変更と保存」をクリックします。
表示する画像をアップロードする
管理画面の「Sliders」から「Add New」をクリックします。
まずはスライドの名前を入力します。関連記事のスライドを作る場合、カテゴリーやタグの名前をつけると管理しやすいかと思います。
ランダム式に表示させるには、「Randomize the slide order」にチェックを入れてから「Add Slides」をクリックします。
ファイルをアップロードするか、メディアファイルからスライドに使う画像を選択してから「Insert into Slider」をクリックします。ここでは後者の方法で画像を追加しています。
スライドの設定をする
各種設定は以下のようにします。
Dimensions（大きさ）
初期設定では「横640x縦400」になっていますが、必要がある場合は変更して下さい。通常はこのままです。
Transitions(移り変わり）
「Effect」では「Fade」か「Slide」を選択してください。「Duration」は初期設定で「400」になっていますが実際に表示させて調整すると良いと思います。
Preloading
初期設定でチェックが入っています。チェックされていることで読み込み時間を短縮してサイトのスピードをアップさせることが出来ます。
Next&Previous Arrow
「Arrows」では矢印の表示の有無を選びます。「On Hover」はユーザーによってスライドショーが止められたときにのみ矢印を表示させるか否か選択できます。「Position」では矢印の位置を選択します。ここはこのままでOkです。
「Pagination Icons」と「Automatic Playback」は初期設定のままで良いと思います。
画像にリンクを貼る
画像に記事のリンクを貼るには、画像にカーソルを置いて「鉛筆のマーク」をクリックします。
「Link To」が「None」になっているので「Custom URL」に変更します。
リンクしたいページのURLを入力します。別ウィンドウで表示する場合は「Open link in a new window/tab」にチェックを入れます。
「Title Attribute」は空白のままで「Alternative Text」には画像のタイトルを入力します。
「update」をクリックします。
「Publish」をクリックします。
管理画面の「All Sliders」をクリックします。
すると作成したスライドショーの一覧が表示されています。
本文への設置方法
記事本文にスライドショーを設置する方法を説明します。ここでは投稿を使っていますが、「固定ページ」と「投稿」のどちらでも設定可能です。
まずは「メディアを追加」のとなりに「Add Slider」がありますのでスライドを設置する場所を決めたら「Add Slider」をクリックします。※ここで使用するのはテキストエディタです。
「Select a slider」のボックスをクリックすると登録したスライドが表示されます。
設置するスライドを選択して「Insert Slider」をクリックします。
コードが挿入されます。
実際に投稿を表示して下さい。スライドが設置されているのを確認できます。
ヘッダーやフッターへの設置方法
ヘッダーやフッターにスライドを表示させるには、「Sliders」の一覧に表示されている「Template Function」のコードを「header.php」や「footer.php」に貼り付けます。（注）初期設定の大きさ（640×400）では上手くいかないと思いますので幅の調整が必要です。
ヘッダーに設置する手順
まずは「Template Function」のコードをコピーして管理画面の「外観」から「テーマの編集」をクリックします。
テーマヘッダー（header.php）を選択します。
＜/head＞のすぐ前にコピーしたコードを貼り付けます。
「ファイルを更新」をクリックします。
「ファイルの編集に成功しました。」と表示されたら画面左上の「サイトを表示」をクリックします。
これでヘッダーのスライドは完了です。
フッターに設置する手順
「テーマの編集」から「テーマフッター（footer.php）」を選択します。
＜/footer＞の直前に「Template Function」のコードを貼り付けます。
「ファイルの更新」をクリックしてから「サイトを表示」をクリックします。画面を表示させてみると…
フッターにスライドが表示されています。
サイドバーに設置する手順
管理画面の「外観」から「ウィジェット」をクリックします。
利用できる「ウィジェット」の中に「Slider」があるのでドラッグ＆ドロップで「ウィジェットエリア」に移動して▼をクリッします。
「Slider」のタイトルを入力してから「select Slider」をクリックして表示させるスライドを選択します。
「保存」をクリックしてから「完了」をクリックします。
表示を確認します。
以上がEasing Sliderの使い方になります。