画面幅いっぱいのヘッダースライダーがあるホームページってよく見かけると思います。WordPressでは、専門知識がなくてもテーマ・テンプレートを選べば、本格的なホームページを作成することができます。
テーマによっては、あらかじめヘッダースライダーが備わっているものもありますが、どうしても今一つ物足りなかったり、そもそもヘッダースライダー機能がないものも多いです。
そんなとき使えるのが、こちらも専門知識がなくても追加できるプラグインです。
便利なスライドショー・スライダー設置プラグインはたくさんありますが、その中でも無料で使えて高性能なスライダープラグイン「Smart Slider 3」のご紹介をさせていただきます。
Contents
「Smart Slider 3」のインストール
WordPressの管理画面の「プラグイン」＞「新規追加」をクリックして、プラグインの検索窓に「Smart Slider 3」と入力してください。
「Smart Slider 3」プラグインが見つかったら、「今すぐインストール」をクリック、さらに「有効化」してください。
お使いのPHPのバージョンが古い場合、インストールできない場合があります。その際は、PHPのバージョンアップが必要になります。
「Smart Slider 3」の使い方
ダッシュボードに「smart Slider」の項目が増えていますので、こちらをクリック、さらに「GO TO DASHBOARD」をクリックします
スマートスライダーのダッシュボード上の「NEW PROJECT」をクリックし、さらに「Create a New Project」をクリック、Project Type、Slider Type 、Settingsなどの項目がありますが、とりあえずこのまま「CREATE」をクリックしてください。
スライドの追加
次に「ADD SLIDE」から、スライダーで使いたいスライド画像やページなどを選んでください。
スマートスライダーでは、画像だけでなく固定ページや投稿ページもスライドにすることができます。
- Image ・・・・・・ 画像
- Blank ・・・・・・ 単色背景
- Post ・・・・・・ 固定ページや投稿ページ
- Static Overlay ・・ スライド画像が変わっても変わらないテキスト
- Dynamic Slides ・・ 動的に投稿記事をスライドにしてくれる
さらにこれらのスライド上にテキストやボタンなどを載せることができますので、無料バージョンでもかなり高度なことができます。
スライダーの設定
設定項目もたくさんあるので事細かにカスタマイズすることができます。
ですが、逆に有り過ぎなくらいなので、よく使うところ要点だけ押さえておけばよろしいかと思います。
- General ・・・・・ 固定ページなどに貼り付けるショートコードをコピーする
- Size ・・・・・ サイズを指定する。Full Widthにすれば画面幅いっぱいのスライドショーになる
- Controls ・・・・・ 次のスライドに送る矢印などの設定。「Bullet」を有効化するとスライドの下の方に今何番目のスライドかわかるドットが表示されるのでお勧め。あと、サムネイルなどの設定もできる。
- Animations ・・・ スライドの変わり方のパターンを変えることができる。
- Autoplay ・・・・ 自動で次のスライドに移るかの設定。
- Optimize ・・・・ 画像を最適化するかの設定
- （以下省略）
スライダーの表示方法
完成したスライダーを固定ページや投稿ページに表示させるには、ページの編集画面で、先ほどのGeneralにあったショートコードをコピペするか、ブロックの追加で「Smart Slider 3」を選択・追加すれば簡単に挿入することができます。
トップページのヘッダーにスライダーを表示させたい場合は、header.phpにGeneralに載っていたPHPコードを追加するか、ページの編集画面でトップページの最初に追加すればOKです。ただし、ヘッダー部分（ロゴやグローバルメニュー）と間隔が空いてしまう場合があるので、追加CSSで調整が必要です。
「Smart Slider 3」の使用例
こちらは「Smart Slider 3」を使ってブログ投稿記事をスライドショーにしたものです。
スライドの選択でページを選択すれば、記事タイトルや本文の抜粋、リンクボタンも自動的に表示されます。
以上のように無料でこれだけ十分すぎるくらい使える「Smart Slider 3」は、ホームページにスライドショーを使いたいという方には本当にお勧めです。
