【WordPress】フッターに画像全体をクリック可能なリンクとして設置する方法

WordPressサイトのフッターに、画像全体をクリックできるバナーリンクを設置したいと思ったことはありませんか？

この記事では、**画像を幅いっぱいに表示して、クリック可能なリンクとして機能させる方法**を、PHPとCSSのカスタマイズを通して解説します。コピペで使えるコード付きです！

---

## ✅ 完成イメージ

- サイトの一番下に、**横幅いっぱいの画像**
- 画像全体がリンクになっていて、クリックで外部サイトやLPなどに遷移

---

## ✅ ステップ1：functions.php に以下のコードを追加

// フッターに画像リンクを追加する
function add_custom_footer() {
  echo '<div class="site-footer">';
  echo '<a href="https://example.com" target="_blank">';
  echo '<img src="https://example.com/banner.jpg" alt="バナー画像">';
  echo '</a>';
  echo '</div>';
}
add_action('wp_footer', 'add_custom_footer');

🔸 href に遷移先のURLを、
🔸 src に画像URLを設定してください。

✅ ステップ2：CSSでデザイン調整（style.cssなどに記述）

.site-footer {
  width: 100%;
}

.site-footer img {
  width: 100%;
  height: auto;
  display: block;
}

このスタイルにより、画像がブラウザの横幅いっぱいに広がり、見た目もキレイに整います。
画像自体が <a> タグに包まれているため、画像のすべての範囲がクリック可能になります。

✅ ポイント：なぜ display: block が重要なの？

通常の img はインライン要素のため、周囲に余白が生じたりクリックできない領域が出てくる場合があります。
そのため、display: block; を指定して、画像全体をしっかりとリンクの範囲に収めます。

✅ 注意点

• JavaScript不要で簡単に実装可能
• 画像の縦横比は自動で調整（height: auto）
• ページ最下部（wp_footer）に出力されるので、フッターウィジェットとは別領域になります

🎉 おわりに

ランディングページの誘導や、キャンペーンバナーなど、フッター全体をクリック可能な画像にしたいときに非常に便利です。

WordPress初心者の方も、ぜひ試してみてください！

✅ ご不明点があればコメントでお気軽にどうぞ。