簡単！プラグインを入れて、ソースをコピペするだけ！
ワードプレスのテーマ「Jin（ジン）」のトップ画面にスライドショーを入れる方法です。
非常に有能なワードプレステーマの「Jin（ジン）」ですが、デフォルトではトップのヘッダーにスライドショーを追加することができません。
「一番見られる可能性のある、トップページに、スライドショーを入れたい。」
「スライド毎に別々のURLをリンクさせたい」
サイトを作っているとよくある要望ですよね。
今回は、Jinのトップページに、「個別リンクできるスライドショー」を追加する方法をご紹介します！
※テーマ公式の方法ではないので、任意でカスタマイズしてください。
完成イメージの紹介
ワードプレスのテーマ「JIN」のトップページに、スライドショーを追加したイメージをご紹介します。もちろんレスポンシブ対応。
プラグインのインストール
WordPressのプラグイン「MetaSlider（メタスライダー）」というスライドショー用のプラグインを利用します。
「MetaSlider（メタスライダー）」は、画像を選択するだけで、簡単にスライドショーを作る事ができます。
スライドショー事に、URLリンクの他、SEOを意識したコメントも追加することができます。
今回はトップページのヘッダーへ追加する方法をご紹介しますが、固定ページや投稿ページの中にも、簡単にスライドショーを追加できます。
インストールしておくと便利な、ワードプレスのおすすめプラグインの1つです。
②操作が簡単で初心者にもおすすめ
③画像毎に、切り抜き設定、SEOコメント設定ができる
④スライドショーの幅、高さ、効果、ナビゲーション表示の設定ができる
⑤レスポンシブ対応
ワードプレスプラグイン「MetaSlider 」をインストール！
まずは、スライドショーで使用する「MetaSlider」をインストールします。
通常のプラグイン同様に、「プラグインを検索」して、「インストール→有効」とクリックするだけでかなり簡単ですので、さっそくやっていきましょう！
プラグインのインストール方法
「ダッシュボード」→「プラグイン」→「新規追加」をクリック。
検索ボックスに「MetaSlider」と入力します。
検索結果から、「今すぐインストール」 → インストール後に「有効化」をクリック。
ここまでで、MetaSliderのインストールし、いつでも使える状態にすることができています！
MetaSliderの初期設定とスライドショーの作成方法
続いて、インストールしたプラグイン「MetaSlider」の設定と、スライドショーを作成をしていきましょう。
MetaSliderは無料プラグインに関わらず、かなり細かいカスタマイズもできますが、デフォルトの設定でも十分です。
これからご紹介する項目は任意でお好きなように設定していただいて構いません。
ご参考に私の今回の設定値を記載しておきますね。
MetaSliderでスライドショーを作成
「ダッシュボード」→「MetaSlider」をクリック
初回起動時は、「Quick start」の点線箇所に画像をドロップ
※初回起動後の場合は、右上にあるメニューから「NEW」をクリック
これで新しいスライドショーを作成する画面が表示されます。
スライドショーの種類を選択する
まずはスライドショーの種類を選択します。
公式サイトに説明がありますが、いったんなんでもOKであれば、「Nivo Slider」を選択し、下記のように設定しておきましょう。
「高度な設定」をクリックして、任意の設定値に変更
こちらの設定は必須ではありません。デフォルトの設定のままでもOKです。
「スライドを追加」をクリック
あなたのワードプレスのギャラリーが表示されますので、スライドショーに追加したい写真を選びましょう。
一覧からスライドショーに追加したい写真を選択し、「Add to slideshow」をクリック。
スライドショーの画像へ、URLやコメントを追加する
スライドショーに画像が追加されたら、リンクしたいURLや、画像の説明文を追加しておきましょう。（リンクさせない場合は不要です）
- 「一般」タブ→URLを追加
- 「SEO」タブ→写真のコメントや説明を追加
- 「切り抜き」→写真を任意のサイズで切り抜くことができます
- 「Schedule」→無料版では使用することができません
「保存」をクリック
お疲れ様でした！これで、スライドショーの作成と設定が完了です。
TOPページにスライドを追加する準備をする
「How To Use」の、タグをコピーする
最後に、右下にある「How To Use」のタグをコピーしておきましょう。
（後からスライドショーの表示に使います。固定ページや投稿ページに貼り付けると、その場所にスライドショーが表示されますよ）
スライドショーをTOPページに組み込む
Jinのトップページのヘッダーに追加するために、少しWordpressテーマのphpファイルに変更を加えていきます。
使用しているヘッダースタイルの数字を確認する
Jinのテーマには、ヘッダーデザインが1〜9まで用意されています。現在あなたがどのヘッダーデザインを使用しているか確認しておきましょう。
「ダッシュボード」→「外観」→「カスタマイズ」→「サイトデザイン設定」をクリック。
※今回はスタイル３を使用していきます
テーマファイルのphpへスライドショーを追加する
「ダッシュボード」→「テーマファイルエディター」→「include」→「headerstyle」→「header-styleX.php」をクリック。
「header-style1.php」〜「header-style10.php」まで、headerのスタイルに関するファイルがありますので、任意のファイルを編集しましょう。
今回は「header-style3.php」を使ってスライドショーを追加します。
子テーマを使っている場合は、親テーマからファイルをコピしておきましょう。
「header-style3.php」をクリックして、ファイルを編集する。
「header-style3.php」のファイルの中に記載されている、「<!–グローバルナビゲーション layout1–>」を検索してください。（112行目あたり）
110行目に、先ほど制作したMetasliderのphp組み込みコードを、コピペします。
その際、TOPページだけにスライドショーを表示したいため、今回は<?php if ( is_home() || is_front_page() ) : ?>を組み合わせて追記しましょう。
下記のコードをコピペしてただければ、表示されますよ！（Metasliderのidは、環境に合わせて変更してくださいね）
<!–スライドショー–>
<?php if ( is_home() || is_front_page() ) : ?>
<?php echo do_shortcode(‘[metaslider id=”xxx”]’); ?>
<?php endif; ?>
<!–//スライドショー–>
変更後はこちらのようになります。
更新したphpファイルを保存します
「ファイルを更新」をクリック。
これで、phpファイルの更新は完了です。
どうでしょうか？あなたのホームページのTOPページにスライドショーが表示されましたか？
ワードプレスのテーマ「Jin（ジン）」のトップ画面にスライドショーを入れる方法パート2です。 以前の方法では、ヘッダーをまるっとスライドショーに変更していましたが、 今回は、Jinの元々の機能である「ヘッダーのコメント」と「ヘッダーのボタ[…]