ワードプレス【Alpha】ヘッダー画像の一部にリンクを貼る方法

2018年3月19日2021年9月29日

ワードプレステーマ【Alpha】にて、ヘッダー画像の、特定の部分にリンクを貼る方法を紹介します。

1：子テーマに、banner.phpをアップロードする。
2：テーマを編集します。
- デフォルトでは以下のようになっています。
- これを以下のように書き換えます
リンクする座標を決定する
座標を調べる

1：子テーマに、banner.phpをアップロードする。

やり方はこちら

2：テーマを編集します。

ポイント

テーマの編集画面にて、header-imageというタグを探す
・F3ボタンですぐに見つかります。

デフォルトでは以下のようになっています。

HTML


<div class="header-image"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>"　alt="<?php bloginfo( 'name' ); ?>"></a></div>

これを以下のように書き換えます

HTML

<div class="header-image">
<img src="<?php echo esc_url( $header_image ); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>"　alt="<?php bloginfo( 'name' ); ?>" usemap="#top">
<map name="top">
<area shape="rect" coords="20,20,500,80" href="飛ばしたいリンク先">
</map>
</div>