1年に一度の超セール!Amazonブラックフライデー! ※11/26(金)~12/2日(木)まで!セール品を見る

【JIN】トップページのヘッダー画像をスライダー表示する方法

トップページのヘッダー画像はサイトの見た目の花形ですよね?

しかしWordpressテーマ「JIN」にはスライダー表示ができません!

そこでテーマの一部をカスタマイズしてスライダー表示できるようにしてみました。

複数枚のヘッダー画像がアニメーションして切り替えることができます。

すいみん

実装方法は結構、簡単です!

目次

JINのトップページのヘッダー画像をスライダー表示する方法

では早速、カスタマイズしてみましょう。

STEP

ヘッダー画像の用意

1500×500pxのヘッダー画像を4枚用意しました。

STEP

プラグインのインストール

スライダーのプラグインといえばこのプラグインです。

多機能なので、どんな要望もこのプラグインで要件を満たせるはずです。

Meta Slider(Slider, Gallery, and Carousel by MetaSlider – Responsive WordPress Plugin)をインストールしましょう。

似たようなプラグインもあるので注意してください!

STEP

スライドの作成

ダッシュボードからMeta Sliderのメニューを開きます。

NEWボタンを押して新しいスライドショーを作成

スライドを追加ボタンから画像を4枚追加しましょう。

あとは右側にある設定をしていきましょう。

画像サイズを入力

テンプレートはOutlineを選択

  • 100%幅
  • 自動再生
  • スライドの遅延
  • スライドの速度

を調整します。

最後にショートコードの番号(この場合は764)をメモして、右上の保存ボタンを押して完了です。

あと個人的に見た目が気になったので、スライダーの見た目をいじってみました。

STEP

JINのテンプレートの編集

あとはメモしたショートコードをJINのテンプレートに埋め込むだけです。

まずは親テーマからテンプレートをダウンロードしましょう。

wp-content/themes/jin/include/headerstyle/header-style3.php

今回は一番シンプルなheader-style3.phpをカスタマイズしてみます。

header-style3.phpを開いて、下記のコードを一番下に追加しましょう。

編集が終わったら保存して、子テーマに親テーマと同じ階層構造になる場所に保存しましょう。

/wp-content/themes/jin-child/include/headerstyle/header-style3.php

PCとスマホのサイズに合わせて、2種類のヘッダー用スライダーを作成しておきましょう。

もちろんスマホ版はスライドではなく、通常の画像をいれても良いと思います。

STEP

ヘッダー画像の確認

ヘッダー部分に画像が表示されました!

3秒くらい待つとふわっと画像が切り替わります。

すいみん

細かい挙動が気になる場合はプラグインの設定を調整しましょう!

JINのトップページのヘッダー画像をスライダー表示する方法まとめ

本記事では「【JIN】トップページのヘッダー画像をスライダー表示する方法」を書きました。

Meta Sliderのプラグインは優秀で、ヘッダーのテンプレートに突っ込むだけでいい感じになりますね。

JINの人でヘッダー画像に画像を複数枚使いたい時は、是非チャレンジしてみてください。

JINのカスタマイズ

すいみん

JINの時のカスタマイズをまとめました。

WordPressテーマJINのカスタマイズまとめ

目次
閉じる