スポンサーリンク

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

wordpress Cocoon

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

Cocoonページのレイアウトは、以下のとおり、先頭から順に「ヘッダ」、「メニュー」、「アピールエリア」が表示され、その下にページ本文が続きます。

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

アピールエリアは、横幅いっぱいに表示され訴えたい事柄や、誘導したいページなどがある場合には非常に有効なものです。
が、よく見かける企業ホームページのように、この場所に複数の写真をスライダーで表示させたいといった場合、Cocoonでは画像1枚しか指定できないため、実現できません。

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

MetaSliderのインストール

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

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

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

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

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

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

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

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

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

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

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

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

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

コメント

タイトルとURLをコピーしました