プラグイン 2014-11-06

高機能でいてレスポンシブにも対応 WordPressスライダープラグイン【Meta Slider】使い方

metaslier

WordPressのスライダープラグインは、数多くありますが、今回ご紹介するのは、その中でもとても人気で初心者にも使いやすい【Meta Slider】です。

Meta Slider(無料版)は、jQueryスライダーの【Nivo Slider】【Coin Slider】【Flex Slider 2】【Responsive Slides】の4つのスライダーが利用できる高機能プラグインです。
また、Flex Sliderなどはレスポンシブにも対応していますので、多彩なデバイスにも対応出来るようになっていますので、現在ご利用のWordPressテーマがレスポンシブの場合はとても相性が良いプラグインです。
スライダーの画像やオプションは、管理画面から簡単に設定・変更・画像のアップロードが出来ますので、HTMLなどの知識など必要とせずただコピー&ペーストでスライダーが実装出来てしまいます。

下記に、プラグインのインストールから使い方を記載していますので、ご参考頂ければと思います。

【Meta Slider】イントール&有効化

まずは、管理画面から プラグイン > 新規追加 で”Meta Slider”と検索をかけます。

metaslider1

次に、Meta Sliderを【今すぐインストール】をクリックし有効化して下さい。

metaslider2

ご自身でFTPなどでアップロードする場合は、下記リンク先よりダウンロードして下さい。

Meta Slider

ヘッダー部分(任意の場所)に実装するスライダーの作成

インストール・有効化が完了しましたら、スライダーの作成に入りたいと思います。

こちらのWordPressスライダープラグインの良い所の一つが、複数のスライダーを管理出来るところです。
例えば、ヘッダー部分に1つのスライダーを作成し投稿記事にも全く違う別のスライダーを作成し実装などが出来ます。
それでは、まずはヘッダー部分に実装するスライダーを作成していきたいと思います。

スライダーの作成

まずは、管理画面メニューより Meta Sliderをクリックしスライダーを作成していきたいと思いますので、【最初のスライドショーの作成】をクリックします。

metaslider3

画像のアップロード

まずは、画像のアップロードを行います。
下記画像の【スライドの追加】をクリックしますと、メディアアップローダーが表示されますので、メディアライブラリから画像を選択するか新し画像をアップロードしスライダーに追加で画像を追加します。

metaslider4

キャプション・リンク先の入力

画像をアップロードしましたら、次に画像のキャプションやリンク先を入力していきます。
また、ちょっと嬉しいことに画像のタイトルテキストや代替文字なども入力出来るようになっています。

metaslider5
metaslider6

入力が終わったらスライド表示させる画像も続けて同様にアップロードしていきましょう。

スライダーオプションの設定

次に、スライダーのオプションの設定をしていきます。
今回は利用するスライダーは、【Nivo Slider】を使います。
Nivo Sliderは、4つ中では一番エフェクトが多いスライダーとなっています。
オプションでは、【幅】【高さ】【効果】【テーマ(Nivo Sliderのみ)】【矢印の有無】【ナビゲーションの有無】の設定が可能です。
【保存してプレビュー】をクリックすると現在の設定を保存して、管理画面上でスライダーの確認が可能となっています。

metaslider7

コードの挿入

最後に使い方タブのテンプレートに含めるをクリックすると今回作ったスライダーのコードが表示されますので、そのコードをコピーして任意のテンプレートファイルにペーストすれば、上記で作成したスライダーが表示されます。

metaslider8

投稿・固定ページに実装するスライダーの作成

それでは、次に上記で作成したスライダーを維持しながら全く別のスライダーを作成して、任意の投稿記事や固定ページの本文に実装するスライダーの作成をします。
画像のアップロードやオプションなどは、上記と全く同じなので、割愛したいと思います。

2個目のスライダーの作成

スライダーを増やす場合は、下記画像の【+】ボタンで追加することが出来ます。

metaslider9

【+】ボタンで2個目のスライダーを追加したら、あとの手順は、上記のヘッダー部分(任意の場所)にスライダーを実装と一緒となります。

コードの挿入

画像のアップロード・オプションの設定が終わったら【保存】をクリックして、今回は、任意の投稿・固定ページの本文にスライダーを表示させたいのでに使い方タブの【ショートコード】の方をコピーします。

metaslider10

コピーしましたら、任意の投稿・固定ページに先ほどのショートコードを貼り付ければ、実装完了となります。

metaslider11

WPスライダープラグインMeta Sliderを使えば、とても簡単にご自身のサイトにスライダーを追加することが出来ますし、好みに合わせて4つスライダーを選べオプションも変更が可能ですので、HTML・CSS・JSが分からない方でも簡単にスライダーの実装が可能なプラグインとなっています。

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS hunterxhunter

HUNTER×HUNTER バトルオールスターズ VS レイザー(上級) 14人の悪魔を攻略したパーティメンバー

NEXT Get-Ratio

黄金比や16:9などを計算してくれる画像比率計算サイト【Get Ratio】