広告

WordPress アイキャッチのURL、サイズ、altを取得しamp対応

この記事は約3分で読めます。

個人的メモ

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

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

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

<?php //アイキャッチ ?>
<figure class=”eye-catch”>
<?php
// アイキャッチのattachimentIDを取得
// wordpress関数 get_post_thumbnail_id でアイキャッチのIDを取得
// アイキャッチのIDを変数 image_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,’single-top-img’, 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 $image_url ; ?>” alt=”<?php echo $image_alt ; ?>” width=”<?php echo $image_width ; ?>” height=”<?php echo $image_height ; ?>”></amp-img>
</figure>
<?php //ここまで アイキャッチ ?>