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

  更新: 2022/05/31  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サイト制作&リニューアル・機能開発サービス | アトリエSS


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

  関連記事

【WordPress&GitHub連動】WP Pusherプラグインで、テーマやプラグインをGitHubリポジトリから更新してみる
【WPプラグイン】WordPress5.0以降のブロックエディタ使いたくない場合→Classic Editorプラグインで旧エディタに戻して記事を書こう
【WordPress高速化プラグイン】Speed Up-JavaScript To Footerで、表示速度を速くする方法
【WordPressとGoogleカレンダー連携プラグイン】Simple Calendarの設定・Calendar APIやID取得しての設定
【WP/contact form 7】$_POST変数の中身で判定して、『メール送信ありがとうページ』に遷移させる方法
管理画面からFTP操作『WP File Manager』~過去の脆弱性ver・機能・使用例(テーマ消えないなど)の紹介
WordPressのリビジョンを、プラグインで制御する方法(revision control)【データベースを軽く】
【WordPress】Table of Contents Plusの誤動作例~特殊文字『>』が見出しに入ると表示が崩れる
【WordPressショッピングサイト作成】Welcart概要・テーマ・プラグイン・設定例などを詳しく解説
【phpでWPプラグイン改造】What’s New Generatorで、記事タイトル文字数を設定する
ワードプレスサイトを、プラグインでサクッとSSL化する方法
functions.phpエディットできない(orテーマファイル変更しない)場合の機能追加は?→Code Snippetsプラグインで