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

      2021/02/16   1550文字

今回は、ワードプレスでサイトにスライドショーを実装します。

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

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タグ』を貼り付けました。

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

導入するとこうなる(PCビュー・スマホビュー)


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

また、デバイス横幅でレイアウト変動させるタイプなので、

スマートフォンの縦長画面ではスライドが小さくなります。

あとがき

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

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


【カテゴリ】 - WordPressプラグイン情報
【タグ】 -

  関連記事