【WordPress】テーマCocoonでコンテンツ上部に画像をスライド表示させる方法

Cocoonでコンテンツ上部をカスタマイズしてもっと素敵なサイトに変身させませんか？
本記事ではコンテンツ上部に画像をスライド表示させる方法をご紹介します。初心者の方でもカスタマイズできるように丁寧に解説していきます。

テーマCocoonでコンテンツ上部に画像を表示させてみよう

MetaSliderというプラグインを使用して、コンテンツ上部（ヘッダー下）に画像を表示し、さらに画像をスライドさせる方法を解説していきます。

プラグインでMetaSliderをインストールする

まずはWordPressを開いて、MetaSliderというプラグインをインストールして有効化しておきましょう。
MetaSliderはカスタマイズ性が高く、ホーム画面にはもちろん、投稿記事の中にもスライドを追加することができます。

MetaSliderで表示させたい画像を追加する

1. ダッシュボートの中からMetaSliderを選択

2. + スライドを追加をクリック

3. 表示させたい画像にチェックを入れる（複数ある場合は複数チェックを入れる）

4. スライドショーを追加

5. 黄色の枠内に追加した画像が表示されます。
画像にリンクをつけたい場合はURLの枠内にリンク先のURLを記入する。

6. 右側の赤枠内の幅、高さ（画像サイズ）と効果（スライドやフェード等）を指定する。

ここまで記入できたら画面を下へスクロール

7. 赤の枠内を全てコピー

テーマエディターでコードを貼り付ける

8. 外観の中のテーマエディターを選択

9. テーマのための関数をクリック

10. 右側のテーマファイルの中からtmp-user → main-before.phpを選択

11. 赤い枠内の黄色のマーカー部分に⑦でコピーした文字を貼り付け
※貼り付けする部分の上下に書かれているコードはスライダーをホーム画面のみに表示させるためのコードです。このコードを記入しない場合は、他のページでもスライダーが表示されてしまいます。

12. ファイルを更新

以上でスライドの設置完了です。

ホーム画面を開いてみると無事表示されています！
スライドがあるだけでサイトの雰囲気が変わりますね。

PHPをいじらずにコンテンツ上部へスライド画像を表示させる

ここまではPHPの記入が必要だったため少し難しかったかもしれません。PHPをいじらずにコンテンツ上部にスライド画像を表示させる方法も見つけたのでご紹介します！

この方法だと上の画像のように左右に少し余白ができてしまいます。余白がある方が好きな方はこちらの方法で設定してみて下さい。

1.　外観の中のウィジェットを選択。
2.　MetaSliderをドラッグ・アンド・ドロップでコンテンツ上部まで引っ張る。

これでコンテンツ上部にスライド画像を表示させることができました！
しかし、このままでは全ページに画像が表示されてしまうため、トップページだけに表示されるように設定していきます。

画像をトップページのみに表示させる

1.　MetaSlider右上の▲をクリック

2.　表示設定を選択して、チェック・入力したページで表示を選択

3.　ページを選択し、トップページのみにチェックを入れる

以上で完了です！お疲れ様でした。

左右の余白が違ってくるのでお好きな方で設定してみてくださいね。