WordPressで無料で利用できるテーマのCocoon。各種サイトの設定などが簡単なので利用しているのですが関連記事のレコメンド精度が低く、別途関連記事レコメンドのYARPPプラグインをインストールし、なおかつCocoonの形式に合わせた表示にしました。
YARPPとは？
YARPP(Yet Another Related Posts Plugin)は過去に投稿した記事に関して、関連するものをレコメンドしてくれるプラグインです。
カテゴリやタグ、本文の内容などから関連度が数値化され表示されます。昔からWordPressで使われている老舗プラグインになります。
YARPPのインストール
WordPressのダッシュボードの プラグイン > 新規追加にて検索ボックスでYARPPを入力すると表示されます。
インストールして有効化すると利用することができます。
サムネイル形式で表示させると
サムネイル形式だと記事の説明テキストなどが表示されないのであまりイケてない。そもそもデザインも崩れている…
Cocoonの関連記事のスタイルの方がデザインされていて、サイト内の統一感もあるのでYARPPのレコメンドをCocoonの表示スタイルで出力したいと思います。
YARPPをCocoonの形式で表示させる
表示させるには①YARPPの設定を変更、②Cocoonのテンプレートを修正、③YARPPのテンプレートの修正、④CSSの調整 の4段階あります。
※テーマファイルを編集することになりますので事前にバックアップを取っておいてください。
YARPPの設定を変更
ダッシュボードのYARPPの設定画面から修正します。
自動表示設定をONにすると関連記事が記事内のコンテンツとして管理されるため、目次に関連記事の項目が表示されてしまいます。コンテンツとは切り分けて表示させたいのでこれらのチェックを外します。
また表示をカスタマイズしたいのでテーマを「Custom」で指定し、スターターテンプレートを指定します。
Cocoonのテンプレートを修正
ダッシュボードの「外観」>「テーマファイルエディター」でCocoonのテンプレートを修正します。
右上の編集するテーマを選択にて「Cocoon」を選択してボタンをクリック
tmpフォルダ内のsingle-contents.phpを選択します。こちらは通常の投稿のテンプレートファイルになっています。
ファイルの10行目付近本文テンプレートの読み込みと次のフッターコンテンツの間に以下の2行を追加しましょう
<h3>この記事を読んだ人がよく見ています</h3>
<?php related_posts(); ?>h3タグは単純に関連記事の見出し、「<?php related_posts(); ?>」はYARPPを読み込むためのコードになります。
///////////////////////////////////////
// 投稿ページのコンテンツ
///////////////////////////////////////?>
<?php //パンくずリストがメイントップの場合
if (is_single_breadcrumbs_position_main_top()){
get_template_part('tmp/breadcrumbs');
} ?>
<?php //本文テンプレート
get_template_part('tmp/content') ?>
<h3>この記事を読んだ人がよく見ています</h3> #追加
<?php related_posts(); ?> #追加
<div class="under-entry-content">
…YARPPテンプレートの修正
YARPPの設定で「yarpp-template-example.php」を指定していたので該当のファイルを編集します。
ダッシュボードのプラグイン > プラグインファイルエディター > YARPPを選択。
「yarpp-templates」フォルダ内に「yarpp-template-example.php」があります。
もちろん個別にテンプレートファイルを作成し、設定画面から指定しても問題ありません。
<h3>Related Posts</h3>
<?php if ( have_posts() ) : ?>
<ul>
<?php
while ( have_posts() ) :
the_post();
?>
<li><a href="<?php the_permalink(); ?>" rel="bookmark norewrite" title="<?php the_title_attribute(); ?>" ><?php the_title(); ?></a><!-- (<?php the_score(); ?>)--></li>
<?php endwhile; ?>
</ul>
####下記に変更
<?php if ( have_posts() ) : ?>
<?php get_template_part('tmp/related-entry-card'); ?> 該当の投稿があればリンクをリスト形式で表示させるというもの。
「<? php get_template_part(‘tmp/related-entry-card’); ?>」はCocoon形式で記事カードを表示させるテンプレートを読み込むものになっています。
修正すると下記のようになります。
<?php if ( have_posts() ) : ?>
<?php get_template_part('tmp/related-entry-card'); ?> #変更
<?php else : ?>
<p>No related posts.</p>
<?php endif; ?>CSSの修正
そのままだとYARPPのCSSの設定が適用されるのでCSSを修正。
「/src/css/public/related.css」の中身を全て削除。
完成形
これで記事下に関連記事の表示ができました。
サムネイル+左肩にカテゴリ、記事タイトルと要約が綺麗にまとまっています。
Cocoonの標準的な関連記事だと同じカテゴリ内の記事をランダム表示になりますが、YARPPを利用しているので似たような記事(Seleniumの記事なのでSelenium関連が上位、その次にPandasなど関連の記事)がレコメンドされるようになりました。
