WordPress のテーマ TwentyTwelve のカスタマイズ記事です。
今回もプラグインは使わずに、自力で人気記事一覧を表示させて見たいと思います。
以下でざっと機能の仕様と準備するものについてまとめました。
人気記事一覧の仕様と準備するもの
人気記事は PV 数を元にリスト化しいたので、Google アナリティクス API を利用して Google 上からデータを取得して使います。
まだ完成イメージがないのですが、仕様としては以下のようなものを考えています。
- リストは PV 数に基づいた上位記事を任意の数で取得・表示
- PV 数は Google アナリティクスのデータを用いる
- リストはサーバ上で自動更新
- 表示は週単位・月単位といった期間別
- 最終的には WordPress のプラグイン化する
ざっとですがこんな感じです。
同様のプラグインは既にあるみたいですけど、自分で作ったほうがカスタマイズしやすいしという所です。
また、上記に必要な物を以下にまとめました。
- Google アカウント
- Google アナリティクスの登録および解析データ
- Google API のクライアント ID
- Google APIs Client Library for PHP
3, 4 番以外は既に準備できているので、まずは Google API の利用方法から説明していきます。
Google APIのクライアントIDを取得する
Google Apis Console へアクセスして Google アナリティクス API 用のクライアント ID を取得します。
新規プロジェクトの作成
今回は初めての利用だったので新規プロジェクトを作成しました。
Google アナリティクスAPIのサービス追加
メニューの「Services」から「Analytics」を選びサービスの有効化をします。
Google APIへアクセスするクライアントIDを作成
「Create」ボタンを押して次へ進みます。
こんな感じで適当なプロジェクト名を付けて次へ進みます。
APIへアクセスするアプリケーションの登録
タイプは「Web application」を選び、認証用コードを受け取るアプリケーションの URL を登録します。
※ 画像の URL はダミーです。
アプリケーションが API へアクセスすると、認証コードが URL パラメータの引数に付与されて返ってきますので、そのコードを受け取る PHP アプリケーションのパスを指定します。
今回は “
※ ドメイン名 worklog.be の場合は “https://worklog.be/api/ga-popular.php” のように設定。
登録が完了すると以下の様な情報が表示されます。
これは後ほど利用しますのでメモしておきます。
また、Google アナリティクス API を利用するには Google アナリティクスの プロファイル ID も必要になります。
次は、このプロファイル ID を取得するため Google アナリティクスへアクセスをします。
Google アナリティクスのプロファイル ID を取得
メニューバーの「アナリティクス設定」を選び、「プロファイル設定」のリンクをクリックします。
赤で塗りつぶした位置に 8 桁の数字が表示されるのでこれをメモしておきます。
以上で、必要な情報は揃ったので次は PHP で Google API 用のクライアントアプリケーションを作成します。
Google APIs Client Libraryの取得とAPIクライアントのサンプルコード
API クライアントを作成して Google アナリティクスのデータを取得します。
API クライアント用のアプリケーションを利用するために、以下のディレクトリ・ファイルを作成し適切なパーミッションを与えてあげます。
## DocumentRoot に移動 # cd /home/hoge/htdocs ## /api/tmp ディレクトリを作成 # mkdir -p api/tmp # cd api/ ## Apache ユーザがファイルの読み書きをできるようにパーミッションを設定 # chmod 755 tmp # touch tmp/gapi_anaresult.txt tmp/gapi_token.txt # chmod 666 tmp/gapi_anaresult.txt tmp/gapi_token.txt ## Google APIs Client Library を取得して展開 # wget http://google-api-php-client.googlecode.com/files/google-api-php-client-0.6.4.tar.gz # tar xfz google-api-php-client-0.6.4.tar.gz # rm google-api-php-client-0.6.4.tar.gz
Google APIs Client Library は現時点での最新版を利用していますが、結構頻繁にアップデートされているようなので ココ から最新版を取ってきます。
Google APIs Client Libraryのダウンロードリンク
次に、先ほど作成した api/ ディレクトリ直下に ga-popular.php というファイル名で以下コードの PHP アプリケーションを作成します。
このサンプルは “設定 ? ここまで” の間を適切に埋めれば動くと思います。
<?php
/* 設定 */
/* Google API の Client ID */
$api_id = '************.apps.googleusercontent.com';
/* Google API の Client secret */
$api_secret = '************';
/* Google API で登録した Redirect URIs */
$app_root = 'https://worklog.be/api/ga-popular.php';
/* Google アナリティクスのプロファイル ID */
$ga_pid = '********';
/* 取得するデータの日数 */
$start = '30';
/* 取得するデータの数 */
$max = '10';
/* ここまで */
$path = __DIR__;
$token_path = "$path/tmp/gapi_token.txt";
$result_path = "$path/tmp/gapi_anaresult.txt";
require_once( "$path/google-api-php-client/src/Google_Client.php" );
require_once( "$path/google-api-php-client/src/contrib/Google_AnalyticsService.php" );
session_start();
$client = new Google_Client();
$client->setClientId( $api_id );
$client->setClientSecret( $api_secret );
$client->setRedirectUri( $app_root );
$service = new Google_AnalyticsService( $client );
/* URL に認証用コードが付いていたら認証してトークンをセッションにセット
* このアプリケーションにリダイレクトさせて一度処理を終了
*/
if ( isset( $_GET['code'] ) ) {
$client->authenticate();
$_SESSION['token'] = $client->getAccessToken();
header( 'Location: http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'] );
exit;
}
/* セッションにトークンがセットされていたらファイルに書き出す */
if ( isset( $_SESSION['token'] ) ) {
$string = $_SESSION['token'];
$fp = fopen( $token_path, "w" );
@fwrite( $fp, $string, strlen( $string ) );
fclose( $fp );
unset( $string );
$client->setAccessToken( $_SESSION['token'] );
/* なければファイルから読み出しを試行する */
} else if ( file_exists( $token_path ) ) {
$token = @file( $token_path );
$client->setAccessToken( $token[0] );
}
/* セットされたトークンを使って Google アナリティクスへアクセス */
if ( $client->getAccessToken() ) {
try {
$ids = "ga:$ga_pid";
$start_date = date( 'Y-m-d', strtotime( "-$start day", time() ) );
$end_date = date( 'Y-m-d', strtotime( "today", time() ) );
/* メトリクス (取得する統計情報の指定) */
$metrics = 'ga:pageviews';
/* ディメンション (メトリクスの分割方法) */
$dimensions = 'ga:pageTitle, ga:pagePath';
/* ソートの指定 */
$sort = '-ga:pageviews';
/* フィルター */
$filters = null;
$max_results = $max;
$optParams = array(
'dimensions' => $dimensions,
'sort' => $sort,
'filters' => $filters,
'max-results' => $max_results
);
$data = $service->data_ga->get( $ids, $start_date, $end_date, $metrics, $optParams );
$string = '';
$result = array();
foreach( $data['rows'] as $row => $value ) {
foreach( $data['columnHeaders'] as $key => $header ) {
$result[$row][$header['name']] = $value[$key];
}
}
/* 取得したデータの表示用コード */
echo "<ul>\n";
foreach( $result as $key ) {
$string .= "{$key['ga:pagePath']},{$key['ga:pageTitle']},{$key['ga:pageviews']}\n";
echo "<li>{$key['ga:pagePath']}, {$key['ga:pageTitle']}, {$key['ga:pageviews']}</li>\n";
}
echo "</ul>\n";
/* 取得したデータはファイルへ書き出す */
$fp = fopen( $result_path, "w" );
@fwrite( $fp, $string, strlen( $string ) );
fclose( $fp );
} catch( apiServiceException $e ) {
echo $e->getMessage();
}
/* URL に認証用コードがない場合はアクセス許可用の URL を発行 */
} else {
$auth_url = $client->createAuthUrl();
echo "トークンを入手できませんでした。<a href='$auth_url'>ここをクリックしてアクセスを許可してください。</a>";
}
初回のみは手元の端末から Web ブラウザを使ってこの PHP ファイルへアクセスします。
初回アクセス時の表示例
このようなメッセージが出たらリンクをクリックします。
リンク先で「承認」をしてやると元の PHP ファイルへリダイレクトされて、URL の引数に ?code= から始まる認証コードがセットされます。
この認証用コードを使ってアクセス用のトークンを取得、ファイルに書きだして次回はこれを利用してデータを取得って感じです。
このアクセストークンは “api/tmp/gapi_token.txt” に書き込まれますので、次回はシェル経由でもデータを取得できます。
正常にいくと以下のようなリストが取得できます。
Google アナリティクスのデータ取得例
この取得データもファイルに書き出すようになっています。
こちらは “api/tmp/gapi_anaresult.txt” に以下のようなコンマ区切りの CSV で書き出されます。
/miura/archives/1099,いきなりの当選メールにご用心,441 /miura/archives/234,Highcharts の応用メモ,403 /miura/archives/1962,TwentyTwelveの微妙なメニューボタンをカスタマイズする,334 /miura/archives/1478,TwentyTwelveの横幅とフォントをカスタマイズする,292 /miura/archives/92,Highcharts のメモ書き,255 /miura/archives/332,Highcharts の応用メモ つづき,218 /miura/archives/1403,TwentyTwelveのタイトル表示をカスタマイズする,214 /miura/archives/1779,TwentyTwelveでカテゴリ別のアイキャッチ画像を表示する,166 /miura/archives/1900,TwentyTwelveのレスポンシブWebデザインを最適化する,153 /miura/archives/1595,TwentyTwelveのアイキャッチ画像をカスタマイズ,149
後はこのデータを表示用のデータに変換して WordPress に渡してあげるという段取りです。
コードは ticktack.ichappy.jp さんが書いた、取得データのキャッシュ化が素晴らしかったのでほぼそのまま使わせてもらいました。
とりあえず、今回は長くなりましたので続きは次回書きます。