今回は無料のWordPressプラグイン「Meta Slider」について、福岡一、丁寧に導入から使い方まで解説します。

最も人気のあるWordPressのスライダープラグインである「Meta Slider」は導入の手軽さや使い方が簡単なことから、WP初心者の方でも簡単にスライドショーが組み込めるのでお勧めです。

4つの異なるスライドショータイプからお好みのタイプを選択してもらえばよいのですが今回は「Flex Slider」タイプで解説を行っていきます。

設定によってはスライドの画像のアスペクト比(縦横比)が崩れてしまって、余計な余白やレイアウト崩れが起きてしまう恐れがありますが、簡単な設定で回避できますのでお勧めの設定をご紹介します。

プラグイン「Meta Slider」の導入

WPにログインをして ダッシュボード　＞　プラグイン　＞　新規追加をクリックします。
上記画像の赤い囲みをクリックすると自動インストールが始まります。

上記画像の赤い囲みをクリックし、プラグインを有効化してください。プラグインは有効化しないとインストール済みでも動作しませんので注意してください。

有効化が終わるとダッシュボードの左側に「Meta Slider」のボタンが新たに表示されます。
これで、プラグインのインストールと有効化が終了しました。今度はスライダーの設定をしていきましょう。

プラグイン「Meta Slider」の設定

ダッシュボードの「Meta Slider」ボタンを押すと、初めての場合、上記のような表示になるので思い切って「最初のスライドショーを作成」の左にある「+」ボタンを押してみましょう。

新規スライドが作成されるので赤い囲みをクリックし、スライドで表示したい写真を一枚づつ指定し行きましょう。

メディアライブラリが立ち上がるので、アップしてある画像、もしくは新たに画像アップしてください。

複数画像をアップすると上記のような表示になります。各画像の横のタブの説明ですが

• 一般タブ・キャプション・・・スライド時に対応画像の下に黒い帯の上に文字列として表示
• 一般タブ・URL・・・画像をクリックした際のリンク先の指定。新規ウィンドウチェックボックスにチェックを入れると新たなウィンドウかタブでリンク先が表示
• SEOタブ・画像タイトルテキスト・・・imgタグのaltに書き込んだ文字列が設定
• SEOタブ・画像の代替文字列・・・画像が非表示になってしまったときに代替で表示される文字列

上記は必要であれば設定しましょう。必要がなければ空白のままでもきちんと動作しますのでご安心ください。

次に、右側の設定ですが、保存ボタン下の4つのボタンがスライドタイプの指定です。

• 幅・・・スライドの幅
• 高さ・・・スライドの高さ
• 効果・・・無料版では「フェード」のみ選択可能
• 矢印・・・スライド表示時に次の画像へのナビゲーションを表示させるか選択
• ナビゲーション・・・何枚目のスライドか表示するため、スライド下に表示される点のナビゲーションを表示させるか選択

スライドの幅・高さはできるだけ元画像のアスペクト比に合わせて設定しましょう。今回は幅700px、高さ300pxとしました。

続いて高度な設定をクリックします。

一番上の項目「引き伸ばす」の「100%幅で表示」にチェックを入れます。デフォルトではOFFとなっているので忘れずにチェックを入れてください。これを入れることによって、画像がばらばらの大きさだったとしても横幅だけは揃います。(縦幅は横幅に合わせたアスペクト比で算出されます)

ここまで設定したら保存ボタンを押して下さい。スライドショー完成までもう少しです！頑張って！

続いて、高度な設定の下、使い方の中にショートコードが表示されていので、これをコピーします。

コピーしたショートコードをテンプレートや投稿内など、好きなところに貼り付けましょう。投稿に貼り付けてみます。

完成

このブログのCSSの関係上横幅が700pxでないのは気にしないで下さい。導入から設定まで知識があるかたなら10分ほどで完了すると思います。

注意点

「Meta Slider」はWP独自のjQueryを導入しているので動作しない時は、google本来のjQueryを独自に参照していると動作しない場合があります。
google本来のjQueryを参照させないように注意しましょう。

対応策

WordPress で jQuery を使う時の注意点 | EastCoder;