スマホ用の画像

WordPress Related Posts 関連記事の画像を手動で入替えができない

公開日:2020年4月5日


Wordpress Related Postsで困った男性
WordPressのプラグイン『WordPress Related Posts』は、ブログサイトにサムネイル画像付きで関連記事を表示させることができるプラグインです。

設定自体もとてもシンプルで、細かく設定をしたい人向けではないですが、私にとっては重宝しているプラグインの一つです。

ダッシュボード → プラグイン → 新規追加からインストール

WordPressプラグイン WordPress Related Posts

更新が長期間されていませんが、インストール数も多く、評価も星4個で人気のプラグインですね。

私のこのサイトには、高速化プラグイン、キャッシュ系プラグイン等、かなりの数のプラグインを設置、有効化をしています。


こちらに書いています。


それらのどれかと『WordPress Related Posts』が干渉して、『WordPress Related Posts』の不具合が発生してしまいました。

このプラグインのインストール、有効化、設定方法は多数の方が詳しく書かれています。

なので、今回の内容はインストールしている他のプラグインと干渉して『WordPress Related Posts』の不具合が発生したことを書きます。


『WordPress Related Posts』の基本的な設定

インストール、有効化後に設定画面に移動します。

【記事にサムネイル画像を設定していることが前提での設定です】

WordPress Related Posts設定

Enable custom CSSはカスタマイズする場合にチェックをいれます。

チェックを入れると下に枠があるので記入してカスタマイズができます。

「Other Settings」の項目です。

WordPress Related Posts設定

Auto Insert Related Postsにチェックを入れることで自動的に記事最下部に関連記事が表示されるようになります。

最下部の左側にある[Save changes]で設定が保存されます。

上記画像の赤下線部

<?php wp_related_posts()?>

チェックを外して上記を記述することで任意の場所に表示させることもできます。

通常は、個別投稿 (single.php) に入れます。

<ダッシュボード → 外観 → テーマエディター → 個別投稿 (single.php) >

下が関連記事を表示させたイメージです。

WordPress Related Posts 関連記事 サムネイル画像
表示記事数は8個にしています。

画像サイズ、余白、表示レイアウト等はCSSでカスタマイズが可能です。

目次プラグイン『Table of Contents Plus』で関連記事のタイトルが表示されてしまう

『Table of Contents Plus』で作成した目次に『WordPress Related Posts』の関連記事のタイトルが表示されてしまう、プラグイン同士の干渉の問題が発生です。

WordPress Related Posts関連記事のタイトル部 (■ このような記事もあります ■) はデフォルトでは<h3></h3>にの設定になっています。

目次表示のプラグインを利用している場合、<h3>が表示設定しているとこのタイトル部が目次に表示されてしまいます。

このサイトの場合は目次は「Table of Contents Plus」プラグインを使用しています。

目次表示の設定は<h3>で行っているため、「WordPress Related Posts」の関連記事のタイトル<h3>と重複してしまい、目次に関連記事のタイトルが表示されてしまう問題が発生です。

この問題は「Table of Contents Plus」の設定の変更で解決することにします。

設定画面の最下部に『上級者向け (表示)』があるので表示させます。

下画像クリックで拡大

WordPressプラグイン Table of Contents Plus設定

当サイトの場合、「Table of Contents Plus」での見だしレベルを<h3>で設定しているので、関連記事のタイトル<h3>と重複です。

除外する見だしを記入します。(当サイト例)

*■ このような記事もあります ■*

アスタリスクでタイトルを囲んでの記述で最後に設定を更新をクリックします。

関連記事のタイトルを変えた場合はこの記述も変更しないと目次に表示されてしまいます。

手動で関連記事のサムネイル画像の入れ替えができない問題が発生

これについては大体想像ができました。

キャッシュ系や高速化系のプラグインを大量に入れていることです。

この記事に移動 → ワードプレスプラグイン38個使用中でもブログをスピードアップさせる

どのプラグインでどの設定が原因なのか。

WordPress Related Posts 関連記事 サムネイル画像

WordPressにログインした状態で、赤枠の「Edit Related Posts」をクリックすると下の画面が表示されます。

そして手動で関連記事のサムネイル画像を入れ替えることができるようになるのです。

WordPress Related Posts 関連記事 サムネイル画像

使用中プラグインを確認してみます。

www.oyajinoasiato.comで有効化中のプラグイン

改めて見ても多すぎです。

高速化及びキャッシュ系プラグイン停止とChromeの閲覧履歴データの削除

この中で停止するプラグインを4個選択してみました。

・Autoptimize
・Async JavaScript
・Scripts-To-Footer
・WP Fastest Cache

上記を停止した状態で関連記事のサムネイル画像の入れ替えを試みます。

で、結果は…、ダメです。

ページのトップに戻ってしまうだけで、入れ替え画面がでてきません。

URLの最後に謎の♯が入っています。

もしかしてと思い、ブラウザ (Chrome) の履歴を削除をしてみることにしました。

ブラウザ画面 (Chrome) 右上にある、

Chromeブラウザ 画面右上三点リーダー

赤丸部をクリックします。

履歴 → 閲覧履歴データの削除と進むと下の画面が表示されます。

Chromeブラウザ 閲覧履歴データの削除

これで、ブラウザChromeの閲覧履歴データの削除は完了です。

ブラウザは一度閉じてからブラウザを再起動してください。

この状態で再度関連記事のサムネイル画像の入れ替えを試みました。

結果、関連記事のサムネイル画像の手動入れ替えができました

関連記事のサムネイル画像を手動で入れ替えるために毎回プラグインを停止するのも手間がかかります。

サイトのスピードはこの4個のプラグインを停止した状態ではどうなのだろうと思い計測をしてみました。

PageSpeed Insightsでスピードを計測

パソコン、モバイルともにホーム画面での計測です。

【パソコン】
PageSpeed Insightsでスピードを計測

【モバイル】
PageSpeed Insightsでスピードを計測

パソコンの方はこんなものかという感じですが、モバイルは赤点で遅すぎです。

停止していた高速系、キャッシュ系のプラグイン下記4個を有効化して計測してみました。

・Autoptimize
・Async JavaScript
・Scripts-To-Footer
・WP Fastest Cache

今回は新たに投稿したこのページの計測です。

【パソコン】
PageSpeed Insightsでスピードを計測

【モバイル】
PageSpeed Insightsでスピードを計測

結果、かなりスピードが上がりました。

やはり停止した4個のプラグインは高速化にとっては必要です。

有効化にしておいて、関連記事のサムネイル画像の入れ替え時だけ停止することにします。

関連記事

このページの先頭へ