MetaSliderの使い方【ワードプレスプラグイン】

記事に画像のスライドショーを追加したい

同じ大きさの写真を縦に並べて表示すると、ページが無駄に長くなって嫌だったので画像のスライドショーができるプラグインをさがしたところ、無料で使える便利なプラグイン、Meta Sliderをインストールして使用しています。

ワードプレスの左ダッシュボードより　プラグイン＞新規追加＞MetaSlider＞インストール＞有効化にします。
左下に　MetaSlider　という項目が追加されます。

Meta Sliderでスライドショーを追加していきます。

MetaSlider＞MetaSliderから

①「新規スライドショー」の部分をクリックすると、スライドに名前を付けることができます。

②スライドに画像を追加をします。「スライドを追加」をクリックします。

③メディアライブラリが開かれるので、写真を取り込んでいなければ④より写真ファイルをアップロードします。

⑤写真ファイルがアップロードされて、スライド表示をする画像を選択します。※画像を選ぶ時にShiftボタンを押しながらクリックすることで、複数の画像を選択できます。今回は5枚の花の写真を選びました。

⑥右下の「スライドショーを追加」をクリックします。

MetaSliderの画面に移り、選択した画像が表示されます。

⑦「Enter manually」をチェックすると　⑧キャプションに文字を編集することができます。今回は１枚目の写真のみ「１番目：白い花」とキャプションを記入しました。URLを入力すると画像にリンクを貼ることもできます。
★Scheduleのタブは有料のPro版のみで使える機能ですので、当サイトでは使用していません。

⑨「Preview」をクリックすると順番の確認とキャプションを入れた際の確認ができます。
★入れ替えたい画像をドラッグ（マウスで長押し）することで、表示させる順番をいつでも入れ替えることができます。

⑩MetaSliderの画面右下の　高度な設定　より各種設定ができます。スライドの遅延とアニメーションの速度の数値を変更することで画像の見え方を調整できます。

⑪名前を記入していなければ、ここで記入します。

⑫「保存」をクリックすると、スライドが保存されます。

スライドを保存したらWordPress管理画面から「投稿」→「新規追加」または、スライドを入れたい投稿記事を選択します。

ブロックエディタでは、ショートコードをショートコードブロックを選択して挿入します。

⑬旧エディタでは、記事内のスライドを追加したいところで、ビジュアルエディタの「スライドショーを追加」をクリックします。

作成したスライドショーの一覧が表示されます。
＊サーバの読み込みに時間がかかる場合があります。一覧が表示されない場合は一旦「投稿一覧」に戻ったのち、スライドショーを配置したい投稿ページに入り直すと一覧に表示されます。

⑭貼り付けたいスライドの名前を選択して、「スライドショーを挿入」をクリックします。

記事内に、↑上記のようなショートコードが追加されました。
このコードは、MetaSliderの管理画面で表示されていたものと同じものです。(作成した各スライドにはidが自動で設定されます)

記事投稿ページでは画像は表示されません。
記事を更新→変更をプレビュー、もしくは、更新→保存→公開するとGoogleChromeやMicrosoft EdgeやSafariなどのブラウザで、下のようにスライドショーが表示されます。

スライドショーが表示されないときは

スライドショーが表示されない場合は、コピー・アンド・ペーストするショートコードが誤っている可能性があります。
もう一度MetaSliderの設定画面に戻り、コピーするコードが誤っていないか確認しましょう。

もしくは、GoogleChromeやSafariなどのホームページにキャッシュが残っている可能性も考えられます。キャッシュクリアをした後、ページを再表示してみてください。

キャッシュクリア後にページを再表示しても、1枚のみ画像が表示されて2枚目、3枚目のが表示されない場合は画像の端をクリックしたり左右にスワイプすればスライダーの動きをします。この現象は画像読み込みに時間がかかっているからだと思います。

著作権や肖像権に関して問題がありましたら御連絡をお願いします。
著作権所有者様からの警告及び修正・撤去のご連絡があった場合には、迅速に対処または削除致します。