今回は、簡単にスライダーを表示させてくれるプラグインの紹介をします^ ^
設定もとても簡単で、TOP画面・記事内・サイドバーと好きな場所にスライダーを設定できるので
スライダーを入れてみたいなと思った時は、ぜひお試し下さい。
簡単にスライダーを表示させるプラグイン『MetaSlider』
![](https://estellamariss.com/wp-content/uploads/2018/04/f4b0701590c95b0a4c1f8679c0627faa.png)
このプラグインは、
とっても簡単にスライダーを何個か作っておいたり、表示の設定も細く出来るので初心者の方にもオススメです!
『MetaSlider』の設定方法
プラグインのインストールと有効化
①まずプラグインを追加より、キーワードに『MetaSlider』と入れて検索します。
②『MetaSlider』をインストールして、有効化します。
![](https://estellamariss.com/wp-content/uploads/2018/04/974ebf842b66eef2977be639f6f476e5.png)
スライダーの作成
サイトに表示させたいスライダーを作成していきます。
①プラグインを有効化すると、ワードプレス管理画面のメニューバーに『MetaSlider』が追加されています。
こちらから設定を行っていきます。
![](https://estellamariss.com/wp-content/uploads/2018/04/611eb1e7ed827840f4492a037053010e.png)
②『MetaSlider』をクリックすると下のような画面が表示されるので、『New』をクリック。
![](https://estellamariss.com/wp-content/uploads/2018/04/e091e0d7eea4e8a3bff8b8314964747f.png)
③新規スライド作成画面が表示されるので、『スライドを追加』をクリックして、作成したいスライドに表示させたい画像を追加していきます。
後から画像を追加したい時も、『スライドを追加』から追加していきます。
![](https://estellamariss.com/wp-content/uploads/2018/04/a00447c3e87daf68d0f2d63d10f8f921.png)
④表示させたい画像を選択します。
![](https://estellamariss.com/wp-content/uploads/2018/04/fed900ecbf3ca0030989d261c1274239.png)
⑤画像を設定したら、次に表示方法の設定を行います。
スライダーの表示サイズの設定ぐらいで問題ないので、慣れてきたら色々試してみて下さい^ ^
![](https://estellamariss.com/wp-content/uploads/2018/04/43d069c2a741fe44b92b263858e2aadc.png)
⑥高度な設定もありますが、こちらも慣れてきたら色々試してみるのがオススメです。
・幅
・高さ
・スライドの遅延
この3点の調整のみで問題なかったので、実際に表示させた後に気になる所を調整していくのがオススメです。
今回は何も変更せずに進めていきます!
![](https://estellamariss.com/wp-content/uploads/2018/04/6be3fa9be194f9440013061c97410f17.png)
⑦画像の設定、表示設定が出来たら保存をします。
これでスライダーが作成された状態になるので、次にサイトに表示させていきます。
![](https://estellamariss.com/wp-content/uploads/2018/04/21abd10bc11bd67eb76114222bb1dc85.png)
サイトに作成したスライダーを表示させる方法
『MetaSlider』で作成したスライダーはコードを使って表示させます。
Hou to Useに表示されている赤文字の部分が、表示させるためのコードです。
この場合は [metaslider id=”15″] この[ ]を含めたものがIDになります。
これはスライダーを新しく作成する度に、スライダー毎に違うIDが設定されるので、表示させたいスライダーのIDを使用します。
![](https://estellamariss.com/wp-content/uploads/2018/04/e7fa8e783fee379618ece7658f088dd8.png)
記事内にスライダーを表示させる
記事内にスライダーを表示させたい場合は、直接スライダーを挿入したい場所に、先ほどのコードを入力すだけで表示されます。
![](https://estellamariss.com/wp-content/uploads/2018/04/metaslider10.png)
または、下のように『スライダーを追加』という項目が、記事作成ページに追加されているので、こちらからも設定出来ます。
![](https://estellamariss.com/wp-content/uploads/2018/04/metaslider11.png)
『スライダーを追加』をクリックすると、スライドの選択画面が表示されるので
スライダーを選択したら、『スライドショーを挿入』をクリックすればOKです。
![](https://estellamariss.com/wp-content/uploads/2018/04/metaslider12.png)
ウィジェットを使って表示させる
次に、TOP画面やサイドバーなどに表示させる時の簡単な方法として「ウィジェット」を使用して設定していきます。
①ウィジェットでは『カスタムHTML』を使用して設定します。
表示させたい箇所に『カスタムHTML』を追加します。
![](https://estellamariss.com/wp-content/uploads/2018/04/metaslider13.png)
②タイトル(任意)と内容に、設定したいスライダーのコードをコピペして、『保存』をすればOKです^ ^
![](https://estellamariss.com/wp-content/uploads/2018/04/metaslider14.png)
③確認すると設定した箇所にスライダーが表示されていると思うので表示のされ方を確認して、気になる所は先ほどのスライダー作成画面で調整して完了です(*´∀`*)
![](https://estellamariss.com/wp-content/uploads/2018/04/metaslider15.png)
まとめ
この他にも、直接テーマファイルに設定していく方法もありますが難易度が高いので
今回は簡単に表示させられる方法を紹介しました^ ^
スライダーを作成して、スライダーのコードを表示させたい箇所に設定するだけと簡単なので是非必要に応じて使ってみて下さい。