こでは、WordPressブログに簡単に画像スライダーを設置できるプラグイン【MetaSlider】の使い方を解説します。

 

企業などのWebページで写真やバナー広告がスライドするのを見たことあると思いますが

あれ、かっこよくないですか!?

視覚的にインパクトもありますし、目的のコンテンツへ誘導するにもとても有効なので導入をしたい人は多いと思います。

 

 

僕自身、いくつか試したものの、テーマファイル(php)をいじる必要があるものもあり、正直使えるようになるまでに時間がかかりました。

おまけにいきなりテーマファイルをいじるなんて怖すぎるので、経験上お勧めしません。

 

そこで、ようやくみつけた便利なプラグインをご紹介しようと思います。
初心者でも簡単に画像スライダーを設置できるので、お勧めですよ!

 

スポンサーリンク

簡単な設定で後はコピペ!すぐに画像スライダーを追加できる!

Meta Sliderkプラグインをインストールにするには

【ダッシュボード】⇒【プラグイン】⇒新規追加で表示される画面の検索ボックスで【Meta Slider】と検索すると出てきます。

尚、プラグインのインストール方法についてはこちらで解説しています。

機能拡張!簡単なプラグインのインストール方法

 

【Meta Slider】プラグインが表示されたら、【いますぐインストール】と書かれた箇所をクリックしてインストールして下さい。

これだけで、インストールが完了します。

***

尚、ダウンロードしてインストールをする場合は、下記のアドレスからダウンロードできます。

https://wordpress.org/plugins/ml-slider/

metaslider

この場合も有効化を忘れずに行って下さい。

利用するための準備はこれで完了です。

スポンサーリンク

早速スライドを追加してみよう

インストールが完了すると、ダッシュボード上に、メニューが追加されます。

【ダッシュボード】⇒【Meta Slider】でスライド追加画面が表示されます。

 

表示された画面で、【最初のスライドショーを作成】をクリックします。

MetaSlider01

次に【スライドを追加】をクリックします。

MetaSlider02

すると、画像を選択する画面が表示されますので、使いたい画像を選択し【スライダーに追加】をクリックします。

MetaSlider03

画像が追加されると下記のような画面になります。

MetaSlider04

スライド部分の簡単な解説

キャプション:ここに入力した文字は、スライドで表示される画面の下に字幕のように文言を入れることが出来ます。

URL:ここにアドレスを入力すると、該当するスライド画像をクリックすると、そのアドレスにアクセスできるようにできます。

右側の新規ウィンドウにチェックを入れると、別ページが立ち上がるようにすることが出来ます。

 

完成したら、【保存】をクリックして【ショートコード】を表示させたいページにコピー&ペーストすれば完成です。

MetaSlider05

 

実際にサンプルで作ってみたのは、以下のものです。

  • スライド1枚目

表示させる速度や画像の大きさも調整が可能です。

 

 

スライダー画像ごとにURL指定をする場合

この講座ブログのトップページの様に、
スライドする画像メニューをクリックすると指定したURLにアクセスできるようにしたい場合の方法です。

 

01

この様に、追加したスライドにURLを入力する欄があるので、ここに入力すればOKです。

また、すぐ隣にある【新規ウィンドウ】にチェックを入れると、新規でページが立ち上がるようになります。

もし、全く別のコンテンツや商品紹介を行う場合は、
クリックするとあなたのブログから離脱されてしまう事になるので、チェックを入れる事をお勧めします。
(要は別ページに移動してしう場合は、あなたのページは表示させておいたままにしましょうという事です。)

 

スライドごとにURL指定もできますし、例えば3枚中2枚はURL指定をして
残り1枚は、単に表示させるだけということもできます。

 

また、すぐ上のキャプションに文字を入れると、

02

下図の様に、スライダー画像の下の部分に字幕の様に表示されます。

 

03

 

画像スライダーをトップページに表示させる2つの方法

記事の中に埋め込むのではなく、アクセスしてもらった最初のトップページにドーンと表示させたい!

という場合、表示させる為の方法は2つあります。

 

方法① 固定ページに組み込んで、フロントページ表示に設定する

一番簡単な方法です。

もともとの設定では、最新情報などが表示れる設定になっています

これを、これから作成するページを最初と差し替えて表示されるように設定するというものです。

 

まずは、トップページに表示させたいページを固定ページで作ってください。

そして、その中で先に解説した方法でスライダーを挿入してください。

 

固定ページの編集などについては、こちらで解説しています。

 

WordPressの基礎を覚える! 固定ページのいじり方

 

表示させたいページが完成したら、保存して下さいね。

 

次に、【ダッシュボード】⇒【設定】⇒【表示設定】で【表示設定】ページを開いてください。

04

 

設定ページに【フロントページの表示】という項目があります。

ディフォルト設定では【最新の投稿】になっているので【固定ページ】を有効化します。

05

 

06

 

ページを指定したら、SyntaxHighlighter Evolved05をクリックすれば完了です!

 

方法② テンプレートに含めてしまう(プチカスタム)

この方法は、直接CSSファイルを操作しますので、必ずバックアップを取ってからやってくださいね!

 

Meta Sliderの設定ページの右下に、先ほど解説したショートコードを取得できる【使い方】があります。

ここのタブを、【テンプレートに含める】に切り替えましょう。

 

08

 

このコードを、表示させたい箇所にペーストするわけですが、
テーマによって異なりますので、そこは知識がある方だけが行ってくださいね!

 

因みに、賢威で行う場合はこちらで解説しています。

 

【賢威カスタム】グローバルメニューと最新情報の間を詰める方法~ついでにメイン画像をスライダー化~

 

まとめ

無料版以外にも、プロ版(有料版)もありますが、
無料版のままで特に不自由はしないと思いますので必要を感じたら購入をしてもいいかもしれません。

 

まずは導入してみてあなたのブログに動きをつけてみてはいかがでしょうか^^