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

 

WordPressテーマ-Diver(ダイバー)での『ピックアップスライダーの設定方法を紹介します。

カエル
Diverの使い方を紹介するよ

 

記事がスライダーで表示されているのを見たことはないでしょうか?

サイト自体に動きが出て『オシャレ』って感じる人も多いかと。

例えば、この記事のタイトルの上方に表示されているのが『ピックアップスライダー』です。

 

アイキャッチ画像でユーザーの目を止めることができるので、収益記事や読んで欲しい記事を載せて置くことで記事の訴求が可能になります。

今回の記事を参考にすれば、ピックアップスライダーの表示方法がわかり、あなたのサイトでの回遊率がアップするでしょう。

 

スポンサーリンク

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

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

 

画像がスライドしながら表示されるため、ユーザーの目線を惹きつけ、足を止めさせる効果が期待できます。

指定した記事のアイキャッチ画像を流せるので、ユーザーが見て欲しい記事をクリックする確率を高めます。

 

Diverではピックアップスライダーを3カ所に設定可能です。

  1. トップページ
  2. 投稿ページ
  3. ファーストビュー

 

それでは説明していきますね。

 

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

 

ピックアップ方法の設定手順を以下の順番で進めていきます。

  1. 3種類のピックアップスライダー基本設定を行う
  2. ピックアップスライダーに表示する記事を選ぶ
  3. 細かい設定

それでは説明スタート

 

1.3種類のピックアップスライダー基本設定を行う

先ほども説明しましたが、Diverではピックアップスライダーを3カ所に設定可能です。

  1. トップページ
  2. 投稿ページ
  3. ファーストビュー

カエル
自分が設定したいところにピックアップスライダーの設定を行う

 

1.トップページ

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

 

投稿ページのピックアップスライダーはこの赤枠の中です。

 

WordPressのメニューを開きます。

『外観』→『カスタマイズ』『メイン設定』をクリックします。

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

 

スクロールした先の『スライダー記事』から設定を行っていきます。

特に設定をいじるところはないのですが、『トップページで非表示にする』にチェックが入っているとトップページで表示されません。

 

 

 

以下がここで一番重要な事です。

ここで設定したタグを含んだ記事がピックアップスライダーに表示されます。※タグのつけ方は後程教えていきます。

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

 

カエル
デフォルトの「pickup」というタグのままでOK
載せたい記事に「pickup」 タグをつけるだけだよ。

 

補足

・『スライダーをアイキャッチのみの表示にする』にチェックを入れると、記事のタイトルが表示されないようになります。

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

アイキャッチ画像にタイトルが入っている場合は、タイトルも表示するとく「ごちゃごちゃ」になるので、チェックを入れてアイキャッチ画像のみ表示させましょう。

 

・『スライダータイトル』を設定するとピックアップスライダーの上にタイトルが表示されます。

僕は設定してないのですが、あってもいいなと思います。

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

 

2.投稿ページ

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

 

投稿ページのピックアップスライダーはこの赤枠の中をさします。

 

WordPressのメニューを開きます。

『外観』→『カスタマイズ』『投稿設定』をクリックします。

 

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

 

スクロールした先の『pickup記事表示』から設定を行っていきます。

 

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

主に設定ができることは『表示する場所』と『表示するかしないか』の設定になります。

カエル
記事上に設定をしておくのが無難かな

 

3.ファーストビュー

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

 

ファーストビューのピックアップスライダーはこの赤枠の中のことです。

 

注意

カエル

『ファーストビューのピックアップスライダー』と

『トップのピックアップスライダー』はどちらかしか表示できないから注意しよう。
ファーストビューでピックアップスライダーを設定したら、トップは勝手に非表示になります。

 

 

WordPressのメニューを開きます。

『Diverオプション』→『ファーストビュー』をクリックします。

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

 

背景の中のファーストビューから『ピックアップスライダー』を選択します。

その後、『スライダーサイズ』を設定しましょう。

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

 

最後に『変更を保存』をクリックして設定完了です。

 

以上で『3種類のピックアップスライダー基本設定』は完了です。

カエル
次にピックアップスライダーに表示する記事を選ぶよ

 

2.ピックアップスライダーに表示する記事を選ぶ

 

ユーザーに見てもらい記事を選びましょう

せっかくピックアップスライダーに載せる記事です、見てもらいたいものを選んだ方がいいかもしれません。

 

ピックアップスライダーに載せる記事は以下の2パターンが考えられます。

 

  1. すでに投稿済みの記事
  2. 新規投稿の記事

 

それぞれのピックアップスライダーに載せる方法を紹介していきますね。

1.すでに投稿済みの記事

 

WordPressのメニューを開きます。

『投稿』→『投稿一覧』『クイック編集』をクリックします。

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

 

右の『タグ』の中に『pickup』と入力して完了です

 

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

 

『更新』をクリックして完了です。

ピックアップスライダーに記事が追加されているか確認も必須です!

 

2.新規投稿の記事

 

投稿ページの『タグ』をクリックします。※基本的に右側に表示されているかと思います。

そこに、『pickup』と入力して完了です。

そのままいつも通りに投稿すれば、ピックアップスライダーに記事が追加されています。

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

これだけで完了です。

ちゃんとピックアップスライダーに記事が追加されているか確認して見てください

 

カエル
お疲れ様でした~

 

3.細かい確認

いくつか質問をいただいたので回答をしておきます。

 

ピックアップスライダーを投稿ページとトップページ、どちらかを非表示にすることは可能でしょうか

可能です。

Diverでは1で紹介したように、非表示設定をすれば『投稿ページ』と『トップページ』ごとにピックアップスライダーの表示をコントロールできます。

僕は投稿ページのみの設定にしています。

 

ピックアップスライダーが表示されません

pickupタグが記事に設定されていますか?

pickupタグが1つも設定されていない状態だと、1でいくら設定をしてもピックアップスライダーは表示されないので注意しましょう。

 

まとめ

ピックアップスライダーがあるだけで、サイトに動きがでるので見た目も垢抜けます。

設定しておくべきなDiverのカスタムの一つです。

 

Diverに関する記事は他にもあるので良かったら見てください。

また、SEOに関する記事も書いてあるので合わせてどうぞ。

 

スポンサーリンク

Twitterでフォローしよう

おすすめの記事