ワードプレスのテーマ「Jin(ジン)」のトップ画面にスライドショーを入れる方法パート2です。
以前の方法では、ヘッダーをまるっとスライドショーに変更していましたが、
今回は、Jinの元々の機能である「ヘッダーのコメント」と「ヘッダーのボタン」を残したまま、
ヘッダー画像だけをスライドショーに変更する方法をご紹介します。
※テーマ公式の方法ではないので、任意でカスタマイズしてください。
Jinのトップページにスライドショーを設定しよう〜パート2〜
WordPressのプラグイン「MetaSlider(メタスライダー)」というスライドショー用のプラグインを利用します。
「MetaSlider(メタスライダー)」は、画像を選択するだけで、簡単にスライドショーを作る事がでキルプラグインです。今回はパート2となりますので、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(ジン)」ですが、デフォルトではトップのヘッダーにスライドショーを追加することができません。 「一番見[…]