Diverでピックアップスライダーを表示する方法
Diverでピックアップスライダーを表示する方法

今回は、Diverでピックアップスライダーを表示する方法を解説します。

Diverにはスライダー機能が標準装備されています。

設定も簡単で、好みに応じて表示・非表示を切り替えることができ、とても便利です。

スライダーを使って動きを持たせることで、ユーザーにも覚えてもらいやすいサイトにすることができますので、当記事を参考にぜひ設定してみてください。

ピックアップスライダーとは?

記事が増えると、過去に書いた記事が埋もれてしまい、どんなに良い記事でもユーザーに読んでもらえる可能性が減ってしまいます。

そんなときに活躍するのがピックアップスライダーです。

ピックアップスライダーとは、読んで字のごとく、スライド形式で記事を表示する機能のことです。

トップページやページ上部に設置することができます。

Diver ピックアップスライダー

Diver ピックアップスライダー

ピックアップスライダーの機能を使っておすすめ記事を表示すれば、昔に書いた記事でも再度ユーザーにアピールすることができます。

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

そんなピックアップスライダーを設定する具体的な方法を解説します。

タグの設定

ピックアップスライダーに表示する記事には、タグを設定する必要があります。

まずはタグの名前を決め、その後にタグを各記事に設定する、という手順で進めます。

タグに名前をつける

まずはタグに名前をつけましょう。

WordPressのダッシュボード左メニューから、『外観カスタマイズ』という順にクリックします。

『外観→カスタマイズ』という順にクリックして進む

『外観→カスタマイズ』という順にクリックして進む

 カスタマイズページが開くので、画面左メニュー内の『メイン設定』をクリックします。

『メイン設定』をクリック

『メイン設定』をクリック

「メイン設定」のメニューに切り替わります。

下の方にスクロールすると、「スライダー記事」という設定項目があるので、
2行目の「ここで設定したタグが含まれている記事が、トップページのスライダーで表示されます」のテキストボックスに、好きな文字を設定しましょう。

ここで入力した文字列を記事のタグに設定すると、その記事がピックアップスライダーに表示されるようになります。

特にこだわりのない方は、デフォルトの「pickup」のままで問題ありません。

スライダー用のタグ名を入力

スライダー用のタグ名を入力

記事にタグを設定する

タグの名前を設定したら、ピックアップスライダーで表示したい記事に、そのタグを埋め込みましょう。

ピックアップスライダーに表示したい記事の投稿編集ページを開きます。

右サイドバーに「タグ」というエリアがあるので、
そこのテキストボックスに上記で設定したタグ名を入力し、『追加』ボタンをクリックします。

スライダー用のタグ名を入力し、『追加』ボタンをクリック

スライダー用のタグ名を入力し、『追加』ボタンをクリック

最後に投稿を保存すれば設定完了です。

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

次は、ピックアップスライダーの表示設定をします。

ピックアップスライダーを表示できる場所は下記の3箇所です。

  • トップページ上部
  • 投稿ページ
  • ファーストビュー

それぞれ紹介します。

トップページ上部

ピックアップスライダー トップページ上部

ピックアップスライダー トップページ上部

WordPressのダッシュボードから『外観カスタマイズメイン設定』という順に進み、
ピックアップスライダーの設定画面を開きましょう。

「スライダー設定」にある『トップページで非表示にする』のチェックを外すと、トップページの上部にピックアップスライダーが表示されます。

『トップページで非表示にする』のチェックを外す

『トップページで非表示にする』のチェックを外す

デフォルト設定ではチェックが入っていないので、何もしなければ最初から表示されるようになっています。

投稿ページ

投稿の各ページにもピックアップスライダーを表示できます。

ピックアップスライダー 投稿ページ

ピックアップスライダー 投稿ページ

WordPressのダッシュボードから『外観カスタマイズ投稿ページ』という順にクリックして進みます。

ダッシュボードから『外観→カスタマイズ→投稿ページ』という順にクリック

ダッシュボードから『外観→カスタマイズ→投稿ページ』という順にクリック

「pickup記事表示」という項目があるので、下記3パターンから、
ピックアップスライダーの表示位置、表示・非表示を選択しましょう。

表示できる場所は、「記事上(top)」か「記事下(bottom)」のどちらかです。

もし表示したくない場合は、「非表示(hidden)」を選んでください。

  • 記事上(top)
  • 記事下(bottom)
  • 非表示(hidden)
ピックアップスライダーの表示位置

ピックアップスライダーの表示位置

ファーストビュー

ファーストビューは、トップページの上部に画像や動画などを大きく表示することができる機能。

ピックアップスライダーもファーストビューに設定できるようになっています。

ピックアップスライダー ファーストビュー

ピックアップスライダー ファーストビュー

WordPressのダッシュボードから『Diverオプションファーストビュー』という順にクリックして進みます。

ダッシュボードから『Diverオプション→ファーストビュー』という順にクリック

ダッシュボードから『Diverオプション→ファーストビュー』という順にクリック

「ファーストビュー設定」のページが開きます。 「背景設定」の「ファーストビュー」のラジオボタンで『ピックアップスライダー』を選択しましょう。

『ピックアップスライダー』を選択

『ピックアップスライダー』を選択

「スライダーサイズ」というラジオボタンが表示されるので、
小・中・大の3パターンからスライダーの表示サイズを選択しましょう。

スライダーサイズ

スライダーサイズ

スライダーサイズ 小
スライダーサイズ 小

スライダーサイズ 小

スライダーサイズ 中
スライダーサイズ 中

スライダーサイズ 中

スライダーサイズ 大
スライダーサイズ 大

スライダーサイズ 大

最後に『変更を保存』ボタンをクリックすれば設定完了です。

『変更を保存』ボタンをクリック

『変更を保存』ボタンをクリック

まとめ

ピックアップスライダーは過去の記事を表示してくれる便利な機能、というだけでなく、これを設定するだけでサイトの見た目も各段に垢抜けるので、是非やっておきたいカスタマイズの一つです。

ぜひ参考にしてみてください。

スポンサーリンク

おすすめの記事