ワードプレステーマ「DIVER」で、スライダーを設置する方法

ワードプレスのサイトで、スライダーが設置されているのを見て、
あっかっこいい自分のサイトにも設置したいと思ったけど、
どうしたら良いのか分からない。

そんなあなたに、以外に簡単に設置出来る方法を解説します。

スライダーって何？

スライダーとは、サイトのヘッダー画像が順に入れ替わったり、
主要コンテンツが右から左に流れて行くあれです。
つまりサイト内のスライドショーです。

サイトのトップページにスライダーがあると、
動きのある分、目を引きます。
特に注目してほしいコンテンツを、スライドショーにして流すことで、
訪問者を誘導することもできます。

では、ワードプレステーマ「DIVER」で、ヘッダー画像をスライダーに設定する方法と
コンテンツのピックアップスライダーの設置方法を解説していきます。

ファーストービューをスライダーに設定する方法

まずはブログの顔のファーストビューにスライダーを設置する方法を解説します。

 

ブログのヘッダーにスライダーを設置すると、
ファーストビューの大きな部分に動きが生じ、
目を引き、サイトの内容を視覚的にアピール出来ます。

 

大きな画像でしっかりサイトをアピール出来る様に設定しましょう。

 

プラグイン「Smart Slider 3」のインストール

プラグインの「Smart Slider 3」をインストールします。
ダッシュボード→プラグイン→新規追加で「Smart Slider」で検索、

今すぐインストールでインストールしましたら、有効化をクリック。

Smart Slider 3でのスライダー作成方法

 

ダッシュボードの下の方に
Smart Sliderが表示されているので、
Smart Slider→Dashboardをクリック。

 

 

下の緑色のGO TO DASHBOARDをクリック

 

 

左のNEW PROJECTをクリック

 

 

左のCreate new projectをクリック

 

 

下の緑色のCREATEをクリック

 

これでスライダーが出来ました。

 

次は、スライダーの画像を設定します。
左のADD SLIDEをクリックします。

 

Imageをクリックしてメディア内から画像を選ぶか、
新たにアップロードます。
ですので予め画像は準備していおて下さい。

 

画像を何枚か追加し終えるとSAVEをクリックでスライダーができました。

ファーストビューへの設定方法

スライダーをファーストビューに設定します。
Smart Slider 3で作成したスライダーのショートコードをコピー。

Diverオプション→ファーストビュー→背景設定のファーストビューでカスタムを選択。
テキストモードで先のショートコードを貼り付けます。

 

変更を保存でスライダーの設置が終了です。

コンテンツのピックアップスライダーの設定方法

 

次にコンテンツのピックアップスライダーの設置です。
動きの有るスライダーで目的のコンテンツに誘導しましょう。

 

ピックアップスライダーの設定

外観→カスタマイズ→メイン設定→スライダー記事で、
スライダーに表示させる記事を選択します。

 

スライダーをアイキャッチ画像だけにしたり、
トップページで非表示にしたりもできます。

 

スライダーで表示させる記事は、タグ付けすることで選べます。

投稿ページにピックアップスライダーを表示

投稿ページにピックアップスライダーを表示させたいなら、
外観→カスタマイズ→投稿ページのpickup記事表示で、
記事上・記事下・非表示が選べます。

ファーストビューに拡大表示

ファーストビューに拡大表示させたい場合は、
Diverオプション→ファーストビューのピックアップスライダーにチェックを入れます。

まとめ

ワードプレステーマのDIVER（ダイバー）のスライダー設定方法を解説しました。
スライダーはとてもインパクトのある機能です。

上手く使っておっと印象ずけられるサイトを作って下さい。
いろんな仕掛けの有るしっかり作り込まれたサイトは信頼性も増します。
ぜひ導入を検討してみてください。