【wpプラグイン】スライドショー実装でwebサイトをリッチにする『Slider by WD』

今回は、ワードプレスでサイトにスライドショーを実装します。 名前は『Slider by WD』。『Responsive Slider for WordPress』というサブタイトルがついているので、ＰＣビューをカバーしつつ、スマホ時代には合いそうです。フリー版･プロ版違いや操作方法なども押さえて、スライドショーでちょっとリッチな感じのサイトにしてみたいと思います。

Slider by WD導入方法

いつものように、『プラグイン新規追加』のところで、『Slider by WD』と検索し、 このロゴのプラグインが出てくるので有効化します。

評価4.5 70,000+件の有効化済みインストールと、利用実例が多いので、エラーとかでても『検索すればなんとかなりやすい』といえます。

フリー版機能制限について

このプラグインにはフリー版と有料プロ版があって、フリー版は一部の機能に制限がありました。

スライドショーに動画埋め込むとか（add video）・・・

global optionsのエフェクト・フォントなどの細かい設定は制限されているようです。

有料版は開発側のオフィシャルサイト https://web-dorado.com/products/wordpress-slider-plugin.html でゲットでき、

『PERSONAL・$20・6 MONTHSサポート・1 DOMAIN』 『BUSINESS・$30・1 YEARサポート・3 DOMAINS』 というようなライセンスになっています。

Slider by WDスライドショー利用のしかた

スライドショー画像の指定は、メディアアップロードしたものから選択

横にできたメニューより、『Sliders→任意のスライド→edit』で設定画面にきます。ここで『add image』またはアイコンをクリックすると画像選択の画面がでます。

ここではワードプレスのメディアライブラリ画面がでるので、使う画像には『Slider001』とか分かりやすい名前をつけて、事前にアップロードしておいてもokです。

設置はショートコード及びPHPタグで

まぁデモのスライドショーなんですけど、設置は簡単。ショートコードやPHPを使います。 メニューやタイトルすぐ下に設置するときは『header.php』に置いて、『PHPタグ』を貼り付けました。

ブログ部分など、記事の内部に設置する場合は『ショートコード』を使います。

導入するとこうなる（ＰＣビュー・スマホビュー）

今作っているデモサイトにスライドショーいれてみた例です。プラグインCSSに800pxが指定されてるっぽいので、ガッツリ広げたい時はmax-width指定されてるとこ探して書き換えるなどで対応できそう。

また、デバイス横幅でレイアウト変動させるタイプなので、 スマートフォンの縦長画面ではスライドが小さくなります。

あとがき

ユーザーに初見で『何のサイトか』をきちんとアピールするためには、スライドショーも効果的です。 例えばラーメン屋だったら複数バリエーションでラーメン載せるみたいに。独自で開発するとかなり手間がかかるのも事実。

このプラグインSlider by WDは、導入はそんなに難しくないので、ぜひやってみてください。