MetaSliderを使ってWordPressでスライドショーを作る方法

この度、当サイトのトップページにスライドショーを挿入し、それぞれの画像に別々のリンクを設定してみたので、そのやり方をまとめておきます。

「MetaSlider」というプラグインを使ってスライドショーを作っていく方法なので、WordPressのテーマに関係なく、挿入することができると思います。AFFINGER5ベースで説明していますが、他のテーマの方の参考にもなれば幸いです。

 

MetaSliderでスライドショー画像それぞれにリンクを設定する

さて、今回の記事の目的ですが、サイトトップ（ヘッダー含む）にスライドショーを設置し、そして各スライドにそれぞれ別のリンク先を設定していきたいと思います。

完成イメージ↓

各スライドに別のリンクを設定しているので、クリックするとページ遷移するようになっています。

現在メタスライダーは使っていないため、完成イメージはスクショです。すみません。。

AFFINGERを使用中の方は最新verでスライドショーが挿入可能になったので、そちらを使う方がいいかもしれません。

 

MetaSliderの使い方

プラグインのインストール・有効化

まずはプラグインをインストールして、有効化しましょう。

 

 

プラグイン⇒新規追加と移動します。

 

キーワードに「metaslider」と入れ検索します。

プラグイン『MetaSlider』があると思いますので、今すぐインストール⇒有効として、インストールと有効化を済ませましょう。

 

Meta Sliderでスライドショーを作成する

MetaSliderを有効化すると、WordPressのダッシュボードに「MetaSlider」という項目が追加されます。

MetaSlider⇒MetaSliderと移動しましょう。

 

バージョンにもよりますが、チュートリアルが始まります。特に気にせずNewでスライドショーを作っていきましょう。

 

スライドを追加を選びます。

 

因みに、スライドの名前は変更することができます。いくつも作りたい場合は分かりやすい名前を設定しておくといいでしょう。

 

スライドを追加をクリックするとメディアライブラリが開かれます。スライドに追加したい画像を選択して、右下の「Add to Slideshow」をクリックします。

画像はCtrlキーを押しながら選択することで、複数選択することができます。

 

追加したスライドは、ドラッグ＆ドロップで順番を入れ替えることもできます。

チュートリアルが出ている場合は、スライド追加後、「NEXT」⇒「NEXT」と２回クリックするとチュートリアルが終了します。

 

画像にリンクを設定する

画像にリンクを設定するには、画像スライドのタブ部分にURLを記載します。

画像スライドタブについて順に説明していきます。

一般タブ

キャプション

画像のタイトルです。スライドショーの設定にもよりますが、画像上に表示することもできます。

URL

画像のリンク先です。ここで画像それぞれにリンクを設定することができます。

SEOタブ

SEOタブではtitle属性とalt属性を入力することができます。必要に応じて入力してください。未入力でも特に問題ありません。

画像タイトルテキストにタイトルが入っていると、マウスカーソルを画像に合わせた時に下の様に表示されます。

切り抜きタブ

切り抜きタブでは、画像のサイズが大きい場合、どの部分を切り抜いて表示させるかを選ぶことができます。

 

 

スライドショーの設定

スライドショーの表示の設定は、MetaSliderの画面の右側にあるボックスで設定することができます。

当サイトはFlexSliderを使用しています。Coin Sliderはレスポンシブ非対応なのでおすすめしません。

 

高度な設定

高度な設定では、スライドの表示時間などを設定することができます。

1秒＝1000msです。

上記③で設定した種類によって、表示される項目が若干異なります。

 

MetaSliderを使ってサイトトップにスライドショーを設置する

ヘッダーにスライドーショーを設置する

WING（AFFINGER5）にはヘッダーウィジェットがあるので、それを使います。

WordPressの管理画面から、外観⇒ウィジェットと移動します。

 

利用できるウィジェットからMetaSliderを選び、ヘッダー画像エリアウィジェットを選択し、ウィジェットを追加をクリックします。

 

ヘッダー画像エリアウィジェットにMetaSliderが追加されます。

スライダーを選択で、使いたいスライダーを選び完了をクリックします。

 

以上でヘッダー部分にスライダーが設定できたと思います。

テーマでヘッダーを100％設定したいときは、外観⇒カスタマイズ⇒ヘッダー画像と移動し、ヘッダー画像の横幅を100％にするにチェックを入れます。

 

チェックを入れると、ヘッダー画像が画面いっぱいになり背景がなくなります。

 

ヘッダー下にスライドショーを設置する

当サイトはヘッダー下にスライドショーを設置しています。需要があるか分かりませんが、一応、設置方法を記載しておきます。

MetaSliderは、固定ページや投稿ページにも簡単にスライドショーを入れることができます。それを利用してヘッダー下に固定ページとして挿入しています。

 

WordPress管理画面から、固定ページ⇒新規追加と移動します。

 

固定ページ上部に、スライダーを追加というボタンがあるので、それをクリックします。

 

スライド選択の画面が出るので、表示したいスライドを選択して、スライドショーを挿入をクリックします。

ページにショートコードが挿入されるので、他に編集することがなければ公開をクリックします。

 

WING（AFFINGER5）の管理画面から、トップページを選択し、トップページに固定記事を挿入のところに記事IDを入力し、保存します。

 

記事IDは固定ページ一覧で、対象ページにカーソルを合わせると画面下に表示されます。post=26、この26というのが記事IDです。

これでヘッダー下に固定ページとしてスライドショーを設置できました。

 

MetaSliderを使ってWordPressでスライドショーを作る方法まとめ

今回はMetaSliderというプラグインを使って、ヘッダー画像それぞれにリンクを設定しました。

私の場合、雑記ブログなので、それぞれにリンクができると直帰率改善になるかなと思い導入しましたが、効果のほどは分かりません。設定次第では、おすすめ記事を横スクロール表示っぽく見せることができるので、使い方次第かなという感じでしょうか。。

難しい操作はないので、興味がある方は挑戦してみてくださいね。

 

WordPressのメニューを階層構造（ドロップダウン・入れ子）にする方法

WordPressのメニューを階層表示（ドロップダウン、入れ子）にする方法をご紹介します。やってみるとCSS編集も必要なく、実に簡単なのですが…方法にたどり着くのに苦労しました。メニューの表示がすっき ...

WING（AFFINGER5）のキラリと光るボタンの使い方！

ついにAffinger4が大型アップグレードされ、颯爽と登場した『WING（Affinger5）』を導入してみました。こちらのサイトはまだAffinger4を使用していますが、いずれ移行しようかなと考 ...