画像のスライダーっていいですよねー。

 

トップページのファーストビューなんかに大きなスライダーをおくと、なかなかのインパクトがあります。浅草ねこのてホームページのトップページにも採用しております。

導入するためには最初からヘッダースライダー機能を搭載しているWordPressテーマを選んだり、JQueryライブラリを引っ張ってきたりすることが多いのですが、今回は気軽に記事の中にスライダーを設置できるWordPressプラグインを見つけたのでご紹介します。

その名もMetaSlider!!

 

 


MetaSliderの特徴

・専門知識は全くいらずで、プラグインを導入するだけですぐ使える
・設定したスライドショーには対応するショートコードが発行され、それを記事内に埋め込んで使う
・スライダーのデザインパターンが複数用意されている
・スライダーの切り替えモーションが複数用意されている
・スライダーに設定した画像ごとにリンク先やaltタグが設定できる
・複数のスライダーを保存しておける
・有料化すればもっと追加機能があるけど、なくても十分

 


MetaSliderの使い方

Meta Slider

プラグインはこれ。

プラグインの新規追加画面から「Meta Slider」で検索すれば出てきます。そこまで複雑なプラグインではないと思うので、たぶん大体のテーマと互換性あると思います。最終更新も一か月前なので今後もアップデートされていくので保守面でも安心できるのではないかと。

 

ワードプレスのスライダー用プラグイン

プラグインのインストール&有効化を済ませると、WordPress管理画面の左メニューに「MetaSlider」が現れます。

 

 

MetaSliderの設定方法

これが「MetaSlider」の設定画面です。かーなり直感的でわかりやすいと思いません?

左側では画像そのものの設定をします。まずはスライドする画像を登録。一枚一枚に対してキャプション、リンク先、新しいウィンドウで開くかどうか、Altタグ、トリミングの位置設定などができます。

右側ではスライダーのデザインや挙動の設定をします。スライダーのサイズ設定、スライダーデザインの選択、画像が切り替わるときの挙動を選択、スライダーボタン(→)の有無、スライダー下部の点の表示などを設定することができます。

さらにこだわりがあるなら、さらに高度な設定も可能。どこまで細かく設定できるんだってぐらいに設定できます。すごくないっすか?

metasliderのさらに高度な設定

 


Meta Sliderの設置

metasliderのショートコード

設定して保存をすると、先ほどの画面の右下にこんなウィンドウが表示されます。英語で書いてあるのでわかりづらいかもしれませんが、日本語に直訳すると、

「記事の中にスライドショーを表示するためには、オレンジ色の部分のショートコードを記事ページの中に記載してね! あ、もしテーマファイルのphpとかに埋め込みたい場合は灰色の部分も含めて記載してね!」

ってことです。

記事だけでなく、テーマファイルに埋め込む手段までご丁寧に教えてくれています。なんて親切なのかしら! 恐ろしい子!!

 

記事内からでも簡単にショートコードが取得可能

ちなみに記事を書く画面でも「スライダーを追加」というボタンが表示されるようになっているので、ここから設定済みのスライダーのショートコードを取得することもできます。めっちゃ楽ちーん。

 


ショートコードを設置してスライダーを見てみよう

●スライダーその1

タイプ「FlexSlider」、効果「フェード」、テーマ「デフォルト」

 


●スライダーその2

タイプ「R.Slides」、効果「フェード」、テーマ「デフォルト」

 


●スライダーその3

タイプ「Nivo slider」、効果「右にスライドイン」、テーマ「バー」

 


●スライダーその4

タイプ「Coin Slider」、効果「回転」、テーマ「デフォルト」

 
このように標準設定だけでも多彩なタイプのスライダー実現が可能です。高度な設定のほうも使いこなせばかなり自在なスライダーを作ることができるでしょう。

 


MetaSliderのデメリット

デメリットというほどではありませんが、1つだけ注意点があります。どうやらこのMetaSlider、同じスライダーを同じページの中に複数設置しようとすると挙動がおかしくなります。おそらくCSSやJavaScriptが干渉し合っちゃうんでしょう。まぁ、なかなかそんな運用もしないと思うので問題ないとは思いますが。

 


まとめ

いかがだったでしょうか? ホームページデザインとして見栄えのよい画像スライダーを簡単に設置できるMetaSliderプラグイン。ぜひ活用してみてくださいまし!