WordPress 関連記事YARPPの再調整

以前インストールしていたrelated post導入のプラグイン『YARPP』ですが、以前触ったときにどうにもカスタムphpを使ったサムネイル表示が上手くいかなかったんですが、別のサイトの構築の際に再びやってみた所上手くいったのでメモ記事です。

目次 [hide]

1 YARPPのカスタムphpでもデフォルトの設定を使う
- 1.1 デフォルトのcssをコピー

YARPPのカスタムphpでもデフォルトの設定を使う

YARPPでカスタムphpを使うと、サムネイル表示の設定が非常に微妙になります。デフォルトのサムネイル表示はとても綺麗なのに・・・　って思って要素を見てたら　なるほど　と。
.yarpp-thumbnails-horizontal　ホリゾンタルってclassに書いてあるし。

デフォルトのcssをコピー

要はデフォルトのcssにすれば良いんですねって事で、cssに追記。

.entry-content .yarpp-thumbnails-horizontal {  
    text-align: center;  
}  
 
.yarpp-thumbnails-horizontal .yarpp-thumbnail, .yarpp-thumbnail-title {
    display: inline-block;
    *display: inline;
}
 
.yarpp-thumbnails-horizontal .yarpp-thumbnail {
    border: 1px solid rgba(127,127,127,0.1);
    width: 160px;
    height: auto;
    margin: 5px;
    margin-left: 0px;
    vertical-align: top;
}
 
.yarpp-thumbnails-horizontal .yarpp-thumbnail > img, .yarpp-thumbnails-horizontal {
    display: block;
}
 
.yarpp-thumbnails-horizontal .yarpp-thumbnail-title {
    font-size: 1em;
    max-height: 2.8em;
    line-height: 1.4em;
    margin: 7px;
    margin-top: 0px;
    width: 150px;
    text-decoration: inherit;
    overflow: hidden;

こんな感じ。スマホで表示される時にセンタリングしてないと微妙な感じな気がしたのでtext-align: center。
幅も僕の好みにチョット調整してあるけど。

後はテーマ編集にあるカスタムphpのyarpp-template-thumbnail.phpのthumbnail のクラス属性を変える。

<div class="entry-content"><?php
/*
YARPP Template: Thumbnails
Description: Requires a theme which supports post thumbnails
Author: mitcho
*/ ?>
<?php if(have_posts()): ?>
  <h3>関連記事</h3>
  <div class="yarpp-thumbnails-horizontal">
  <?php while(have_posts()) : the_post(); ?>
    <?php
      $imgset = array (
      'post_type' => 'attachment', 
      'post_mime_type' => 'image',
      'post_parent' => $post -> ID,
      'numberposts' => '1' );
      $images = get_children($imgset);
      $image = array_shift($images);
    ?>
    <?php if(has_post_thumbnail()): ?>
      <div class="yarpp-thumbnail"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("thumbnail"); ?><span class="yarpp-thumbnail-title"><?php the_title(); ?></span></a></div>
    <?php else: ?>
      <div class="yarpp-thumbnail"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php echo wp_get_attachment_image($image->ID, 'thumbnail'); ?><span class="yarpp-thumbnail-title"><?php the_title(); ?></span></a></div>
    <?php endif; ?>
  <?php endwhile; ?>
  </div>
<?php else: ?>
<p>No related photos.</p>
<?php endif; ?></div>

ウチは設置場所がentry-contentのクラス属性がつかないトコロなので、一番上に追記。
後はthumbnailのクラス属性を変更。

コレではデフォルトに近いサムネイル表示になったので、シングルphpとかにrelated_posts();を入れればOK。
twentyfourteenだとget_template_part( 'content', get_post_format() );の下。
この位置が　前後の投稿(post-navigation)　の上に入る部分。

おすすめのコンテンツ

YARPPのカスタムphpでもデフォルトの設定を使う

デフォルトのcssをコピー

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル