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というプラグインで対応可能なのであまり問題になりませんでした。

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

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

Simple GA Rankingの導入

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

301 Moved Permanently

simple-ga-ranking.org

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

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

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

ページが見つかりません。 - ジンカブ～配当金再投資～おさいふプラス

お金に関して考えるブログ。配当金・株主優待・ふるさと納税を主に発信。

jin-plus.com

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

富士ソフト SIMフリーモバイルルーター +F FS030W FS030WMB1

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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

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

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

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

アナリティクスから人気記事を表示させるプラグインSimple GA Rankingでサムネイルを付ける - Qiita

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

qiita.com

私は次のような関数を自分のテーマ(子テーマ)の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)します。

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

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

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

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

DROP TABLE wp_popularpostsdata;
DROP TABLE wp_popularpostssummary;

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

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

シャープ SIMフリースマートフォン SHARP AQUOS sense7 plus ブラック

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

まとめ

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

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

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