Wordpress

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

記事内に商品プロモーションを含む場合があります
おなやみにゃん
おなやみにゃん
「Jin(ジン)」のトップページのヘッダーに、スライドショーを追加したいです。
にゃん花子
にゃん花子
はいはい、できますにゃん!スライドショーのプラグインを使って、コピー&ペーストでカスタマイズしてみましょう!

「一番見られる可能性のある、トップページに、スライドショーを入れたい。」
「スライド毎に別々のURLをリンクさせたい」

サイトを作っているとよくある要望を叶えていきましょう!

※テーマ公式の方法ではないので、任意でカスタマイズしてください。
JIN最新モデルJIN:Rに移行する選択肢も!

JINの最新版JIN:Rではヘッダーにスライドショーがデフォルト装備!
移行手順は本家サイトで詳しく説明されていますので、カスタマイズに困っている方は、こちらへの移行も検討してみても!?

JIN;Rって?→ https://jinr.jp/
詳しい移行手順は → https://jinr.jp/manual/jin-to-jinr/

完成イメージの紹介

ワードプレスのテーマ「JIN」のトップページに、スライドショーを追加したイメージです。

スライドショーはMetaSlider(メタスライダー)を使用します

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

「MetaSlider(メタスライダー)」は、画像を選択するだけで、簡単にスライドショーを作る事ができます。スライドショー事に、URLリンクの他、SEOを意識したコメントも追加することができます。

今回はトップページのヘッダーへ追加する方法をご紹介しますが、固定ページや投稿ページの中にも、簡単にスライドショーを追加できます。
インストールしておくと便利な、ワードプレスのおすすめプラグインの1つです。

Metasliderの特徴
①無料で使える、画像スライドショー作成プラグイン
②操作が簡単で初心者にもおすすめ
③画像毎に、切り抜き設定、SEOコメント設定ができる
④スライドショーの幅、高さ、効果、ナビゲーション表示の設定ができる
⑤レスポンシブ対応

ワードプレスプラグイン「MetaSlider 」をインストール!

まずは、スライドショーで使用する「MetaSlider」をインストールします。

通常のプラグイン同様に、「プラグインを検索」し、「インストール→有効」とクリックするだけでかなり簡単!さっそくやっていきましょう!

プラグインのインストール方法

「ダッシュボード」「プラグイン」「新規追加」をクリック。

検索ボックスに「MetaSlider」と入力します。

検索結果から、「今すぐインストール」 →  インストール後に「有効化」をクリック。

Wordpressスライドショー Metasliderをインストール

ここまでで、MetaSliderのインストールし、いつでも使える状態にすることができています!

MetaSliderの初期設定、スライドショーの作成方法

続いて、インストールしたプラグイン「MetaSlider」の設定と、スライドショーを作成をしていきましょう。

MetaSliderは無料プラグインに関わらず、かなり細かいカスタマイズもできます。今回のTOPページに使用する場合は、デフォルトの設定でも十分です。

これからご紹介する項目は任意でお好きなように設定していただいて構いません。
ご参考に私の今回の設定値を記載しておきますね。

MetaSliderでスライドショーを作成

「ダッシュボード」「MetaSlider」をクリック

右上にあるメニューから「NEW」をクリックすると、新しいスライドショーを作成する画面が表示されます。

スライドショーの種類を設定

まずはスライドショーの種類を選択します。
公式サイトに説明がありますが、いったんなんでもOKであれば、「Nivo Slider」を選択し、下記のように設定しておきましょう。

「高度な設定」をクリックして、任意の設定値に変更しましょう。
こちらの設定は必須ではありません。デフォルトの設定のままでもOKです。

スライドに使用する画像を選ぶ

「スライドを追加」をクリックします。
あなたのワードプレスのギャラリーが表示されますので、スライドショーに追加したい写真を選びましょう。

Metasliderで写真を追加する

一覧からスライドショーに追加したい写真を選択し、「Add to slideshow」をクリック。

スライドショーに写真追加1
画像へ、リンクURLやコメントを追加

スライドショーに画像が追加されたら、リンクしたいURLや、画像の説明文を追加しておきましょう。(リンクさせない場合は不要です)

  1. 「一般」タブ→画像のキャプションやディスクリプションと、リンクするURLを追加
  2. 「SEO」タブ→画像のタイトルや代替テキストを設定
  3. 「切り抜き」→写真を任意の位置で切り抜くことができます
  4. 「Schedule」→無料版では使用することができません
スライドショーに写真追加2
スライドショーに写真追加3

「保存」をクリック

Metasliderを 保存

お疲れ様でした!これで、スライドショーの作成と設定が完了です。

スライドを追加する準備をする

スライドショーをTOPページに組み込む

Jinのトップページのヘッダーに追加するために、Wordpressテーマファイルに変更を加えていきます。

使用しているヘッダースタイルの数字を確認する

Jinのテーマには、ヘッダーデザインが1〜9まで用意されています。現在あなたがどのヘッダーデザインを使用しているか確認しておきましょう。

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

※今回はスタイル3を使用していきます

Jinのヘッダースタイル 番号を確認する

テーマファイルのphpへスライドショーを追加する

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

※「header-style1.php」〜「header-style10.php」まで、headerのスタイルに関するファイルがありますので、任意のファイルを編集しましょう。

今回は「header-style3.php」を使ってスライドショーを追加します。

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

テーマファイルエディターを表示
テーマファイルを更新する
「header-style3.php」を編集

いよいよスライドショーを追加します。

「header-style3.php」のファイルの中に記載されている、「<!–グローバルナビゲーション layout1–>」を検索してください。(112行目あたり)

JIN topページにスライドショーを追加する、phpファイル編集

110行目に、先ほど制作したMetasliderのショートコードを、コピペします。


その際、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; ?>
<!--//スライドショー-->

変更後はこちらのようになります。

JIN topページにスライドショーを追加する、phpファイル編集

更新したphpファイルを保存します

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

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

どうでしょうか?あなたのホームページのTOPページにスライドショーが表示されましたか?

ABOUT ME
にゃん花子
「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め|文系から独学でWeb屋さんになった人|インフラ分野のわかるWebディレクター|主にWordpressのサイト立ち上げ、リプレイス、運用をしています|PC画面にブツブツ呟きながら、制作するのが好きです|坐骨神経痛とぎっくり腰経験済 | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中|小学1年生の壁に負けじと2024年も奮闘します

POSTED COMMENT

  1. ゆう より:

    こんにちは!

    上記の内容で無事スライドショーにすることが出来ました!

    しかし、ヘッダー画像のキャッチフレーズ・ボタンが表示できなくなってしまいました。
    スライドショーにしたまま上記2つも表示できるようにするにはどうすべきでしょう?

    よろしければご回答よろしくお願いいたします!

    • にゃん花子 より:

      ゆうさん

      コメントありがとうございます、鰭です。

      いただいています「ヘッダー画像のキャッチフレーズ・ボタンが表示できなくなってしまいました。」は、テーマJinの機能の事で良いでしょうか?

      今回のご紹介方法は、ヘッダーをマルッとスライドショーに入れ替えてしまっているため、Jinのヘッダー機能が全て使えない状態になります。

      そのため、Jinの機能を残して、純粋にヘッダー画像のみを、MetaSliderのスライドショーに変えたい場合のエントリーを書きましたので、こちらを参考にしてみてください♪
      https://okimono.life/wordpress/jin/jin-slideshow2/

      以上です!
      お役にたてばうれしいです^^

      • ゆう より:

        ご丁寧にありがとうございます!
        無事できました!

        これからも参考にさせていただきます!

    • こんにちは!
      ヘッダーをスライドショーにしたく、このサイトに辿り着きました。

      phpにスライドショーのショートコードを貼り付けるところまで来たのですが、記事の

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

      の方法が分かりません。失敗のリスクを考えて子テーマに貼り付けたいのですが、どうやって子テーマのテキストファイルエディターにheaderstyleを貼り付ければ良いのでしょうか?
      教えて下さい。
      よろしくお願いします。

  2. 初心者ブロガー より:

    こんにちわ!

    ファイル編集する所までは漕ぎ着けたのですが、そこから先の画像ソースをコメントアウト又は削除する箇所とPHPコードどこにをコピペすれば良いのかが分かりません。

    上記コードを削除しコードをコピペしmeta slider IDを入力しても反映されませんでした。
    当方かなりの初心者でお手上げ状態なので、助言いただけたら幸いです。

    • にゃん花子 より:

      記事を更新いたしました。
      私の環境で110行目あたりに追記する形でした。
      検索する際に、 のコメントを検索してみてください。
      よろしくお願いいたします。

にゃん花子 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

wp-puzzle.com logo