苦難を乗り越え、サムネイル/アイキャッチのサイズ変更で横長や縦長に変えたり、好みの位置場所に表示するなど、数々の経験を記録する。

YARPPは関連記事を表示

スマホサイトでは、テキストより画像が重要、また直帰されずに同じテーマの関連コンテンツを閲覧していただきたい。

WordPressでは定番の、関連記事を表示できるYARPPというプラグインが圧倒的人気である。

初期設定で使えば何の問題もないYARPPなのに、たとえばサムネイル/アイキャッチの大きさを変えて横長や縦長にしたり、望みの位置や場所に関連記事を表示させたいなど、思うように活用するには、なんとハードルが高いか！

そのYARPPについて、このサイトと、別サイトで難儀してクリアできた設定、カスタマイズをお伝えしておきたい。

また、WordPressでは「アイキャッチ」がよく出てくるが、一般的には「サムネイル」が定着している。
両者は、基本的に同じものである。

YARPPのサムネイル表示

YARPPをそのまま使えば、次のような、テキストの羅列になる。

だがしかし、画像を添えて関連ページを表示すると、あれまっ、直帰率が圧倒的に下がり、またユーザー目線でも鬱陶しいテキスト並びよりも、画像ありのほうがいいに決まっているだろう。

YARPPを導入しているWordPressサイトのオーナーならご存じのとおり、デフォルトのリスト表示からサムネイル表示に変えるだけでいい。

これだけである。

YARPPのサムネイルの画像サイズ

YARPPのサムネイルのサイズは、120×120である。

あらためて、WordPressの管理画面、設定→メディアで、サムネイルのサイズを確認してみよう。

WordPressのデフォルト、初期設定では、サムネイルは150×150になっているので、この正方形のサムネイルから、YARPPの縮小した（120×120の）正方形のサムネイルが表示される。

もし、自分でWordPressメディア設定のサムネイルのサイズを、たとえば100×100にした場合は、YARPPでは小さい画像が拡大されて表示される可能性もあり、画像が汚くなるので注意。

さらに、YARPPのサムネイルを、正方形ではなく、長方形にしたい場合は、かなりややこしい話になる。
後述する。

Auto Post Thumbnail あとからサムネイル

記事ごとに、あとからサムネイルを設定するのは、ちと面倒臭い、というか大ごとである。

そこで、YARPPのサムネイルサイズも、WordPressメディア設定のサムネイルサイズも、確定している場合は、記事の最初の画像をサムネイルとして、自動で取り込んでくれるすばらしいプラグインがある。

メディア設定のサムネイルサイズのとおりに、ほぼあっという間に完了する。

150×150のサムネイルが、YARPPでは120×120で表示されることになる。

サーバーの容量が気になる、YARPPの表示を軽くしたいときは、そもそもWordPressメディア設定を「120×120」にしておく。

YARPPのカスタマイズ 表示位置とサムネイルのサイズ

時とともに、YARPPの表示される場所や、サムネイルの大木を変えたいと思うことがある。気にしなければスルーできるが、色気も出てくる。

なかには、関連記事というものの、関連性の精度に苦情を言いたくなる人も多い。
（今のところは、この関連具合は、こちらではどうしようもない）

YARPP 関連記事の表示位置

YARPPによる関連記事の表示位置は、一般的には、記事コンテンツの直後。
あるいは、使用するテーマによって、違ってくる…

たとえば、コメントのすぐ上に表示したいと思うこともあるだろう。

投稿記事での表示位置を変えたいときは、YARPPの設定で投稿のチェックをはずし

<?php related_posts(); ?>

望みの場所で、使用しているテーマ、single.phpやarchive.phpに、上記コードを挿入する。

なお、このサイトのテンプレートでは、最初から関連記事が表示されるようになっていて、YARPPとも連携しており、ご覧のとおり記事の直後に表示されないようになっている。

YARPP サムネイルのサイズ変更 長方形では

ところで、YARPPで長方形のサムネイルを表示させたいと思うなら、途轍もなく厄介である。

styles_thumbnails.css.phpをダウンロード編集

\plugins\yet-another-related-posts-plugin\includes

にある、「styles_thumbnails.css.php」を編集しなければならない。

おすすめは、WordPressのプラグインの編集ではなく、ローカル、つまりパソコンにダウンロードして、それを編集する。

$height             = (isset($_GET['height'])) ? (int) $_GET['height'] : 120;
$width              = (isset($_GET['width']))  ? (int) $_GET['width']  : 120;

上記の、heightが縦、widthが横、これを変更する。
（もちろん、その前にWordPressメディア設定のサムネイルサイズも変更しておく）

$height_with_text   = $height + 50;

次に、YARPPでサムネイル表示に変更すると、画像の下にタイトルが表示されるが、「50」のままだとタイトルが途中で切られるので、たとえば「80」でも「100」でも、実際の表示画面を確認しながら変更する。
（修正してはFTPでアップロードを繰り返す）

.yarpp-thumbnails-horizontal .yarpp-thumbnail-title {
font-size: 1em;
/* max-height: 2.8em; */

1行をコメントアウトする。前に「/*」後ろに「*/」をつける。

style.cssに追加記述

そのほか、このファイルにはCSSが記述されているので、そのセレクタなどを参照して、style.css（できれば子テーマの）に思うような表示になるように書いていく。

/* 関連記事 (YARPP)  */
.yarpp-thumbnail > img, .yarpp-thumbnail-default {
width: 横サイズ !important;
height: auto !important;
}
.yarpp-thumbnails-horizontal .yarpp-thumbnail {
max-width: 横サイズ !important;
height: auto !important;
}

template_thumbnails.phpをダウンロード編集

それでも、どうしても画像サイズが思うようにならないときは、同じディレクトリーにある「template_thumbnails.php」をダウンロードして編集する。

このサイトの場合は、

$post_thumbnail_html = get_the_post_thumbnail( null, $dimensions['size'] );

これを変更している。

$post_thumbnail_html = get_the_post_thumbnail( null, array(300,180) );

もともとのサムネイル画像サイズを、その時々でいろいろ変えているし、画像関係のプラグインも多いので、今となってはYARPPが書き出す画像のサイズ、横と縦を強制的に、しかも上記サイズで設定しなければ、小さい画像が拡大表示されたり、画像の左右や上下が切られたものが出てきてしまうのである。

みなさんは、「array(300,180)」のところは、array(横,縦)のピクセルを記述していただきたい。

この修正したファイルをローカルで保存しておけば、YARPPプラグインのアップデートがあっても、また書き直すベースが残っているから安心安全である。

繰り返すが、WordPressのプラグイン編集はやらないことである。

SEO塾.comのサムネイル/アイキャッチの使用法

最初に作成するサムネイル/アイキャッチの画像サイズは、500×300。
Facebookを中心に、SNSでの表示を考慮している。

サムネイルの、WordPressメディア設定は、250×150。

そのほか、いろいろバリエーションがある。

そんな、行き当たりばったりのサムネイル/アイキャッチのサイズを表示させようとするから、YARPPの設定やカスタマイズで右往左往するわけだ（笑）

投稿一覧でサムネイル/アイキャッチを表示

画像関係のプラグインは、また機会があれば後日解説したい。

この記事の最後に、投稿一覧でサムネイル/アイキャッチも表示させる方法を。

functions.php（できれば子テーマ）に次を記述する。

/* 投稿一覧にサムネイル/アイキャッチ画像追加 */
function add_posts_columns_thumbnail($columns) {
$columns['thumbnail'] = 'アイキャッチ';
return $columns;
}
function add_posts_columns_thumbnail_row($column_name, $post_id) {
if ( 'thumbnail' == $column_name ) {
$thumb = get_the_post_thumbnail($post_id, array(150,90), 'thumbnail');
echo ( $thumb ) ? $thumb : 'なし';
}
}
add_filter( 'manage_posts_columns', 'add_posts_columns_thumbnail' );
add_action( 'manage_posts_custom_column', 'add_posts_columns_thumbnail_row', 10, 2 );

これで図のように、投稿一覧でサムネイル/アイキャッチも表示される。

WordPress管理画面の固定ページ一覧でも、サムネイル/アイキャッチが表示されないかあれこれ模索していると、すばらしい下記ページを発見！

サムネイル/アイキャッチだけでなく、スラッグ（url）まで一覧できるので、超便利である。
そのままコピペで使わさせていただきます。ありがとうございました。

YARPP関連記事で存在しないページが表示される

上述のように、YARPPがようやく更新されたので、またプラグイン内ページを書き換えようと作業をはじめると

なんと、存在しないページが関連記事で表示されている！

https://www.seojuku.com/blog/SEOマニュアル ファイナル.html
https://www.seojuku.com/blog/会社案内.html

存在しないというよりも、YARPPが勝手につくり上げたページである…

YARPP設定でタイトルを

まあ勘として、タイトル関係のバグ、不具合のようだったので

タイトル：検討する を

タイトル：検討しない に変更してみた。

勘は当たっていた。
ようやく、クレージーな現象がおさまった。

Warning: YARPP_Cache.php on line 465

ところで、YARPPは1年近く更新がされておらず、WordPressのバージョンアップに対応できていない。

次のようなエラーメッセージが表示されることがある。

Warning: ksort() expects parameter 1 to be array, object given in /～/wordpress/wp-content/plugins/yet-another-related-posts-plugin/classes/YARPP_Cache.php on line 465

対処法としては、下記ページのソースに書き換えるといいようだ。

\wp-content\plugins\yet-another-related-posts-plugin\classes

この場所にある「YARPP_Cache.php」の中身を丸ごと入れ替える。

2016年12月21日追記 YARPPのバージョンアップ（4.3.2）で解消

本日（2016年12月21日）、久方ぶりの更新で、とくに「YARPP_Cache.php」が入れ替えられている。

2016年12月29日追記 YARPPバージョンアップ（4.3.3）とカスタマイズファイル

なにやら、バージョンアップが繰り返されている。

そのまま更新すると、せっかくカスタマイズしたファイルが、デフォルトに戻ってしまう。

\plugins\yet-another-related-posts-plugin\includes

修正するのは、上記ディレクトリーにある次の2ファイル

手元にあるカスタマイズ済みファイルをそのままアップロードしても問題ないことが多いが、もしそれらのファイルがコーディングし直されていた場合は、不具合も起こりえる。

念のため、更新後のファイルもダウンロードして、そちらを修正して、アップロードするべきだろう。

WordPress カスタマイズなら

好評発売中

インスタや今風のECサイトのカード型フィードが、あっという間にできあがり
カテゴリーやタグの関連コンテンツも、お茶の子さいさい
テーマに頼らず、プラグインを使わず、スイスイとWordPressカスタマイズ