Jinのヘッダーをスライドショーにしよう

2022年版ワードプレスのテーマ「Jin(ジン)」トップページにスライドショーを入れよう〜パート2〜

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

以前の方法では、ヘッダーをまるっとスライドショーに変更していましたが、
今回は、Jinの元々の機能である「ヘッダーのコメント」と「ヘッダーのボタン」を残したまま、
ヘッダー画像だけをスライドショーに変更する方法をご紹介します。

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

Ad

完成イメージの紹介

ワードプレスのテーマ「JIN」のトップページに、スライドショーを追加したイメージをご紹介します。レスポンシブ対応で、JINの機能である、TOPページヘッダーの「キャッチコピー」や「ボタン」の機能をそのまま使用できます。

TOPページの画像を、スライドショーへ差し替えるイメージですね。

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

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

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

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

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

関連記事

簡単!プラグインを入れて、ソースをコピペするだけ! ワードプレスのテーマ「Jin(ジン)」のトップ画面にスライドショーを入れる方法です。 非常に有能なワードプレステーマの「Jin(ジン)」ですが、デフォルトではトップのヘッダーにスライド[…]

WordpressテーマJINのTOPページにスライドショーを追加する方法

Metasliderの効果と、Jinの相性に注意!

TOP全てをスライドショーにする場合は問題ないのですが、今回のように一部の機能を残す場合に、Metasliderの効果によって相性の良い悪いがあります。(横スライドなどは、競合により動作不良になります)

私の場合は「フェード」を使用することで解消しました。Metasliderがうまく動かない場合は、「効果」の箇所を変えてみてください。

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

WordPressのテーマphpを変更しましょう

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

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

「ダッシュボード」→「テーマファイルエディター」→「include」→「head」→「header-image.php」をクリック。

テーマファイルエディターを表示

JINのTOPページにスライドショーを入れるパート2

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

このファイルを変更すると、全てのヘッダースタイルが変更されます。適宜バックアップをとっておいてください。

phpファイルの、img呼び出し部分を変更する

今回は2カ所をガッツリと置き換えます。そのため、ファイルのバックアップやコメントアウト化など、ご自身の環境に合わせて戻せるようにしておきましょう。

4行目〜14行目(モバイルの場合のヘッダー画像表示箇所)と、
20行目〜24行目(PCの場合のヘッダー画像表示箇所)を、
メタスライダーのスライドショーコードへ置き換えしましょう。(2カ所とも同じスライドショーも可能ですが、モバイル・PCで違うスライドショーを指定することも可能です)

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

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

置き換えた後はこのような感じになります。

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

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

下記のコードをコピペしてただければ、表示されますよ!
(Metasliderのidは、環境に合わせて変更してくださいね)

<?php echo do_shortcode(‘[metaslider id=”xxx”]’); ?>

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

TOPページを切り替えて、スライドショーを表示しよう

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

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

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

(今回は、スタイル8を選択しています。)

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

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

関連記事

簡単!プラグインを入れて、ソースをコピペするだけ! ワードプレスのテーマ「Jin(ジン)」のトップ画面にスライドショーを入れる方法です。 非常に有能なワードプレステーマの「Jin(ジン)」ですが、デフォルトではトップのヘッダーにスライド[…]

WordpressテーマJINのTOPページにスライドショーを追加する方法
Ad
Jinのヘッダーをスライドショーにしよう
最新情報をチェックしよう!