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

WordPressおすすめのプラグイン

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

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

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

ここも設定や位置調整がやや面倒な部分がありますが、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;
}
.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;」という部分で1コマ(画像とタイトル合わせた部分)の高さを調整しています。タイトルなどが長すぎる場合にこの高さを超えてしまうため、「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ページ、スマートフォンページの見た目を確認して微調整をして下さいね。

コメント

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

タイトルとURLをコピーしました