こんにちは、りゅうのすけ(@k_r001)です。
この記事では、WordPressにスライドショーを設定する方法についてまとめました。
こういった質問を受けたので、スライドショーの作り方をまとめました。
スライドショーの作り方
WordPressでスライドショーを作るには、「Meta Slider」というプラグインを使います。
ただし、画像が増えすぎると、重くなってしまうので、「3〜5枚」にしましょう。
Meta Sliderをインストール
まずは、「Meta Slider」をインストールしましょう。
キーワードに「Meta Slider」と入力すると出てきます。
プラグインをインストールできたら必ず有効化しましょう。
パソコンにダウンロードしたい方は、⬇︎下記リンクよりダウンロードできます。
スライドショーを作成
「Meta Slider」をインストールできたら、スライドショーを作成しましょう。
「スライドを追加」を押すと、メディアが表示されます。
⬆︎メディアの中から画像を選択して、「スライドショーを追加」を押すとスライドが追加されます。
スライドの一般設定
一般設定では、URL設定をしましょう。
画像をリンクにしたい場合は、一般設定のURLにリンク先にしたいURLを貼り付けましょう。
こうすることで、画像がクリックされた時に、リンク先のページへ飛ばすことができます。
「Open in a new window」にチェックを入れておくと、ページが変わる際に新しいタブを作ります。
スライドのSEO設定
スライドのSEO設定は、alt属性の入力をします。
メディアで代替テキストを入力している場合は、自動で入力されます。
【画像SEO】WordPressの画像にalt属性を設定する意味
スライドの画像サイズの設定
スライドの画像サイズは、画面の右側部分で設定できます。
幅高さを、表示させたいサイズで入力しましょう。
サイズ設定ができたら、プレビューで実際に作成できたスライドショーを確認することができます。
スライドごとにサイズを合わせて作成しておくことをおすすめします。
スライドショーを表示させる
スライドショーを表示するには、ソースコードを貼り付ける不必要があります。
右下に使い方が表示されてますが、英語なので翻訳しましょう。
スライドショーを表示するには、次のショートコード(オレンジ色)をページに追加します。
スライドショーをテーマファイルに追加する場合は、周囲のPHPコード(灰色)を追加で含めます。
- 記事内 ➡︎ オレンジのコードのみを使用
- ヘッダーに追加 ➡︎ 灰色のコードも含めて追加
記事内にスライドショーを表示
記事内にスライドショーを追加する場合は、記事の編集画面から追加できます。
「スライドショーを追加」を押すと作成したスライドショーのタイトルが表示されます。
追加したいものを選択すると、コードが記事に追加されるので、作業はこれだけです。
上下が切れているのは、試しに作っただけなのでサイズなどは適当です。
スライドショーをヘッダーに追加
ヘッダーにスライドショーを追加するには、ソースコードをコピーしましょう。
<?php echo do_shortcode('[ metaslider id="XXXXX" ]'); ?>
灰色コードの部分も含めて、コピーするとこうなります。
このコピーしたコードを、テーマエディターに貼り付けます。
「ファイルを更新」を押せば、保存完了です。
変更に問題なければ、下記のように表示されます。
グローバルメニューの上側に、スライドショーを表示することができます。
まとめ
「Meta Slider」を使うことで、簡単にスライドショーをサイトに追加することができます。
運用方法によってスライドショーは重要になるので、必要になれば追加してみてください。
画像のサイズを合わせるために、「Canva」などで画像を作成することをおすすめします。
【パソコン用】Canvaとは？画像作成ツールCanvaの使い方
最後まで見ていただき、ありがとうございました。
