WordPress アイキャッチのURL、サイズ、altを取得しamp対応（通常のimgタグでも使えます）

個人的メモ

エスケープ関数を入れました。

WordPressでアイキャッチのアタッチメントID、画像サイズ、alt属性を取得して、<amp-img>にする方法

コピペでsingle.phpなどに入れるだけでOKだけど、もしかしたら、コピペが上手くできないかも。。。

その時は、コメントを消して、記号、改行、スペースを見直してみてください。

<?php
/**
 * アイキャッチ
 *
 * @package WordPress
 * @author 渡辺光理
 */

?>
<figure class="eye-catch">
<?php
// アイキャッチのattachimentIDを取得
// WordPress関数 get_post_thumbnail_id でアイキャッチのIDを取得
$image_id = get_post_thumbnail_id();

// attachimentIDから、画像URL,サイズを取得
// WordPress関数 wp_get_attachment_image_src でサイズを取得
// $image = wp_get_attachment_image_src($image_id, true); にすると、初期値になる
// ($image_id, true)の真ん中にサイズを入れる。'full''medium'など、初期値'thumbnail'
$image = wp_get_attachment_image_src( $image_id, 'full', true );

// 変数 $image を分解して別の変数に入れる

// アイキャッチのurlは　変数　$image_url
$image_url = $image[0];
// アイキャッチの幅は　変数　$image_width
$image_width = $image[1];

// アイキャッチの高さは　変数　$image_height
$image_height = $image[2];

// メディアで設定したalt（代替テキスト）属性を取得
$image_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );

// 書き出す
?>
<amp-img class="eye-catch-images" layout="responsive" src="<?php echo esc_url( $image_url ); ?>" alt="<?php echo esc_attr( $image_alt ); ?>" width="<?php echo esc_attr( $image_width ); ?>" height="<?php echo esc_attr( $image_height ); ?>"></amp-img>
</figure>

imgタグで書き出すなら

<img class="eye-catch-images" src="<?php echo esc_url( $image_url ); ?>" alt="<?php echo esc_attr( $image_alt ); ?>" width="<?php echo esc_attr( $image_width ); ?>" height="<?php echo esc_attr( $image_height ); ?>">