【一番簡単な方法】WordPressに画像スライダーを設置！「プラグインMeta Slider」の使い方

「記事内の画像をスライダー表示したい（スライドショー）」こんな時に使えるプラグインが、今回紹介する「Meta Slider」です。
このプラグインを使えば、簡単便利に複数枚画像をスライダーにすることができます。

有料の人気テーマSWELLを使っている場合SWELL専用のブロックエディタ「タブ」を入れることで、複数枚の画像をフリック「本のページをめくるように画面を弾くようになぞる操作」して切り替える感じを実装できます。
ですがこれだとタブ風になってしまうので、もっと「シンプルなデザインにしたい」という場合はスライダー表示にするためのプラグインを使う必要があります。

今回はそんな「Meta Slider」の使い方を解説していきます。
設定方法は初心者でもわかりやすく、一番シンプルで使える方法をお伝えします。
それでは、さっそく始めていきましょう。

「Meta Slider」のインストール方法

まずはWordPressの管理画面にログイン。

左メニューから「プラグイン」→「新規追加」を選びます。

画面が変わったら、検索枠に「Meta Slider」と入力して探してください。

同じような名前やデザインのプラグインがありますが「Slider, Gallery, and Carousel by MetaSlider – Responsive WordPress Slideshows」という長いタイトルのプラグインが公式です。

「今すぐインストール」を押して、インストールが終わったら「有効化」を押します。

以下がWordpressで公式に公開されているMeta Sliderページです。こちらからダウンロードすることもできます。

有効化されると左メニューの下の方に「Meta Slider」が表示されます。

アップデートの更新頻度が低いプラグインは、セキュリティ面の心配があります。できる限り更新頻度が高いプラグインを選ぶのがコツです。

「Meta Slider」の設定方法

画像をアップする前に、まずは設定方法を見ていきたいと思います。
先ほどのインストールで、左メニューの下の方にできた「Meta Slider」を押してください。

「Blank Slideshow」が選択されていると思いますので、そのまま「Create a Slideshow」を選択で始めます。

するとこのような画面になるので、まずは右枠内の画像設定からいきましょう。

デフォルトで「New Slideshow」という名前がつきますが、これは任意のスライダー名なのでこのままで問題ありません。

画像設定

項目はデフォルトの「FlexSlider」のままでOKです。

「FlexSlider」などの項目はスライダーの見せ方といったレイアウトですが、デフォルトが標準で一番しっくりきます。
変更したいよ、という方は後からでも変更するので調整するといいでしょう。

画像の大きさを指定

続いて「幅」や「高さ」といった画像の大きさを指定します。いつもブログにアップしているサイズを指定すればいいでしょう。

例えば複数枚スライドするとしたら、大きさは1枚ごとの設定ではなく一括のサイズ指定になります。
画像のサイズ指定が完了したら画面左上の「保存」を押して設定をセーブしましょう。

吹き出し
自動で更新されことがあるので、設定したら忘れず保存しよう！

効果設定

効果は画像がスライドで切り替わる時の見せ方です。
デフォルトの「フェード」と「スライド」の2パターンから選べます。

「フェード」の方がお洒落な印象です。
ここはデフォルトの「フェード」のままでいきます。

• フェード　→　フリックすると前の画像が消えるように滑らかに切り替わる
• スライド　→　フリックするとスライドで切り替わる

矢印

画像の両サイドに表示される「フリックすると次の画像が見れますよ」という、目印のための矢印です。
デフォルトは有効になっています。ここもデフォルトのままでOKでしょう。

無効化したい場合はチェックを外します。

ナビゲーション

画像の下に表示される「他にも画像がありますよ」という目印の点です。
非表示にすることもできますが、そうするとユーザー目線でスライドできることが一目でわからないのでデフォルトの有効のままにしておきます。

高度な設定

ここで設定するのはシンプルに1か所だけです。
デフォルトのままだと、画像が勝手にアニメーションしてしまって切り替わってしまします。これがきになったのでここを変更します。

まずは高度な設定を開く→「自動再生」のチェックを外す。これだけです。

アニメーションの自動再生がある方がいいよ、という方は下までスクロールして「スライドの遅延」の数値を変更してください。

スライダーにする画像をアップロード

簡単な設定が終わったところで、さっそくスライダーを作っていきたいと思います。
まずはスライダーで使う画像をWoredPress内の「メディア」に事前にアップしておきます。

「Meta Slider」の画面に戻り、画面上の「スライドを追加」を選択。

するとWordPessのメディアライブラリが立ち上がりますので、スライダーにする画像を複数枚選択。

複数選択は「ctrl」キーを押しながら選択です。選択が終わったら「Add to slideshow」を押します

スライダーの順序

スライダーの順序は上から1番目、続いて2番目、3番目という順序です。
これを切り替える場合、ドラッグ＆ドロップで順序を変更できます。「マウスの左側ボタンを押したまま動かす」

これだけでスライダーの完成です。
さきほどの画面に戻りショートコードが自動生成されますので、そのショートコードを表示させたい箇所に貼り付けるだけです。

生成されたショートコードをクリックするとコピーされるので便利です。

ちなみに複数のショートコードを作りたい場合は、またMeta SliderのHomeに戻って「Add New」を選択して新しいショートコード生成画面を作ります。

このようにショートコードは複数作ることができます。

試しに30個ほど作りましたが、まだまだ作れそうなのでこちらも画像と同じく通常使いする分には充分な数が作れます。

ショートコードの貼り付け「SWELLの場合」

ショートコードの貼り付け方です。今回SWELLを使って見ていきますが、Wordpressのブロックエディタはデフォルトでショートコードブロックがついています。

ショートコードのブロックを呼び出して、さきほど生成されたショートコードをコピペするだけです。

多彩なブロックエディタ機能満載の人気テーマ「SWELL」。当ブログでも使用しているテーマです。
初心者でもプログラミング知識なしで、かっこいいデザインのブログが作れます。
このSWELLについて解説した記事がありますので「なんかいいテーマないかな」と探していた方は是非、そちらも合わせてご覧ください。

「画像SEO」altタグなどの設定は？

altタグは画像のSEOで重要ですから設定する必要がありますが、Meta Sliderはメディアライブラリの画像設定を引き継ぎます。すでに設定してある場合はもう設定する必要はありません。

一応ここから設定する方法をざっとみていきましょう。画像SEOで最重要は画像の説明をGoogleのクローラーに伝えるaltタグでしょうから、ここではaltタグだけを見てみます。

「一般」「SEO」「Crop」「Schedule」と項目が並んでいますが、altタグは「SEO」の「画像の代替文字列」です。
「画像タイトルテキスト」はメディアからアップすると、アップしたファイル名になるのでそれがMeta Sliderにも引き継がれます。

「画像の代替文字列」を編集する場合は「Use the image alt text」の横についているチェックを外せば編集できます。

削除したい時は

アップした画像や生成したショートコード自体を削除したいということがあるかと思います。
最後にこの削除だけ見ていきましょう。

アップした画像の削除

まずは画像の削除です。

各画像スライドの右上にある「×」を押すだけです。これだけで簡単に削除できます。

ショートコードの削除

最後にショートコードの削除方法です。
これは知らないとわかりづらいんですが、スライダー編集画面の右下にあります。

「高度な設定」下の「DELETE SLIDESHOW」を選択。

するとポップアップが表示されるので「Delete」を選択で削除できます。

これで、一番簡単なスライダーの作り方の解説をおわりにします。

まとめ

まとめです。

今回はWordPressの記事内の画像をスライダーにする方法を、プラグインのMeta Sliderを使い解説しました。

画像で見せるようなコンテンツはスライダーを設置するだけで華やかな印象が増します。
Meta Sliderは日本語対応していますし、とっても使いやすいおすすめプラグインです。

今回の記事がためになったよという方は、他にも画像についての関連記事がありますのでそちらも要チェックです。
最後までありがとうございました。

関連記事