トップページのヘッダー画像はサイトの見た目の花形ですよね?
しかしWordpressテーマ「JIN」にはスライダー表示ができません!
そこでテーマの一部をカスタマイズしてスライダー表示できるようにしてみました。

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


実装方法は結構、簡単です!
JINのトップページのヘッダー画像をスライダー表示する方法
では早速、カスタマイズしてみましょう。
ヘッダー画像の用意
1500×500pxのヘッダー画像を4枚用意しました。

プラグインのインストール
スライダーのプラグインといえばこのプラグインです。
多機能なので、どんな要望もこのプラグインで要件を満たせるはずです。
Meta Slider(Slider, Gallery, and Carousel by MetaSlider – Responsive WordPress Plugin)をインストールしましょう。

スライドの作成
ダッシュボードからMeta Sliderのメニューを開きます。
NEWボタンを押して新しいスライドショーを作成
スライドを追加ボタンから画像を4枚追加しましょう。

あとは右側にある設定をしていきましょう。
画像サイズを入力

テンプレートはOutlineを選択

- 100%幅
- 自動再生
- スライドの遅延
- スライドの速度
を調整します。

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

あと個人的に見た目が気になったので、スライダーの見た目をいじってみました。
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種類のヘッダー用スライダーを作成しておきましょう。
もちろんスマホ版はスライドではなく、通常の画像をいれても良いと思います。
ヘッダー画像の確認
ヘッダー部分に画像が表示されました!

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


細かい挙動が気になる場合はプラグインの設定を調整しましょう!
JINのトップページのヘッダー画像をスライダー表示する方法まとめ
本記事では「【JIN】トップページのヘッダー画像をスライダー表示する方法」を書きました。
Meta Sliderのプラグインは優秀で、ヘッダーのテンプレートに突っ込むだけでいい感じになりますね。
JINの人でヘッダー画像に画像を複数枚使いたい時は、是非チャレンジしてみてください。
JINのカスタマイズ

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