【Diverの使い方】ピックアップスライダーの設置と日付削除のカスタマイズ

WordPressテーマ、Diverには「ピックアップスライダー」という機能があります。

注目してほしい記事のアイキャッチ画像をスライドで表示してくれるので、ブログの回遊率UPに役立ちますね。

当ブログでは、個別記事とファーストビューにピックアップスライダーを設置しました。

ブルー
記事数がある程度増えてから設置しないと、面白くないな

ついでにタイトル表示の際に日付が表示されるのがちょっと気になったので、日付表示を削除するカスタマイズも追記しています。

きじとら
この時点で使用しているのはDiverバージョン4.6.6です。(ファーストビューのピックアップスライダーの大きさを選択できるようになってます)

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

まずは、個別記事から設定していきます。

ちゃとら
↓記事上の赤枠で表示しているとこね

外観⇒カスタマイズから、投稿ページの設定へ進みます。

pickup記事表示のところで、個別記事(投稿ページ)のどこにピックアップスライダーを表示するか選ぶことができます。

当ブログの設定は記事上(top)です。記事の上(パンくずリストの直上)に設置されます。

記事下を選ぶと、記事直下ではなく、ナビゲーション(prev/next)とおすすめ記事の間に設置されます。

記事下だとこんな感じ↓

ピックアップスライダーを表示したくない場合は非表示にすればいいんですが、そもそもピックアップスライダー記事を選択していなければ表示されません。

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

ピックアップスライダーは、「これ!」という記事を選んで表示させるわけなので、スライダーさせたい記事を選ぶ必要があります。

外観⇒カスタマイズより、メイン設定に進みます。

下にスクロールして…

スライダー記事のところを見てみると…

ここで設定したタグが含まれる記事のみピックアップスライダーに表示される、となっています。

きじとら
デフォルトではpickupとなっているので、ピックアップスライダーに表示したい記事に「pickup」というタグを追加すればOKです。

既に投稿済の記事をピックアップスライダーに表示する場合は、記事一覧から「クイック編集」を使えば簡単。

↓対象記事のタイトルにカーソルを乗せると、「クイック編集」の項目がでてくるのでクリックします。

右側のタグの枠内に、「pickup」というタグを追加。

更新をクリックすれば完了です。

↓新しくピックアップスライダーに記事が加わりました。

あまりたくさん入れすぎても、スライダーを「じぃーーー」っと見てる人は少ないだろうから、アクセス数をチェックしながらメンテナンスしていけばいいかと思います。

ちなみに、スライダータイトルを設定すると…

↓このような表示になります。(デモサイトの画像です。)

その他の設定として、「スライダーをアイキャッチのみの表示にする」にチェックをいれると、記事タイトルが非表示になります。

↓アイキャッチ画像のみ

はち
アイキャッチ画像にタイトルをいれている人はアイキャッチ画像のみにしたほうが目を惹くよね。

ぶち

うちのアイキャッチはおふざけが過ぎるから、タイトルは必須なんじゃないかな…

↓タイトルあり

タイトルを表示した場合、アイコンを乗せるとタイトルが上にぐいっとスライドされます。

はち
閉店ガラガラの逆バージョン(笑)

そしてもう1点、「トップページで非表示にする」のチェックを外すと、トップページにもピックアップスライダーが表示されます。

当ブログでは、トップページのファーストビューをピックアップスライダーに変更したので、非表示に変更しなくちゃ…と思ってたんですが、

ファーストビューにピックアップスライダーが設置されている時は、自動的に通常のピックアップスライダーは非表示になるようです。

ちゃとら
ファーストビューをピックアップスライダーにしたい人は次に進んでね。

Diverのファーストビューにピックアップスライダーを設置する

diverのトップページは公式ページのようにYouTube動画を設置したり、画像を設置できるファーストビューがあります。

最初は画像とボタンを設置していた当ブログですが、今はピックアップスライダーに変更しています。

ブルー
また変更してたらごめんな

以前のファーストビュー↓

現時点でのファーストビュー↓

ファーストビューはバージョン4.6.6以降(かな?)、スライダーサイズ(アイキャッチ画像の大きさ)を選べるようになっています。

スライダーサイズの違いは、こちらの記事(文末)で比較しています↓

ファーストビューを画像にして、下にピックアップスライダーを表示するのも捨てがたいから、アクセス次第ではまた変更するかも?です。汗

ぶち

自由すぎるでしょ…

【Diver】ピックアップスライダーの日付削除カスタマイズ

ピックアップスライダーを設置して、どーーーーーーしても気になったことが、日付の表示。

アイキャッチ画像のみにしていれば問題ないことなんですが、タイトルを表示していると、日付の位置がタイトルの長さに影響されてしまうのが気になる!

ぶち

あがってんの?さがってんの?状態が気になるなぁ…。ここに日付ってなくてもいいんじゃない?

というわけで、ピックアップスライダーの日付表示、削除しちゃいました。

/*ピックアップスライダーの日付削除*/
.pickup-dt {
display: none;
}

カスタマイズする際は、以下の点にも注意してください。

カスタマイズの注意点

・カスタマイズの際は「子テーマ」を使用し、事前にバックアップをお取りください
・カスタマイズが反映されない時は、キャッシュのクリアorスーパーリロードをお試しください

ピックアップスライダーの設置まとめとおまけ

ピックアップスライダーを設置すると、アイキャッチの作成もちょっと意識が変わってきます。

タイトルの上に見える部分を意識して作ろう、とか。

よく読まれている記事や、読んでもらいたい記事、定期的に更新していきたいとこですね。

ちなみに、ちょっと混乱しがちなのが、ピックアップカテゴリー。

スライダー記事設定のすぐ下にあるので、「ん?これもピックアップスライダーのなにか?」と思ってしまうかもしれませんが、これは全く別。

当ブログでは使用していないので、公式ページをお借りするとこの部分↓

トップページに選んだカテゴリー内の記事を掲載する機能です。

はち
そこ、間違えるのはきじとらちゃんぐらいかもよ?笑

きじとら
(えっ…)
このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事