[WordPress]MetaSliderで画像スライドを表示する

WordPress

トップページにおすすめ記事のスライダーを表示したいと思ったのですが、テーマに紐づいているスライダーだとヘッダ下にしか表示する事が出来ないため、好きな場所に表示出来るMetaSliderを使用しました。

プラグインの追加

管理画面のプラグイン→新規追加→プラグインの検索で”MetaSlider”と検索してください。

インストール&有効化する事で管理画面にMetaSliderが追加されます。

頻繁に更新されているようなので、最新のWordPressバージョンとも互換性があり良いですね。

 

スライダーの追加

MetaSliderの管理画面を開いて、”Add a New Slidershow”を押します。

中途半端に英語と日本語表記があり、少々見辛いです。

 

New Slidershowというタブが出るので、このタブの部分に今回作成するスライダーの名前を付けます。

私はトップページに表示するためのスライダーを作成したいので、名前もトップページにしました。

次にスライドを追加から、表示したい画像を選択します。

その後、キャプションやリンク先、SEO対策等を記載できるようになります。

 

設定に関しては、簡単な設定から高度の設定まで色々と設定できますが、トライアンドエラーで自分で手を動かしながら好みのスライダーになるように設定して見て下さい。

 

このスライダーは下記のような設定をしてるので、良かったら参考にして下さい。

 

  

 

記事や固定ページに表示する

MetaSliderをインストールした後に記事や固定ページの作成画面を開くと、メディアを追加の隣にスライダーを追加というボタンが増えていると思います。

 

ボタンを押すとスライダーの一覧が表示されるので、使用したいスライダーを選択して、”スライドショーを挿入”ボタンを押します。

 

metaslider id=選択したスライダーのID が記事内に入ったら完了です。

プレビュー表示をして選択したスライダーが表示されている事を確認してください。

 

まとめ

簡単に任意の場所に画像スライドを表示する事が出来ました。

また、FrexSliderを使用したのですがスマホで表示した場合は1画像でスライドするよう表示してくれていたのでレシポンシブル対応もしっかりとなっていました。

NiboSliderを利用すると、レシポンシブルにはならないそうなので、スマホで見る事も考慮するのであれば他のテーマを選んだ方が良いかもしれません。

 

バージョン情報

WordPress:5.1.1
MetaSlider:3.12.1
theme:Cocoon Child (1.0.6)
タイトルとURLをコピーしました