WordPress サムネイルのサイズを変更

Last Updated: 2021 年 04 月 13 日 6のコメント

WordPressのカテゴリやブログ一覧ページに表示されている特性イメージ(文サムネイル)の大きさを調整したい場合があります。 特性の画像を表示する関数は、the_post_thumbnail()です。 この関数は、必ずLoop内でのみ使用されるべきでポストの特性イメージをインポートする場合には、get_the_post_thumbnail($ id、$ size、$ attr)を使用します。

WordPress サムネイルのサイズを変更

基本的な画像サイズは「サムネイル」、「メディア」、「ラージ」、「フル」です。 WordPress 管理者のメディアパネル(設定>メディア)で設定可能です。

他のサイズを追加して使用するには、次のような関数を追加します。

function custom_thumbs()
{
add_image_size( 'thumb-small', 200, 200, true );
add_image_size( 'thumb-medium', 520, 9999 );
add_image_size( 'thumb-large', 720, 340 );
}
add_action( 'after_setup_theme', 'custom_thumbs' );
// Source: wordpress.org

これを適用するには、テーマテンプレートファイル(content.php、category.php...など)に次の形式で追加できます。

<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thumb-small' ); } ?>
2 Column layout in category in WordPress

たとえば、このテーマのカテゴリやブログリストに表示される特性の画像サイズが若干中途半端して2つの列に文を一覧表示するときは、表示がないようになります。 だから、上記の add_image_size 関数を使用して、別のサイズを作成して使用してカラムのサイズに合わせて調整することができます。

現在のアーカイブ(index.php、category.php...)に表示されるサムネイル画像を調整するには、この方法ではカスタマイズされた属性画像サイズを使用できます。

メモ:


6のコメント

コメント

  1. こんにちは、サムネイル関連の質問があります。
    .post img{aspect-ratio:16/9!important;}
    そのコードをカスタムcssに書き込むと動作が正しくなり、コードに問題があるようにaspect-ratio部分が赤い文字で表示されます。 別の問題はないのに、ただ赤い文字に変わった状態で使ってもいいのか気になります!

    応答
    • 正確なことはわかりませんが、 WordPress カスタマイズの CSS セクションでは、CSS 属性の数文字を入力するとそれに対応する CSS 属性が表示されますが (たとえば、m を入力すると margin、margin-bottom... など m で始まる属性が選択できるように表示されます)、aspect-ratioはこれらの属性セットに登録されていないため、赤で表示されているようです。 WordPressにaspect-ratio属性も登録してもらうことをリクエストしてみることができるようです。

      https://www.screencast.com/t/idtWYLkXk

      応答
  2. こんにちは。

    もしサムネイルを作成する画像の部分? を私指定して保存する機能やプラグインがないでしょう?

    例えば、写真が

    1111
    2222
    3333
    4444
    5555

    このように長いだろうと、自動的に作られるには

    3333
    4444
    要部分が切り捨てられましたよ。

    ところが、私は

    1111
    2222

    この部分をカットサムネイル作成たい
    その出てくるようにテキストを編集をしてしまえば、元のが
    1111
    2222
    3333

    このように切り捨てられました…(4444/5555部分を削除する必要があります)

    探してみるとテーマ別にリジェネレートするのが、出てきたよ〓〓
    サムネイルを作るイメージの領域を私が設定できるそのような機能が必要ですから。
    もし情報があれば共有していただければ幸いです。

    応答
    • サムネイルサイズを確認して特性の画像を サムネイルサイズの比率に合わせて 作成特性画像に指定しても切り捨てられずにしっかり出てくるようです。

      そして Facebook などのSNSで共有する場合に推奨されるサイズがあります。 その大きさを考慮して、適切なサイズの画像を特徴画像として指定するが、サムネイルの比率に合わせて特性の画像を作成したら効果的ではないかと思われます。

      Facebook 共有時サムネイル規格については、次の記事を参照してみてください:

      https://www.thewordcracker.com/basic/sns-%EA%B3%B5%EC%9C%A0-%EC%8B%9C-%EC%8D%B8%EB%84%A4%EC%9D%BC-%EB%AC%B8%EC%A0%9C/

      しかし、質問の内容は、サムネイルで指定する画像が長い場合に該当するようですね。 その後、サムネイルのサイズに合わせ切り捨てたようです。 サムネイルサイズ自体を変更する必要がと思います。 テーマファイルを修正する作業が必要になることもあるでしょう。 テーマに沿って、サムネイルのサイズを指定するオプションを提供しています。

      たとえば、このブログで使用された GeneratePress テーマは、属性画像のサイズを指定するオプションを提供しています。

      https://www.screencast.com/t/MYyQQRKOeE8d

      しかし、状況に合わなくも長くサムネイルサイズを指定すると、表示が良くないようです。

      応答
      • 回答ありがとうございます。

        私はサムネイルを長くするか、または
        ご希望のサイズで作成したいのではなく
        画像のファイル内の特定の領域を指定して(top、middle、bottom程度の感じで)サムネイル作りたいと思います。

        いくつかの写真に上雲であり、下に人がいたら
        雲の一部と人頭頂まで切り捨てられサムネイルが生成されるのを防ぐにはですねㅠㅠ
        (空も人の顔もどちらかで運転して指定するために)
        私が使用するテーマは newspaperのにもしかしたらここにもテーマでサポートされる機能はないでしょうか?

        ありがとうございます。

      • 特性の画像に使用する画像を別々に作成し特性の画像に指定してみていかがでしょうか
        Newspaper テーマの場合、サムネイルのサイズを確認した後の比率に合わせてイメージを作成することができます。

        例えば、サムネイルの要素の検査をしてみると、サムネイルのサイズを知ることができます。
        例:
        https://www.screencast.com/t/5uHL7bc8

        例では、218x150pxのサイズです。 そのような場合536x300px(218x150pxの二倍)サイズで、目的の画像を一つ作って、その文の特性イメージに指定すると、必要に応じて表示されるようです。