ワードプレスのテーマ「Jin（ジン）」のトップ画面にスライドショーを入れる方法パート2です。
以前の方法では、ヘッダーをまるっとスライドショーに変更していましたが、
今回は、Jinの元々の機能である「ヘッダーのコメント」と「ヘッダーのボタン」を残したまま、
ヘッダー画像だけをスライドショーに変更する方法をご紹介します。
※テーマ公式の方法ではないので、任意でカスタマイズしてください。
完成イメージの紹介
ワードプレスのテーマ「JIN」のトップページに、スライドショーを追加したイメージをご紹介します。レスポンシブ対応で、JINの機能である、TOPページヘッダーの「キャッチコピー」や「ボタン」の機能をそのまま使用できます。
TOPページの画像を、スライドショーへ差し替えるイメージですね。
Jinのトップページにスライドショーを設定しよう〜パート２〜
WordPressのプラグイン「MetaSlider（メタスライダー）」というスライドショー用のプラグインを利用します。
「MetaSlider（メタスライダー）」は、画像を選択するだけで、簡単にスライドショーを作る事がでキルプラグインです。今回はパート２となりますので、MetaSliderについても紹介やインストール方法は、前回記事をご覧ください。
簡単！プラグインを入れて、ソースをコピペするだけ！ ワードプレスのテーマ「Jin（ジン）」のトップ画面にスライドショーを入れる方法です。 非常に有能なワードプレステーマの「Jin（ジン）」ですが、デフォルトではトップのヘッダーにスライド[…]
Metasliderの効果と、Jinの相性に注意！
TOP全てをスライドショーにする場合は問題ないのですが、今回のように一部の機能を残す場合に、Metasliderの効果によって相性の良い悪いがあります。（横スライドなどは、競合により動作不良になります）
私の場合は「フェード」を使用することで解消しました。Metasliderがうまく動かない場合は、「効果」の箇所を変えてみてください。
WordPressのテーマphpを変更しましょう
では、MetaSliderで追加したいスライドショーを作成できている前提となりますので、まずは前回記事を参考にスライドショーを作成してみてください。
さっそく、Jinのトップページのヘッダー画像をスライドショーに差し替える手順をご紹介していきます。ここからは、phpファイルに変更を加えていきます。
「ダッシュボード」→「テーマファイルエディター」→「include」→「head」→「header-image.php」をクリック。
子テーマを使っている場合は、親テーマからファイルをコピーしておきましょう。
このファイルを変更すると、全てのヘッダースタイルが変更されます。適宜バックアップをとっておいてください。
phpファイルの、img呼び出し部分を変更する
今回は2カ所をガッツリと置き換えます。そのため、ファイルのバックアップやコメントアウト化など、ご自身の環境に合わせて戻せるようにしておきましょう。
4行目〜14行目（モバイルの場合のヘッダー画像表示箇所）と、
20行目〜24行目（PCの場合のヘッダー画像表示箇所）を、
メタスライダーのスライドショーコードへ置き換えしましょう。（2カ所とも同じスライドショーも可能ですが、モバイル・PCで違うスライドショーを指定することも可能です）
置き換えた後はこのような感じになります。
下記のコードをコピペしてただければ、表示されますよ！
（Metasliderのidは、環境に合わせて変更してくださいね）
<?php echo do_shortcode(‘[metaslider id=”xxx”]’); ?>
「ファイルを更新」をクリック。
TOPページを切り替えて、スライドショーを表示しよう
ではさっそく、先ほどカスタマイズしたヘッダーをホームページで表示してみましょう。
「ダッシュボード」→「外観」→「カスタマイズ」→「サイトデザイン設定」をクリック。
（今回は、スタイル8を選択しています。）
「保存して公開」をクリック。
これで全ての設定は完了です！お疲れ様でした。
簡単！プラグインを入れて、ソースをコピペするだけ！ ワードプレスのテーマ「Jin（ジン）」のトップ画面にスライドショーを入れる方法です。 非常に有能なワードプレステーマの「Jin（ジン）」ですが、デフォルトではトップのヘッダーにスライド[…]