ワードプレスのテーマ「Jin（ジン）」のトップ画面にスライドショーを入れる方法です。
非常に有能なワードプレステーマの「Jin（ジン）」ですが、デフォルトではトップのヘッダーにスライドショーを追加することができません。
「一番見られる可能性のある、トップページに、スライドショーを入れたい。」
「スライド毎に別々のURLをリンクさせたい」
といった要望をよくいただきます。
今回は、Jinのトップページに、「個別リンクできるスライドショー」を追加する方法をご紹介します！
※テーマ公式の方法ではないので、任意でカスタマイズしてください。
Jinのトップページにスライドショーを設定しよう！
今回はワードプレスのテーマ「JIN」のトップページに、スライドショーを追加する方法をご紹介します。
WordPressのプラグイン「MetaSlider（メタスライダー）」というスライドショー用のプラグインを利用します。
「MetaSlider（メタスライダー）」は、画像を選択するだけで、簡単にスライドショーを作る事ができます。
スライドショー事に、URLリンクの他、SEOを意識したコメントも追加することができます。
今回はトップページのヘッダーへ追加する方法をご紹介しますが、固定ページや投稿ページの中にも、簡単にスライドショーを追加できます。
インストールしておくと便利な、ワードプレスのおすすめプラグインの1つです。
②操作が簡単
③複数のスライドショーを作成できる画像毎に、切り抜き、SEOコメントを設定できる
④スライドショーの幅、高さ、効果、ナビゲーション表示の設定ができる
⑤レスポンシブ対応
⑥スライドショーの秒数を設定できる
・CSSのクラスを追加できる
ワードプレスプラグイン「MetaSlider 」をインストール！
まずは、スライドショーで使用する「MetaSlider」をインストールします。
インストールも検索して、ボタンを2回押すだけでかなり簡単ですので、さっそくやっていきましょう！
プラグインのインストール画面表示
「ダッシュボード」→「プラグイン」→「新規追加」をクリック。
検索ボックスに「MetaSlider」と入力します。
検索結果から、「今すぐインストール」 → インストール後に「有効化」をクリック。
ここまでで、MetaSliderのインストールし、いつでも使える状態にすることができています！
MetaSliderの設定とスライドショーの作成！
続いて、インストールしたプラグイン「MetaSlider」の設定と、スライドショーを作成をしていきましょう。
MetaSliderは無料プラグインに関わらず、かなり細かいカスタマイズもできますが、デフォルトの設定でも十分です。
これからご紹介する項目は任意でお好きなように設定していただいて構いません。
ご参考に私の今回の設定値を記載しておきますね。
MetaSliderでスライドショーを作成
「ダッシュボード」→「MetaSlider」をクリック
右上にあるメニューから「NEW」をクリック
これで新しいスライドショーを作成する画面が表示されます。
NivoSliderを選択する
まずはスライドショーの種類を選択します。
公式サイトに説明がありますが、いったんなんでもOKであれば、下記のように設定しておきましょう。
「高度な設定」をクリックして、任意の設定値に変更
こちらの設定は必須ではありません。デフォルトの設定のままでもOKです。
「スライドを追加」をクリック
あなたのワードプレスのギャラリーが表示されますので、スライドショーに追加したい写真を選びましょう。
一覧からスライドショーに追加したい写真を選択し、「Add to slideshow」をクリック。
スライドショーの画像へ、URLやコメントを追加する
スライドショーに画像が追加されたら、リンクしたいURLや、画像の説明文を追加しておきましょう。（リンクさせない場合は不要です）
- 「一般」タブ→URLを追加
- 「SEO」タブ→写真のコメントや説明を追加
- 「切り抜き」→写真を任意のサイズで切り抜くことができます
- 「Schedule」→無料版では使用することができません
「保存」をクリック
お疲れ様でした！これで、スライドショーの作成と設定が完了です。
「How To Use」の、タグをコピーする
最後に、右下にある「How To Use」のタグをコピーしておきましょう。
（後からスライドショーの表示に使います。固定ページや投稿ページに貼り付けると、その場所にスライドショーが表示されますよ）
スライドショーをWordpressヘッダーに組み込む
固定ページや投稿ページへのスライドショーの追加は、最後にコピーしたショートコードを、固定ページや投稿ページに追加すればOKです。
今回は、Jinのトップページのヘッダーに追加しますので、少しphpファイルに変更を加えていきます。
「ダッシュボード」→「テーマの編集」→「header-styleX.php」をクリック。
「header-style1.php」〜「header-style8.php」まで、headerのスタイルに関するファイルがありますので、任意のファイルを編集しましょう。どのファイルを選んでもらってもOKです。
今回は「header-style3.php」を使ってスライドショーを追加します。
子テーマを使っている場合は、親テーマからファイルをコピしておきましょう。
「header-style3.php」をクリックして、ファイルを編集する。
「header-style3.php」のファイルの中に記載されている、ヘッダー画像のソース部分をコメントアウトもしくは、削除します。
（後から元に戻す可能性がある場合は、コメントアウトしておきましょう。）
次に、先ほどコピーしたMetaSliderの「How to Use」のコードを追記しましょう。
TOPページだけに表示したい場合は、<?php if ( is_home() || is_front_page() ) : ?>を使用します。
下記のコードをコピペしてただければ、表示されますよ！
<!--ここからMetaSliderの表示部分 -->
<!--?php if ( is_home() || is_front_page() ) : ?-->
<!-- ホームにだけ表示したい -->
<!--?php echo do_shortcode('[metaslider id="xxx"]'); ?-->
<!--?php endif; ?-->
少し条件を追加してみましょう。
- TOPページだけに表示したい（TOPページだけに表示に、
<?php if ( is_home() || is_front_page() ) : ?>を使用） - スマホとPCで別のスライドショーを表示したい（PCとスマホの出し訳には、
<?php if ( is_mobile() ) : ?>を使用）
スマホ用とPC用に、2つスライドショーを作成して、追加しています。
ということで、私のJinを利用しているサイトでは、下記のような形になっています。
<!--元のヘッダー画像をコメントアウトしています
<?php if( ! get_the_top_image_url() == null || ! get_the_top_image_url_sp() == null ): ?>
<?php if( is_home() || is_front_page() ): ?>
<?php get_template_part('include/head/header-image'); ?>
<?php else: ?>
<?php if( is_top_image_child() == 'child_none') : ?>
<?php elseif( is_top_image_child() == 'child_ok') : ?>
<?php get_template_part('include/head/header-image'); ?>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
元のヘッダー画像のコメントアウト終わり-->
<!--ここからMetaSliderの表示部分です -->
<!--?php if ( is_home() || is_front_page() ) : ?-->
<!-- ↑ホームにだけ表示したい -->
<!--?php if ( is_mobile() ) : ?-->
<!-- スマホのヘッダー↓-->
<!--?php echo do_shortcode('[metaslider id="xxx"]'); ?-->
<!--?php else: ?-->
<!-- PCのヘッダー↓-->
<!--?php echo do_shortcode('[metaslider id="xxx"]'); ?-->
<!--?php endif; ?-->
<!--?php endif; ?-->
「ファイルを更新」をクリック。
これで、phpファイルの更新は完了です。
スライドショーを表示しよう
ではさっそく、先ほどカスタマイズしたヘッダーをホームページで表示してみましょう。
「ダッシュボード」→「外観」→「カスタマイズ」→「サイトデザイン設定」をクリック。
（今回は、header-style3.phpでしたので、スタイル3を選択しています。）
「保存して公開」をクリック。
これで全ての設定は完了です！お疲れ様でした。
どうでしょうか？あなたのホームページのTOPページにスライドショーが表示されましたか？
同じ方法を使えば、固定ページや投稿ページにもスライドショーを表示することができますよ！
ワードプレスのテーマ「Jin（ジン）」のトップ画面にスライドショーを入れる方法パート2です。 以前の方法では、ヘッダーをまるっとスライドショーに変更していましたが、 今回は、Jinの元々の機能である「ヘッダーのコメント」と「ヘッ[…]