大阪のホームページ制作会社 株式会社TREVO
技術ブログ

WordPressで画像サイズを 指定する方法

2020.03.10.

WordPress

タグ

twitter Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

WordPressではメディア設定で、サムネイル、中サイズ、大サイズの画像サイズを設定する事が可能です。

オリジナルテンプレートだと3種類の画像サイズ以外にも専用の画像サイズを指定する必要があります。

メディア設定

左メニューの 「設定 > メディア」で設定が可能です。

メディア設定

画像サイズの追加方法

テンプレートのfunction.phpに

add_image_size('●●', 300, 200, true);

を追加します。

  • ●●は任意の名前
  • 300は横幅(ピクセル)
  • 200は縦幅(ピクセル)
  • true:指定した大きさでの切り抜き(ハードクロップ)
  • false:指定した縦または横の大きさでのリサイズ(ソフトプロポーショナル)

画像の表示方法

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

●●は、add_image_sizeで設定した名前

画像のパスを取得する方法

<?php
$attach_id = get_post_thumbnail_id($post->ID);
$image = wp_get_attachment_image_src($attach_id, '●●');
?>
<img src="<?php echo esc_url($image[0]); ?>" alt="<?php get_the_title(); ?>">

画像のパスを取得する方法(Whileを使用する場合)

<?php
if(have_posts()): while(have_posts()): the_post();
$thumbnail_id = get_post_thumbnail_id($post->ID);
$image = wp_get_attachment_image_src( $thumbnail_id, '●●' ); 
?>
<?php echo $image[0]; ?>
<?php
endwhile;endif;
?>

●●は、add_image_sizeで設定した名前

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

twitter Facebook Pocket LINE はてブ
お見積もり