【WordPress】【Cocoon】ヘッダー下にスライダー画像を表示する

仕事でホームページ作成を行う際、費用を抑えるためWordPressの無料テーマ「Cocoon」を用いる場合があります。

Cocoonページのレイアウトは、以下のとおり、先頭から順に

1. ヘッダ
2. メニュー
3. アピールエリア
4. 本文

となっています。

このうち「アピールエリア」というのは、背景画像つきで、説明文とボタンが表示されるエリアです。

アピールエリアは、横幅いっぱいに表示することが出来ます。ですから、訴えたい事柄や、誘導したいページなどがある場合には非常に有効なものです。

しかし、よく見かける企業ホームページのように、この場所に複数の写真をスライダーで表示させたいといった場合、アピールエリアでは画像１枚しか指定できないため、実現できません。

そこで、替わって実現するために、「MetaSlider」というプラグインを使って実現したのでご紹介します。

MetaSliderのインストール

まずは、プラグインを追加しましょう。

「プラグイン」→「新規追加」でインストール画面を開いて、検索窓に「MetaSlider」と入力してください。

何種類か出てきますが、丸アイコンのMetaSliderをインストールしてください。

MetaSliderの設定

「MetaSlider」プラグインをインストールして有効化すると、ダッシュボードに「MetaSlider」というメニューが追加されているので選択します。

※初回だけ承認画面が表示されますので「Agree」を選択してください。

• 画面右上の「New（Add a new slideshow）」ボタンをクリックします。
• 画面右上の「スライドを追加」ボタンをクリックします。
  スライダー表示させたい画像を追加していきましょう。
  今回はサイズを「1400px」×「450px」に設定。効果は「フェード」を選びました。
• 画面右上の「保存」ボタンをクリックして、作成したスライドショーを保存します。
• 画面右下に「使い方」という項目がありますので、ここに記載されている「<?php 〜 ?>」の部分をコピーしておきます。

ダッシュボードで、「外観」＞「テーマエディター」を選択します。

「テーマファイル」で、「tmp-user」->「main-before.php」を選択します。

MetaSliderの使い方のところにあった「<?php 〜 ?>」の記述を、ここに貼り付けます。

このように、スライダーが表示できました。

しかし、このままでは全てのページでスライダーが表示されてしまいます。

トップページだけに表示させる

トップページだけ表示させるように先ほどのPHPに条件文を追加します。

これで無事、トップページだけスライダーが表示されるようになりました。