YARPPでサムネイル画像を表示させる設定方法

前回はYARPPでリスト表示をさせる設定について書いたのですが、今回はサムネイル画像を表示させる設定を紹介します。

このYARPPの設定では元々「サムネイル」の設定ができるのですが、私のブログでは画像の高さやサイズがバラバラになっていましたので、サムネイルの画像のサイズを揃えて表示させてみる事にしました。

前回の記事と途中までは同じですので途中から説明しますね。前回の記事はこちら。
⇒関連記事を表示させるプラグイン【Yet Another Related Posts Plugin】の設定方法

ここも設定や位置調整がやや面倒な部分がありますが、１つ１つ図解で紹介していきます。それと各記事にアイキャッチ画像が設定されている前提で進めますので、アイキャッチ画像はそれぞれ設定しておいて下さい。

最終的にはこのような感じになります。

Amazonや楽天のアフィリエイトの併用は「もしもアフィリエイト経由」がおすすめの理由

Amazonアソシエイトと楽天アフィリエイトを併用するなら「もしもアフィリエイト...

affiliate150.com

2020.04.21

子テーマにYRAPPのテンプレートを追加する

前回の設定でも解説しましたが、YRAPPの設定で「表示設定ウェブサイト用」という項目から行きます。「一度に表示する関連記事数」の下の「カスタム」をクリックします。

すると「現在お使いのテーマフォルダでは YARPP 用のテンプレートファイルが見つかりませんでした。 YARPP テンプレートの使用例をこのテーマのフォルダに移動しますか？」と表示されるので「テンプレートを移動」をクリック。

そうすると現在利用しているテーマフォルダにYARPPのテンプレートが追加されます。YARPPの設定は一度放置してWordPressの管理画面⇒外観⇒テーマの編集と進みます。

すると右側に追加されたYARPPのテンプレートファイルが幾つか追加されているはずです。その中から「yarpp-template-thumbnail.php」をクリック。

「yarpp-template-thumbnail.php」を開いたらこの中身を全部削除して書き換えるのですが、一応念のために削除する前にこのファイルの中身を全部メモ帳等にコピーしておきましょう。コピーできたら中身を全部一度削除して次のコードに書き換え。

<?php if(have_posts()):?>
<h3 class="yarpp-title">こちらの記事もオススメです</h3>
<div class="related-post">
<?php while(have_posts()) : the_post(); ?>
<?php if(has_post_thumbnail()):?>
<div class="related-entry"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("thumbnail"); ?><?php the_title(); ?></a></div>
<?php endif; ?>
<?php endwhile; ?>
</div>
<?php else: ?>
<p>関連記事はありません</p>
<?php endif; ?>

ここまでできたら下の「ファイルを更新」をクリックして保存しておきます。

YARPPの設定でカスタムテンプレートを適応

再びWordPressの管理画面から設定⇒YRAPPと進み先ほど設定できなかった「カスタムPHP」で今編集したばかりの「yarpp-template-thumbnail.php」を選択します。

後はYARPPの設定を保存して完了です。これから細かい位置調整をしていきましょう。

手動で関連記事のタグを埋め込む場合

忘れてました、「表示設定ウェブサイト」の部分の設定で「Automatically display related content from YARPP Basic on:」つまり自動で関連記事を入れる？のチェックを全部外している方の場合には手動で関連記事のタグを埋め込んで関連記事を表示させます。

関連記事を呼び出すコードはこちら。

<?php related_posts(); ?>

これを関連記事を呼び出したい部分に記述すると関連記事を手動で呼び出す事ができます。

呼び出す場所ですが、子テーマの「single.php」を開いて次の記述を探します（TwentyTwelveを利用してます）。

<nav class="nav-single">

テーマによってちょっと違う部分もあるかと思いますが、大体記事下に「前の記事」と「次の記事」みたいなリンクがあると思います。上記のコードはそれを表示させるためのコードの最初の部分ですので、これを探してこのコードの直前に関連記事を表示させるコードを入れます。

関連記事の位置調整をする

関連記事の位置調整をしきます。前回も説明しましたが、このプラグインを入れるとYARPPのCSSファイルも読み込まれます。つまり最初からちょっとした基本的なCSSが適応されるようになっているのです。実は他の多くのプラグインでも同じようにインストール、有効化した時点で色々なファイル（CSSとかJavaScript等）が追加されます。

ところがコレには問題があって、ブログを読み込むCSSファイルが増えるので表示速度にほんのちょっと影響します。それからCSSで変更できない部分ってのがでて来てしまいます。

そのため、対策としてはYARPPをインストール、有効化した時に追加されるCSSを読み込まないようにして自分の子テーマのCSSに全てまとめて調整できるようにしておきます。

これを可能にするのが「functions.php」です。子テーマに「functions.php」を作成しておきます。初めて子テーマに「functions.php」を追加する方は注意点があるのでこの記事を参考に追加して下さい。
⇒子テーマにfunctions.phpを追加する時の注意点

それで子テーマの「functions.php」に次の記述をします（既に追加されている方は必要ありません）。

//yarppのCSSを読み込まない

add_action('wp_print_styles','lm_dequeue_header_styles');
function lm_dequeue_header_styles()
{
  wp_dequeue_style('yarppWidgetCss');
}

add_action('get_footer','lm_dequeue_footer_styles');
function lm_dequeue_footer_styles()
{
  wp_dequeue_style('yarppRelatedCss');
}

これで「保存」。記述ミスがあるとブログの表示が真っ白になったりします。その場合にはFTPから「functions.php」を開いて記述を削除して下さい。

これでYARPPのCSSを読み込まないようにしたので今度は子テーマのCSSにYARPPの位置調整や文字の調整をします。

ここからがちょっと面倒な部分です。一度次のコードをCSSに追加して下さい。調整箇所は説明していきます。

/* 関連記事yarpp */
.related-post{
max-width:100%;
height:100%;
overflow:hidden;
margin-top:5px;
}
.related-entry {
vertical-align: top;
float: left;
max-width:23%;
font-size: 14px;
height: 215px;
overflow: hidden;
margin: 0 1%;
line-height:1.75;
}
 
.related-entry img{
padding:2px;
border: #ccc 1px solid;
}

@media screen and (max-width:599px){
	
.related-entry {
    max-width: 48% !important;
    margin: 0 1% !important;
}
.related-entry img {
    width: 100%;
}
}

PCタブレットでは4列、スマホでは2列になるように位置調整してます。

これをスタイルシートに追加して保存して確認して下さい。「height: 215px;」という部分で１コマ（画像とタイトル合わせた部分）の高さを調整しています。タイトルなどが長すぎる場合にこの高さを超えてしまうため、「215px」以上になる場合には「overflow:hidden」で隠すという設定です。

以上3点が主な調整のポイントです。それから関連記事のタイトル部分には「yarpp-title」というクラス名を付けておいたので、これもCSSで色々できます。例えばこんな感じ。

h3.yarpp-title {
    background: #e85186;
    font-size: 18px;
    margin: 40px 0;
}

このタイトル部分にカスタマイズは「h3.yarpp-title」を使って色々書けます。背景色（background）や文字の大きさ（font-size）などお好みで変更して下さい。

以上設定をしてPCページ、スマートフォンページの見た目を確認して微調整をして下さいね。