注目度の高い記事
ワードプレステーマ「Diver」を使って記事ランキングを表示する方法

 

わかば
山本さーん!
私のブログにも「人気記事ランキング」を表示させたいんですけど
どうやってやればいいんですか??

山本
人気記事を表示させる方法はいくつかあるけど
Diverの機能を使って表示させるのが1番おすすめだよ!

 

ブログを見ていると、サイドバーのランキング表示ってよく見かけますよね。

 

今回はDiverの機能を使って

あなたのブログのサイドバーに ”人気記事ランキング” を表示させる方法を解説します。

WordPress Popular Posts を使わないほうが良いワケ

わかば
WordPress Popular Posts ってよく見るんですけど
あれじゃダメなんですか?

山本
ダメって訳じゃないんだけど
あんまりオススメできないかなー

 

”ワードプレス””記事ランキング”などのキーワードでググってみると

「WordPress Popular Posts」プラグインを使うとカンタン

という記事をよく見かけますよね。

 

確かにこのプラグインは、ほぼインストールするだけで使用可能で

すごく楽にランキングを表示させることが可能なんですが、実は大きな欠点があります。

 

それは、このプラグインを入れるとサイトがめちゃくちゃ重くなるということ。

 

わかば
重くなる??

 

重くなるというのは、それだけ容量を多く使うので

結果サイトの表示が遅くなってしまう、ということにつながります。

 

グーグルはサイトの表示の速さも検索順位に反映させると

公式に言っているので、これは無視することができない要因だと言えますね。

 

ということで

ここでは、当ブログでも使用しているテーマ「Diver」の機能を使って

人気記事ランキングを表示させる方法を紹介していきたいと思います。

 

WordPress Popular Posts よりも手順は増えてしまいますが

使い勝手の良さは、管理人お墨付きです!

Diver で人気記事ランキングを表示させる方法

まず最初に、なぜDiver の機能を使うと動作が軽いのかについて

簡単に説明しておきたいと思います。

 

WordPress Popular Posts をインストールすると

そのサーバーのリソースを使って機能しているのに対して

Diver のランキング表示機能は、「Google Analytics」の情報を取得して表示します。

山本
ブログのサーバーのリソースを使わないぶん
はるかに動作が軽くなる、というわけです。

さらに

WordPress Popular Posts よりも正確なデータを取得することができる

と、いいことずくめなんですね!

 

ですので、もしあなたが Diver を使っているのなら

ランキング表示には、こちらの機能を使うことをおすすめします。

 

Google Analytics の機能を使用するので、

そちらの設定がまだの場合は、以下のページを参考にして先に設定を済ませておいてください。

内部リンクグーグルアナリティクスの導入方法を図解入りで解説!

 

1.Google Developers Console を設定しよう

Google Developers Console(グーグル デベロッパー コンソール)とは

グーグルが提供する、開発者用の管理ページの事です。

 

グーグルにログインした状態で以下のリンクから

Google Developers Console にアクセスしましょう。

外部リンクGoogle Developers Console

 

画面左上をクリックして、新しいプロジェクト を作成します。

 

プロジェクト名 を設定(適当なものでOK)して、作成 をクリック。

プロジェクト名を設定

 

ダッシュボードが表示されるので、APIとサービスを有効化

(ENABLE APIS AND SERVICESと表示されている場合もあり) をクリックします。

APIとサービスを有効化をクリック

 

APIライブラリーが表示されるので、検索画面に「Analytics」と入力して

表示された Google Analytics Reporting API を選択します。

APIライブラリーで「Google Analytics Reporting API」を選択

 

有効にする をクリック

有効にするをクリック

 

2.サービスアカウントキーを作ろう

続いて、サービスアカウントキーを作成して取得します。

 

画面左側のメニューから、認証情報 を選択しましょう。

認証情報を選択

 

画面上に表示される、認証情報を作成 をクリックします。

認証情報を作成をクリック

 

ポップアップから、サービスアカウント を選択。

 

適当な サービスアカウント名 を入力して、作成 をクリックしましょう。

適当なサービスアカウント名を入力

 

サービスアカウントの作成画面で、ロールを選択 をクリック。

サービスアカウントの作成画面でロールを選択

 

選択画面で、Project → 閲覧者 を選択しましょう。

Project ⇒ 閲覧者 を選択

 

次の画面が表示されますが、ここはこのまま 完了 をクリックしてしまってOK。

そのまま完了ボタンをクリック

 

3.秘密鍵をつくろう

続いては、秘密鍵を作っていきます。

よくわからないと思いますが、とりあえず手順通りに進めてもらえれば大丈夫です。

 

認証情報 の画面で サービスアカウント の欄に作成した、メールアドレスをクリックしましょう

メールアドレスをクリック

 

次の画面で、鍵を追加 → 新しい鍵を作成 の順番にクリックします。

鍵を追加→新しい鍵を作成とクリック

 

キーのタイプは、JSON を選択して 作成 をクリックします。

JSONを選択して作成をクリック

 

この時点で作成した鍵が自動でダウンロードされるので

あなたのPCのわかりやすい場所に保存しておきましょう。※後で使います

 

4.メールアドレスをコピーしよう

サービスアカウントを管理 をクリックします。

サービスアカウントを管理をクリック

 

次に表示される、メールアドレスをコピー しておきましょう。※後で使います

表示されたメールアドレスをコピーしておく

 

Google Developers Console での設定は、これで以上になります。

 

5.Google Analytics を設定しよう

続いて、グーグルアナリティクスでの設定方法。

まずは、Google Analytics の管理画面に移動しましょう。

外部リンクGoogle Analytics

 

管理画面に移動できたら

左下にある 歯車マーク(設定) → アカウントユーザーの管理 と選択します。

グーグルアナリティクス管理画面で、歯車マーク → アカウントユーザーの管理 とクリック

 

画面右上の、+ボタンをクリックし、ユーザーを追加 を選択。

右上の+ボタンをクリック

ユーザーを追加をクリック

 

上でコピーしておいた、”サービスアカウントの”メールアドレス を入力し

表示と分析 にチェックを入れたら 追加 をクリックします。

サービスアカウントのメールアドレスを入力

 

6.ビューID を取得しよう

歯車マーク から今度は、ビューの設定 をクリックします。

ビューの設定をクリック

 

次の画面で表示される、ビューIDをコピー しておきましょう。

表示されたビューIDをコピーする

 

7.Diver 管理画面での操作

最後は、Diver 側での設定です。

ワードプレスの管理画面から、Diverオプション → 基本設定 と進みます。

 

設定画面を下にスクロールしていき Google Analytics設定 欄の

アナリティクスViewID に先ほどコピーしたIDをコピペします。

 

下の キーファイル はダウンロードした、秘密鍵(JSONファイル)をアップロード

 

最後に、変更を保存 を押したら全て終了です。

アナリティクスViewIDをペーストして、キーファイルをアップロードする

 

山本
おつかれさまでした!

あとはウィジェットを任意の場所に設置するだけ!

あとは、【Diver】人気記事 ウィジェットを好きな場所に設置するだけです。

表示方法は細かく設定できるので、自分好みにカスタマイズしちゃいましょう!

山本
ほとんどの場合、人気記事ランキングはサイドバーに設置します

 

人気記事ウィジェットを任意の場所に設置

 

ちなみに、ランキングに表示される数字のデザインは

外観 → カスタマイズ → デザイン設定① → ランキングウィジェット順位

から、好きなものを選ぶことができますよ!

 

さいごに

以上、ワードプレステーマ Diver を使用した、人気記事ランキングの表示方法でした。

 

早速サイドバーにランキングを設置して

ユーザーにあなたのブログの人気記事をアピールしましょう。

 

さいごにこのページのおさらいをしておきましょう。

  • WordPress Popular Posts を使うとサイトが重くなる
  • Diver で人気記事ランキングを設置する手順は全部で7つ
  • 設定が終わったら後はウィジェットでサイドバーに設置するだけ

 

わかば
表示するデータがありません って出てくるんですけど...?

山本
それは、わかばちゃんのブログをまだ誰も見ていないのか
データが蓄積されていないかのどっちかだから、ちょっと待つ必要があるね

 

※テーマ選びにかかる無駄なお金と時間を短縮

ワードプレステーマは無料・有料のものをあわせると数えきれないほどあります。僕もこれまで色々な有料テーマを使ってきましたが、結局一番使いやすく見た目も良かったのが、この Diver でした。以下のリンク先では、Diver 開発者の高木さんが作成したデモサイトが公開されているので、気になった方は、そちらもあわせてチェックしてみてください。

≫Diver デモサイト

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で使用可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事