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

【一番簡単な方法】Wordpressに画像スライダーを設置!「プラグインMeta Slider」の使い方 - mechalog
案内人

この記事はWordPressを使っている方向けです!わかりやすく解説します

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

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

ジョン齊藤

記事内の画像をフリックで複数枚切り替わる仕様に変更したかったので記事にしました。

Web犬タロウ

難しい設定は必要ありません!一番簡単な使い方を解説するよ

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

目次

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

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

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

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

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

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

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

Meta Sliderのインストール方法 - 今すぐインストール」を押す

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


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

WordPress管理画面メニュー - 「Meta Slider」が表示
Web犬タロウ

まずは、これでインストール完了。
2023年3月現在で最終アップデートが5日前、更新頻度は合格だね!

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

「Meta Slider」の設定方法

ジョン齊藤

とっても簡単、シンプルな設定方法です!


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

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

「Create a Slideshow」を選択 - Meta Sliderの使い方

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

まずは画像設定 - Meta Sliderの設定方法

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

画像設定

「FlexSlider」のままでOK - Meta Sliderの設定方法


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

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

画像の大きさを指定

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

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

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

効果設定

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

Web犬タロウ

おそらく無料版は2パターンまで、有料版だと19パターンから選べる仕様だね!普通に使う分には無料版で充分だよ、ワンワン!

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

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

矢印

矢印の設定 - Meta Sliderの設定方法


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

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

ナビゲーション

ナビゲーションの点 - Meta Sliderの使い方

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

高度な設定

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

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

「自動再生」のチェックを外す - Meta Sliderの高度な設定


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

スライドの遅延

500(早い)~10000(遅い)ms

案内人

次は画像をアップロードしてみましょう!

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

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

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

画面上の「スライドを追加」を選択 - Meta Sliderに画像をアップロード


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

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

スライダーにする画像を複数枚選択 - Meta Sliderに画像をアップロード

スライダーの順序

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

スライダーの順序を変更する - Meta Sliderに画像をアップロード

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

「スライダーの完成」ショートコードが自動生成される

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

ジョン齊藤

画像は一応20個アップロードできました。これ以上できるかは不明ですが、これだけあげれれば充分ですね。


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

ショートコードは複数作ることができる - Meta Sliderの使い方


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

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

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

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

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

ショートコードをSWELLのブロックエディタで貼り付ける

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

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

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

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

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

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

altタグの設定 - Meta Sliderに画像をアップロード


削除したい時は

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

アップした画像の削除

まずは画像の削除です。

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

Meta Sliderにアップロードした画像を削除する

ショートコードの削除

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

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

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

作成したショートコードを削除する


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

まとめ

まとめです。

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

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

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

関連記事

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次