WordPressカスタマイズ事例

メインビジュアル(ヒーローイメージ)をアイキャッチで管理する

グローバルメニューの下に来る、ページのコンセプトを表す大きなビジュアルのことをメインビジュアルとか、キービジュアル、あるいはヒーローイメージと呼んだりしますが、これをアイキャッチで管理する方法です。

$mv_img_id = get_post_thumbnail_id($post->ID);
$mv_img_url_array = wp_get_attachment_image_src($mv_img_id, 'full');
$mv_img_url = $mv_img_url_array[0];

これでアイキャッチの画像URLを取得できます。

さらにアドバンストカスタムフィールドで追加したカスタムフィールドでキャッチテキストも管理したいという場合は、

$mv_copy ='';
if( get_field('hero_copy',$post->ID) ){
$mv_copy = get_field('hero_copy',$post->ID);
}

で入力したキャッチテキストを呼び出せます。

あとは、表示側のテンプレートPHPでこれらを呼び出せばOK。

<?php if ($mv_img_url){?>
<div style="background-image: url(<?php echo $mv_img_url; ?>);">
<h1><?php echo $mv_copy; ?></h1>
</div>
<?php } ?>

みたいに。


その他のWordPressカスタマイズ事例