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(page.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 } ?>

こうすれば、htmlを知らないユーザーでも自由にメインビジュアルやキャッチコピーを変更することができます。


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