![](https://cxg-design.jp/wp-content/uploads/2024/06/yarpp_thumb03-2.png)
関連プラグインYARPPで、関連記事のリストをサムネイル付きで表示
当ホームページの関連記事は、ACFで手動で設定しています。今回は、関連プラグインYARPPで関連記事のリストをサムネイル付きで表示する方法を紹介します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/c6b34e001dfc843e63370109a531d62e.png)
出典 : YARPP
今回のDEMOは、ギャラリーの関連記事です。
ギャラリーの下に、関連記事を設置しました。記事が作成されたら、自動的に関連記事が表示されます。
コード
まず、関連記事を表示するコードを作成します。yarpp-template-〇〇(〇〇は任意の名前).phpという名前のファイルを作成し、下記コードを入力します。YARPP Template、Auther、Descriptionは、任意の名前を設定します。
<?php
/*
YARPP Template: Kanren
Author: Kj
Description: 関連DEMO用テンプレート
*/
?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="kenren_box">
<div class="about-works-icon zoomIn">
<a href="<?php echo esc_url(get_permalink()); ?>">
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail('medium_large'); ?>
<?php endif; ?>
</a>
</div>
<a class="detail-link" href="<?php echo esc_url(get_permalink()); ?>">
<p class="title"><?php the_title(); ?></p>
<p class="news-text">
<?php
$terms = get_the_terms($post->ID, 'demo-cat');
if ($terms) :
foreach ($terms as $term) {
echo '<span>' . $term->name . '</span>';
}
endif;
?>
</p>
</a>
</div>
<?php endwhile; ?>
<?php else: ?>
<p>関連記事はありません</p>
<?php endif; ?>
CSSでスタイルを整えます。
.yarpp{
width: 80%;
max-width: 1800px;
margin: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1em;
}
.kenren_box .title{
margin-top:2em;
padding-top:0.5em;
font-size:1.3em;
}
.kenren_box .about-works-icon {
width:100%;
aspect-ratio: 4 / 3;
overflow: hidden;
object-position:50% 50%;
margin-bottom:12px;
border-radius: 5px;
will-change: transform;
background: #fff;
}
.about-works-icon img{
width:100%;
height:100%;
object-fit: cover;
}
@media screen and (min-width: 1250px) {
.yarpp{
grid-template-columns: repeat(4, 1fr);
}
}
シングルページの関連記事を表示したい場所に、下記コードを入力します。
<?php
if (function_exists('yarpp_related')) {
yarpp_related();
}
?>
<?php endif; ?>
設定
YARPPプラグインをダウンロード、インストールし、左サイドバーの設定>YARPPをクリックします。設定画面が表示されるので、設定していきます。
![](https://cxg-design.jp/wp-content/uploads/2024/06/3e270bee7dd09725a49291bb114fd5fb.png)
設定>YARPPをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/0e2145e6d78722653120329f6e089aee.png)
設定画面が表示
適用アルゴリズム
適用アルゴリズムで、アルゴリズムの設定をします。一致しきい値は、1に設定します。タイトル、内容、カテゴリー、タグを検討するに設定します。その他は、検討しないに設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/5eaf1f23653052bd8254d0e03c67a3c9.png)
タイトル、内容、カテゴリー、タグを検討するに設定
項目 | 設定値 |
---|---|
一致しきい値 | 1 |
タイトル、内容、カテゴリー、タグ | 検討する |
その他の項目 | 検討しない |
自動表示設定
自動表示設定で、作成したPHPを反映する設定をします。
まず、Automatically display related content onのチェックを全て外します。投稿の最大数を4に設定します。ThemeをCustomに設定します。Template fileのセレクターから、PHPのYARPP Templateに設定した名前を選択します。サムネイルのサイズは、thumbnail(700×400)に設定します。表示順番を関連スコアの高い順に設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/faf1e21301ce96bfada25c0b0fa8bd7d.png)
Template fileのセレクターから、作成したファイル名を選択
項目 | 設定値 |
---|---|
Automatically display related content on | チェック無 |
投稿の最大数 | 4 |
Theme | Custom |
Template file | YARPP Templateに設定した名前 |
サムネイルのサイズ | thumbnail(700×400) |
表示順番 | 関連スコアの高い順 |
設定が終了したら、Save Changesをクリックして、保存します。これで完了です。指定の場所に関連記事が表示されます。
![](https://cxg-design.jp/wp-content/uploads/2024/06/f6e3563c0f7a87baf5c42a365d86cc57.png)
設定が終了したら、Save Changesをクリック
以上で今回の説明は、終了です。ACFと違い、PHPを一度設定しておけば、更新時は何もする必要がないので、大変便利です。また、一覧のスタイルもデザインに合わせて変更できます。