WordPressには、関連する記事を表示するさまざまなプラグインがあります。 Contextual Related Postsは、更新が活発に行われており、カードレイアウトで関連記事を表示するので、関連記事をスタイリッシュなスタイルで表示できます。
この記事では、Contextual Related Postsプラグインをインストールして設定する方法について説明します。
WordPress 関連記事プラグイン：Contextual Related Posts
WordPress用関連記事プラグインとして YARPP – Yet Another Related Posts Pluginこれはよく使われています。このプラグインは現在10万を超えるサイトにインストールされており、無難なフォーマットで関連記事を表示しています。
また、他のプラグインで WPショーの投稿があります。このプラグインは現在8万を超えるサイトにインストールされていますが、1年以上更新されていません。しかし、最新 WordPress バージョンと GeneratePress テーマを含むほとんどのテーマでうまく動作します。
風変わりなスタイルで関連文を表示したい場合 Contextual Related Posts プラグインを考慮することができます。このプラグインを使用すると、下の図に示すように、カードレイアウトで関連文を一覧表示できます。
上記のようにリストする方法について簡単に見てみましょう。
CRPプラグインのインストール
この無料のプラグインは、 プラグイン » プラグインの追加で「Contextual Related Posts」を検索してインストールできます。
インストールして有効にすると Never miss an important update (重要なアップデートをお見逃しなく) ページが表示されます。 スキップ ボタンを押します。
CRPプラグインの設定
このプラグインを有効にすると 設定 » Related Postsで設定することができます。
Generalタブ
タブの "Automatically add related posts to"は、関連する記事のリストが自動的に表示されるポストタイプを指定します。 投稿のみチェックします。
または、 GeneratePress テーマのフックを使用して関連記事を配置したい場合は、すべてのチェックを外し、次のPHPコードを使用して関連記事のリストを任意の場所に表示できます。
<?php if ( function_exists( 'echo_crp' ) ) { echo_crp(); } ?>自動的に追加すると、コンテンツの下部に表示され、ユーザーが位置を調整することはできません。しかし、ほとんどの場合、自動追加オプションを使用すると無難と思われます。
モバイルで関連記事を表示したくない場合 Disable on mobile devices オプションをチェックするようにします。
AMPプラグインをインストールした場合AMPページに関連する記事を表示したくない場合 Disable on AMP pages オプションを有効にします。
Performance タブ
パフォーマンス タブでは、パフォーマンス（速度）関連の設定を行うことができます。
Efficient Content Storage and Indexing (ECSI) セクションでは ツール タブをクリックして ECSI テーブルを作成することができます。 ECSI は、関連コンテンツをすばやく検索できるように最適化された専用データベーステーブルを作成する方法です。 DBバックアップをした後に進むといいようです。
この機能を使用するには、MariaDB バージョン 10.7.1 をお勧めします。チェックしてみる Cafe24の場合、MariaDBのバージョンは10.6.17です。 クラウドウェイズの場合、これより少し高い10.6.21バージョンが使用されていますね。 MariaDBのバージョンが10.7.1でなくてもプラグインは機能しますが、データベースをアップグレードするとより良いパフォーマンスが得られると言われています。
キャッシュの問題が発生していない場合 Cache posts only와 Cache HTML output オプションはデフォルト設定（有効化）をそのまま使用すれば良いようです。
リストチューニングタブ
このタブでは、表示するポストの数、並べ替え方法などを指定できます。
Number of posts to displayで表示する投稿の数を指定できます。 Order postsオプションでは、ソート方法を指定できます。
- By relevance - 関連性の高い記事を最初に表示
- Randomly - ランダムに表示
- By date - 日付順に並べ替え
HTMLキャッシュが有効な場合 無作為に オプションが機能しません。ランダムに文章を表示したい場合 パフォーマンス タブでHTMLキャッシュを無効にしてください。 （また、キャッシュプラグインでもこのオプションが有効になっている場合は無効にしてテストしてみてください。）
経験的にランダムに表示する機能は、キャッシュプラグインが有効になっていると正しく動作しない可能性が高く、ページの読み込みを遅くすることができるようです。
Output タブ
Heading of posts は、関連記事のリストのサブタイトルを表示するテキストを入力します。デフォルトでは、次のようなHTMLコードになっています。
<h2>Related Posts:</h2>H2タグを使用すると、そのテーマで設定されたH2ヘディングスタイルが適用されることがあります。私は自分でスタイルを設定するためにテストとして次のように入力しました。
<div class="crp-related-articles"><span>인기 글</span></div>スタイルはCSSで指定できます。
要約文を表示したい場合 Show post excerpt オプションを有効にして Length of excerpts (in words) オプションで要約文の長さ（単語数）を指定できます。
Thumbnailタブ
このタブでは、サムネイル関連の設定を行うことができます。
スタイルタブで Rounded thumbnail オプションを選択した場合、このタブの Location of the post thumbnail オプションは無視されます。
サムネイルサイズとサムネイル幅（幅）/サムネイルの高さの設定は、該当サイトの状況に合わせて適切に選択してください。
このプラグインは反応型ではぎこちなく対応するようです。モバイル機器に合わせて設定した場合はパソコンでぎこちないことがあり、デスクトップを基準に設定した場合はモバイル機器でぎこちなく表示されることがあります。
この問題を解決するには、PCに合わせてサムネイルのサイズと数を設定し、CSSを使用してモバイルで一列に表示する方法を試すことができます。 [スタイル]タブでカスタムCSSを追加できます。 （これに関連するサンプルコード スタイル タブで確認できます。）
スタイルタブ
このタブでは、関連する書式を指定し、ユーザーのCSSコードを入力できます。
Related Posts styleは基本的に Rounded thumbnailsに設定されています。このオプションを使用すると、関連する記事のエントリがカードスタイルで表示されます。
カスタムCSSでは、ユーザーCSSコードを追加できます。以下は、小タイトルスタイルとモバイルでのサムネイルサイズなどのコード例です。
.crp-related-articles span
{
line-height: 19px;
display: inline-block;
padding: 7px 12px 4px;
background-color: #222;
color: #fff;
font-size: 1.2em;
}
.crp-related-articles {
line-height: 1;
margin-top: 30px;
margin-bottom: 26px;
border-bottom: 2px solid #222;
font-weight: 600;
}
/* 모바일: 767px 이하 */
@media (max-width: 767px) {
.crp_related.crp-rounded-thumbs img {
max-width: 100% !important;
}
}最後に、
以上で WordPressで関連記事をカードスタイルでリストするContextual Related Postsプラグインについて見てみました。
文章を作成するときに属性画像の割合が一定でないと、関連する文章に表示されるサムネイルのサイズが一定でないため、表示が悪いことがあります。特性画像の縦横比（アスペクト比）を可能な限り同じにしておくとよいでしょう。
コメントを残す