更新 2021/06/24
PHPを書き換える
ワードプレスでPHPに手を加えなければならない場面は多くあります。
今回はサムネイル画像サイズがあわず、loop.phpをカスタマイズして修正した内容です。
WordPress、サムネイルの画像サイズ、再読込でリサイズ表示する件。
サムネイルの画像サイズでどういう問題点がおこるのか?
・カテゴリー別の表示で、サムネイル画像の縦横比率がおかしい画像がいくつかある。
全部ではなかったですが、カテゴリー別の投稿記事を表示した画面で、記事のサムネイル画像の
縦横比率があってなくて、画像がゆがんで見えてしまっていた画像が数枚ありました。
▶︎ 【解決方法】
◎ そのウェブ表示からF12で、ソース表示から、どのスクリプトの影響を受けているのかを確認する。
今回はワードプレスの
the_post_thumbnail();
という関数の影響とわかった。この関数には、
the_post_thumbnail('thumbnail'); // サムネイル (デフォルト 150px x 150px :最大値) the_post_thumbnail('medium'); // 中サイズ (デフォルト 300px x 300px :最大値) the_post_thumbnail('large'); // 大サイズ (デフォルト 640px x 640px :最大値) the_post_thumbnail('full'); // フルサイズ (アップロードした画像の元サイズ)
という画像サイズが指定できる。この部分はソースから loop.phpの記述によるとわかった。
◎ loop.phpを書き換える。
<!-- Start the Loop. --> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <!--post start--> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="post_heading_wrapper"> <div class="postimage_container"> <span class="thumb"> <?php if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) { ?> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail('medium'); ?> </a>
下のloop.php一部コードの一番下の部分
<?php the_post_thumbnail(”); ?>を、
<?php the_post_thumbnail('medium'); ?>
上記のように、mediumを入れて更新する。
このmediumサイズとは、設定>メディア設定>中サイズ(デェフォルトで300×300)をひっぱってくる。
この場合300×300はちょっと小さいので、500×500にメディア設定を変更する。しかし、
このメディア設定は、投稿時の画像設定サイズを採用してしまうので、投稿後にサイズ変更が活きない。
◎ 再読込でリサイズしてくれるプラグインを探したところ、Regenerate Thumbnailsを見つけた。
早速プラグインから新規追加→有効化した後、loop.phpに「medium」、メディア設定に「500×500」
を保存して、ツール>Regenerate Thumbnails>Regenerate all Thumnail という英語で書かれた
ボタンをクリックした。
すると再読込が開始され、インジケーターが○○%まで進んでいるか表示される。
100%終わった状態で、カテゴリー別のサムネイル画像サイズを確認したら、ちゃんと
指定の500×500で、きれいにリサイズ表示されていた。すごい!
上記3つの方法で、サムネイルが表示したい大きさに無事、表示されました。