自身のWordpressサイトの人気記事をGoogle Analyticsと連動して、自動的にピックアップしてくれるプラグイン Google Analytics Popular Posts のご紹介。加えて、CSSのカスタマイズ方法、ランキング記事タイトルの横に実際のランキング（1位、2位、etc…）をつけるカスタマイズ方法について説明します。
もうひとつ有名なプラグインに「WordPress Popular Posts」というのがあって、ソッチのほうがサムネイル表示とかも出来て、優れている面もあるのですが、多分ランキングのカウンターの集計方法が独自ロジックとなっちゃってる上に、自分が投稿追加後、頻繁にアクセスに行くと、その記事がランクインしてしまったりと（運用開始時はすべての記事へのアクセス数がゼロになるためだと思われる・・）。またIPフィルター機能などもないので、自分がアクセスしたものもカウントされてしまうため、Google Analyticsさんの情報を信じるほうが堅いし、既にGoogle Analyticsを利用している場合は、設置当初から、厳密に集計されたランキングデータが表示されることになるので、今回紹介するプラグインを導入することにしました。
プラグインの導入に関しては、Wordpressのダッシュボードから、プラグインに移動し、「Google Analytics Popular Posts」で検索することで簡単にインストールできます。インストール後、プラグインを有効化し、プラグインの設定を調整します。
設定する箇所は、GoogleAnalyticsのアカウント情報に加え、以下少々。
お好み次第ですが、私の場合、ランキング表示の見栄えを自分のサイトに合わせたかったので、
・カスタムスタイルシートを有効にするを「はい」
・キャッシュ機能を有効にしますか を「はい」
としました。
GoogleAnalyticsの設定で少し迷ったところを補足。
メールアドレスと、パスワードに関しては、多分問題ないと思います。
GoogleAnalyticsプロファイルID というやつが何を指すのかわからなかったのでちょっと調べました。
GoogleAnalyticsにログインし、アナリティクス設定をクリック
ビュー設定をクリック
ここに表示されているビューIDが、 プラグイン側でいう、GoogleAnalyticsプロファイルID です。
では、設定が完了したら、ページ下部のSaveボタンをクリックしましょう。
WordPressのダッシュボードから外観＞＞ウィジェット を選び、左側にリストされている「人気記事」をご自身が表示したい、サイドバーにドラッグしましょう。
これで、Wordpressサイトにランキングが表示されるはずです。確認してみてください。
では、この表示設定を調整してみましょう。
対象となるファイルは、/wordpress/wp-content/plugins/google-analytics-popular-posts/ フォルダ内の
・google-analytics-popular-posts.css
・google-analytics-popular-posts.php
の２ファイルとなります。
CSSは、ご自身のサイトに合うように調整すればOKなのでお任せします。
設定例）CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.popular_post { background: transparent; border-left: 1px solid #fafafa; border-bottom: 1px solid #fafafa; # -moz-border-radius: 8px; # -webkit-border-radius: 8px; # border-radius: 8px; # -moz-box-shadow: inset 0 0 5px 5px #f5f5f5; # -webkit-box-shadow: inset 0 0 5px 5px #f5f5f5; # box-shadow: inset 0 0 5px 5px #f5f5f5; behavior: url(pie/PIE.htc); padding: 3px 3px; margin: 10px 0 0 0; } |
このプラグインは、Google Analyticsのアクセス情報からランキング情報をピックアップしてくれますが、記事タイトルの横に順位が表示されません。そのぐらい対応してほしいなぁと思うところですが・・、ないものは仕方ありません、カスタマイズしちゃいましょう。
google-analytics-popular-posts.php のPHPファイルを開きます。
「require ‘gapi.class.php’;」で検索をかけてみてください。
その少し下にある foreach から始まる部分がランキングを表示している部分となります。ですので、この部分をちょこっとカスタマイズします。カスタマイズ内容はハイライトしてある部分となります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
if(!ga_email || !ga_password || !ga_profile_id) { $output = __('<b>Google Analytics Popular Posts Error :</b><br />Please enter your account details in the options page.', 'google-analytics-popular-posts'); return $output; } $GAPP_filter_fixed = 'ga:pagePath=~^/'; require 'gapi.class.php'; $ga = new gapi(ga_email, ga_password); $ga->requestReportData(ga_profile_id, array('hostname', 'pagePath'), array('visits'), array('-visits'), $filter=$GAPP_filter_fixed.$GAPP_filter, $start_date=$From, $end_date=$date, $start_index=1, $max_results=$GAPP_mRs); if ($GAPP_dDisp == "yes") { $output = '<p class="popular_stats_date">'.$From.' ～ '.$date.'</p>'."\n"; } + $cnt = 1; foreach($ga->getResults() as $result) : $getHostname = $result->getHostname(); $getPagepath = $result->getPagepath(); $postPagepath = 'http://'.$getHostname.$getPagepath; $getPostID = url_to_postid($postPagepath); if ($getPostID <= 0) { $titleStr = $postPagepath; $output .= '<ul>'."\n"; $output .= '<li>'."\n"; - $output .= '<div class="popular_post">'."\n".'<a href='.$postPagepath.'>'.$titleStr.'</a></div>'."\n"; + $output .= '<div class="popular_post">'."\n"; + $output .= '<span>'.$cnt.'.</span>'; + $output .= '<a href='.$postPagepath.'>'.$titleStr.'</a></div>'."\n"; $output .= '</li>'."\n"; $output .= '</ul>'."\n"; } else { $titleStr = get_the_title($getPostID); $post = get_post($getPostID); $dateStr = mysql2date('Y-m-d', $post->post_date); $contentStr = strip_tags(mb_substr($post->post_content, 0, 60)); $output .= '<ul>'."\n"; $output .= '<li>'."\n"; - $output .= '<div class="popular_post">'.'<a href='.$postPagepath.'>'.$titleStr.'</a><br />'."\n"; + $output .= '<div class="popular_post">'; + $output .= '<span>'.$cnt.'.</span>'; + $output .= '<a href='.$postPagepath.'>'.$titleStr.'</a><br />'."\n"; if ($GAPP_pDisp == "yes" and $GAPP_cView == "yes") { $output .= '<div class="popular_post_date">'.$dateStr.'<br /></div>'."\n"; $output .= '<div class="popular_post_contents">'.$contentStr.' ...'.'</div>'."\n"; } elseif ($GAPP_pDisp == "yes" and $GAPP_cView == "no") { $output .= '<div class="popular_post_date">'.$dateStr.'<br /></div>'."\n"; } elseif ($GAPP_pDisp == "no" and $GAPP_cView == "yes") { $output .= '<div class="popular_post_contents">'.$contentStr.' ...'.'</div>'."\n"; } else { } $output .= '</div>'."\n"; $output .= '</li>'."\n"; $output .= '</ul>'."\n"; } + $cnt = $cnt + 1; endforeach ?> |
順位表示の部分のCSSを調整しておきましょう。
先ほどのgoogle-analytics-popular-posts.cssを再度開き、こんなかんじで調整すればOKです。
|
1 2 3 4 5 |
+ .popular_post span{ + width: 15px; + color: #0088cc; + padding-right: 8px; + } |
プラグインの設定で
・キャッシュ機能を有効にしますか を「はい」
にしたままであると、変更内容が反映されません。一時的にキャッシュを「いいえ」としてください。
ランキングが記事タイトルの横に表示されていれば完成です！
ランキング表示をフィルタリングするための GAPIフィルタという設定箇所があるのですが、思った通りに動作しないので、内部動作を調べてみました。正規表現のエスケープ文字を入力すると保存時にエスケープ文字がさらにエスケープされちゃって、困ったなぁ・・・
ということでまぁまぁ真面目にプラグインの動作を追ってみて、ほぼ解決出来ましたので、ご報告。
作者様に連絡して直してねってのが筋だとは思うのですが、このプラグイン1年ちょい前から更新されておらず、作者さんへのリンクも、リンク切れになっちゃってまして・・・
プラグインのソース調整箇所は以下
google-analytics-popular-posts.php のPHPファイルを開きます。
「magic_quotes_gpc」で検索かけてみてください。で、以下のように調整
|
1 2 3 4 |
// magic_quotes_gpc = On + // if (get_magic_quotes_gpc()) { $_POST['GoogleAnalyticsPopularPosts_filter'] = stripslashes($_POST['GoogleAnalyticsPopularPosts_filter']); + // } |
「GAPP_filter_fixed」で検索かけてみてください。で、以下のように調整
|
1 2 |
- $GAPP_filter_fixed = 'ga:pagePath=~^/'; + $GAPP_filter_fixed = ''; |
ファイルを保存してください。
GAPIフィルタには、フィルタ式: filters=ga:pagePath=~^/ の後に続く文字を入れてねということですが、ちょっと仕様を変えちゃって、filters= の後に続く文字を入れちゃうことにします。
例えば
「/blog」 から始まるもののみピックアップしたい場合は
「ga:pagePath =~ ^\/blog.+」 と左の文字全部入力しちゃってください。
例えば２
「/?p=」 から始まるもののみピックアップしたい場合は
「ga:pagePath =~ ^\/\?p=.+」 と左の文字全部入力しちゃってください。
正規表現というか、GAPIフィルターの使い方は
このページをUsing the GAPI filter control
を参照ください。
以上
１週間ほど前に、急にWordpressのプラグインが作りたくなって、２日間ほど気合を入れて実装した。現在、Wordpress.orgへ申請して、チェック段階にあるのだが、現時点で感じたことをまとめておこうと思う。これは雑感編で、プラグイン作成手順をちゃんと知りたい方は一つ前の投稿を参照ください。 今回は以下の部分のうち、申請後、担当者と英語でやりとりする部分からスタートです。 プラグイン作成のお作法を調べるのに少々時間がかかる ソースの実装自体は、ただのPHPなのでそれほど難しくはない 多言語対応するための情報収集＆実装 にはちょっと時間が必要 申請のために必要なWordpress プラグイン…
１週間ほど前に、急にWordpressのプラグインが作りたくなって、２日間ほど気合を入れて実装した。作成手順編では、プラグイン作成の初歩から、Wordpress.orgへの申請までの手順を説明する。 プラグイン作成のお作法を調べるのに少々時間がかかる ソースの実装自体は、ただのPHPなのでそれほど難しくはない 多言語対応するための情報収集＆実装 にはちょっと時間が必要 申請のために必要なWordpress プラグイン書式に則ったReadme.txtを作るのがだるい WordPress.orgのユーザー登録をする プラグインの申請を出す。 申請後、担当者（Wordpress.orgの中の人（外人…
はじめに WordPressを１０倍から１０００倍 速くできるかもしれないプラグインを作ったので紹介します！普通１０００倍とか聞くと「うそだろーー！」とツッコミを入れられてもしかたないのですが、実際に、そのぐらい、もしくはそれ以上の結果が出ているので、あながち嘘でもないと思います。信じられない人は、騙されたと思って、一度インストールしてみてください。インストール・アンインストールともに、めちゃくちゃ簡単ですので。 初回リリースは英語版です。（日本語ローカライズ版作りました！！） そもそも、このプラグインを作ったきっかけは、Redisを使ってWordpressを超高速化するという手法を知って、実…
Introduction Hi,everyone. I’m happy to introduce this plugin to you .This plugin is a page caching system for wordpress inspired by jeedo aquino.This plugin is written for users who cannot install a Redis(In-Memory Database) on the server hosting WordPress,because of limitation of the hosting …
WordPressサイトを運用していて、表示速度が遅いなぁと感じたことありませんか？高速化のためのプラグインであるとか、VPSなどでホスティングされている場合はApacheやNginxのチューニングを行ったりしますよね。今回は追加でプラグインを入れたり、チューニングをしたりせずに、ちょっと別角度からWordpressサイトを超！！高速化させる方法をお伝えします。 といっても、私がすごいわけではなく、以下のサイトのjeedoさんが、Greatな仕事をしてくださったおかげです。みなさんこの記事で、高速化に成功したら、是非下記サイトにコメント入れてみてください！ jeedo.net — …
WordPressのテーマを入れ替えてから、あれこれ調整しましたので、メモとして記載しておきます。 変更点は以下の3つ 外国物のテーマを導入した時にはフォントが思うように表示されない 動画 videoタグの表示幅がめちゃくちゃになる 記事抜粋の長さを調整したい ファイル名：functions.php 以下を追加
|
1 2 3 4 5 6 7 8 9 10 11 |
+// Videoの幅を調整 +if ( ! isset( $content_width ) ){ + $content_width = 620; +} + +// 記事抜粋文字数の調整 +function new_excerpt_length($length) { + return 200; +} +add_filter('excerpt_length', 'new_excerpt_length'); +add_filter('excerpt_mblength', 'new_excerpt_length'); |
ファイル名：style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
body { - color: #888; - font-family: 'Open Sans', sans-serif; - font-size: 12px; + color: #444444; + font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans- + font-size: 16px; + font-size: 16px; } h1 { color: #fff; - font: 400 32px/34px 'Rokkitt', serif; + font: 400 32px/34px ; + font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; letter-spacing: 0; margin-bottom:5px; } h2 { color: #fff; - font: 400 28px/30px 'Rokkitt', serif; + font: 400 28px/30px ; + font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; letter-spacing: 0; margin-bottom:5px; } h3 { color: #fff; font: 400 24px/26px 'Rokkitt', serif; + font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; + letter-spacing: 0; margin-bottom:5px; } h4 { color: #fff; - font: 400 20px/22px 'Rokkitt', serif; + font: 400 20px/22px ; + font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; + letter-spacing: 0; + margin-top:10px; margin-bottom:5px; } h5 { color: #fff; - font: 400 16px/20px 'Rokkitt', serif; + font: 400 16px/20px ; + font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; + letter-spacing: 0; margin-bottom:5px; } h6 { color: #fff; - font: 400 14px/20px 'Rokkitt', serif; + font: 400 14px/20px ; + font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; letter-spacing: 0; margin-bottom:5px; } .kopa-article-list .entry-item .entry-title { - font-size:20px; - font-family: 'Raleway', sans-serif; + font-size:24px; + font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; border-bottom:1px solid #ececec; padding-bottom:15px; margin:0 0 15px; .kopa-article-list .entry-item .entry-date, .kopa-article-list .entry-item .entry-comments { color:#888; - font-family: 'Raleway', sans-serif; + font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans- margin-right:15px; } .entry-box .entry-title { - font-family: 'Raleway', sans-serif; - color:#333; + font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; padding-bottom:10px; + color:#666; border-bottom:1px solid #ececec; - padding-bottom:10px; position:relative; margin:0 0 15px; } .entry-box header .entry-date, .entry-box header .entry-comments { color: #888888; - font-family: 'Raleway',sans-serif; + font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; padding-bottom:10px; margin-right: 15px; } .entry-box footer p a.article-title { font-size:20px; - font-family: 'Raleway',sans-serif; + font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; padding-bottom:10px; } .entry-box footer p .entry-date { color:#888; - font-family: 'Raleway',sans-serif; + font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; padding-bottom:10px; } |
以上です。良かったら参考にしてみてください。
1 Comment
初めまして。
サムネイル表示機能あったら利用してみたいです。