スポンサーリンク

【Cocoonカスタマイズ】トップページにスライドショーを設置する方法(Meta Slider使用)

cocoonにスライドショーCocoon

Cocoonのトップページにスライドショーを設置する方法を解説します。

「MetaSlider」というプラグインを使用します。

スライドショーを設置する手順は

  1. プラグインMetaSliderでスライドショーの設定を行う。
  2. ショートコードを所定のファイルに貼り付ける。

ヘッダー下に画像のみを配置する方法はこちらの記事をご覧ください。
ヘッダー下(アピールエリア)に画像配置でインパクトのあるトップページ

トップページにスライドショーを設置したイメージ

標準的なヘッダー周り

Coonの標準的なヘッダー周りです。(オフィシャルサイトトップページ)

今回は③④は使いませんが、④の位置にスライダーを入れます。

  1. ヘッダー
  2. グローバルメニュー
  3. 通知エリア
  4. アピールエリア

スライドショーを設置前・設置後のイメージ

Cocoonテーマをインストールした直後はこのような感じ。
(グローバルメニューは分かりやすいように青色にしています。)

上から、ヘッダー、グローバルメニューと続き、その下に新着記事一覧があります。

グローバルメニューと新着記事一覧の間にスライドショーを設置します。
この位置はCocoonの「アピールエリア」の位置ですが、ここでは使いません。

cocoonにスライドショー

スライドショー設置後はこのような感じです。

cocoonにスライドショー

プラグイン「MetaSlider」について

簡単な設定でスライドショーを設置できる無料のプラグインです。
有名なプラグインなので利用者も多く、安心して利用できます。

MetaSliderの特徴
  • 4パターンのスライドと様々なアニメーションパターンを選択できる
  • スライドにアニメーションやキャプションなどを設定できる
  • スライドにリンクを付けることができる
  • ショートコードを使ってどこにでも表示できる

メタスライダーのインストール

インストール方法は省きますが、プラグインを追加で「MetaSlider」と検索すると、似たようなプラグインがいくつか出てくるので、少しわかりにくいかもしれません。

以下の画像のように「Slider, Gallery, and Carousel by MetaSlider – Responsive WordPress Plugin」と書かれたプラグインをインストールします。

cocoonにスライドショー

スライドショーの設置方法

1.「MetaSlider」でスライドショーを作成

「MetaSlider」でスライドショーを作成する手順を解説します。

WordPressのダッシュボード > MetaSlider をクリックして、MetaSliderの管理画面に入ります。

「新規スライドショー」で、「スライドを追加」をクリック

スライドショーに使用する画像を選択します。(複数画像を選択できます。)

選択した後に、「スライドショーを追加」をクリック

cocoonにスライドショー
cocoonにスライドショー

選択した写真が一覧になります。

cocoonにスライドショー

右側の設定で、サイズを決め、スライドのタイプ(上部タブ)、効果、ナビゲーションを選択します。

ここでは、FlexSlider、サイズ(1800×600x)、効果(フェード)、ナビゲーション(点)としました。
※サイズ以外はデフォルトのままです。

cocoonにスライドショー

スライドのタイプ
レスポンシブ対応 FlexSlider、R. Slider、Nivo Slider
非レスポンシブ対応 Coin Slider
また、タイプによって利用できる効果の数が変わります。

各画像の設定です。上部のタブで項目を切り替えます。
一般
キャプションと画像リンクを設定できます。
キャプションは「Enter Manually』にチェックを入れると入力できるようになります。

cocoonにスライドショー

SEO
画像タイトルと、代替文字列を入力できます。
右側のチェックを外すと入力できるようになります。
チェックを入れると、既に画像に設定されている内容を使います。

cocoonにスライドショー

切り抜き
画像を表示する際に自動的に切り抜く位置を設定できます。
真ん中を中心に切り抜く場合は、デフォルトの中央/中央でよいでしょう。

cocoonにスライドショー

右側の設定画面下部の「高度な設定」
でスライドの遅延、アニメーションの速度などより細かな設定を行うことができます。

cocoonにスライドショー

設定が終わったら、右の設定画面の真ん中当たりにあるショートコードをコピーします。

cocoonにスライドショー

2.ショートコードを表示させるファイルに貼る

ショートコードを子テーマのphpファイルに貼ります。
phpファイルといっても、子テーマを導入していれば、とても簡単にできます。

子テーマはカスタマイズには必須なので、まだの人は導入しましょう。

cocoonの「テーマエディター」をクリック

cocoonにスライドショー

子テーマを導入している場合、右側の「テーマファイル」で「編集するテーマを選択」で「Cocoon Child」になっていると思います。

「tmp-user」>「main-before.php」を選択します。

cocoonにスライドショー

「main-before.php」を開いたら、コピーしたショートコードを貼り付けます。

メタスライダー

コードは以下です。
トップページだけに表示するためのコード <?php if(is_front_page() ): ?><?php endif; ?> の間に、メタスライダーの管理画面でコピーしたショートコードを入れ、貼り付けます。

<?php if(is_front_page() ): ?>
<?php echo do_shortcode('[metaslider id="17795"]'); ?>
<?php endif; ?>

ショートコードを貼ってトップページを確認すると、スライドショーが表示されています。
画像が左右全幅で表示され、インパクトがあるトップページができました。

cocoonにスライドショー

キャプションを入れた場合はこのようになります。
半透明の黒い背景にキャプションが表示されます。

cocoonにスライドショー

画像の周りに余白を出したい場合

以下のように、画像の周りに余白を設ける方法を解説します。
(この例では、余白はPCでのみ。スマホでは余白は設けていません。)

cocoonにスライドショー

まず、右側の設定画面で画像のサイズを少し小さくします。

先の設定は1800×600pxでした。
これを1300×500にします。
※サイズは色々と変えてみて調整してください。

cocoonにスライドショー

右側の設定画面下部「高度な設定」で、
100%幅のチェックを外し、中央揃えにチェックを入れます。

グローバルメニューの余白用のCSSを追加します。
#metaslider_17795 の数字の部分をご自身のスライダ―の数字に変えてください。

@media screen and (min-width: 768px) {
#metaslider_17795{
margin-top:15px
}
}

まとめ

簡単にスライドショーが設定できたと思います。

子テーマのmain-before.phpにショートコードを貼るのも初心者でも比較的分かりやすいと思います。
Cocoonでは、カスタマイズしやすいように、子テーマにstyle.cssやfunctions.phpの他、いくつかのphpファイルが用意されています。
本当に使いやすいテーマだと感心します。

また、今回はあまり解説していませんが、MetaSliderはいろいろなパターンのスライドショーができるので、いじくりまわしてみると面白いと思います。
Cocoonには最初から搭載されているので必要ないと思いますが、カールセル機能もあります。

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