トップページにスライドショーを入れよう〜パート２〜

ワードプレスのテーマ「Jin（ジン）」のトップ画面にスライドショーを入れる方法パート2です。

以前の方法では、ヘッダーをまるっとスライドショーに変更していましたが、

今回は、Jinの元々の機能である「ヘッダーのコメント」と「ヘッダーのボタン」を残したまま、

ヘッダー画像だけをスライドショーに変更する方法をご紹介します。

※テーマ公式の方法ではないので、任意でカスタマイズしてください。

Jinのトップページにスライドショーを設定しよう〜パート２〜

WordPressのプラグイン「MetaSlider（メタスライダー）」というスライドショー用のプラグインを利用します。

「MetaSlider（メタスライダー）」は、画像を選択するだけで、簡単にスライドショーを作る事がでキルプラグインです。今回はパート２となりますので、MetaSliderについても紹介やインストール方法は、前回記事をご覧ください。

関連記事

トップページにスライドショーを入れよう！

ワードプレスのテーマ「Jin（ジン）」のトップ画面にスライドショーを入れる方法です。 非常に有能なワードプレステーマの「Jin（ジン）」ですが、デフォルトではトップのヘッダーにスライドショーを追加することができません。 「一番見[…]

スライドショーをWordpressヘッダーに組み込む

では、MetaSliderで追加したいスライドショーを作成できている前提となりますので、まずは前回記事を参考にスライドショーを作成してみてください。

ここからは、Jinのトップページのヘッダー画像を、スライドショーに差し替える手順をご紹介していきます。ここからは、少しphpファイルに変更を加えていきます。

「ダッシュボード」→「テーマの編集」→「include/head/header-image.php」をクリック。

子テーマを使っている場合は、親テーマからファイルをコピーしておきましょう。

他のヘッダースタイルも一緒に変更されます。特定のファイルだけスライドショーにしたい場合は、header-image.phpを別名でコピーして編集しましょう。

「header-image.php」をクリックして、ファイルを編集する。

「header-image.php」のファイルの中に記載されている、ヘッダー画像の呼び出し部分を削除します。
（後から元に戻す可能性がある場合は、コメントアウトしておきましょう。）
次に、メタスライダーのスライドショーを呼び出す「How to Use」部分のコードを追記しましょう。

今回の条件

• TOPページだけに表示したい（TOPページだけに表示に、<?php if ( is_home() || is_front_page() ) : ?>を使用）
• スマホとPCで別のスライドショーを表示したい（PCとスマホの出し訳には、<?php if ( is_mobile() ) : ?>を使用）
• Jinの元々のヘッダー機能は残したい（ボタンとキャッチコピーの表示機能）

スマホ用とPC用に、2つスライドショーを作成して、追加しています。

ということで、私のJinを利用しているサイトでは、下記のような形になっています。

<div id="main-image" class="main-image <?php is_animation_style(); ?>"> 
	<?php if ( is_mobile() ) : ?> 
	
	<!--元のモバイルのヘッダー画像をコメントアウト 
	<?php if( get_the_top_image_url_sp() ): ?> 
	<?php if( ! empty(get_theme_mod( 'top_image_link' ))): ?> 
	<a href="<?php echo get_theme_mod( 'top_image_link' ); ?>">
	<img src="<?php echo get_the_top_image_url_sp(); ?>" />
	</a> 
	<?php else: ?> 
	<img src="<?php echo get_the_top_image_url_sp(); ?>" /> 
	<?php endif; ?> 
	<?php else: ?> 
	<?php if( ! empty(get_theme_mod( 'top_image_link' ))): ?>
	<a href="<?php echo get_theme_mod( 'top_image_link' ); ?>">
	<img src="<?php echo get_the_top_image_url(); ?>" />
	</a> 
	<?php else: ?> 
	<img src="<?php echo get_the_top_image_url(); ?>" /> 
	<?php endif; ?> 
	<?php endif; ?>
	元のモバイルのヘッダー画像をコメントアウト　終わり-->
	
	<!--メタスライダーで追加するモバイル用スライドショー--> 
	<?php echo do_shortcode('[metaslider id="3xx"]'); ?> 
	<!--メタスライダーで追加するモバイル用スライドショー　終わり--> 
	
	<div class="top-image-meta"> 
		<?php if( ! is_top_image_hl() == "" ) :?> 
		<div class="main-image-text <?php is_animation_style(); ?>
			<?php echo is_top_image_text_option(); ?>"><?php echo is_top_image_hl(); ?>
		</div>
		<?php endif; ?> 
		<?php if( ! is_top_image_text() == "" ) :?> 
		<div class="main-image-text-sub <?php is_animation_style(); ?> <?php echo is_top_image_subtext_option(); ?>">
		<?php echo is_top_image_text(); ?></div> <?php endif; ?> <?php if( ! is_top_image_btn_text() == "" ) :?> 
		<div class="top-image-btn-color <?php is_animation_style(); ?>">
			<a href="<?php is_top_image_btn_link() ?>">
		<?php echo is_top_image_btn_text(); ?></a></div> <?php endif; ?> 
	</div> 
	<?php else: ?> 
	
	<!--元のヘッダー画像をコメントアウト 
	<?php if( get_the_top_image_url() ): ?> 
	<?php if( ! empty(get_theme_mod( 'top_image_link' ))): ?> 
	<a href="<?php echo get_theme_mod( 'top_image_link' ); ?>">
	<img src="<?php echo get_the_top_image_url(); ?>" />
	</a> 
	<?php else: ?> 
	<img src="<?php echo get_the_top_image_url(); ?>" /> 
	<?php endif; ?> 
	元のヘッダー画像をコメントアウト--> 
	
	<!--メタスライダーで追加するPC用スライドショー--> 
	<?php echo do_shortcode('[metaslider id="3xx"]'); ?> 
	<!--メタスライダーで追加するPC用スライドショー　終わり--> 
	
	<div class="top-image-meta"> <?php if( ! is_top_image_hl() == "" ) :?> 
		<div class="main-image-text <?php is_animation_style(); ?> 
			<?php echo is_top_image_text_option(); ?>"><?php echo is_top_image_hl(); ?>
		</div> 
		<?php endif; ?> 
		<?php if( ! is_top_image_text() == "" ) :?> 
		<div class="main-image-text-sub <?php is_animation_style(); ?> 
			<?php echo is_top_image_subtext_option(); ?>">
			<?php echo is_top_image_text(); ?>
		</div> <?php endif; ?> 
		<?php if( ! is_top_image_btn_text() == "" ) :?> 
		<div class="top-image-btn-color <?php is_animation_style(); ?>">
			<a href="<?php is_top_image_btn_link() ?>">
				<?php echo is_top_image_btn_text(); ?>
			</a>
		</div>
		<?php endif; ?> 
	</div> 
	<?php endif; ?>
	<?php endif; ?> 
	</div>

「ファイルを更新」をクリック。

続いて、使用しているヘッダースタイルに応じて、「header-style1.php」〜「header-style8.php」の任意のファイルを編集しましょう。今回は「header-style8.php」を使ってヘッダー画像をスライドショーに変更します。

もし、header-image.phpを直接編集している場合は、作業は不要です。

「header-style8.php」をクリックして、ファイルを編集する。

<!--ヘッダー画像--> 
<?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('header-image'); ?> 
<?php else: ?> 
<?php if( is_top_image_child() == 'child_none') : ?> 
<?php elseif( is_top_image_child() == 'child_ok') : ?> 

<!--以下のファイルのパスを変更--> 
<?php get_template_part('header-image'); ?> 
<?php endif; ?> 
<?php endif; ?> 
<?php endif; ?>
	

header-style8.phpでIncludeしている（include/head/header-image.php）のファイルパスを変更し、新しいファイルパスにしましょう。子テーマを使っていて、コピーしている場合や、ファイルをリネームした場合に行います。

これで、phpファイルの更新は完了です。

「ファイルを更新」をクリック。

スライドショーを表示しよう

ではさっそく、先ほどカスタマイズしたヘッダーをホームページで表示してみましょう。

「ダッシュボード」→「外観」→「カスタマイズ」→「サイトデザイン設定」をクリック。

（今回は、header-style8.phpでしたので、スタイル8を選択しています。）

「保存して公開」をクリック。

これで全ての設定は完了です！お疲れ様でした。

関連記事

トップページにスライドショーを入れよう！

ワードプレスのテーマ「Jin（ジン）」のトップ画面にスライドショーを入れる方法です。 非常に有能なワードプレステーマの「Jin（ジン）」ですが、デフォルトではトップのヘッダーにスライドショーを追加することができません。 「一番見[…]