WordPress

WordPressのヘッダー画像をスライドショーにする方法

wordpress 画像 スライドショー

こんにちは、りゅうのすけ(@k_r001)です。

この記事では、WordPressにスライドショーを設定する方法についてまとめました。

 

初心者ブロガー
初心者ブロガー
WordPressの画像でスライドショーを作るには、どうやったらいいんだろう?

 

こういった質問を受けたので、スライドショーの作り方をまとめました。

スライドショーの作り方

wordpress 画像 スライドショー

WordPressでスライドショーを作るには、「Meta Slider」というプラグインを使います。

 

スライドショーを使うことで視覚効果を与えられ、訪問者の関心を惹きつけることができます。

 

ただし、画像が増えすぎると、重くなってしまうので、「3〜5枚」にしましょう。

Meta Sliderをインストール

まずは、「Meta Slider」をインストールしましょう。

 

インストール場所は、プラグイン ➡︎ 新規追加でダウンロードページに移動できます。

 

wordpress 画像 スライドショー

キーワードに「Meta Slider」と入力すると出てきます。

プラグインをインストールできたら必ず有効化しましょう。

wordpress 画像 スライドショー

パソコンにダウンロードしたい方は、⬇︎下記リンクよりダウンロードできます。

 

\Meta Sliderをダウンロード/

 

スライドショーを作成

Meta Slider」をインストールできたら、スライドショーを作成しましょう。

wordpress 画像 スライドショー

 

スライドショーを作成するには、「Meta Slider」➡︎「Meta Slider」➡︎「からのスライドショーを作成するを押します。

 

wordpress 画像 スライドショー

「スライドを追加」を押すと、メディアが表示されます。

wordpress 画像 スライドショー

 

WordPressにアップロードした画像であれば、どの画像もスライドショーで使えます。

 

wordpress 画像 スライドショー

⬆︎メディアの中から画像を選択して、「スライドショーを追加」を押すとスライドが追加されます。

 

りゅうのすけ
りゅうのすけ
スライドを追加できたら、設定もしておきましょう。

 

スライドの一般設定

wordpress 画像 スライドショー

一般設定では、URL設定をしましょう。

画像をリンクにしたい場合は、一般設定のURLにリンク先にしたいURLを貼り付けましょう。

こうすることで、画像がクリックされた時に、リンク先のページへ飛ばすことができます。

「Open in a new window」にチェックを入れておくと、ページが変わる際に新しいタブを作ります。

スライドのSEO設定

wordpress 画像 スライドショー

スライドのSEO設定は、alt属性の入力をします。

 

alt属性に狙いたいワードを入力しておくと、SEO対策になります。

 

メディアで代替テキストを入力している場合は、自動で入力されます。

 

\代替テキストの設定/

 

スライドの画像サイズの設定

wordpress 画像 スライドショー

スライドの画像サイズは、画面の右側部分で設定できます。

幅高さを、表示させたいサイズで入力しましょう。

サイズ設定ができたら、プレビューで実際に作成できたスライドショーを確認することができます。
 

\プレビュー/
wordpress 画像 スライドショー

 

画像サイズより設定したサイズが小さい場合は、切り取られて表示されるので注意してください。

 

スライドごとにサイズを合わせて作成しておくことをおすすめします。

スライドショーを表示させる

wordpress 画像 スライドショー

スライドショーを表示するには、ソースコードを貼り付ける不必要があります。

右下に使い方が表示されてますが、英語なので翻訳しましょう。

wordpress 画像 スライドショー

 

\日本語訳/

スライドショーを表示するには、次のショートコード(オレンジ色)をページに追加します。

スライドショーをテーマファイルに追加する場合は、周囲のPHPコード(灰色)を追加で含めます。

 

  • 記事内 ➡︎ オレンジのコードのみを使用
  • ヘッダーに追加 ➡︎ 灰色のコードも含めて追加

 

りゅうのすけ
りゅうのすけ
各スライドショーの追加方法を確認しましょう。

 

記事内にスライドショーを表示

wordpress 画像 スライドショー

記事内にスライドショーを追加する場合は、記事の編集画面から追加できます。

「スライドショーを追加」を押すと作成したスライドショーのタイトルが表示されます。

追加したいものを選択すると、コードが記事に追加されるので、作業はこれだけです。

\記事にスライドショーを追加した例/
wordpress 画像 スライドショー

上下が切れているのは、試しに作っただけなのでサイズなどは適当です。

スライドショーをヘッダーに追加

wordpress 画像 スライドショー

ヘッダーにスライドショーを追加するには、ソースコードをコピーしましょう。

<?php echo do_shortcode('[ metaslider id="XXXXX" ]'); ?>

 
灰色コードの部分も含めて、コピーするとこうなります。

このコピーしたコードを、テーマエディターに貼り付けます。

wordpress 画像 スライドショー

 

テーマエディターは、「外観」➡︎「テーマエディター」でテーマエディターを開くことができます。

 

wordpress 画像 スライドショー

 

コードの貼り付け箇所は、「テーマヘッダー」➡︎「<body>〜</body>」の間にコードを貼り付けます。

 

「ファイルを更新」を押せば、保存完了です。

変更に問題なければ、下記のように表示されます。

wordpress 画像 スライドショー

グローバルメニューの上側に、スライドショーを表示することができます。

 

テーマエディターを変更した場合、テーマの更新時に変更したコードが消えてしまいます。

必ず子テーマを活用しましょう!

 

まとめ

Meta Slider」を使うことで、簡単にスライドショーをサイトに追加することができます。

運用方法によってスライドショーは重要になるので、必要になれば追加してみてください。

画像のサイズを合わせるために、「Canva」などで画像を作成することをおすすめします。

 

\Canvaの使い方/

 

最後まで見ていただき、ありがとうございました。
 

ABOUT ME
りゅうのすけ
高校卒業後、地元香川で就職、一度転職を経て現在はブロガーとして活動してます。 投資をしたり、MLMに騙されそうになった経験をもとに、ブログを書いています。
PS.

記事が有益だなと思った方は、サポートしていただけるとやる気出ます。
 

\1円からのドネーション/

仕事依頼

 

\WordPress開設依頼/

公式LINE

 

\公式LINEもやってます/
公式LINE無料プレゼント

 

  • ワンクリックで登録可能
  • 個人情報はこちらからわからないようになっているのでご安心を

 

こんな人におすすめ
  • ブログを進めていく上でわからないことがある
  • 設定など誰か相談できる人が欲しい
  • 記事ネタに困った時に情報収集したい
  • ブロガー仲間が欲しい

 
困っていることなど直接相談できる場所になってますので、登録しておくといいですよ!
 

登録者特典

 

公式LINE@無料プレゼント
  1. 限定公開記事の共通パスワード配布
    • ブログ内の限定公開記事のパスワードを配布してます。
  2. サイト作成依頼クーポンコード
    • サイト作成依頼時に使えるクーポンコードを配布します。
  3. ブログスターターキット
    • ブログに必要な便利ツール、イラストなど随時更新
  4. 完全個別無料相談
    • ブログについて、1日1人限定で無料相談を受けてます。
      (営業を仕掛けるのはやめてください。)

 

\友達追加しますと、下記のメニューが表示されます。/
公式LINEリッチメニュー

 
各ボタンをポチポチ押すことで欲しい情報だけで情報を取得できるので便利ですよ!