WordPressではアイキャッチ、一般的にはサムネイル。この画像ビジュアルをスマホ時代のサイトで活用したいが、YARPPをカスタマイズするときはハードルも高い。また使用のWordPressテーマにも制約される。
スマホサイトWeb WordPressなどのSEO
小画面 少コンテンツ 省テキスト 多画像対応の
コーディング実験検証
苦難を乗り越え、サムネイル/アイキャッチのサイズ変更で横長や縦長に変えたり、好みの位置場所に表示するなど、数々の経験を記録する。
スマホサイトでは、テキストより画像が重要、また直帰されずに同じテーマの関連コンテンツを閲覧していただきたい。
WordPressでは定番の、関連記事を表示できるYARPPというプラグインが圧倒的人気である。
初期設定で使えば何の問題もないYARPPなのに、たとえばサムネイル/アイキャッチの大きさを変えて横長や縦長にしたり、望みの位置や場所に関連記事を表示させたいなど、思うように活用するには、なんとハードルが高いか!
そのYARPPについて、このサイトと、別サイトで難儀してクリアできた設定、カスタマイズをお伝えしておきたい。
また、WordPressでは「アイキャッチ」がよく出てくるが、一般的には「サムネイル」が定着している。
両者は、基本的に同じものである。
YARPPをそのまま使えば、次のような、テキストの羅列になる。
だがしかし、画像を添えて関連ページを表示すると、あれまっ、直帰率が圧倒的に下がり、またユーザー目線でも鬱陶しいテキスト並びよりも、画像ありのほうがいいに決まっているだろう。
YARPPを導入しているWordPressサイトのオーナーならご存じのとおり、デフォルトのリスト表示からサムネイル表示に変えるだけでいい。
これだけである。
YARPPのサムネイルのサイズは、120×120である。
あらためて、WordPressの管理画面、設定→メディアで、サムネイルのサイズを確認してみよう。
WordPressのデフォルト、初期設定では、サムネイルは150×150になっているので、この正方形のサムネイルから、YARPPの縮小した(120×120の)正方形のサムネイルが表示される。
もし、自分でWordPressメディア設定のサムネイルのサイズを、たとえば100×100にした場合は、YARPPでは小さい画像が拡大されて表示される可能性もあり、画像が汚くなるので注意。
さらに、YARPPのサムネイルを、正方形ではなく、長方形にしたい場合は、かなりややこしい話になる。
後述する。
記事ごとに、あとからサムネイルを設定するのは、ちと面倒臭い、というか大ごとである。
そこで、YARPPのサムネイルサイズも、WordPressメディア設定のサムネイルサイズも、確定している場合は、記事の最初の画像をサムネイルとして、自動で取り込んでくれるすばらしいプラグインがある。
メディア設定のサムネイルサイズのとおりに、ほぼあっという間に完了する。
150×150のサムネイルが、YARPPでは120×120で表示されることになる。
サーバーの容量が気になる、YARPPの表示を軽くしたいときは、そもそもWordPressメディア設定を「120×120」にしておく。
時とともに、YARPPの表示される場所や、サムネイルの大木を変えたいと思うことがある。気にしなければスルーできるが、色気も出てくる。
なかには、関連記事というものの、関連性の精度に苦情を言いたくなる人も多い。
(今のところは、この関連具合は、こちらではどうしようもない)
YARPPによる関連記事の表示位置は、一般的には、記事コンテンツの直後。
あるいは、使用するテーマによって、違ってくる…
たとえば、コメントのすぐ上に表示したいと思うこともあるだろう。
投稿記事での表示位置を変えたいときは、YARPPの設定で投稿のチェックをはずし
<?php related_posts(); ?>
望みの場所で、使用しているテーマ、single.phpやarchive.phpに、上記コードを挿入する。
なお、このサイトのテンプレートでは、最初から関連記事が表示されるようになっていて、YARPPとも連携しており、ご覧のとおり記事の直後に表示されないようになっている。
ところで、YARPPで長方形のサムネイルを表示させたいと思うなら、途轍もなく厄介である。
\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行をコメントアウトする。前に「/*」後ろに「*/」をつける。
そのほか、このファイルには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」をダウンロードして編集する。
このサイトの場合は、
$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のプラグイン編集はやらないことである。
最初に作成するサムネイル/アイキャッチの画像サイズは、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がようやく更新されたので、またプラグイン内ページを書き換えようと作業をはじめると
なんと、存在しないページが関連記事で表示されている!
https://www.seojuku.com/blog/SEOマニュアル ファイナル.html
https://www.seojuku.com/blog/会社案内.html
存在しないというよりも、YARPPが勝手につくり上げたページである…
まあ勘として、タイトル関係のバグ、不具合のようだったので
タイトル:検討する を
タイトル:検討しない に変更してみた。
勘は当たっていた。
ようやく、クレージーな現象がおさまった。
ところで、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_Cache.php」が入れ替えられている。
なにやら、バージョンアップが繰り返されている。
そのまま更新すると、せっかくカスタマイズしたファイルが、デフォルトに戻ってしまう。
\plugins\yet-another-related-posts-plugin\includes
修正するのは、上記ディレクトリーにある次の2ファイル
手元にあるカスタマイズ済みファイルをそのままアップロードしても問題ないことが多いが、もしそれらのファイルがコーディングし直されていた場合は、不具合も起こりえる。
念のため、更新後のファイルもダウンロードして、そちらを修正して、アップロードするべきだろう。
好評発売中
インスタや今風のECサイトのカード型フィードが、あっという間にできあがり
カテゴリーやタグの関連コンテンツも、お茶の子さいさい
テーマに頼らず、プラグインを使わず、スイスイとWordPressカスタマイズ