4つのスライドショーが利用できるWordPressプラグイン「Meta Slider」

  • 23740
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

個人的にもよく利用させてもらっている「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 も指定できる
・キャプションも登録可
ということで、企業サイトにも充分使えるプラグインだと思います。

複数のスライドコンテンツを生成、管理できる

さらにMeta Slider なら、コンテンツに応じてスライドを複数生成、管理することができます。

例えば「トップページで画像3 枚のスライド」、「よくある質問ページで画像5 枚のスライド」…のように、ページに応じて使い分けができるのは嬉しいです。


Meta Slider でスライドの作成

ここからがMeta Slider の設定方法になりますが、今回は「Flex slider」をベースに使い方を紹介させていただきます。

まず最初に「Create your first slideshow」をクリックします。
4つのスライドショーが利用できるWordPressプラグイン「Meta Slider」

Meta Slider によるスライドの基本設定

スライドプラグインの選択

Meta Slider ぺージの右メニュー「Setting」より、まずは「Flex Slider」「Responsive Slider」「Nivo Slider」「Coin Slider」の中から利用するスライドプラグインを選択します。
4つのスライドショーが利用できるWordPressプラグイン「Meta Slider」

スライドコンテンツのサイズ

「Width」「Height」に幅と高さを入力します。
4つのスライドショーが利用できるWordPressプラグイン「Meta Slider」

エフェクト

プルダウンメニューよりエフェクトを選択します。
※利用するスライダーによって使えるエフェクトが異なります。
4つのスライドショーが利用できるWordPressプラグイン「Meta Slider」

テーマ

「Nivo Slider」の場合に選択することができますが、今回はFlex slider なのでデフォルトのままでいきます。
4つのスライドショーが利用できるWordPressプラグイン「Meta Slider」

矢印ボタンとナビゲーション

画像切り替えのための「前へ」「次へ」の矢印ボタンや、画像下部にナビゲーションリンクを付けるかどうかを選択します。
4つのスライドショーが利用できるWordPressプラグイン「Meta Slider」

スライド画像の登録

ここからはスライドで流す画像ファイルのアップロード方法や、画像をクリックした際のリンク先URLの設定方法などを紹介します。

スライド画像のアップ

まず最初に「Add Slide」ボタンをクリックします。
4つのスライドショーが利用できるWordPressプラグイン「Meta Slider」

画像をドラッグ&ドロップして「Add to slider」ボタンをクリックします。
4つのスライドショーが利用できるWordPressプラグイン「Meta Slider」

あとは「Caption」「URL(画像をクリックした際のリンク先)」の他、
4つのスライドショーが利用できるWordPressプラグイン「Meta Slider」

SEO タブ内の「alt」「title」を入力します。
4つのスライドショーが利用できるWordPressプラグイン「Meta Slider」

プレビュー

公開前にスライドショーをプレビューで確認する場合は「Save & Preview」ボタンをクリックします。
4つのスライドショーが利用できるWordPressプラグイン「Meta Slider」

実際の動きを確認できますので、問題なければ「Save」ボタンをクリックして準備完了です。
4つのスライドショーが利用できるWordPressプラグイン「Meta Slider」

フロント画面へ出力

管理画面でスライド画像を登録したら、あとはフロント画面に表示させるための設定を行います。

出力の方法は2通りあり、ショートコードを使って固定ページなどにに貼付けるか、スライドを表示したいテンプレートファイルにPHPのコードをコピペする形になります。

ショートコードでスライダーを出力

まずはショートコードを利用する場合ですが、Usage 欄の「Shortcode」タブ内に記載されたコードを、投稿記事や固定ページの本文に貼付けます。
4つのスライドショーが利用できるWordPressプラグイン「Meta Slider」

PHP でスライダーを出力

テンプレートファイルにPHPのコードを書く場合は、「Template Include」タブ内のPHP のコードをコピペします。
4つのスライドショーが利用できるWordPressプラグイン「Meta Slider」

Meta Slider のスライドサンプル

↓こちらに、簡単なスライドサンプルを作ってみました。
[metaslider id=3267]

  • 23740
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

この投稿と関連する記事一覧

この記事に関するコメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください