個人的にもよく利用させてもらっている「Flex Slider」の他、「Responsive Slider」「Nivo Slider」「Coin Slider」の4 つのjQuery スライダーが利用できるという、なんとも贅沢で高機能スライドプラグインが「Meta Slider」です。
Meta Slider には有料版もありますが、無料版(Meta Slider Lite)でも上記4つのスライダーが使えますし、管理画面からスライド画像をアップロードできる他、スライドのサイズやエフェクトの設定など基本的な操作が可能ですので、充分事足りるのではないかと思います。
Meta Slider のインストール
管理画面のプラグイン新規追加より Meta Slider を検索するか、以下のページからプラグインファイルをダウンロードします。Meta Slider の特徴
4 つのスライダーが利用できる万能プラグイン
冒頭でも少し触れましたが、Meta Slider の大きな特徴は、
・「Flex Slider」「Responsive Slider」「Nivo Slider」「Coin Slider」の4 つのスライダープラグインが利用できる
・管理画面上でスライド画像のサイズ(幅×高さ)やエフェクトが設定できる
という所だと思います。・管理画面上でスライド画像のサイズ(幅×高さ)やエフェクトが設定できる
また、今回利用する「Flex slider」はレスポンシブWEBデザイン対応ですので、スマホやタブレット向けにも表示を最適化できます。
スライド画像のアップロードについて
スライドで流す画像に関しては
・管理画面から画像ファイルをアップロードできる
・スライド画像(imgタグ)のalt 、title も設定できる
・画像をクリックした際のリンク先URL も指定できる
・キャプションも登録可
ということで、企業サイトにも充分使えるプラグインだと思います。・スライド画像(imgタグ)のalt 、title も設定できる
・画像をクリックした際のリンク先URL も指定できる
・キャプションも登録可
複数のスライドコンテンツを生成、管理できる
さらにMeta Slider なら、コンテンツに応じてスライドを複数生成、管理することができます。例えば「トップページで画像3 枚のスライド」、「よくある質問ページで画像5 枚のスライド」…のように、ページに応じて使い分けができるのは嬉しいです。
Meta Slider でスライドの作成
ここからがMeta Slider の設定方法になりますが、今回は「Flex slider」をベースに使い方を紹介させていただきます。まず最初に「Create your first slideshow」をクリックします。
Meta Slider によるスライドの基本設定
スライドプラグインの選択
Meta Slider ぺージの右メニュー「Setting」より、まずは「Flex Slider」「Responsive Slider」「Nivo Slider」「Coin Slider」の中から利用するスライドプラグインを選択します。スライドコンテンツのサイズ
「Width」「Height」に幅と高さを入力します。エフェクト
プルダウンメニューよりエフェクトを選択します。※利用するスライダーによって使えるエフェクトが異なります。
テーマ
「Nivo Slider」の場合に選択することができますが、今回はFlex slider なのでデフォルトのままでいきます。矢印ボタンとナビゲーション
画像切り替えのための「前へ」「次へ」の矢印ボタンや、画像下部にナビゲーションリンクを付けるかどうかを選択します。スライド画像の登録
ここからはスライドで流す画像ファイルのアップロード方法や、画像をクリックした際のリンク先URLの設定方法などを紹介します。スライド画像のアップ
まず最初に「Add Slide」ボタンをクリックします。画像をドラッグ&ドロップして「Add to slider」ボタンをクリックします。
あとは「Caption」「URL(画像をクリックした際のリンク先)」の他、
SEO タブ内の「alt」「title」を入力します。
プレビュー
公開前にスライドショーをプレビューで確認する場合は「Save & Preview」ボタンをクリックします。実際の動きを確認できますので、問題なければ「Save」ボタンをクリックして準備完了です。
フロント画面へ出力
管理画面でスライド画像を登録したら、あとはフロント画面に表示させるための設定を行います。出力の方法は2通りあり、ショートコードを使って固定ページなどにに貼付けるか、スライドを表示したいテンプレートファイルにPHPのコードをコピペする形になります。
ショートコードでスライダーを出力
まずはショートコードを利用する場合ですが、Usage 欄の「Shortcode」タブ内に記載されたコードを、投稿記事や固定ページの本文に貼付けます。PHP でスライダーを出力
テンプレートファイルにPHPのコードを書く場合は、「Template Include」タブ内のPHP のコードをコピペします。Meta Slider のスライドサンプル
↓こちらに、簡単なスライドサンプルを作ってみました。[metaslider id=3267]
コメントを残す