WordPressサムネイルの画像サイズをPHPで修正する

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つの方法で、サムネイルが表示したい大きさに無事、表示されました。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

ピックアップ記事

  1. 目次 前準備のバックアップと注意点 英語の説明を翻訳してよく読み理解する ステップごと…
  2. 目次 Webデザイナーが初めて知る「MariaDB」という名前 MariaDBって何ですか…
  3. 目次 Web Design 3.0への流れ Web Design 2.0とWeb Desi…
  4. 目次 Macスリープ再起動エラーがおこった環境 スリープ再起動エラーメッセージの内容 …
  5. 2020年もすばらしい年になるはずでした。もう半年以上が過ぎました。2020年のお正月はいつも通り、…
PAGE TOP