YARPP のデザインを調整する (コードを直接編集する)

Wordpress では関連するページを表示するために YARPP プラグインが良く利用されるようですが、 標準的なデザインでは満足しないことが多いでしょう。デザインを修正する方法は2つあります。

1つはプラグインのコードを直接修正する方法です。もう1つは YARPP のテンプレートを自分で作り、 css を読み込ませないか、あるいは出力される HTML コードに直接 style を埋め込むことです。

前者はプラグインのアップデートによって上書きされてしまいます。アップデートの度にバックアップを取る必要が出ることになります。 一方で後者についてはアップデートによるトラブルは防ぐことができますが、テンプレートの開発の手間がかかります。 ここでは簡単に取り組むことができるように、プラグインのコードを直接修正する方法を紹介します。

直接プラグインファイルを修正する

外部に置くなどする対応をすると少なからずプラグインのコードを読んで開発することが必要になるので、 ここではプラグインファイルを直接編集してしまいます。

ダッシュボードからプラグインの編集に入ります。必要に応じて適切なファイルを選択し(右にリスト化されている)、 編集して更新します。多くの場合には yet-another-related-posts-plugin/includes/styles_thumbnails.css.phpを修正することになりそうです。 一覧から探すのは大変なので、Ctrl + F で "thumbnails.css" を検索しましょう。

thumbnails.css の編集

いくつかの変更例を紹介します。

下記のコードの$_GET['height'] : 120; や $_GET['width'] : 140; の値を変更すると、 表示されるページのサムネイルの大きさを変更することができます。

また $height_with_text の値を変更すると、表示されるページのテキストを含めた枠の大きさを変更することができます。

$height       = (isset($_GET['height'])) ? (int) $_GET['height'] : 120;
$width        = (isset($_GET['width']))  ? (int) $_GET['width']  : 140;
$margin             = 5;
$width_with_margins = ($margin * 2) + $width;
$height_with_text   = $height + 80;
$extra_margin       = 7;

テキストが長いときは overflow: hidden によって隠してくれるので、 max-height の設定は不要と考えて消してしまいました。テキストが長いときは自動的に枠線限界まで伸ばして、それ以上の時は不可視にします。

.yarpp-thumbnails-horizontal .yarpp-thumbnail-title {
	font-size: 1em;
	/*max-height: 2.8em;*/
	line-height: 1.4em;
	margin: <?php echo $extra_margin; ?>px;
	margin-top: 0px;
	width: <?php echo $width; ?>px;
	text-decoration: inherit;
	overflow: hidden;
}

related.css

例えば太字を修正する場合には yet-another-related-posts-plugin/style/related.css を修正します。 !important が与えられているため、外部の css からの修正が不可能(困難)です。

.yarpp-related a{
    text-decoration: none !important;
    font-weight: bold !important;
}