YARPP(関連記事プラグイン)のサムネイル表示のカスタマイズ備忘録

このブログではWordpressで関連記事を表示するのに「Yet Another Related Posts Plugin」というプラグインを利用しています。
サムネイル表示にしてあり、おかげさまで訪問者にこれまで書いた別の関連性の高い記事を魅力的にオススメできるのですが、サムネイル表示のデフォルトのCSSが若干無理があって、カスタマイズしてあります。ところが、プラグインのアップデートがあるたびに、全てのファイルが上書きされているようで、カスタマイズしたものが元に戻ってしまうため、何を変更しているかを備忘録として残しておきます。
※現在はCustom CSSで管理するようにしました。(2014/11/1追記)

WordPress Pencil and Pins-02

スポンサーリンク

とりあえずyet-another-related-posts-plugin/styles-thumbnails.phpファイルの編集
以下のように変更してあります。(※この情報はすでに古くなっており、参考程度に残しておきますが、現在のカスタマイズ方法は最後に記してあります)

<?php
/*
 * Dynamic styles for YARPP's built-in thumbnails template
 * @since 4
 */
$height = 120;
$width = 120;
if ( isset($_GET['height']) )
	$height = (int) $_GET['height'];
if ( isset($_GET['width']) )
	$width = (int) $_GET['width'];
$margin = 3;	/*初期値:5*/
$width_with_margins = $width + 2 * $margin;
$height_with_text = $height + 80;	/*初期値:+50*/
$extramargin = 5;	/*初期値:7*/
header( 'Content-Type: text/css' );
?>
.yarpp-thumbnails-horizontal .yarpp-thumbnail, .yarpp-thumbnail-default, .yarpp-thumbnail-title {
	margin: <?php echo $margin; ?>px;  /*項目追加*/
}
.yarpp-thumbnails-horizontal .yarpp-thumbnail {
	border: 0px solid rgba(127,127,127,0.1);	/*初期値:1px*/
}
/*サムネイル画像のホバーエフェクトを追加*/
.yarpp-thumbnail > img:hover{
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
    background:none;
}
/*ここまでサムネイル画像のホバーエフェクト*/
.yarpp-thumbnails-horizontal .yarpp-thumbnail-title {
	font-size: 0.7em;	/*初期値:1em*/
	max-height: 7.0em;	/*初期値:2.8em*/
}

変更した点のみ抜粋してコメントいれていますが、このブログではこちらでCSS対応は完了です。(使っているテーマによってはNGかもしれません。自己責任で。)

もう一つ、アイキャッチ画像が設定されていない記事に表示されるサムネイル画像がdefault.pngという名前で
/wp-content/plugins/yet-another-related-posts-pluginの直下に格納されているので、こちらの画像を自前のものと差し替える。

以上が、このブログのYARPPのカスタマイズ対応になります。

追記

現在は、Custom CSSプラグインを導入して、以下のコードを記述してあります。

/* yarpp
--------------------------------------------- */
.yarpp-related {
	padding-top: 2rem;
}
.yarpp-thumbnails-horizontal .yarpp-thumbnail {
border: 0px solid rgba(127,127,127,0.1);
font-size: 14px;
width: 123px;
height: 240px;
margin: 1px;
margin-left: 0px;
vertical-align: top;
}
.yarpp-thumbnails-horizontal .yarpp-thumbnail-title {
max-height: 6.8em;
line-height: 1.4em;
}


スポンサーリンク


YARPP(関連記事プラグイン)のサムネイル表示のカスタマイズ備忘録」への2件のフィードバック

  1. ここのフォントサイズだけ編集してもフォントのサイズが変わりません。
    なにが原因なんでしょうか?

    1. apattiさん

      コメントありがとうございます。連絡遅くなってすいません。
      プラグインのアップデートのたびにリセットされるため、現在はCustom CSSプラグインを導入して、CSSで対応するようにしました。

      追記でコードを記しておきますので
      ご参考にしてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)