トップページのヘッダー画像はサイトの見た目の花形ですよね？
しかし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の時のカスタマイズをまとめました。
