ワードプレスでは、プラグインをインストールすることで簡単に機能を追加することができます。しかもその多くのプラグインは無料で使用できます。今回ご紹介するプラグイン「Transition Slider」も無料で高機能、動きがあって見た目のインパクトも大、先進的、派手めなスライダーを導入できるプラグインです。
Contents
「Transition Slider」の特徴
通常の多くのスライダープラグインでは、次の画像に遷移する際のエフェクトとして、横にスライドするかフェードアウト・フェードインがほとんどだと思いますが、「Transition Slider」では、効果的なトランジションが10種類以上用意されております。
以下のように、かなり派手めの切り替え効果になっておりますので、ホームページの用途によっては合わないこともあると思いますが、ビジネス系、IT系などにはインパクトのあるヘッダースライダーが作れるかと思います。
ちなみに「Transition Slider」を使ったデモサイトはこちらです。
「Transition Slider」のインストール
ダッシュボード「プラグイン」＞「新規追加」から、「Transition Slider」と検索し、こちらのプラグインを「今すぐインストール」＞「有効化」してください。
「Transition Slider」の使い方
ダッシュボードにTransition Sliderの項目が追加されているので、こちらをクリック。
「GO TO DASHBOARD」をクリックしてください。
１からスライダーを作成する場合は「NEW SLIDER」、テンプレートから選ぶ場合は「SLIDER TEMPLATES」を選択してください。
新しくスライダーを作成する
「NEW SLIDER」クリックし新しいスライダーを作成し、「ADD NEW SLIDE」でスライド画像を設定します。画像をアップロードするかメディアから選択してください。
画像を追加するとこんな感じです。
スライダーの設定をする
今度はスライダーの基本的な設定をします。
設定項目として、
- Sliders
- Publish
- General
- Size
- Layer
- Autoplay
- Video
- Navigation
- Wheel Navigation
- Pagenation
- Thumbnails
- Hash Navigation
- Loading
- Lightbox
と、たくさん有りますが、とりあえず設定した方が良いのは以下の2点です。
設定項目「Size」で、画面幅いっぱいに表示させたい場合は、「Full Width」をOFFからONに、フルスクリーンで表示させたい場合は、「Fullscreen」をOFFからONに変えてください。
自動で次のスライドに移ってほしい場合は、「Autoplay」から「Enable」をOFFからONに変えてください。
設定が終わったら右上の「SAVE」で保存します。
各スライドごとの設定をする
今度は各スライドのトランジションの設定やテキストやボタンを載せたい場合の設定をします。
「Sliders」から編集したいスライドを選んで、「EDIT」をクリック。
スライドの編集画面になるので、画面左のSlider Settingから「Transition」を選んで、Effectの画像部分をクリックしてください。
たくさんのトランジッションの中から選ぶことができます。PROと書かれているものは有料版ユーザーでないと使用できません。
次はスライド画像の上にテキストを載せる方法です。
Slider Settingの右側の①の部分をクリック、「Text Editor」をクリックしてください。
「Content」で「ビジュアル」をクリックして、その下に表示したいテキストを入力します。
「Style」をクリックして、フォントやサイズ、色などの設定をします。
「Advanced」で、アニメーション効果の設定をします。表示されるときにフェードインしたり、消えるときにフェードアウトしたりできます。
スライドの設定が終わったら右上の「SAVE」で保存します。
「Transition Slider」の表示方法
「Transition Slider」を表示させる簡単な方法は、トップページの編集画面でショートコードを貼り付けるだけです。
さきほどのスライダーの設定で「Publish」をクリックします。
ショートコードが表示されるので、それをコピーします。
今度は、表示させたいページ（トップページなど）のページ編集画面で、ブロックの追加「ショートコード」をクリックして、ショートコードをコピペすればOKです。
もしくは、追加できるブロックに「Transition Slider」が追加されているのでこちらを使っても同様です。
あとは、使用しているテーマの元々のヘッダー画像などを非表示にしたり、追加CSSで空きスペースなどを調整すれば完成です。
スライダーを表示させるもう一つの方法は、header.phpなどに直接ショートコードを貼り付ける方法です。
例えばこんな感じで、header.phpで元々トップページヘッダーがあったところを以下のように書き替えます。
<?php echo do_shortcode('[transitionslider id="5"]'); ?>こちらの方がスッキリするかと思います。
追加CSSでヘッダー部分を調整してフルスクリーン表示にしたサンプルデモサイトはこちらです。
まとめ
ワードプレスには無料で使えるスライダープラグインはいくつもありますが、インパクト重視の派手めなスライダーにしたい方にはおすすめのプラグインです。
設定項目がかなり多く、細かく設定できるので最初はあらかじめ用意されているテンプレートを使って、画像やテキストを変えることから始めてみてはいかがでしょうか。
ただ、テンプレート「Business」が何故かセーブ出来なかったり、挙動がおかしいところも無いこともないです。
ですが、無料でこれだけかっこいいスライダーが作れるのは本当に驚きです。
