diverで人気記事ランキングを表示させる方法
スポンサーリンク

WordPressテーマ「Diver」で人気記事ランキングをサイドバーに表示する方法ってどうやるの?簡単な方法を教えて!

この疑問にこたえます。

この記事をさいごまで読むと、僕のブログ(MIKEBLOG)と同じように、サイドバーに人気記事ランキングをアイキャッチ画像付で表示させることができます。

ここのデザインです。

Diver人気記事ランキングデザイン

Diver公式ページでもランキングを表示させる方法が説明してあります。

参考1人気記事の表示方法

参考2【PV数取得 ・ランキング作成】Google Analytics API 設定手順

ちなみに、僕はどちらの記事も参考にしましたが、参考2は設定がややこしくて挫折しました。

この記事では、僕と同じようなブログ初心者でもできる設定方法を書いていきます。

プラグインをインストールする

WordPress Popular Postsというプラグインをインストールしてください。

人気記事ランキングを作るプラグインです。

WordPress画面左側の「プラグイン」で検索・インストール可能です。

diver人気記事ランキングプラグインをインストール

  1. WordPress画面左側の「プラグイン」→「新規追加」をクリック
  2. WordPress Popular Postsで検索
  3. WordPress Popular Postsを有効化してください

ウィジェットエリア(サイドバー)の設定をする

プラグイン「Wordpress Popular Posts」のインストールが完了すると、ウィジェットエリアに WordPress Popular Posts というウィジェットが追加されているはずです。

これを、設置したいウィジェットエリアに配置していきます。

diver人気記事ランキングウィジェットエリア設定

  1. WordPress画面左側の「外観」→「ウィジェット」をクリック
  2. WordPress Popular Postsが追加されているはず
  3. WordPress Popular Postsをメインサイドバーにドラッグする

できましたか・・?

ドラッグしたWordpress Popular Postsの右側にある▼ボタンをクリックすると下のような画面になるはずです。

下の画像は僕の設定画面です!この通りにやれば僕と同じような人気記事ランキングがウィジェットエリアに表示されるはずです。参考にしてみてください(*^_^*)
diver人気記事ランキングウィジェット1
diver人気記事ランキングウィジェット2
  • タイトルは今日の人気記事にしています
  • 最大表示数は8件にしています
  • 計測期間は過去24時間にしています
  • アイキャッチ画像を表示させていてサイズを手動で指定しています
  • サイズは、幅100px/高さ75pxにしています

設定が終わったら「保存」をクリックしてください。

これでウィジェットエリア(サイドバー)に人気記事ランキングが表示されているはずです!

設定はあなたの好きなようにカスタマイズできるので、いろいろと試してみてくださいね。

Diverの人気記事ランキングデザイン

ウィジェットエリア(サイドバー)に人気記事ランキングが表示されると、次は「Diver」でできる人気記事ランキングのデザインを設定していきます。

めちゃくちゃ簡単です。

手順1WordPress画面左側の「外観」→「カスタマイズ」をクリック

diver人気記事ランキングデザイン1

手順2「デザイン設定①」をクリック

diver人気記事ランキングデザイン2

手順3一番下の「ランキングウィジェット順位」のプルダウンから好きなデザインを選ぶ

diver人気記事ランキングウィジェット順位

これだけです。

プルダウンを選択すると数字のデザインが変わります。

参考までにすべてのデザインを載せておきますね!

表示なしdiver人気記事ランキングデザイン表示なし
diver人気記事ランキングデザイン丸
三角diver人気記事ランキングデザイン三角
四角diver人気記事ランキングデザイン四角
大きい数字diver人気記事ランキングデザイン大きい数字

「Diver」なら、自分のブログに合ったデザインを選択できますし、表現の幅が広がりますね。

以上、『Diverで人気記事ランキングを表示する方法【アイキャッチ画像付】』でした!

さいごまで読んでいただき、ありがとうございます。

「Diver」関連記事

欲しかったWordPressテーマTHE THOR(ザ・トール)購入!Diverとの違いを徹底解説

アフィリエイト初心者が月10万円稼ぐために登録した6つのASP

スポンサーリンク

Twitterでフォローお願いします

おすすめの記事