WordPress高速化: 関連記事表示をCFilteringからからWordPress Related Postsへ変更する

WordPressの導入と設定

2017/10/312017/11/10

前回はWordPressの高速化を目指してアクセス数ランキングを表示するためのプラグインを更新しました。

今回はさらなる高速化として「関連記事表示」に手を入れたいと思います。

CFliteringプラグイン
関連記事を表示するプラグイン
WordPress Related Postsプラグインの設定
設定完了した状態
まとめ

CFliteringプラグイン

このブログでは各記事の最後に「関連記事」を表示しています。スクロールすると表示される下記のような物です。

この表示についてはSimplicityの機能とCFilteringプラグインを組み合わせて実現しました。

Simplicityでより精度の高い関連記事を表示するカスタマイズ方法

関連性が高い記事が表示されて満足していたのですが、MySQLのスロー・クエリー・ログを見るとCFilteringに関するログも多く表示されていました。

そこでCFilteringを使わない関連記事の表示を検討することにしました。

MySQLのスロー・クエリー・ログの見方は前回の記事を参照してください。

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

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

具体的なログの内容も紹介したかったのですが、すでに古いログが消えてしまって見つけられませんでした。

WordPress Related Postsプラグインの設定

WordPress Related PostsプラグインをインストールするとWordPressのダッシュボードの「設定」に「WordPress Related Posts」が現れるので、これを選択しましょう。

英語ですが、頑張って設定していきます。

Basic settings

まずは「Basic settings」を設定していきます。

設定項目は「タイトル」と「表示する記事数」です。私は次のように設定しました。

Advanced settings

続いて「Advanced settings」に進みます。

Advanced settingsは隠れていますが「▼」を選択すると表示されます。

Advanced settingsには「Themes」「Custermize」「Other Settings」ががあるので設定していきます。

Themes

WordPress Related Postsにはあらかじめ関連記事のスタイルを定義した「Themes」が用意されています。

マウスを各テーマのところに合わせるとプレビューが表示されるのでわかりやすいと思います。

私の場合はサムネイルとタイトルがリスト表示される「Mordern」を選択しました。

Custermize

さらに細かい設定はCustermizeのセクションで行っていきます。

私は次のように設定しました。

まず関連記事に「サムネイル」「要約(Excerpt)」を表示する設定にしています。

要約は短縮されないように十分大きな値として「600文字」を設定してあります。

さらに「Enable custom CSS」を有効にしています。CSSの部分は次のスタイルを入力しました。

.related_post_title {
}
ul.related_post {
}
ul.related_post li {
    min-height: 100px;
    line-height: 150%;
}
ul.related_post li a.wp_rp_thumbnail img {
    margin-right: 10px !important;
}
ul.related_post li a {
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}
ul.related_post li img {
}
ul.related_post li a img {
    border: 0;
    width: 100px;
    height: 100px;
    display: block;
    -webkit-box-shadow: 0px 8px 8px -6px #8d8c8c;
    -moz-box-shadow: 0px 8px 8px -6px #8d8c8c;
    box-shadow: 0px 8px 8px -6px #8d8c8c;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-bottom: 20px !important;
}
ul.related_post li small {
   font-size: 16px;
   color: #555;
   display: block;
   margin-top: 5px;
}
div.wp_rp_content div.main-widget-label {
    line-height: 130%;
    color: #333;
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

かなり手探りでしたが、この設定により従来と同じようなスタイルで関連記事を表示できるようになりました。

最後に「Use Custom Size Thumbnails」を有効にしてサイズを100×100としておきます(これは不要かもしれません)。