WordPress
カスタマイズ事例

WORDPRESS CUSTOMIZATION

メインビジュアル(ヒーローイメージ)をアイキャッチで管理する テーマ販売あり

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

$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テーマを購入できます】

現在あなたが利用されているWordPressテーマを活かしたまま、このページの事例を解決できるWordPressテーマを、子テーマとして購入できます。
この子テーマを有効化するだけで、現在お使いのデザインテーマにこの事例解決の機能が自動付与されます。
デザインが入っていないため、一般より格段に低い価格(事例の難易度により200円~1.3万円)です。
※ テーマは買い切りです
※ 自由に改変してお使いいただいて構いません
※ すでに子テーマでサイト運用されている方は、当該子テーマをマージしてください

【100ウェブ新着情報メルマガ】

WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!