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

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

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

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

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

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

関連記事表示-1

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

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

yarpp-sum-1

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

yarpp-sum-2

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

yarpp-sum-3

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

yarpp-sum-4

「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-sum-5

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

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

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

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

<?php related_posts(); ?>

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

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

<nav class="nav-single">

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

YARPP-8

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

関連記事の位置調整をしきます。前回も説明しましたが、このプラグインを入れると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;
padding-left: 15px;
}
.related-entry {
vertical-align: top;
float: left;
width:150px;
font-size: 14px;
height: 215px;
overflow: hidden;
margin: 0;
padding-right: 20px;
}

.related-entry img{
padding:2px;
border: #ccc 1px solid;
}

調整箇所の説明です。

1.まず「.related-post」の「padding-left」で関連記事全体の左に余白(右に寄せる)ができますので調整して下さい。

2.「.related-entry」は表示される個別の記事部分です。「width」は自分がWordPressの「設定」⇒「メディア」で設定しているサムネイルの画像の幅にしておくといいです。デフォルトで150pxになってますが私は100pxにしているので100pxにしてます。

3.同じく「.related-entry」の「padding-right」は表示される個別記事と個別記事の間隔です。

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

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

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

このタイトル部分にカスタマイズは「h3.yarpp-title」を使って色々書けます。以前やった見出し部分のカスタマイズを参考に背景色や文字の大きさ等を調整してみて下さい。
WordPress見出しの使い方とカスタマイズ

それとPCでは良くてもスマートフォンで見るとまた見た目も違ってきますので確認しておきます。

WordPressの「設定」⇒「メディア」でサムネイル画像のサイズをデフォルトの150pxもしくはそれ以上にしている場合にはスマートフォンではちょっとサムネイルが大きすぎてカラム落ちのような状態になるので、次のコードを先ほどのCSSコードの下に追加して下さい。

@media screen and (max-width: 599px) {
.related-entry {width:100px;}
}

@media screen and (max-width: 599px)というのが「599px以下のブラウザの場合」という条件分岐になりますので、表示される記事の横幅を100px位にしておけば横に2記事並ぶような状態になります。

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

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

YARPPでサムネイル画像を表示させる設定方法”に12件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    >gura様

    よかった!反映されて私も嬉しいです!この条件分岐の最後の「 } 」私もよく忘れる事があるんですが、これ忘れているとその後の記述が全部反映されないので注意が必要ですね。私も再度注意しながらやっていきたいと思います。また何かありましたらコメント下さい。アフィリエイターさんとの絡みは歓迎です(笑)。

  2. gura

    回答ありがとうございます。

    できました!!

    コメント頂いた時に「え!?ここ?」って思っちゃいました(笑)。まさかこんな所だったなんて…

    自分でも分からないなりにCSSを見ていたのですが、全然別の所を何回も見ていました。実に基本的な所だったんですね…ここ1週間位モヤモヤしていた気持ちがやっと晴れました。

    私一人では気付きませんでした。これもしげぞうさんのおかげです。相談して良かったです。何度もコメントして頂き本当に有難うございました。

  3. しげぞう 投稿作成者

    >gura様

    ようやく原因が分かりました。gura様のCSSを拝見させてもらったのですが、スマートフォンの条件分岐が閉じられていません。

    @media screen and (max-width:599px){
    
    }

    という部分の最後の「 } 」が1つ足りません。まずはCSSの最後の方に追加されている条件分岐の部分@media screen and (max-width:599px)の最後に「 } 」を追加してみて下さい。その後改めて次のコードを試して見てください。

    .site-content article {
      margin-bottom: 0px;
    }

    これで反映されると思いますので、前回までに「!important」を付けた記述は削除しても大丈夫と思います。一度お試し下さい。

  4. gura

    度々お世話になります。

    別のブラウザで確認しましたが、反映されておらず
    こちら「.yarpp-related h3 { margin-top: -40px;}」も試しましたがダメでした。

    試しに別の部分をいじってみたのですが、上記ブログの説明内で「h3.yarpp-title{font-size:15px;}」の部分を30pxに変更してみたんですが、何故かこちらも反映されません。ですが、以前と同じくF5押すと一瞬大きくなり直ぐに元の大きさに戻ってしまいます。

    これも何か同じ原因なんでしょうか?

    /* 関連記事yarpp */の「margin-top:5px;」等は50pxにしてみるとちゃんと反映されています。

    何が何だか???な感じです。

    P.S
    ブックマークまでして頂きとても光栄です。お忙しい中この様な質問に何度も確認して頂いて、本当にお手数掛けます。ありがとうございます。

  5. しげぞう 投稿作成者

    >gura様

    返信ありがとうございます。私もこれで反映されなかったらどうしようと思うとドキドキです(笑)gura様のブログは私も参考になりそうな部分があったので、勝手ながらブックマークさせて頂きました。さて、本題ですが、前回のコードでもしかすると反映はされているのかもしれません。一度別のブラウザでも確認してみる事をおすすめします。それでもダメならマイナスのmarginを使う方法もあります。

    .yarpp-related h3 {
     margin-top: -40px;
    }

    こんな感じでマイナスのmarginを使う事でも解決しそうですが、個人的にマイナスのmarginはあまり好きではありません。どうしても反映されない場合には試してみてもいいかも知れません。それと同じ所に以前margin: 0 !important;を付けていると思いますので、これは一度削除しておいて下さい。

    それと私が現在利用しているプラグインは26個あります。キャッシュ系のプラグインが多いですね。後は関連記事の「YARPP」とか、「Broken Link Checker」等基本的なプラグインだけを使っております。自作できる物は自作して対応中です。

    今後も何か相談や質問があれば絡んで下さい(笑)。よろしくお願いします。

  6. gura

    度々失礼します。

    やはり変化無しです。「!important」を付けてもダメでした。ページを更新すると一瞬上にいくのですが、結局元の位置に戻ってしまいます。

    因みにしげぞうさんのサイトは、プラグイン無しで作成していますか?

    P.S
    ブログ褒めて頂きありがとうございます。もの凄く嬉しいです。アフィリエイターさん達と絡んだ事がまだなくて、しげぞうさんが初です。内心ビクビクしながら送りました(笑)。

  7. しげぞう 投稿作成者

    >gura様

    返信ありがとうございます。すごくいいブログですね!お世辞抜きで。色々な工夫が見て分かります。このジャンルは非常にライバルも多いですが是非頑張って欲しいと思います。さて、肝心の部分ですが、この関連記事の上のコンテンツにmargin-bottomがあるようなんでこれを解消してあげればOKと思います。CSSに以下を追加してみて下さい。

    .site-content article {
      margin-bottom: 0px;
    }

    こんな感じでおそらく大丈夫と思われます。もし反映されない場合は前回のように!importantを付けてみて下さい。

  8. gura

    返信遅れてすいません。

    「!important」付けてみたのですが変わらずです。お手数ですがよろしくお願いします。

    サイトURLはです。

    殆どドキドメサイトの通りやっているので、すごく似たサイトになっていますが…(笑)。

  9. しげぞう 投稿作成者

    >gura様

    返信ありがとうございます。「!important」を付けると優先されるのでそれでもう一度試してもらないでしょうか?

    h3.yarpp-title{
    margin-top:0px !important;
    }

    これでダメならURL教えて頂けると助かります。コメント公開時にはURLは削除しますのでお手数ですがよろしくお願い致します。

  10. gura

    回答ありがとうございます。

    残念ですが、50pxや-50px等にしても何も変化しません。
    何故でしょうか?

    ※サイト確認する時はちゃんとF5押してます。

  11. しげぞう 投稿作成者

    >gura様

    コメントありがとうございます。おそらく次のコードをCSSに追加するといけると思います。

    h3.yarpp-title{
    margin-top:0px;
    }

    上の余白を0pxという事にしてますが、これは調整しながら数値を変更します。これでできない場合にはお手数ですが、もう一度コメント頂けると助かります。よろしくお願い致します。

  12. gura

    いつもお世話になっています。

    「こちらの記事もオススメです」の上に空白が出来てしまうのですが、こちらの記事みたいに上に詰めたいです。

    やり方を教えて下さい。