ワードプレスの画像サイズを変更する

納品した後でヘンテコなサイズの画像を登録されてもデザインが崩れないようにしたいわ・・・。

やりたいこと

投稿で登録された画像が意図しないサイズだったとしてもデザイン通りのサイズにリサイズして表示したい。

こまったこと

サイトの運営者が画像サイズを規定に合わせる技術を持ち合わせてない。

追加したコード

/* カスタム投稿　画像フィールドの画像リサイズ */
add_image_size( 'custom-thum', 500, 300, true, array( 'center', 'center') );

/* 投稿　アイキャッチ画像リサイズ */
function mythumenails_setup_theme() {
  add_theme_support( 'post-thumbnails', array( 'post' ) );
  set_post_thumbnail_size( 400, 300, true, array( 'center', 'center') );
}
add_action( 'after_setup_theme', 'mythumenails_setup_theme' );

差し替えたコード　カスタム投稿（画像フィールド）

<img src="<?php the_field('custom_img'); ?>" alt=""/>

<?php echo wp_get_attachment_image(get_post_meta($post->ID, 'custom_img', true),'custom-thum'); ?>

差し替えたコード　投稿（アイキャッチ）

<?php the_post_thumbnail(); ?>

<?php the_post_thumbnail('full'); ?>

コードのポイント

functionでリサイズした投稿のアイキャッチ画像は the_post_thumbnail(); で出力されるので、個別ページのヘッダー画像として使う部分には the_post_thumbnail(‘full’); のサイズ指定をしました。リサイズした画像とそのままのサイズの画像で使い分けをするときに使えます。

array( ‘center’, ‘center’) で画像のどこを起点にリサイズするかを指定しました。

function.phpコード６行目

add_theme_support( 'post-thumbnails', array( 'post' ) );

今回は固定ページのアイキャッチを変更する予定がなかったので、array( ‘post’ ) を指定することで投稿の画像だけをリサイズするようにしています。

ブログ