アイキャッチ画像の出力を設定する画像が抽出する方法へ変更【ha-Basic 3.2】

公開日: 開発情報・技術情報
アイキャッチ画像の出力を設定する画像が抽出する方法へ変更【ha-Basic 3.2】

3.1までの個別投稿(single.php)で行っていた旧コード(the_post_thumbnail_url関数+画像サイズ)で行っていたアイキャッチ画像の出力方法を変更しました。

今までは、CLS対策のため画像の縦横サイズを指定する必要があったため、半ば無理やりに縦横サイズ(whdth height属性)を指定したことから、特に縦長の画像をアイキャッチに指定した場合に不都合があったことに対する対応です。

今回の変更で、HTML上の画像サイズ(width height属性)の値は実際の画像から抽出することとしたので、縦横比を基に拡大縮小された際にもきちんとした画像が表示されるようになりました。

本記事は、バージョン3.1までの旧コードと3.2以降での新コードの記録用記事となります。

【ha-Basic】バージョン3.1までの出力コード(旧コード)

	<!--アイキャッチ取得-->
		<div class="kiji-img">
			<?php if( has_post_thumbnail() ): ?>
			<?php if( !wp_is_mobile() ): ?>			
			<img src="<?php the_post_thumbnail_url('full'); ?>" alt="<?php the_title();?>" width="1200" height="780" loading="lazy">
			<?php else: ?>
			<img src="<?php the_post_thumbnail_url('large'); ?>" alt="<?php the_title();?>" width="1200" height="780" loading="lazy">			
			<?php endif; ?>	
			<?php endif; ?>	
		</div><!-- kiji-image -->

【ha-Basic】バージョン3.1からの出力コード(新コード)

	<!--アイキャッチ取得-->
		<div class="kiji-img">
			<?php if( has_post_thumbnail() ): ?>
			<?php if( !wp_is_mobile() ): ?>	
			<?php
			$image_alt = get_the_title($post->ID);
			$image_id = get_post_thumbnail_id();
			$image = wp_get_attachment_image_src($image_id,'large',true);
			$image_url = $image[0];
			$size = hab_get_image_width_and_height($image_url);
			echo '<img src="'.$image_url.'" width="'.$size['width'].'" height="'.$size['height']. '" alt="' .$image_alt. '" loading="lazy">'; ?>		
			<?php else: ?>
			<?php
			$image_alt = get_the_title($post->ID);
			$image_id = get_post_thumbnail_id();
			$image = wp_get_attachment_image_src($image_id,'medium',true);
			$image_url = $image[0];
			$size = hab_get_image_width_and_height($image_url);
			echo '<img src="'.$image_url.'" width="'.$size['width'].'" height="'.$size['height']. '" alt="' .$image_alt. '" loading="lazy">'; ?>			
			<?php endif; ?>	
			<?php endif; ?>	
		</div><!-- kiji-image -->

参考にしたページ

WordPress内で利用している画像の幅と高さを取得する方法

  •  白黒ハチワレ猫の【モモ】とのんびり暮らしながらフリーランスでサイト制作のお手伝いをしていますブログツールでありながら本格的なウェブサイトに必要な機能を追加できるWordpressの良さを活かした楽しく便利なサイト作りのお手伝いをさせていただいております

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。