インターネットビジネスで自由に生きる!早期退職して海外移住したJINのブログ

ワードプレスの人気記事表示プラグイン「Simple GA Ranking」の設定とサムネイル表示

 2016/01/08   あとで読む

約 5 分で読めます

life-stage

WordPressで人気記事表示のプラグインといえば、何と言っても「WordPress Popular Posts」。それでもこのプラグイン、実はサーバーのアクセスに結構負担をかけているようです。

私の運営するブログで、以前ある記事がYahooからリンクされてアクセスが集中した時に(1時間に3万PVぐらいの集中)、レンタルサーバーからアクセス過多でアクセス制限を受け、その時にそのサーバー管理者から「WordPress Popular Posts」がアクセス数制限の要因の1つになっている、と教わりました。

そこでアクセス負荷を下げる手段の1つとして紹介いただいたのが、この「Simple GA Ranking」というプラグイン。

ただし「WordPress Popular Posts」とは異なり、こちらはグーグルアナリティクスのデータを利用するもので、グーグルアナリティクスの使用が前提になります。

「WordPress Popular Posts」は何気に使いたくない、アクセス過多に困った!といった際にお試しください。

インストールと設定が詳しく書かれているページがなく、結構苦労したのでこちらで「Simple GA Ranking」の設定手順、サムネイル表示の仕方などをご紹介です。

関連 WordPressの人気記事表示プラグインはコレだ!サムネイル表示を変幻自在に使いこなす

グーグルアナリティクスの利用

「グーグルアナリティクス」の利用が前提になりますので、

  • 1)グーグルアナリティクスのトラッキングIDの取得
  • 2)トラッキングIDをWordPressに設定

をしておきます。

1)のトラッキングIDは、「UA-xxxx」といったコードで、プラグインなどを利用してWordPressに設定します。

「All in One SEO」をご利用の場合には「General Settings」の中の「Google Settings」に「GoogleアナリティクスID」を設定する箇所がありますので、そちらにセットするのが簡単です。

グーグルアナリティクスのページはこちら

Simple GA Ranking のダウンロード

では「Simple GA Ranking」プラグインのダウンロードとインストールです。

管理画面(ダッシュボード)にログインして、管理画面左のメニュー「プラグイン」をクリックし最上段の「新規追加」を選択して、

  • ① Simple GA Ranking をキーワードに入力して検索
  • ② Simple GA Ranking のプラグインが表示されるので「今すぐインストール」をクリック!

2016-01-02_155753

↓↓↓↓↓↓

インストールしたら「プラグインを有効化」をクリック!

2016-01-02_155838

以上でダウンロードとインストールが終了です。

Google Analytics設定その1

プラグインを有効にすると、設定のためのメッセージが上段に表示されます。

2016-01-08_021122

メッセージ中の「setting panel」をクリックして「Google Analytics設定」に進みます。

  • ※)このプラグインは「PHP5.4以上」が必要です。
  • PHPのバージョンがこれより低い場合、以下の様なエラーが表示されますので、その場合にはPHPバージョンを確認してみてください。
  • Fatal error: Using $this when not in … Analytics.php on line 68

↓↓↓↓↓↓

2016-01-08_021630

この設定では「クライアントID」「コンシューマーシークレット」の値が必要ですが、これらは「Google API Console」をクリックして取得します。

ではここからは少し手間がかかりますが「Google API Console」をクリックして値を取得する旅に出ます!
(右クリックなどで別のウインドウやタブで開いてください)

Google APIの設定

プロジェクトの作成

「Google API Console」をクリックすると、以下のように「Google Developers Console」が表示されます。

2016-01-08_022041

ここで「空のプロジェクトを作成する」をクリック!

↓↓↓↓↓↓

新しいプロジェクト作成のためのウインドウが開きます。

2016-01-08_022524

  • ① お知らせの受け取りは「いいえ」を選択
    (必要な方は「はい」を選択)
  • ② 利用規約の同意は「はい」を選択
  • ③ 最後に「作成」をクリック!

そして暫く待ちます。

APIの有効化

しばらくすると、以下の画面が自動的に表示されます。

2016-01-08_023015

「Google APIを利用する」をクリックします。

↓↓↓↓↓↓

以下の様な画面が表示されます。
下の方に「Analytics API」がありますので、それをクリック!

2016-01-08_023156

↓↓↓↓↓↓

「APIを有効にする」ボタンが表示されるので、それをクリック!

2016-01-08_023409

認証情報の作成

続いて以下のように「認証情報を作成する必要がある」とメッセージが表示されますので「認証情報に進む」をクリック!

2016-01-08_023607

↓↓↓↓↓↓

「プロジェクトへの認証情報の追加」画面が表示されます。

やっと目的の「クライアントID」が出てきました。

2016-01-08_024752

「クライアントID」をクリック!

クライアントIDの作成

「新しい認証情報」のボタンが表示されますので、クリックしてその中から「OAuthクライアントID」を選択します。

2016-01-08_025808

↓↓↓↓↓↓

クライアントID作成画面です。

「同意画面を設定」をクリックします。

2016-01-08_025851

↓↓↓↓↓↓

「OAuth同意画面」が表示されます。

メールアドレスはセットされていると思いますので、「ユーザーに表示するサービス名」を分かる名前で適当に入力。

他の項目は省略できるので、最後の「保存」をクリック!

2016-01-08_025952

↓↓↓↓↓↓

「クライアントIDの作成」です。

2016-01-08_030040

「ウェブアプリケーション」を選択。

すると以下のように「名前」、「承認済みのリダイレクト URI」の入力ボックスが表示されます。

↓↓↓↓↓↓

2016-01-08_030302

「名前」は適当につけます。

「承認済みのリダイレクト URI」は、出始めの「Google Analytics設定」(以下)にある「コールバックURL」の値をコピーして入力し、最後に「作成」をクリック!

2016-01-08_030428

↓↓↓↓↓↓

すると...やったー!遂に出ました!

「クライアントID」「クライアントシークレット」が表示されますので、それぞれの値をコピーします。

2016-01-08_030805

 

値の取得は以上で完了です。
「OK」をクリックしてウインドウを閉じます。

ちなみに「OK」をクリックすると以下の様な画面が表示されますが、

2016-01-08_031322

「クライアントID」「クライアントシークレット」をコピーし忘れた場合には、こちらの画面に表示される名前(この場合は先ほど付けた「Tabibitoウェブクライアント1」)をクリックすると、再び「クライアントID」と「クライアントシークレット」が確認できます。

以上で値の取得は完了です!

Google Analytics設定その2

やっとWordPressに戻ってきました。

先ほど取得した値を設定に入力します。

  • ① 取得した「クライアントID」を「クライアントID」へ
  • ② 取得した「クライアントシークレット」を「コンシューマーしクレット」へ

各々入力後、「トークンを取得」をクリック!

↓↓↓↓↓↓

Googleにログインしていない場合には、ログイン画面が間に入りますが、続いて以下の画面が表示されます。

2016-01-08_032101

「許可」をクリック!

※)「tabibitojin-Analytics」が次の許可を…と表示されてますが、「tabibitojin-Analytics」は、上の方のクライアントIDの作成の「OAuth同意画面」で設定した「ユーザーに表示するサービス名」になります。

↓↓↓↓↓↓

「トークンの取得に成功しました」と表示されます。

2016-01-08_033806

画面の下の方に以下が表示されます。

(予めグーグルアナリティクスが設定されてない場合には「アカウントが取得できない」みたいなエラーメッセージが表示されます。その場合にはグーグルアナリティクスを設定しているか、設定したグーグルアカウントを正しく選んでいるかを確認してみてください)

2016-01-08_033846

表示されるグーグルアナリティクスのトラッキングID(UA-xxxxといったコード)を選択して、最後に「保存」をクリック。

以上で、Google Analytics設定は完了です!
お疲れ様でした。^-^)

続いてサイドバーに設定してみましょう。

サイドバーに設置

サイドバーへこの人気記事表示「Simple GA Ranking」を表示します。

管理画面の左にあるメニュー「外観」から「ウィジェット」を選択。

2016-01-08_034246

表示される「Simple GA Ranking」をサイドバーまでドラッグしてドロップし「保存」をクリック!

では表示がどうなるか見てみましょう。

サイドバーの表示を確認

さてどうなるか見てみると、人気記事表示がされました~
でも文字だけなんですね。

2016-01-08_040725

 

タイトルが単にダラダラっと並んでいて見づらいので、ここでサムネイル表示をしてみましょう。

サムネイル表示

サムネイル表示も少し手間がかかりますが、難しいことはありません。

参考サイト:Qiita – Simple GA Rankingでサムネイルを付ける

1)functions.php に以下を追加

すると、表示が以下のようになります。
(タイトルなどが違うのはあまり気にしないでください ^-^:) )

2016-01-08_041206

CSSの設定 – 高さ調整

サムネイル画像の高さを合わせ、少しスペースを開けて見やすくしておきましょう。

CSSは以下のように設定します。

CSSの設定 – ランキングの数字表示

ランキングの数字を表示するには、以下のようにCSSを設定します。

Simple GA Rankingの設定

一番最後になりましたが、「Simple GA Ranking」の設定です。

WordPressの管理画面から「外観」⇒「Simple GA Ranking」を選択すると、以下のように設定画面が表示されます。

2016-01-08_063053

こちらで、

  • ① 「何日前までのランキングを表示させるか」で期間の設定
  • ② 「表示数」で何件表示させるのかの設定

ができます。お好みに合わせて設定しましょう。

今回のまとめ

  • 人気記事表示プラグインには「WordPress Popular Posts」以外にも、この「Simple GA Ranking」がある
  • グーグルアナリティクスを利用するもので、サーバーアクセス負荷の軽減につながる
  • 設定は多少手間があるが、難しいものではない
  • functions.phpを利用すれば、サムネイル表示もできる

扱いのしやすさから、人気記事表示は「WordPress Popular Posts」の利用が圧倒的(?)だと思いますが、こちらの「Simple GA Ranking」も同様な表示ができます。

サーバーアクセス負荷に優しいプラグインになりますので、ブログが成長してアクセス数増大が気になる!、アクセス超過の警告を受けた、どうしよう!などといった場合にはご活用ください。

関連 WordPressの人気記事表示プラグインはコレだ!サムネイル表示を変幻自在に使いこなす

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短最速で月収10万円を手に入れる方法 ~

苗字(必須)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

お預かりした情報は保護されます

迷惑メールは一切配信されませんので、ご安心くださいね

この記事を読んだ人はこんな記事も読んでます

Comment

  1. 大いに参考にさせていただきました。
    ありがとうございます。

Message

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