【WING(AFFINGER5)】スライドショーにそれぞれリンクを設定する方法

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

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

 

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

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

WING（AFFINGER5）関連として書いていますが、WordPressブログならどのテーマでも可能です。

完成イメージ↓

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

 

因みにスライドショーの設定によってはこんな感じも可能です。

 

面倒だったので2つめのスライドショーはリンク先を設定していませんが、どちらもMetaSliderを使って作成したスライドショーです。スマホ表示だとさほど違いが感じられないかもしれません。。

 

STORK（ストーク）を使っているブログでよく見かける横スクロール記事一覧。あんなの出来たらいいなぁと思ったわけです。

 

AFFINGER5デフォルトのスライドショー機能について

WING（AFFINGER5）にも、ヘッダー部分にスライドショーを設定する機能があります。（この機能では、各スライドに別々のリンクを設定できないので、読み飛ばしても大丈夫です）

 

 

スライドショーの表示速度や、表示方法などは、テーマ管理画面の「ヘッダー」で設定することができます。

 

画像のリンク先が一つでいいという場合には、ヘッダー画像のリンク先URL部分にリンクしたいURLを入れて保存すればOKです。

今回は画像それぞれに別のリンクを設定したいので、『MetaSlider』というプラグインを使ってスライドショーを作っていきたいと思います。

 

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です。

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

 

AFFINGER5でサイトトップにスライドショーを設置する

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

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

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

 

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

 

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

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

 

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

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

 

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

 

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

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

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

 

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

 

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

 

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

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

 

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

 

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

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

 

AFFINGER5でスライドショーにそれぞれリンクを設定する方法まとめ

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

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

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