8月にぼくのブログの本家「まろろぐ」から分離させた
「まろくっく」というブログがあります。
もともと「まろろぐ」の中のカテゴリのひとつだった「料理」を別のブログとして分離させました。WordPressのテーマは「まろろぐ」と同じ「Simplicity」を使っています。
ソースも「まろろぐ」からコピーしたので、テーマも同じ、元のデザインも同じです。スキンだけ変えて、青系等からピンク系統の色に変えています。
「料理」のブログですので、できるだけたくさんの「料理」を紹介したいのですが、静的にトップページに記事が並んでいるだけでは「何か伝わらない」と思っていました。
もっとなにかダイナミックに「伝える」方法はないものかな？と。
最近、といいますか、しばらく前から、「スライダー（Slider)」を設置しているブログやサイトを目にする機会が増えました。駅で見かける「電子広告」のように、一定時間ごとに画像が切り替わり、画像をクリックすると該当のその記事にジャンプするものです。
Javascriptで実現できますが、自分で作るとなると結構大事です。jQueryで作られたフリーのスライダーもありますが、WordPressに組み込むのが面倒です。
探してみると、スライダーのプラグインというのもあるのですね。
今回はプラグインでスライダー機能を実装してみました。
ブログのトップページにスライダーを設置する
今回試してみたのは、こちら2つのプラグインです。
Smart Slider 3
プレビューしながらスライダーを構築できて、かなりこった設定もできるプラグインです。レイヤー機能があって、テキストや画像を重ね合わせることもできます。
最初こちらをインストールしてみたのですが、設定はできるものの、実際に表示させてみると画像が全くロードされず、「まろくっく」では動作しないようでした。
残念ながら、しかたがないので諦めて、アンインストールしました。
Meta Slider
次に試したのはこちらです。「Smart Slider 3」に比べるとできることは少ないのですが、スライダーとしての機能は揃っており、設定もシンプルなことから、こちらを選択することにしました。「まろくっく」での動作も問題ありませんでした。
Meta Sliderのインストールと設定
Meta Sliderのインストールと設定は下記の手順で行いました。
Meta Sliderのインストール
管理ページの[プラグイン] ⇨ [新規追加]のページを開きます。キーワードに「Meta Slider」と入れるといくつか表示されますので、こちらを選択しインストールします。
インストールしたあとは「有効化」します。
Meta Sliderの設定
Meta Sliderを有効化すると、メニューに「Meta Slider」が現れました。そちらをクリックします。
「最初のスライドショーを作成」をクリックします。
「スライドを追加」をクリックします。
スライドに表示する画像を選択し、「スライダーに追加」をクリックします。
画像に表示される「キャプション」と画像をクリックしたときにジャンプする「URL」を入力します。
これを繰り返し、5つ設定しました。
「保存してプレビュー」をクリックすると、プレビューが表示されて、実際の動きを確認できます。
こちらの設定を変更することで、スライダーの種類や動作、画像の大きさを指定できます。
スライダーを設置する
ショートコードを使って各記事や固定ページに表示させることもできますが、今回の目的はトップページに表示させることですので、ショートコードは使いません。「ウイジェット」を使います。
[外観] ⇨ [ウイジェット]をクリックします。
「利用できるウイジェット」に「Meta Slider」がありますので、表示したい場所にドラッグアンドドロップします。
今回はトップページの一番上に表示したいので、「インデックスリストトップ」にドラッグアンドドロップします。
「タイトル」は不要なので、何も入力していません。
トップページだけに表示したいので、「ウィジェットのロジック: 」に「is_home()」と入力しています。
「ウィジェットのロジック 」は、条件に応じてウイジェットを表示するかしないかを設定することができるプラグインです。
こちらの記事を参照にしてください。
![条件に応じてウィジェットの表示を切り替える方法[WordPress]](https://lab.maro-log.net/wp-content/uploads/2016/04/brown-18335_1280-300x300.jpg)
これで保存すると、トップページにこのように表示されます。
実際の動きは「まろくっく」のトップページを御覧ください。
料理のブログには最適！
これまでリストでしか紹介できなかった記事をスライダーで表示させることで、自分が見せたい「記事」をピックアップして見せることが可能になります。
ぼくの「まろくっく」のような料理のサイト、食レポのサイト、写真を多く使うサイトでは効果的ではないかと思います。
