WordPress 人気記事一覧をサイドバーに表示

WordPress Twenty Seventeen
Simple GA Ranking プラグインによる
人気記事一覧をサイドバーに表示
 
 サイトを訪れてくれたユーザーに、『サイト内には、こんな人気記事もありますよ』と、人気記事をランキング順に表示してみることにした。
 
 但し、このサイトを運用しているサーバーが【 Raspberry Pi 】なので、これ以上ページの表示速度が遅くなるような負荷をかけるわけにはいかない。ググってみると、「Simple GA Ranking」というプラグインは、Googleアナリティクスのデータを利用してランキングを算出するため、サーバへの負荷が軽いとのこと。
 
しかし、Googleアナリティクスのデータを利用するための「Analytics設定」が、少々複雑であった。
トークンの取得が完了
 
以下に、Simple GA Ranking プラグインの設定要領を記載。
 

 

スポンサー リンク

 

 
 
 
 
 
1. Simple GA Ranking プラグインを選んだ理由
 
 

 Simple GA Ranking

「Simple GA Ranking」はGoogleアナリティクスのデータを利用するため、自分のサーバーに負荷をかけず高速で表示することが可能です。

他の人気記事表示プラグインとは仕様がまったく異なるため、サイトの表示速度を落とすことなく人気記事を表示したい方はSimple GA Rankingの利用をおすすめします。

 
 
このプラグインは、Googleアナリティクスのデータを利用するための「Analytics設定」が必要で、「Google API Console」で、
 ①.プロジェクトの作成
 ②.APIとサービスの有効化
 ③.認証情報の作成
 ④.OAuthクライアントIDの作成
と、少々面倒である。
 
 
 
2. Simple GA Ranking プラグインのインストール
 
プラグイン「Simple GA Ranking」をインストールする。
プラグイン「Simple GA Ranking」をインストールする
 
有効化すると、管理画面の設定に「Simple GA Ranking」と「Analytics設定」の2つが追加される。
有効化すると、管理画面の設定に「Simple GA Ranking」と「Analytics設定」の2つが追加される
 
 
 
3. Analytics設定
 
まず、設定の「Analytics設定」をクリックする。
設定の「Analytics設定」をクリックする
 
下記ページが表示されるので、「Google API Console」をクリックする。
「Google API Console」をクリックする
 
「コールバックURL」を入力する局面が出てくるので、コピーして置くか別ウィンドウで開くと便利が良い。
 
 
プロジェクトの作成
 
Google APIの設定サイトの「リソースの管理」画面が開くので、「プロジェクトを作成」をクリックする。
Google APIの設定サイトの「リソースの管理」が開くので、「プロジェクトを作成」をクリックする
 
「Google Cloud Platform」画面に切り替わるので、利用規約に「同意して続行」をクリックする。
「Google Cloud Platform」画面に切り替わるので、利用規約に「同意して続行」をクリックする
 
プロジェクト作成ページが表示されるので、プロジェクト名の欄にプロジェクト名(何でもよい)を入力し、「作成」をクリックする。
プロジェクト作成ページが表示されるので、プロジェクト名の欄にプロジェクト名(何でもよい)を入力し、「作成」をクリックする
 
「プロジェクトを作成」という通知が表示される。
「プロジェクトを作成」という通知が表示される
 
 
APIとサービスの有効化
 
左上にあるメニューを開き、「APIとサービス」の中にある「ダッシュボード」をクリックする。
メニューを開き、「APIとサービス」の中にある「ダッシュボード」をクリックする
 
「APIとサービス」画面に遷移するので、「APIとサービスの有効化」をクリックする。
「APIとサービス」画面に遷移するので、「APIとサービスの有効化」をクリックする
 
「APIライブラリ」の一覧画面が表示される。
「APIライブラリ」の一覧画面が表示される
 
ページの最下部にスクロールし、「Google Analytics API」をクリックする。
ページ最下部にスクロールし、「Analytics API」をクリックする
 
Google Analytics APIを「有効にする」をクリックする。
Google Analytics APIを「有効にする」をクリックする
 
 
認証情報の作成
 
APIを使用するには、認証情報を作成してください。と、表示されるので「認証情報を作成」をクリックする。
APIを使用するには、認証情報を作成してください。と、表示されるので「認証情報を作成」をクリックする
 
認証情報の「プロジェクトへの認証情報の追加」画面が開くので、「クライアントID」をクリックする。
認証情報の「プロジェクトへの認証情報の追加」画面が開くので、「クライアントID」をクリックする
 
クライアントIDの作成画面に遷移するので、「同意画面を設定」ボタンをクリックする。
クライアントIDの作成画面に遷移するので、「同意画面を設定」ボタンをクリックする
 
「OAuth同意画面」が開く。
「OAuth同意画面」が開く
 
「アプリケーション名」欄に、Googleアナリティクスのデータを利用するアプリケーション名(何でもよい)を設定する。
「アプリケーション名」欄に、Googleアナリティクスのデータを利用するアプリケーション名(何でもよい)を設定する
 
「承認済みドメイン」欄にドメイン名を入力し、ページ下部にある「保存」ボタンをクリックする。
「承認済みドメイン」欄にドメイン名を入力し、ページ下部にある「保存」ボタンをクリックする
 
 
OAuthクライアントIDの作成
 
「OAuthクライアントIDの作成ページ」が開く。
「OAuthクライアントIDの作成ページ」が開く
 
アプリケーションの種類の中から「ウェブアプリケーション」を選択する。
アプリケーションの種類の中から「ウェブアプリケーション」を選択する
 
「名前」欄に好きな名前を入力し、「承認済みのリダイレクトURI」欄にWordpressのプラグイン設定ページで表示されていた「コールバックURL」を入力し、「保存」ボタンをクリックする。
「名前」欄に好きな名前を入力し、「承認済みのリダイレクトURI」欄にWordpressのプラグイン設定ページで表示されていた「コールバックURL」を入力し、「保存」ボタンをクリックする
 
OAuthクライアントの、「クライアントID」と「クライアントシークレット」が作成される。
OAuthクライアントの、「クライアントID」と「クライアントシークレット」が作成される
 
 
 
4. トークンの取得とサイトの設定
 
WordPressのプラグイン設定ページに戻り、作成された「クライアントID」と「クライアントシークレット」をそれぞれに貼り付けて、「トークンを取得」ボタンをクリックする。
「クライアントID」と「クライアントシークレット」をそれぞれ貼り付けて、「トークンを取得」ボタンをクリックする
 
ドメイン名を認証するための、Googleの「アカウントの選択画面」が表示されるので、承認するためのアカウントを選択する。
ドメイン名を認証するための、「アカウントの選択画面」が表示されるので、承認するためのアカウントを選択する
 
「このアプリは確認されていません」と表示されるので、「詳細」をクリックする。
「このアプリは確認されていません」と表示されるので、「詳細」をクリックする
 
さらに、「(安全でないページ)に移動」をクリックする。
「(安全でないページ)に移動」をクリックする
 
「ドメインへの権限付与」と表示されるので、「許可」をクリックする。
「ドメインへの権限付与」と表示されるので、「許可」をクリックする
 
「選択内容を確認してください」と表示されるので、「許可」をクリックする。
「選択内容を確認してください」と表示されるので、「許可」をクリックする
 
以上で、無事トークンの取得が完了。
トークンの取得が完了
 
「サイトの設定」で、人気記事一覧を表示するサイトの【トラッキング ID】を選択し、「保存」をクリックする。
「サイトの設定」で、人気記事一覧を表示するサイトの【トラッキング ID 】を選択し、「保存」をクリックする
 
以上で、 【Simple GA Ranking】プラグインの「Analytics設定」は完了
 
 
 
5. ウィジェットによるサイドバーの設定
 
ダッシュボードの「外観」→「ウィジェット」を開くと、【Simple GA Ranking】が追加されている。
【Simple GA Ranking】をドラッグし、人気記事一覧を表示したい場所にドロップする。
【Simple GA Ranking】をドラッグし、人気記事一覧を表示したい場所にドロップする
 
今回は一番下に配置し、且つ、位置を固定にした。
今回は一番下に配置し、且つ、位置を固定にした
 
人気記事一覧の、表示結果。
人気記事一覧の、表示結果
 
 
 
6. Simple GA Ranking設定
 
設定の、「Simple GA Ranking」をクリックする。
設定の、「Simple GA Ranking」をクリックする
 
「Simple GA Ranking」で、ランキングの測定期間と表示数が設定できる。
「Simple GA Ranking」で、ランキングの測定期間と表示数が設定できる
 
 
 
7. サイドバーの位置を固定する
 
サイドバーの位置を固定するために、「Q2W3 Fixed Widget」プラグインを利用した。
サイドバーの位置を固定するために、「Q2W3 Fixed Widget」プラグインを利用
 
初期設定のままだと、下にスクロールした時フッターが被る。
初期設定のままだと、下にスクロールした時フッターが被る
 
「外観」→「Fixed Widget 設定」の「一般設定」で、「下マージン」を設定すればOKになる。
「一般設定」で、「下マージン」を設定すればOKになる
 
 
以上。
(2019.08.23)
 

 

スポンサー リンク

 

             

にほんブログ村 IT技術ブログ Raspberry Piへ にほんブログ村 IT技術ブログ Webサイト構築へ にほんブログ村 IT技術ブログ WordPressへ にほんブログ村 IT技術ブログへ

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください