私のブログにも「人気記事ランキング」を表示させたいんですけど
どうやってやればいいんですか？？
Diverの機能を使って表示させるのが1番おすすめだよ！
ブログを見ていると、サイドバーのランキング表示ってよく見かけますよね。
今回はDiverの機能を使って
あなたのブログのサイドバーに ”人気記事ランキング” を表示させる方法を解説します。
目次
WordPress Popular Posts を使わないほうが良いワケ
あれじゃダメなんですか？
あんまりオススメできないかなー
”ワードプレス”＋”記事ランキング”などのキーワードでググってみると
「WordPress Popular Posts」プラグインを使うとカンタン
という記事をよく見かけますよね。
確かにこのプラグインは、ほぼインストールするだけで使用可能で
すごく楽にランキングを表示させることが可能なんですが、実は大きな欠点があります。
それは、このプラグインを入れるとサイトがめちゃくちゃ重くなるということ。
重くなるというのは、それだけ容量を多く使うので
結果サイトの表示が遅くなってしまう、ということにつながります。
グーグルはサイトの表示の速さも検索順位に反映させると
公式に言っているので、これは無視することができない要因だと言えますね。
ということで
ここでは、当ブログでも使用しているテーマ「Diver」の機能を使って
人気記事ランキングを表示させる方法を紹介していきたいと思います。
WordPress Popular Posts よりも手順は増えてしまいますが
使い勝手の良さは、管理人お墨付きです！
Diver で人気記事ランキングを表示させる方法
まず最初に、なぜDiver の機能を使うと動作が軽いのかについて
簡単に説明しておきたいと思います。
WordPress Popular Posts をインストールすると
そのサーバーのリソースを使って機能しているのに対して
Diver のランキング表示機能は、「Google Analytics」の情報を取得して表示します。
はるかに動作が軽くなる、というわけです。
さらに
WordPress Popular Posts よりも正確なデータを取得することができる
と、いいことずくめなんですね！
ですので、もしあなたが Diver を使っているのなら
ランキング表示には、こちらの機能を使うことをおすすめします。
Google Analytics の機能を使用するので、
そちらの設定がまだの場合は、以下のページを参考にして先に設定を済ませておいてください。
内部リンクグーグルアナリティクスの導入方法を図解入りで解説！
１．Google Developers Console を設定しよう
Google Developers Console（グーグル デベロッパー コンソール）とは
グーグルが提供する、開発者用の管理ページの事です。
グーグルにログインした状態で以下のリンクから
Google Developers Console にアクセスしましょう。
外部リンクGoogle Developers Console
１ 画面左上をクリックして、新しいプロジェクト を作成します。
２ プロジェクト名 を設定（適当なものでOK）して、作成 をクリック。
３ダッシュボードが表示されるので、APIとサービスを有効化
（ENABLE APIS AND SERVICESと表示されている場合もあり） をクリックします。
４ APIライブラリーが表示されるので、検索画面に「Analytics」と入力して
表示された Google Analytics Reporting API を選択します。
有効にする をクリック
２．サービスアカウントキーを作ろう
続いて、サービスアカウントキーを作成して取得します。
１ 画面左側のメニューから、認証情報 を選択しましょう。
２ 画面上に表示される、認証情報を作成 をクリックします。
ポップアップから、サービスアカウント を選択。
３ 適当な サービスアカウント名 を入力して、作成 をクリックしましょう。
４ サービスアカウントの作成画面で、ロールを選択 をクリック。
選択画面で、Project → 閲覧者 を選択しましょう。
５ 次の画面が表示されますが、ここはこのまま 完了 をクリックしてしまってOK。
３．秘密鍵をつくろう
続いては、秘密鍵を作っていきます。
よくわからないと思いますが、とりあえず手順通りに進めてもらえれば大丈夫です。
１ 認証情報 の画面で サービスアカウント の欄に作成した、メールアドレスをクリックしましょう
２ 次の画面で、鍵を追加 → 新しい鍵を作成 の順番にクリックします。
３ キーのタイプは、JSON を選択して 作成 をクリックします。
この時点で作成した鍵が自動でダウンロードされるので
あなたのPCのわかりやすい場所に保存しておきましょう。※後で使います
４．メールアドレスをコピーしよう
１ サービスアカウントを管理 をクリックします。
２ 次に表示される、メールアドレスをコピー しておきましょう。※後で使います
Google Developers Console での設定は、これで以上になります。
５．Google Analytics を設定しよう
続いて、グーグルアナリティクスでの設定方法。
まずは、Google Analytics の管理画面に移動しましょう。
外部リンクGoogle Analytics
１ 管理画面に移動できたら
左下にある 歯車マーク(設定) → アカウントユーザーの管理 と選択します。
２ 画面右上の、＋ボタンをクリックし、ユーザーを追加 を選択。
３ 上でコピーしておいた、”サービスアカウントの”メールアドレス を入力し
表示と分析 にチェックを入れたら 追加 をクリックします。
６．ビューID を取得しよう
１ 歯車マーク から今度は、ビューの設定 をクリックします。
２ 次の画面で表示される、ビューIDをコピー しておきましょう。
７．Diver 管理画面での操作
最後は、Diver 側での設定です。
ワードプレスの管理画面から、Diverオプション → 基本設定 と進みます。
設定画面を下にスクロールしていき Google Analytics設定 欄の
アナリティクスViewID に先ほどコピーしたIDをコピペします。
下の キーファイル はダウンロードした、秘密鍵(JSONファイル)をアップロード。
最後に、変更を保存 を押したら全て終了です。
あとはウィジェットを任意の場所に設置するだけ！
あとは、【Diver】人気記事 ウィジェットを好きな場所に設置するだけです。
表示方法は細かく設定できるので、自分好みにカスタマイズしちゃいましょう！
ちなみに、ランキングに表示される数字のデザインは
外観 → カスタマイズ → デザイン設定① → ランキングウィジェット順位
から、好きなものを選ぶことができますよ！
さいごに
以上、ワードプレステーマ Diver を使用した、人気記事ランキングの表示方法でした。
早速サイドバーにランキングを設置して
ユーザーにあなたのブログの人気記事をアピールしましょう。
さいごにこのページのおさらいをしておきましょう。
- WordPress Popular Posts を使うとサイトが重くなる
- Diver で人気記事ランキングを設置する手順は全部で７つ
- 設定が終わったら後はウィジェットでサイドバーに設置するだけ
データが蓄積されていないかのどっちかだから、ちょっと待つ必要があるね
注目の記事現役アフィリエイターが Diver をおすすめする７つの理由【もう他のテーマはいりません】
注目の記事Diver のランキング機能の使い方のすべて【表示サンプルあります】
