サイトのトップページの最上部にスライダーが欲しくなり、プラグインを検討しました。
そんな中でダウンロード数も含め、ほぼ標準といっても差し支えないプラグインとして
Smart Slider3 を導入したので、それについてのお話です。
なぜSmart Sliderなのか？
前述のとおりダウンロード数、導入実績含め世界的にも安定しており
標準といっても良いレベルだと思ったためです。これだけ覚えておけばWordpressでサイトを作成しようとしたときに
「あっ、スライダー入れたいな」
と思ったら、もう解決してしまうような良いプラグインです
インストールのやりかた
別に難しい事もなく、WordPressのCMSから「プラグイン追加」で検索欄に”Smart Slider”と検索すれば簡単に出てきます。
仮にWordPressの機能でのプラグイン導入が難しい環境であれば
こちらのURL: https://ja.wordpress.org/plugins/smart-slider-3/
からダウンロードして導入すれば問題ありません。
設定について
今回の導入にあたって、難しい設定が必要だったわけでもないので
私が行った設定だけ説明したいと思います。
まずはプラグインをインストールして有効化を行うと追加されるメニューの「Smart Slider」から「ダッシュボード」をクリック表示します。
次にダッシュボードからプロジェクトの追加をクリック
するとプロジェクトを自作するか、テンプレートから作成するか選べるんですが
簡単なスライダーを準備するだけなので、自作するために「自分で新規プロジェクトを作成」を選択
次にレイアウト等を選べますが、特にこだわりがなく普通のスライダーを作成したいようであれば
そのままの設定で全く問題ありません。今回は初期選択のまま進めます。
次の画面で実際にスライドする画像を追加していきます。
追加自体は「スライドを追加」ボタンから簡単に追加できます。
追加するスライドのタイプを選べますが、今回は普通に画像をスライドさせたいので、画像を追加していきます。
追加された画像は横並びで表示されていきます。
画像をクリックする事で、設定を変更する事が出来ます。(リンクを貼ったり等)
リンクの追加が少しわかりづらいので、簡単に説明します。
まず「編集」画面に入ったら、「コンテンツタブ」を開きます。
コンテンツタブを開いて、中を少し下にスライドしていくと「リンク」という欄があるので
そこにリンクを貼りつけましょう
リンクを貼ると、画像のようにオプションが2つ表示されます。
ターゲットウィンドウ: 一つは同じタブのまま開くか、または別タブで開くか？等を設定できるオプション
ARIA Label: HTMLのLabel属性に表示されるオプション
私の貼り付けたリンクは、同サイト内なので特別に別ウィンドウを開く必要もないので
オプションは何も選択しない、または「Self」を選択します。
必ず設定を終えたら、画面右上の「保存」をクリックしてください！！！
実際に設置する
それでは実際に設定していきます。
設置はショートコード形式です。ショートコードはプロジェクトの「一般」に表示されているので、それをコピーしておきましょう。
私はトップページを固定ページ(Elementor)で作成しておりますので
その編集画面を開きます。PHPファイルやWordpressのデフォルトエディア(Gutenberg)で作成している場合にはその編集画面を開いてください。
私のようにElementorでコンテンツを作成している場合には、テキストエディターブロックにショートコードを貼り付けます。
WordPressで標準のエディタ(Gutenberg)であれば、普通にそのまま貼り付けましょう。
PHPであれば、ショートコードをコピーする横に、PHPへの導入に使用するソースコードが表示されていますので、それをコピーして貼り付けましょう。
(PHPで作成している方なので普通にソースコードを理解して打てる方かと思いますので、コピペではなくともショートコードが表示されるソースコードが打てれば問題ないです。)
以上でスライダーが導入、稼働完了です。
細かい設定とオプション(サムネイル表示)
私が行った細かい設定と、スライド下に画像のサムネイルを表示するやり方を記載しておきます。
PCだとスライドしずらいし、スライドに興味ある場合に何枚あるかわかりやすいので私はサムネイルを表示しました。
まずプロジェクトの画面に移動しましょう。
ここから設置を行っていくわけですが、私が行った設定のみ簡単に説明させていただきます。
1. スライド送り用のアイコン表示(操作メニュー)
2. 自動スライドの時間(自動再生メニュー)
※MSなので、1000で1秒です。私の場合は5秒に設定したことになります。
3. スライド下にスライド画像サムネイルの表示(操作メニュー)
※操作メニューの下部にあります。
「バー」がスライドが並ぶ部分の背景色だったりを設定でき、「サムネイルの整列」で画像を左詰めかセンターか等選べます。私はセンターにしたいので「中央」にしています。
以上がSmart Sliderの簡単な説明でした。
私が行った設定のみでも、ずいぶんよくできたスライダーが出来上がる優れものなので
ぜひ使ってみてください！