WordPressでサイトを運営している人のなかには、スライダーを埋め込む方法が知りたい人もいるのではないでしょうか。スライダーを設置することでダイナミックなサイトになり、ユーザーの目を引きやすくなります。また、豊富なコンテンツを一画面に表示できるようになるため、ユーザビリティの向上も見込むことが可能です。製品やサービス、あるいは企業自体の認知拡大につながり、ひいては売上など業績の向上も期待できるでしょう。この記事ではスライダーをプラグインで簡単に埋め込む方法などを紹介します。
目次
スライダーって何のこと？
スライダーとはWEBサイトに設置するスライドショーのことです。訪れたWEBサイトのトップページで、何もしていないのに画像が右から左へ流れていくのを見たことがあるのではないでしょうか。会議のプレゼンなどでMicrosoft Officeのパワーポイントにあるスライドショーをイメージしても良いでしょう。WordPressでは、さまざまな方法を使うことでサイトのトップページなどにスライドショーを設置することが可能なのです。
スライダーを導入するメリット
サイトにスライダーを導入するのには2つのメリットがあります。
・サイトのTOPページにスライダーが設置してあると目を引く効果がある
多くのWEBサイトは静的、つまり動きのないものが多いです。その分スライダーを設置して動きのあるサイトにすれば、他のサイトとの差別化になります。特にビジュアルがブランディングに直結するファッション関係やヘアサロン、あるいはレストランなどのサイトにおいては強い武器となるでしょう。また、人は動きのある物に注目する性質があります。したがって、サイト内で特に注目して欲しいコンテンツをスライダーで流せばユーザーを意図的に流入させることが可能です。
・サイト内回遊率を高めることができる
トップページをスライダー式にして複数のページが流れるようにすると、必然的にユーザーは多くのコンテンツを目にするようになりサイト内での滞在時間が長くなります。また、多くのページを閲覧することにもなるためサイト内回遊率の向上も見込むことが可能です。回遊率や滞在時間が長いサイトほど検索エンジンは評価しますので、検索順位のアップにも貢献するでしょう。情報量が多いオウンドメディアやセールスサイトなどでは特に威力を発揮すると考えられます。
プラグインなしでスライダーを導入する方法
・スライダーに出力する要素を追加する
WordPressはPHPというプログラミング言語で動いていますので、まずはslider.phpというテンプレートの作成が必要です。ここにスライダーで出力する要素を、つまりスライダーで表示される項目を追加していきます。ビジュアル重視であるスライダーの性質上、出力項目としてアイキャッチ画像とページのタイトルは必須です。また、必要に応じて投稿日やカテゴリー、説明文などを追加しても良いでしょう。slider.phpの記述が完了したら、スライダーを呼び出したい場所にslider.phpを呼び出すためのコードを記述します。記事一覧が表示されたらphpの設置は完了です。
・スライダーを動かすためのJavascriptファイルを追加する
スライダーの出力要素と呼び出す場所への記述を完了したら、次はスライダーとして動かすためのテンプレートを作成します。テンプレート内にJavascriptファイルを新しく作成し、コードの記述はより簡便になるようjQueryを用いると良いでしょう。WordPressのテーマにJavascriptファイルを追加すると、ページリストの一番下にページャーが出力されます。
・スライダー用のデザインを設定する
仕上げとしてCSS（デザインシート）をスライダーのデザインを追加すれば、設定したファイルがスライダーとして動作するようになります。編集箇所に入るには、WordPressの管理画面（ダッシュボード）の「外観」から「テーマの編集」に入り、画面右のファイル項目から「style.css」をクリックしてください。表示された内容に任意の記述を追加すればスライダーの実装は完了です。
スライダー作成事例
・コンテンツへのリンク
注目して欲しいコンテンツへのリンクをスライダーに流すのは定番の手法です。トップページを眺めていると右から左へ次々と記事のアイキャッチ画像が流れていき、ユーザーは興味のある記事を見つけ次第、コンテンツページへ流れていくことになるでしょう。もしスライダーを使わない場合、ユーザーはより自主的に記事を探す必要があります。これはサイトのファンであるならともかく、初訪問のユーザーには手間になる可能性が高いです。その手間を省き、新規ユーザーに魅力的なコンテンツを積極的にアピールできるスライダーは非常に大きな強みと言えます。
・商品ページへのリンク
オンラインショップなどセールス目的のサイトであれば、商品ページへのリンクをスライダーに載せるのも非常に効果的です。定番商品、一押し商品、期間限定メニューなど多彩なラインアップを1つのページで消費者に訴求することができます。もし、動かないトップページでこれらを同時に宣伝しようとすれば、1つ1つの商品が小さくなってしまい画面も込み入った印象になってしまうでしょう。スライダーを活用することで全ての商品を大きく魅力的に映し出することができるのです。
・画像スライダー
スライドショーの定番は画像によるもので、たとえば自動車サイトでは画像スライダーがよく用いられています。オーソドックスではありますが、内容をよく確認できるためユーザビリティが高い点がメリットです。ビジュアルに特別なこだわりがない限り、画像スライダーの設置が適切な選択となるでしょう。
・動画スライダー
もちろん静止画像だけでなく、映像のスライドショーを設置することも可能です。動きのあるスライドショーを見せることで情景がリアルに浮かび、ターゲット層に製品や企業のイメージをより効果的に伝えることが可能です。
動きのあるページを作成すると聞くと難しそうに感じられるかもしれません。プログラミング知識がない人にとっては尚更でしょう。しかし、プラグインを活用することで簡単にスライダーを作成し、WEBサイトに設置することができます。
【おすすめプラグイン】1.Smart Slider 3
Smart Slider3は、コードを編集することなく美しいスライダーを作成することができるプラグインです。直感的に利用できることから多くの支持を得ています。自動的にSEOが最適化され、レスポンシブ対応である点もメリットの1つです。使い方としては、まずWordPressの管理画面（ダッシュボード）からプラグインを「Smart Slider 3」で検索し、インストールしてください。管理画面の上部に「smart slider」と表示され、プラグインの編集画面に移動することができます。編集画面にはすでにサンプルのスライダーが作成されていますので、これを見本としてカスタムしても良いでしょう。無料で使えるテンプレートもたくさん用意されています。白紙から始める場合には、「NEW SLIDER」ボタンを選択してください。スライダーの名前と記入と縦横サイズの指定、そしてプリセットのデザインパターンの中から好きなものを選択した後、「CREATE」をクリックすると新しいスライダーが生成されます。
生成したスライダーには使用したいスライドを随時追加することが可能です。スライドには画像やテキストなどを直観的に配置することができます。できあがったスライダーをサイトに設置するには、発行されたPHPコードをテーマファイルに追加するか、ショートコードをテキストエディタに貼り付けるか好きな方を選んでください。コードに詳しくなければショートコードを利用する方が無難でしょう。
【おすすめプラグイン】2.Meta Slider
Meta Sliderは世界的に人気の高いプラグインであり、FlexSliderやNivoSliderといった有名なjQueryスライダーに対応しています。複数のスライダーを同時に編集できる上、Smart Slider3と同じくコードはSEOに最適化されておりレスポンシブにも対応済みです。このプラグインは、WordPressの管理画面から検索してインストールできるほか、公式サイトからダウンロードする方法もあります。有効化した後は、管理画面左のリストにある「Meta Slider」から編集画面に入ってください。スライダーは「New」をワンクリックするだけで生成できます。スライダーを生成すると出現する「スライドを追加」をクリックするとWordPressの画像（メディア）ライブラリになりますので、スライドに使用する画像をアップロードしてください。
必要なスライドを揃えたら、スライドショーの種類を4つの中から選択します。このほか、スライドの幅や高さに加え、「回転」「スライドイン」「ランダムワイプ」など、スライドショーの効果を細かくカスタマイズすることも可能です。プレビュー機能が付いていますので、実装する前にどのようなスライドになるのかも事前にしっかり確認できます。サイトのページに設置する時は、Meta Slider編集画面の右にオレンジ色で表示されているショートコードをテキストエディタに貼り付けるだけです。また、ページの編集画面に「スライダーを追加」というアイコンが追加されていますので、ここから作成したスライダーを選択して挿入する方法もあります。
【おすすめプラグイン】3.Soliloquy Lite
Soliloquy Liteは、WordPressのリード開発者の監査を受けて作られたセキュリティの高いプラグインです。使い方が簡単でパフォーマンスにも優れています。こちらもレスポンシブ対応となっており、スマホやタブレットなどのモバイル端末でも見やすいスライダーが作成可能です。無料にもかかわらず、スライドショーのサイズやスピードを自由に指定でき、スライダーの作成数にも制限がありません。有料版もありますが、基本的な使い方をする分には無料版で十分でしょう。WordPressの管理画面からインストール可能で、有効化すると画面左に「Soliloquy」の項目が出現します。
編集画面で「Add New」をクリックすると新しいスライダーが生成され、スライドに使う画像をアップロードすることができます。画像はWordPressの画像ライブラリから選択できるほか、パソコンに保存されている画像を直接アップロードすることも可能です。必要な画像を全てアップロードしたら、左側のタブから歯車アイコンのついた「Config」を選択し、スライダーの種類やサイズ、表示スピード、切り替え時間などを設定してください。全ての設定が終わり、画面右側の「公開」ボタンを押すと設置用のショートコードが発行されます。このコードを設置したいページのテキストエディタに貼り付ければスライダーの設置は完了します。また、ページの編集画面に「Add Slider」というアイコンが追加されますので、ここからスライダーを選ぶ方法でも設置可能です。
【おすすめプラグイン】4.Smooth Slider
Smooth Sliderは、レスポンシブに対応したスライダープラグインです。6種類の豊富なスライドパターンが用意されており、画像だけでなく最新記事やカテゴリーごとの記事もスライド表示できる高い機能性を誇っています。オウンドメディアやブログなどコンテンツ重視のWEBサイトでは特に力を発揮するでしょう。WordPressからインストール・有効化した後は「Smooth Slider」の項目からスライダー作成画面に入ってください。
作成画面では、緑色の「Create New Slider」タブを選択し、スライダータイトルを入力すれば新しいスライダーを作成できます。次に「Upload」アイコンをクリックして、WordPressの画像ライブラリからスライドに使用する画像を選択してください。必要な画像を選択したら管理画面左側の「setting」を選択し、さらに「Basic Setting」タブを選び、スライドのタイプやスピード、切り替え時間を指定します。「Slides Panel」というタブもあり、ここではスライドタイトルの色やフォントスタイルなどを設定することが可能です。セッティングが済んだ後は、「Preview」タブに表示されているショートコードをコピーし、任意のページに貼り付ければスライダーが設置されます。CSSファイル用のコードも発行されますが、サイトデザインの知識がない場合はショートコードを利用した方が良いでしょう。
スライダーにおけるレスポンシブ機能とは
レスポンシブ機能とは、閲覧する端末によって表示の仕方を変えることができるデザイン機能のことです。現在では、パソコンだけでなくスマホやタブレットでインターネットを楽しむ人がたくさんいます。ですから、画面の小さいモバイル端末でも見やすいようサイトデザインを自動的に変換できるレスポンシブは非常に大切な機能なのです。スライダーにおけるレスポンシブ機能としては、
・端末に応じて画面のサイズが自動的に調整される
・サイトを閲覧する際にスライダーを表示するか確認を行うようにする
・デバイスによってスライダー内のコンテンツを表示するか非表示にするか設定できる
などの機能などが挙げられます。
まとめ
スライダーは、サイトを魅力的かつ見やすく表示することでユーザビリティを高めることができる非常に効果的なウェブデザインです。動きのあるWEBサイトは「しっかりと作り込まれたサイトなんだな」という印象を持たれやすく、権威性の向上にもつながるため積極的な導入をおすすめします。
コメントを残す