【Cocoonテーマ】Meta Sliderを使ってトップページにスライドショーを表示させる方法

こんにちは、こーすけ(@koh07a)です。

Meta Sliderというスライドショーを表示することができるプラグインを導入しました。Meta Sliderは記事内にスライドショーを表示することもでき、とても便利なプラグインです。

今回は、テーマCocoonでのMeta Sliderの導入からスライドショーの作成、トップページへの表示方法までを解説していきたいと思います。

このサイトのトップページを見ていただいたら分かると思いますが、こんな感じのでっかいスライドショーをサイトタイトルの下に配置することができます。クリックすると新しいタブで指定した記事が表示されます。

配置した理由としては、このサイトでは主に僕のお気に入りのバンドやアーティーストの紹介をしているので、その記事を一目でわかるようにしたかったからです。

では、導入の手順を順番に解説していきます。

Meta Sliderをインストール

WordPressの管理画面にログインしてプラグイン→新規追加の順にクリックしていきます。

この画像ではすでにインストールして有効化している状態になっていますが、Meta Sliderと検索すると出てくるのでインストールしてそのまま有効化しましょう。

有効化が完了すると管理メニューに[MetaSlider]の項目が追加されているのでクリックします。

この画像ではすでにスライドを作成しているので少し表示が違うかもしれませんが、New→スライドを追加の順にクリックします。

スライドショーに追加したい画像を選択して[Add to slideshow]をクリック。

画像の選択が終わったら次は各種項目を入力していきましょう。

画像の下に表示する文言です。僕は記事のタイトルをそのまま入力しました。
表示したい記事のURLを入力します。
[Use the image caption]にチェックを入れると画像内に追加したキャプションが画像下に表示されます。1.のところに記入する場合はチェックをはずしておく必要があります。[Open in a new window]にチェックを入れておくとスライドショーをクリックしたときに新しいタブで表示されます。
スライドショーのビジュアルを選択することができます。

幅や高さなどその他の項目は、自身のブログや好みにあったものを選択するとよいでしょう。あまり[高さ]の値を小さくしすぎるとスマートフォンで表示したときに見にくくなってしまうので注意が必要です。

すべての設定が終わったら最後に右上にある保存をクリックすれば完了です。

あともう一息です。最後にPHPコードをCocoon Childのテンプレート内に張り付ければ完了です。

先ほどの画面を下にスクロールするとHow to Useという欄があります。１番の[copy all]をクリックすると２番の赤枠で囲まれた部分が青くなるのでコピーしましょう。

コピーが完了したら外観→テーマ編集をクリックします。

[Cocoon Child]を選択して[tmp-user]内の[main-before.php]をクリック。最後に先ほどコピーしたPHPコードを左の赤枠の中に張り付けてファイルを更新をクリックすれば完了です。

これであなたのブログにも素晴らしいスライドショーが表示されたと思います。思っていたより簡単に導入できたのでおすすめです。この記事が少しでも役に立てば幸いです。

最後まで読んでいただきありがとうございました！この記事が役に立ったなと思ったらシェアのほうもよろしくお願いします。

では、今日はこのへんで。