XSERVER PC・728 x 90 wordpress

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

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

ブログのトップページにスライダーを設置する
8月にぼくのブログの本家「まろろぐ」から分離させた
「まろくっく」というブログがあります。

まろくっく
料理を作ることと食べること専門

もともと「まろろぐ」の中のカテゴリのひとつだった「料理」を別のブログとして分離させました。WordPressのテーマは「まろろぐ」と同じ「Simplicity」を使っています。
ソースも「まろろぐ」からコピーしたので、テーマも同じ、元のデザインも同じです。スキンだけ変えて、青系等からピンク系統の色に変えています。

「料理」のブログですので、できるだけたくさんの「料理」を紹介したいのですが、静的にトップページに記事が並んでいるだけでは「何か伝わらない」と思っていました。
もっとなにかダイナミックに「伝える」方法はないものかな?と。

最近、といいますか、しばらく前から、「スライダー(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]条件に応じてウィジェットの表示を切り替える方法
[WordPress]条件に応じてウィジェットの表示を切り替える方法
ある条件に応じてウイジェットを切り替えたいWordPressの場合、メニュー、新着記事、人気記事、広告などの部分は「ウイジェット...

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

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

まろくっく
料理を作ることと食べること専門

料理のブログには最適!

これまでリストでしか紹介できなかった記事をスライダーで表示させることで、自分が見せたい「記事」をピックアップして見せることが可能になります。
ぼくの「まろくっく」のような料理のサイト、食レポのサイト、写真を多く使うサイトでは効果的ではないかと思います。

WEBのシステムを作ったり保守したりするSE/プログラマというものをしています。
ブログやってますがブロガーではありません。週末WEB随筆家です。
まろと呼んでください。
広告:XSERVER:350 x 160
スポンサーリンク

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

フォローしていただけるとうれしいです

スポンサーリンク