この時を待っていた！
WordPress で関連記事を表示するときに使うプラグインで、個人的に超気に入っていた YARPP こと Yet Another Related Posts Plugin が復活していました。
Yet Another Related Posts Plugin (YARPP)
以前は何らかの理由で WordPressの公式プラグインディレクトリからも削除されると表示されていて、使用をためらっていたのですが、これで安心して使用ができるというものです。
日本語圏でも「WordPress 関連記事」で検索すると良くヒットする定番プラグインだっただけに、この復活は嬉しいことこの上なしですね。
Luxeritas の関連記事表示処理を YARPP の出力に差し替える
Luxeritas の関連記事も基本的な機能としてはそれほど不満はないのですが、やはり、タグとかタイトルとかを複合的に勘案してくれる YARPP の表示結果が好みだったので、表示機能を差し替えてみました。
厳密には同じ場所に同じような形で表示されるわけではないのですが、代替としては問題ないかなといったところです。
YARPP のカスタムテンプレートを作成する
デフォルトでの表示でも用は済むのですが、せっかくのレスポンシブル対応テーマなので、ある程度見え映えも気にしたいと思い、下記のサイトを参考にカスタム表示を実装しました。
レスポンシブ対応！YARPPのカスタマイズ（どんな画面サイズでも綺麗に表示する） – 妻と僕。
Luxeritas の子テーマが格納されているディレクトリにある、yarpp-template-thumbnail.phpを下記のように書き換えました。
ほぼ一緒ですが、テーマにあわせて見出し部分を変更しています。
<?php if(have_posts()):?>
<h2 class="related yarpp"><i class="fa fas fa-th-list"></i>関連記事</h2>
<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("medium"); ?>
</a>
</div>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<?php
/* タイトルの表示制限30文字 */
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; ?>
カスタムテンプレート対応のCSS
/*yarppの領域*/
.related-post{
width:100%;/*①記事幅に100%フィット*/
overflow:hidden;
margin-top:5px;
font-size:0;
}
/*１記事の領域*/
.related-entry {
vertical-align: top;
display:inline-block;
width:25%;/*②１記事の領域（幅）*/
font-size: 14px;/*文字サイズ*/
font-size: 0.875rem;/*文字サイズ*/
line-height: 1.4;/*文字行高*/
margin-bottom: 12px;/*下余白*/
padding: 0 0.5%;/*記事の間隔（左右）*/
}
/*画像の設定*/
.related-entry img{
border: #ccc 1px solid;/*画像の枠線*/
padding:2%;/*画像と枠線の間隔*/
width:100%;/*１記事の領域幅にフィット*/
}
/*画像の装飾*/
.related-thumb a,
.related-thumb a img{
-webkit-box-shadow: none;
box-shadow: none;
text-decoration: none;
}
.related-thumb a:hover{
opacity:0.7;/*マウスオーバーで光る*/
filter:alpha(opacity=70);
-ms-filter: “alpha( opacity=70 )”;
-webkit-box-shadow: none;
box-shadow: none;
text-decoration: none;
}
/*子テーマデフォルトの見出しの装飾を削除*/
.post h2.related {
border-left: none;
padding-left:0;
}
スコア設定
とりあえずスコア設定はこんな感じで調整しています。
本文下部に表示するようにしましたが、見た目もなかなか良い感じになっていますね？
コメント