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

WordPress

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

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

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

YUKI
YUKI

上の画像のような仕上がりになります!
それでは早速解説していきます。

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

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

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

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

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

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

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

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

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

YUKI
YUKI

幅1900px・高さは500px〜720pxくらいがオススメです!
画像もこのサイズに合わせて作成して下さいね。

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

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

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

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

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

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

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

<?php if( is_front_page() || is_home() ): ?>
コピーした部分
<?php endif; ?>
と記入されています!

12. ファイルを更新

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

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

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

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

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

YUKI
YUKI

やり方はとっても簡単です!


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

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

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

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

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

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

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

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

YUKI
YUKI

ヘッダーやアイキャッチ画像など、ホームページで使用する画像でお困りではないですか?

formom designでは、ホームページやSNSで使える画像制作を行っています。
料金や詳細は上の画像をクリックするとご覧いただけます。

インスタグラム
YUKI
YUKI

Instagramでは制作実績やWEBデザイン関連の役立つ情報などを発信しています。

よかったら、こちらもチェックしてみてください。

YUKIをフォローする

この記事を書いた人
Web Designer | YUKI

一児の母/Webデザイナー
出産後、未経験からWebデザインを学び、フリーランスWebデザイナーとして活動中。
結婚や出産で環境が変わっても、女性が自分らしく輝けるようにデザインを通してサポート。
ホームページやSNSで使用する画像/ロゴ/名刺 など制作しています。
ご依頼・お問い合わせはポートフォリオサイトをご確認ください。

WordPress
スポンサーリンク
formom design blog
タイトルとURLをコピーしました