【WordPress】関連記事表示用プラグイン「YARPP」のカスタムテンプレート設定

WordPressのプラグイン「Yet Another Related Posts Plugin」通称「YARPP」を使って関連記事を表示して
画面サイズに合わせて綺麗に表示するようカスタマイズしたのでその方法をご紹介します。

完成イメージは以下の感じです。

 

 

Yet Another Related Posts Pluginのインストール

まずは「YARPP」のプラグインをインストールします。

WordPressの管理画面から、プラグイン→新規追加

検索窓で「Yet Another Related Posts Plugin」を入力します。

今すぐインストール→有効化を行います。

 

Yet Another Related Posts Pluginの設定

WordPressの管理画面から「プラグイン」→「Yet Another Related Posts Plugin」の設定をクリックします。

 

設定の「YARPP」から表示設定項目で「リスト」、「サムネイル」、「カスタム」とありますがここではカスタムを選択し、「テンプレートを移動」をクリックし、テンプレートを移動すると、テンプレートファイルが追加されます。今回は「Thumbnails」を選択します。これからこのファイルをカスタマイズしてきますので選択し変更を保存します。

 

ここでWordPressのダッシュボード→外観からテーマの編集を見てみると、テンプレートが6つ追加されています。この6つのうち、上で設定したPHP(今回はyarpp-template-thumbnail.php)が採用されていることになります。ですので、このyarpp-template-thumbnail.phpのPHPファイルをカスタマイズしていきます。

 

yarpp-template-thumbnail.phpのカスタマイズ

yarpp-template-thumbnail.phpの編集を行います。
まず、すべてのソースコードを削除して以下のソースコードをそのまま貼り付けます。

<?php if(have_posts()):?>  <h4>おすすめの関連記事</h4>  <div class="related-post">  <?php while(have_posts()) : the_post(); ?> <?php if(has_post_thumbnail()):?><div class="related-entry">  <div class="related-thumb"> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"> <?php the_post_thumbnail("thumbnail"); ?> </a>  </div>  <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">  <?php  if(mb_strlen($post->post_title, 'UTF-8')>30){$title= mb_substr($post->post_title, 0, 30, 'UTF-8');echo $title.'…'; }else{ echo $post->post_title; }  ?>  </a></div> <?php endif; ?>  <?php endwhile; ?>  </div><?php else: ?><?php endif; ?>

そのまま貼り付けが完了したら、「Update File」をクリックしてファイルをアップデートします。

今回の例では関連記事に表示するタイトル文字数を「30文字」で設定しましたがこれは任意で変更してもらえます。ソースコードの2行目は「関連記事のタイトル」を決めることができます。ここも任意で変更することができます。

style.cssの編集

テーマの「style.css」を編集します。

4列に関連記事を並べる場合のコードです。以下のコードを使用すると、画面サイズに応じて画像が拡大縮小し、常に横に4つの記事が綺麗に整列します。
YARPPの一度に表示する関連記事数を「8」としておけば、Webページでも良く見かける4列×2段の設定が完成します。

.related-post{width:100%;overflow:hidden;margin-top:5px;font-size:0;}.related-entry {vertical-align: top;display:inline-block;width:33.33%;font-size: 15px;font-size: 1.3rem;line-height: 1.4;margin-bottom: 12px;padding: 0 0.5%;}.related-entry img{ border: #ccc 1px solid;padding:2%;width:100%;}@media screen and (min-width: 30em) {.related-entry {width:25%;font-size: 15px;  font-size: 1.3rem;line-height: 1.4;}}

 

記事個数変更

横の記事個数は上記コードの11行目のコードになります。100%を上限として横に表示させたい個数により分割します。(※ただし、100%を超えないように
・横に5個表示=100%÷5=20%
・横に3個表示=100%÷3=33.33%
・横に2個表示=100%÷2=50%

あまり横に並べすぎるとアイキャッチ画像が潰れて表示されるので最大で4個表示ぐらいが良いのではと思います。

 

文字サイズ変更

font-size:の数値を修正します。

 

「style.css」にコードを貼り付けてUpdate Fileをクリックします。

 

以上でコードの追加は終了です。実際にWebページを開いて確かめてみましょう。

最新情報をチェックしよう!
PAGE TOP