WordPress関連記事サムネイル/アイキャッチ(横長)と画像設定WordPressではアイキャッチ、一般的にはサムネイル。この画像ビジュアルをスマホ時代のサイトで活用したいが、YARPPをカスタマイズするときはハードルも高い。使用のWordPressテーマにも制約される。WordPress関連記事サムネイル/アイキャッチ(横長)と画像設定WordPressではアイキャッチ、一般的にはサムネイル。この画像ビジュアルをスマホ時代のサイトで活用したいが、YARPPをカスタマイズするときはハードルも高い。使用のWordPressテーマにも制約される。苦難を乗り越え、サムネイル/アイキャッチのサイズ変更で横長や縦長に変えたり、好みの位置場所に表示するなど、数々の経験を記録する。YARPPは関連記事を表示スマホサイトでは、テキストより画像が重要、また直帰されずに同じテーマの関連コンテンツを閲覧していただきたい。WordPressでは定番の、関連記事を表示できるYARPPというプラグインが圧倒的人気である。Plugins初期設定で使えば何の問題もないYARPPなのに、たとえばサムネイル/アイキャッチの大きさを変えて横長や縦長にしたり、望みの位置や場所に関連記事を表示させたいなど、思うように活用するには、なんとハードルが高いか!そのYARPPについて、このサイトと、別サイトで難儀してクリアできた設定、カスタマイズをお伝えしておきたい。WordPressでは「アイキャッチ」がよく出てくるが、一般的には「サムネイル」が定着している。両者は、基本的に同じものである。465YARPPのサムネイル表示YARPPをそのまま使えば、次のような、テキストの羅列になる。画像を添えて関連ページを表示すると、あれまっ、直帰率が圧倒的に下がり、またユーザー目線でも鬱陶しいテキスト並びよりも、画像ありのほうがいいに決まっているだろう。YARPPを導入しているWordPressサイトのオーナーならご存じのとおり、デフォルトのリスト表示からサムネイル表示に変えるだけでいい。YARPPのサムネイルの画像サイズYARPPのサムネイルのサイズは、120×120である。WordPressの管理画面、設定→メディアで、サムネイルのサイズを確認してみよう。WordPressのデフォルト、初期設定では、サムネイルは150×150になっているので、この正方形のサムネイルから、YARPPの縮小した(120×120の)正方形のサムネイルが表示される。自分でWordPressメディア設定のサムネイルのサイズを、たとえば100×100にした場合は、YARPPでは小さい画像が拡大されて表示される可能性もあり、画像が汚くなるので注意。YARPPのサムネイルを、正方形ではなく、長方形にしたい場合は、かなりややこしい話になる。あとからサムネイル記事ごとに、あとからサムネイルを設定するのは、ちと面倒臭い、というか大ごとである。そこで、YARPPのサムネイルサイズも、WordPressメディア設定のサムネイルサイズも、確定している場合は、記事の最初の画像をサムネイルとして、自動で取り込んでくれるすばらしいプラグインがある。Pluginsメディア設定のサムネイルサイズのとおりに、ほぼあっという間に完了する。150×150のサムネイルが、YARPPでは120×120で表示されることになる。サーバーの容量が気になる、YARPPの表示を軽くしたいときは、そもそもWordPressメディア設定を「120×120」にしておく。表示位置とサムネイルのサイズ時とともに、YARPPの表示される場所や、サムネイルの大木を変えたいと思うことがある。気にしなければスルーできるが、色気も出てくる。なかには、関連記事というものの、関連性の精度に苦情を言いたくなる人も多い。関連記事の表示位置YARPPによる関連記事の表示位置は、一般的には、記事コンテンツの直後。使用するテーマによって、違ってくる...たとえば、コメントのすぐ上に表示したいと思うこともあるだろう。?>望みの場所で、使用しているテーマ、single.phpやarchive.phpに、上記コードを挿入する。このサイトのテンプレートでは、最初から関連記事が表示されるようになっていて、YARPPとも連携しており、ご覧のとおり記事の直後に表示されないようになっている。長方形ではところで、YARPPで長方形のサムネイルを表示させたいと思うなら、途轍もなく厄介である。styles_thumbnails.css.phpをダウンロード編集\plugins\yet-another-related-posts-plugin\includesにある、「styles_thumbnails.css.php」を編集しなければならない。おすすめは、WordPressのプラグインの編集ではなく、ローカル、つまりパソコンにダウンロードして、それを編集する。120;上記の、heightが縦、widthが横、これを変更する。50;次に、YARPPでサムネイル表示に変更すると、画像の下にタイトルが表示されるが、「50」のままだとタイトルが途中で切られるので、たとえば「80」でも「100」でも、実際の表示画面を確認しながら変更する。*/1行をコメントアウトする。前に「/*」後ろに「*/」をつける。style.cssに追加記述そのほか、このファイルにはCSSが記述されているので、そのセレクタなどを参照して、style.css(できれば子テーマの)に思うような表示になるように書いていく。!important;}template_thumbnails.phpをダウンロード編集それでも、どうしても画像サイズが思うようにならないときは、同じディレクトリーにある「template_thumbnails.php」をダウンロードして編集する。);これを変更している。);もともとのサムネイル画像サイズを、その時々でいろいろ変えているし、画像関係のプラグインも多いので、今となってはYARPPが書き出す画像のサイズ、横と縦を強制的に、しかも上記サイズで設定しなければ、小さい画像が拡大表示されたり、画像の左右や上下が切られたものが出てきてしまうのである。みなさんは、「array(300,180)」のところは、array(横,縦)のピクセルを記述していただきたい。この修正したファイルをローカルで保存しておけば、YARPPプラグインのアップデートがあっても、また書き直すベースが残っているから安心安全である。繰り返すが、WordPressのプラグイン編集はやらないことである。最初に作成するサムネイル/アイキャッチの画像サイズは、500×300。Facebookを中心に、SNSでの表示を考慮している。サムネイルの、WordPressメディア設定は、250×150。そのほか、いろいろバリエーションがある。画像関係のプラグインは、また機会があれば後日解説したい。この記事の最後に、投稿一覧でサムネイル/アイキャッチも表示させる方法を。functions.php(できれば子テーマ)に次を記述する。);これで図のように、投稿一覧でサムネイル/アイキャッチも表示される。delaymaniaサムネイル/アイキャッチだけでなく、スラッグ(url)まで一覧できるので、超便利である。そのままコピペで使わさせていただきます。ありがとうございました。