「一番見られる可能性のある、トップページに、スライドショーを入れたい。」
「スライド毎に別々のURLをリンクさせたい」
サイトを作っているとよくある要望を叶えていきましょう!
JINの最新版JIN:Rではヘッダーにスライドショーがデフォルト装備!
移行手順は本家サイトで詳しく説明されていますので、カスタマイズに困っている方は、こちらへの移行も検討してみても!?
JIN;Rって?→ https://jinr.jp/
詳しい移行手順は → https://jinr.jp/manual/jin-to-jinr/
完成イメージの紹介
ワードプレスのテーマ「JIN」のトップページに、スライドショーを追加したイメージです。
スライドショーはMetaSlider(メタスライダー)を使用します
WordPressのプラグイン「MetaSlider(メタスライダー)」というスライドショー用のプラグインを利用します。
「MetaSlider(メタスライダー)」は、画像を選択するだけで、簡単にスライドショーを作る事ができます。スライドショー事に、URLリンクの他、SEOを意識したコメントも追加することができます。
今回はトップページのヘッダーへ追加する方法をご紹介しますが、固定ページや投稿ページの中にも、簡単にスライドショーを追加できます。
インストールしておくと便利な、ワードプレスのおすすめプラグインの1つです。
Metasliderの特徴
ワードプレスプラグイン「MetaSlider 」をインストール!
まずは、スライドショーで使用する「MetaSlider」をインストールします。
通常のプラグイン同様に、「プラグインを検索」し、「インストール→有効」とクリックするだけでかなり簡単!さっそくやっていきましょう!
プラグインのインストール方法
「ダッシュボード」→「プラグイン」→「新規追加」をクリック。
検索ボックスに「MetaSlider」と入力します。
検索結果から、「今すぐインストール」 → インストール後に「有効化」をクリック。
ここまでで、MetaSliderのインストールし、いつでも使える状態にすることができています!
MetaSliderの初期設定、スライドショーの作成方法
続いて、インストールしたプラグイン「MetaSlider」の設定と、スライドショーを作成をしていきましょう。
MetaSliderは無料プラグインに関わらず、かなり細かいカスタマイズもできます。今回のTOPページに使用する場合は、デフォルトの設定でも十分です。
これからご紹介する項目は任意でお好きなように設定していただいて構いません。
ご参考に私の今回の設定値を記載しておきますね。
MetaSliderでスライドショーを作成
「ダッシュボード」→「MetaSlider」をクリック
右上にあるメニューから「NEW」をクリックすると、新しいスライドショーを作成する画面が表示されます。
スライドショーの種類を設定
まずはスライドショーの種類を選択します。
公式サイトに説明がありますが、いったんなんでもOKであれば、「Nivo Slider」を選択し、下記のように設定しておきましょう。
「高度な設定」をクリックして、任意の設定値に変更しましょう。
こちらの設定は必須ではありません。デフォルトの設定のままでもOKです。
スライドに使用する画像を選ぶ
「スライドを追加」をクリックします。
あなたのワードプレスのギャラリーが表示されますので、スライドショーに追加したい写真を選びましょう。
一覧からスライドショーに追加したい写真を選択し、「Add to slideshow」をクリック。
画像へ、リンクURLやコメントを追加
スライドショーに画像が追加されたら、リンクしたいURLや、画像の説明文を追加しておきましょう。(リンクさせない場合は不要です)
- 「一般」タブ→画像のキャプションやディスクリプションと、リンクするURLを追加
- 「SEO」タブ→画像のタイトルや代替テキストを設定
- 「切り抜き」→写真を任意の位置で切り抜くことができます
- 「Schedule」→無料版では使用することができません
「保存」をクリック
お疲れ様でした!これで、スライドショーの作成と設定が完了です。
スライドを追加する準備をする
最後に、右下にある「ショートコード」のタグをコピーしておきましょう。
(後からスライドショーの表示に使います。固定ページや投稿ページに貼り付けると、その場所にスライドショーが表示されますよ)
スライドショーをTOPページに組み込む
Jinのトップページのヘッダーに追加するために、Wordpressテーマファイルに変更を加えていきます。
使用しているヘッダースタイルの数字を確認する
Jinのテーマには、ヘッダーデザインが1〜9まで用意されています。現在あなたがどのヘッダーデザインを使用しているか確認しておきましょう。
「ダッシュボード」→「外観」→「カスタマイズ」→「サイトデザイン設定」をクリック。
※今回はスタイル3を使用していきます
テーマファイルのphpへスライドショーを追加する
「ダッシュボード」→「テーマファイルエディター」→「include」→「headerstyle」→「header-style3.php」をクリック。
※「header-style1.php」〜「header-style10.php」まで、headerのスタイルに関するファイルがありますので、任意のファイルを編集しましょう。
今回は「header-style3.php」を使ってスライドショーを追加します。
※子テーマを使っている場合は、親テーマからファイルをコピーしておきましょう。
「header-style3.php」を編集
いよいよスライドショーを追加します。
「header-style3.php」のファイルの中に記載されている、「<!–グローバルナビゲーション layout1–>」を検索してください。(112行目あたり)
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; ?>
<!--//スライドショー-->
変更後はこちらのようになります。
更新したphpファイルを保存します
「ファイルを更新」をクリック。
これで、phpファイルの更新は完了です。
どうでしょうか?あなたのホームページのTOPページにスライドショーが表示されましたか?
こんにちは!
上記の内容で無事スライドショーにすることが出来ました!
しかし、ヘッダー画像のキャッチフレーズ・ボタンが表示できなくなってしまいました。
スライドショーにしたまま上記2つも表示できるようにするにはどうすべきでしょう?
よろしければご回答よろしくお願いいたします!
ゆうさん
コメントありがとうございます、鰭です。
いただいています「ヘッダー画像のキャッチフレーズ・ボタンが表示できなくなってしまいました。」は、テーマJinの機能の事で良いでしょうか?
今回のご紹介方法は、ヘッダーをマルッとスライドショーに入れ替えてしまっているため、Jinのヘッダー機能が全て使えない状態になります。
そのため、Jinの機能を残して、純粋にヘッダー画像のみを、MetaSliderのスライドショーに変えたい場合のエントリーを書きましたので、こちらを参考にしてみてください♪
https://okimono.life/wordpress/jin/jin-slideshow2/
以上です!
お役にたてばうれしいです^^
ご丁寧にありがとうございます!
無事できました!
これからも参考にさせていただきます!
こんにちは!
ヘッダーをスライドショーにしたく、このサイトに辿り着きました。
phpにスライドショーのショートコードを貼り付けるところまで来たのですが、記事の
“子テーマを使っている場合は、親テーマからファイルをコピしておきましょう。”
の方法が分かりません。失敗のリスクを考えて子テーマに貼り付けたいのですが、どうやって子テーマのテキストファイルエディターにheaderstyleを貼り付ければ良いのでしょうか?
教えて下さい。
よろしくお願いします。
コメントありがとうございます。
現在、子テーマは既にお使いでしょうか?
新しく、JINの子テーマの作り方と、その後カスタマイズ用のファイルのコピーの仕方をアップしました。
よろしければ、ご参考にしてみてください。
https://okimono.life/wordpress-theme/jin/jin-childtheme/
こんにちわ!
ファイル編集する所までは漕ぎ着けたのですが、そこから先の画像ソースをコメントアウト又は削除する箇所とPHPコードどこにをコピペすれば良いのかが分かりません。
上記コードを削除しコードをコピペしmeta slider IDを入力しても反映されませんでした。
当方かなりの初心者でお手上げ状態なので、助言いただけたら幸いです。
記事を更新いたしました。
私の環境で110行目あたりに追記する形でした。
検索する際に、 のコメントを検索してみてください。
よろしくお願いいたします。
[…] […]