サムネイルつきのスライダーを表示させるUltimate Responsive Image Slider

先日コワーキングスペース八王子8Beatで「そのデザインはどこが違う？デザイナーの視点を学ぶデザインレビューセミナー」を北村崇さんに行ってもらいました。当日は具体的なアドバイスをいくつかもらったのですが、中で「スライダーをつけるならサムネイルつきにした方がいいんじゃない？」と言われました。
ということで、サムネイル付のスライダープラグインを探したところUltimate Responsive Image Sliderというものを見つけましたので試してみました。

Ultimate Responsive Image Sliderのインストール

Ultimate Responsive Image Sliderをインストールします。

ダッシュボード　プラグイン＞新規追加 をクリック

Ultimate Responsive Image Slider と入力してリターン

このプラグインが見つかりますので 今すぐインストール をクリック

プラグインを有効化 をクリック。これでインストールが終了です。

スライダーを作ってみる

インストールすると

ダッシュボードに UR Image Slider というメニューが現れるので、そこにある Add New Image Slider をクリック

入力画面はとても長いのですが、とりあえず

タイトルとスライダーに使う画像をここで指定します。

Add New Images をクリック

使う画像を３つ選択して、Selectをクリック

画像が表示されます。

こんな感じに入力をしました。

他に色々指定できるものがありますが、とりあえずこれで

公開 をクリックしてスライダーを作ってみます。

スライダーを表示させる

スライダーはショートコードで表示させます。

ダッシュボード UR Image Slider＞All Image Sliders をクリック

今作ったスライダーが一覧に表示され、赤く囲った部分がそれを表示させるためのショートコードとなっています。

このショートコードをコピーして、

たとえば、投稿の新規追加、で

こんな風に入力して公開してみます。これを表示すると、

このようにスライダーが表示されました。サムネイルも表示されています(^^)/

テンプレートにスライダーを埋め込んでみる

スライダーを使う場合って、大概はトップページにスライダーを表示させたいということがあると思います。トップページ用のウィジェットが用意されているテーマならそこにショートコードを書けばいいと思いますがそうでない場合は、子テーマで、トップページのテンプレートにこのショートコードを入れることでトップページを表示することができます。

たとえばここで使っているテーマは Simplicity なので親テーマのSimplicityからheader.php というファイルを子テーマにコピーします。このファイルを開いて、ファイルの一番最後に、

<?php echo do_shortcode('[URIS id=396]'); ?>

と追加して、保存します。ショートコードをテンプレートに書くには echo do_shortcode(‘[ショートコード]’); この形で書きます。

これでトップページを見てみると、

このようにトップページにスライダーが表示されました。

オプションを指定して見る

このようにトップに表示されるときは　スライダー　というタイトルは表示したくないですね。このような設定はオプションで変更することができます。

ダッシュボード UR Image Slider＞All Image Sliders をクリック し、このスライダーの 編集 をクリック

スライダータイトル を表示させないためにはこの Display Slider Title を No にします。

他にもオプションでいくつか変えてみます

スライダーの切り替えを　Fade から Slideに
スピードを 5000（5秒） から　8000(8秒）に

サムネイルのスタイルを Border から Pointer に変更して、

Pointerで使われる色を Red にしました。

スライドのタイトルと説明の色を変更してみます。

この状態で、更新 をクリック

読み込み直すと、

このようにだいぶ雰囲気が変わりました(^^)/

残念だったこと 無料バージョンではスライダーにリンクが付けられない？

このプラグインを落としたときに「有料版がある」ということで、ちょっともしかして…とは思っていたのですがやはりというか無料版の限界がありました。スライダーにリンクを張りたかったのですが、リンクを入力する部分がありませんでした。それでは、とDescriptionにHTMLタグを書いてみたのですが保存するときにHTMLタグが削除されてしまいます。

有料版のページを見ると、やはり有料版だと　External Link Slider にチェックが入っているのでリンクの設定ができるのかな？と思われます。有料版でも$21なので、色々使ってみてこれでやってみたい！と思ったときに買うとしてもそれほどは高くないかと思いました。

どうしても無料版でリンクするときはjavascriptでなんとかなるかも、ですね。

[amazon_searchlink search=”WordPress デザイン”]