WordPress高速化: WordPress Popular PostsからSimple GA Rankingへ移行

前回までは中華スマートウォッチの紹介をしてきました。

かなり久しぶりのWowPressネタです。

このブログはWordPressを使って構築していますが、最近結構遅くなったように感じてきたので少し手を加えて見ることにしました。

遅い原因の特定

まずMySQLの設定を変更して、データベースアクセスが遅くなっている場合にログをでるようにしました。

/etc/mysql/my.confに下記を記載します。

slow_query_log_file = /var/log/mysql/mysql-slow.log
slow_query_log      = 1
long_query_time = 0.2

設定を変更したら下記のコマンドで設定を反映します。

sudo service mysql reload

この設定したらしばらく/var/log/mysql/mysql-slow.logを観察します。

tail -f /var/log/mysql/mysql-slow.log

WordPress Popular Postsが重い!

スロークエリーのログを観察してて何度も現れたのはwp_popularpostdataというデータベースに関する処理です。

# Time: 171029 12:09:23
# User@Host: ...[...] @ localhost []
# Thread_id: 32675  Schema: ...  QC_hit: No
# Query_time: 0.303782  Lock_time: 0.000076  Rows_sent: 0  Rows_examined: 0
# Rows_affected: 2
use ...;
SET timestamp=1509246563;
INSERT INTO wp_popularpostsdata
            (postid, day, last_viewed, pageviews) VALUES (194, '2017-10-29 12:09:23', '2017-10-29 12:09:23', 1)
            ON DUPLICATE KEY UPDATE pageviews = pageviews + 1, last_viewed = '2017-10-29 12:09:23';

調べてみるとWordpress Popular Postsが重いというのは定評があるようです。

というのもサイトにアクセスがある度にどのページにアクセスがあったのかデータベースに記録するため、この処理がMySQLに負荷を掛けているようです。

WordPress Popular Postsを外す

このブログではWordpress Popular Postsは次の場面で使っていました

  1. 管理者にアクセス数を表示
  2. サイドバーにアクセスランキングのウィジェットを表示

いずれも使用しているテーマSimplicityで提供されている機能です。

管理者用のアクセス数に関してはJetPackというプラグインで対応可能なのであまり問題になりませんでした。

管理者用PVの表示

問題はアクセスランキングのウィジェットでした。

ランキングウィジェット

このデザインが気に入っていたため、このデザインを同等のランキングを作成できるプラグインを探すことにしました。

Simple GA Rankingの導入

WordPress Popular Postsに代わるプラグインとして多く取り上げられていたのはSimple GA Rankingというプラグインでした。

このプラグインはGoogle Analyticsというサービスと連携してランキングを生成するというものです。

インストールは少々やっかいなのですが、ランキングデータはGoogle Analyticsが管理してくれるため動作が軽量なのが特徴です。

インストール方法については下記のサイトが詳しく解説しているので参考にしましょう。

前回の記事に書きましたとおり、エックスサーバーからCPU負荷が高いよって連絡が来ました。最悪の場合、リソース制限されてブログの表示が困難になる可能性があります。利用しているプラグインのなかで「WordPress Popular Posts」という人気記事ランキングを作ってくれる便利なプラグインですが、結構サーバーに負荷...

私もインストール方法解説しようと思ったのですが、すでに詳しいページがあるため省略することにしました。

インストールしたらWordpressの管理画面の「設定」→「Simple GA Ranking」で「集計する日数」と「表示数」を設定しておきましょう。

ランキングにサムネイルをつける

Simple GA Rankingをインストールすると「Simple GA Ranking」というウィジェットが使えるようになります。

ところがこのウィジェットをデフォルトのままにして使うと次のように文字だけのランキングとなってしまいます。

文字だけのランキング

Simple GA Rankingでサムネイルを表示するためには次のサイトが参考になります。

アクセスが多いWordPressサイトでは、人気記事を表示させる「Wordpress Popular Posts」プラグインを使っていると、ページのアクセスのたびにDBに書き込み・読み込みが発生して負荷がかかる、という指摘を受けたので...

私は次のような関数を自分のテーマ(子テーマ)のfunction.phpに追加しました。

add_filter('sga_ranking_before_title', 'showRankingImage', 10, 3);
function showRankingImage($ret, $id, $cnt) {
    $post_url = get_permalink($id); // 記事のURL
    $title = get_the_title($id); //タイトル
    $ret = "";
    if( has_post_thumbnail( $id ) ) { // アイキャッチ画像の有無
        $post_thumb_src = wp_get_attachment_image_src( get_post_thumbnail_id( $id ),array( 75, 75 ) );
        $post_thumb = $post_thumb_src[0];
        $ret = "<div class='ranking-img'><a href=\"{$post_url}\" title=\"{$title}\"><img src=\"{$post_thumb}\" alt=\"{$t
itle}\" title=\"{$title}\"></a></div>";
    }
    return $ret;
}

これでウィジェットの表示は次のようになります。

一応サムネイルが表示された状態

一応これでサムネイルは表示できたことになります。

ランキングのウィジェットのスタイルを調整する

このサムネイル付きのSimple GA Rankingウィジェットを、元々のウィジェット(WordPress Popular Postsを使ったSimplicityのウィジェット)に近づけるには次の3つが必要です。

  1. サムネイルの形状を調整する(角を丸くする、影をつける)
  2. タイトルをサムネイルの隣に表示して、文字の色を黒にする
  3. サムネイルの右上に順位をオーバーレイする

この3つはスタイルシートの調整で対応していきます。従ってテーマ(子テーマ)のstyle.cssに下記で紹介するスタイルを書き込んでいきます。

私はスタイルシートに詳しくないので少し冗長かもしれません

サムネイルの形状の調整

まずはサムネイルの形状を調整します。また、同時にタイトルの左側にサムネイルが来るようにしています。

.sga-ranking img {
    border: medium none;
    display: inline;
    float: left;
    width: 75px;
    height: 75px;
    margin-top: 3px;
    margin-right: 5px;
    margin-bottom: 10px;
    box-shadow: 0px 8px 8px -6px #8d8c8c;
    -webkit-box-shadow: 0px 8px 8px -6px #8d8c8c;
    -moz-box-shadow: 0px 8px 8px -6px #8d8c8c;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

タイトルの調整

タイトルは色を調整します。また合わせてliも調整しておきます。

.sga-ranking a {
   text-decoration: none;
   color: #111;
}

.sga-ranking li {
    overflow: hidden;
}

.widget_simple_ga_ranking ol li {
    clear: left;
    float: none;
    margin-bottom: 10px;
}

順位の表示

順位の表示はちょっと難しかったので、Simplicityのスタイルからパクってきました。

li.sga-ranking-list {
   position: relative;
}

ol.sga-ranking {
    counter-reset: popular-ranking;
}

li.sga-ranking-list:before {
    background: none repeat scroll 0 0 #666;
    color: #fff;
    content: counter(popular-ranking,decimal);
    counter-increment: popular-ranking;
    font-size: 75%;
    left: 0;
    top: 3px;
    line-height: 1;
    padding: 4px 7px;
    position: absolute;
    z-index: 1;
    opacity: 0.9;
    border-radius: 2px;
    font-family: Arial;
}

その他

あとはウィジェットのスタイルを微調整しておきます。

#sidebar .widget_simple_ga_ranking ol {
    padding-left: 0;
    list-style: none;
}

調整の結果

調整した結果は次のような表示となりました。

調整した結果

これでほとんど元のスタイルに戻ったと思います。

テーブルの削除

Simple GA Rankingによるランキング表示がうまくできるようになったらこれまで使っていたWordpress Popular Postsプラグインは不要になります。

WordPress Popular Postsプラグインはアンインストールしてしまいましょう。

さらにデータベースからWordpress Popular Postsプラグインのテーブルは削除しておきます。

phpMyAdminが動いている場合はphpMyAdminにログインして

  • wp_popularpostsdata
  • wp_popularpostssummary

の二つを削除(DROP TABLE)します。

「wp_」のところはインストールした環境により違うかもしれません。

コマンドラインからやる場合は

sudo mysql データベース名 -u root -p

としてログイン(最初のパスワードはsudoのパスワードで、二個目のパスワードはデータベースのパスワードです)します。

あとは下記のようにSQLのコマンドを実行します。

DROP TABLE wp_popularpostsdata;
DROP TABLE wp_popularpostssummary;

これでWordpress Popular Postsプラグインが使っていたデータは削除されます。

私の場合は20MBぐらいデータベースが縮小しました。

まとめ

今回はWordpressの表示を高速化するためにWordpress Popular PostsプラグインをやめてSimple GA Rankingプラグインを導入しました。

スタイルシートを調整することによって、Wordpress Popular Postsを使っていた頃とほぼ同様のランキング表示になりました。表示もやや高速化した気がします。

次回はさらにWordpressの高速化を狙いたいと思います。

『WordPress高速化: WordPress Popular PostsからSimple GA Rankingへ移行』へのコメント

  1. 名前:麦茶 投稿日:2017/11/09(木) 16:52:54 ID:a35dd0d35 返信

    はじめまして。
    コチラの記事を参考にランキング表示させようと思ったのですが、何故かアクセスする度に毎回ランキングが変わってしまいます。
    条件も指定しているのですが原因がわかりません。
    ご教示いただければ幸いです。

    • 名前:scratchpad 投稿日:2017/11/10(金) 02:03:48 ID:687ea540a 返信

      コメントありがとうございます。

      まずGoogle Analyticsのアクセスランキングを確認してみてはいかがでしょうか?
      Google Analyticsで「行動」→「サイト」→「全てのページ」選び、グラフの右上のカレンダーで表示期間をSimple GA Rankingで設定した期間と同じにします。
      例えばSimple GA Rankingで過去7日間のランキングを表示させるとしたら、
      Google Analyticsでも過去7日間のデータを表示されます。

      これでGoogle Analyticsで一覧がアクセス数の上位順のページが表示されるので、
      それとSimple GA Rankingで表示されるランキングが一致することを確認してはいかがでしょうか?

  2. 名前:麦茶 投稿日:2017/11/11(土) 00:27:40 ID:703a0034c 返信

    返信遅れましたすみません。
    色々試行錯誤してるうちにデバッグモードを解除してみたらうまくランキング形式で表示されました!
    ご迷惑をお掛け申し訳ございません。

    • 名前:scratchpad 投稿日:2017/11/11(土) 01:46:41 ID:59c401b2a 返信

      コメントありがとうございます。

      無事に解決したようで良かったです。