ブログのトップページにスライダーを設置する[WordPress]

最近、といいますか、このところ、「スライダー(Slider)」を設置しているブログやサイトを目にする機会が増えました。駅で見かける「電子広告」のように、一定時間ごとに画像が切り替わり、画像をクリックすると該当のその記事にジャンプするものです。

Javascriptで実現できますが、自分で作るとなると結構大事です。jQueryで作られたフリーのスライダーもありますが、WordPressに組み込むのが面倒です。

探してみると、スライダーのプラグインというのもあるのですね。
今回はプラグインでスライダー機能を実装してみました。

スポンサーリンク

ブログのトップページにスライダーを設置する

今回試してみたのは、こちら2つのプラグインです。

Smart Slider 3

Smart Slider 3
プレビューしながらスライダーを構築できて、かなりこった設定もできるプラグインです。レイヤー機能があって、テキストや画像を重ね合わせることもできます。

最初こちらをインストールしてみたのですが、設定はできるものの、実際に表示させてみると画像が全くロードされず、「まろろぐ」では動作しないようでした。
残念ながら、しかたがないので諦めて、アンインストールしました。

Meta Slider

Meta Slider
次に試したのはこちらです。「Smart Slider 3」に比べるとできることは少ないのですが、スライダーとしての機能は揃っており、設定もシンプルなことから、こちらを選択することにしました。「まろろぐ」での動作も問題ありませんでした。

Meta Sliderのインストールと設定

Meta Sliderのインストールと設定は下記の手順で行いました。

Meta Sliderのインストール

管理ページの[プラグイン] ⇨ [新規追加]のページを開きます。キーワードに「Meta Slider」と入れるといくつか表示されますので、こちらを選択しインストールします。

Meta Sliderのインストール

インストールしたあとは「有効化」します。

Meta Sliderの設定

Meta Sliderを有効化すると、メニューに「Meta Slider」が現れました。そちらをクリックします。
Meta Slider

「最初のスライドショーを作成」をクリックします。
「最初のスライドショーを作成」をクリックします。

「スライドを追加」をクリックします。
「スライドを追加」をクリックします。

スライドに表示する画像を選択し、「スライダーに追加」をクリックします。

スライドに表示する画像を選択し、「スライダーに追加」をクリックします。

画像に表示される「キャプション」と画像をクリックしたときにジャンプする「URL」を入力します。
画像に表示される「キャプション」と画像をクリックしたときにジャンプする「URL」を入力します。

これを繰り返し、5つ設定しました。
「保存してプレビュー」をクリックすると、プレビューが表示されて、実際の動きを確認できます。
こちらの設定を変更することで、スライダーの種類や動作、画像の大きさを指定できます。
こちらの設定を変更することで、スライダーの種類や動作、画像の大きさを指定できます。

スライダーを設置する

ショートコードを使って各記事や固定ページに表示させることもできますが、今回の目的はトップページに表示させることですので、ショートコードは使いません。「ウイジェット」を使います。

[外観] ⇨ [ウイジェット]をクリックします。

「利用できるウイジェット」に「Meta Slider」がありますので、表示したい場所にドラッグアンドドロップします。
今回はトップページの一番上に表示したいので、「インデックスリストトップ」にドラッグアンドドロップします。

「インデックスリストトップ」にドラッグアンドドロップします。

「タイトル」は不要なので、何も入力していません。
トップページだけに表示したいので、「ウィジェットのロジック: 」に「is_home()」と入力しています。
Meta Sliderの設置

「ウィジェットのロジック 」は、条件に応じてウイジェットを表示するかしないかを設定することができるプラグインです。
こちらの記事を参照にしてください。

ある条件に応じてウイジェットを切り替えたいWordPressの場合、メニュー、新着記事、人気記事、広告などの部分は「ウイジェット...

これで保存すると、トップページにこのように表示されます。
スライダーの動作

実際の動きはトップページを御覧ください。

WEBのシステムを作ったり保守したりするSE/プログラマというものをしています。

ブログやってますがブロガーではありません。週末WEB随筆家です。
まろと呼んでください。

いわゆる「画像直リンク」、画像の複製は固くお断りいたします。
スポンサーリンク

シェアしていただけるとうれしいです

フォローよろしくお願いします

NO IMAGE
この記事が気に入ったら
いいねをお願いします!

最新記事をお届けします。