WordPress 〜トップページの先頭部分にスライダー画像を表示する方法

スポンサーリンク
お役立ち情報

本ホームページでは、WordPressの無料テーマ「Cocoon」を用いています。

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

このうち「アピールエリア」というのは、背景画像つきで、説明文とボタンが表示されるエリアです。
アピールエリアは、訴えたい事柄や、誘導したいページなどがある場合には非常に有効なものですが、本ホームページでは、よく見かける企業ホームページのように、この場所に複数の写真をスライダーで表示させたいと思います。

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

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

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

  • 「テーマファイル」で、「tmp-user」>「main-before.php」を選択します。
  • 先ほどコピーした「<?php 〜 ?>」の記述を、ここにペーストします。今回は、トップページのみにスライダーを表示させたかったので、上記のとおり、IF文を追加しました。

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

 

なお、私がWordPressの使い方を習得するのにあたっては、以下の書籍を参考にさせていただきました。

WordPressについては、Web上にもたくさんの情報がありますが、きちんと理解して使いたい場合には、一度書籍も読んでおいた方がいいかもしれません。

スポンサーリンク
スポンサーリンク
お役立ち情報
スポンサーリンク
シェアする
さとやまノート