【JIN:R】ヘッダー右上に電話番号と問い合わせボタンを表示する方法

※2024年5月更新

コーポレートサイトデザインの定番、ヘッダー右上に電話番号＋問い合わせページへのボタンの設置方法についてです。

今回はWordPressテーマ「JIN:R」での実践です。

Web制作でクライアントサイトを作る場合、かなりの確率で「ヘッダーに電話番号をつけたい」といったリクエストを受けます。

以下の画像は、クライアントからリクエストのあるデザインの一例です。

JIN:Rのヘッダー右上に電話番号を表示したカスタマイズ

デモサイト：https://webrent.xsrv.jp/demo/jinr05/

JIN:Rを有効化したサイトでこのレイアウトが実現できたので、カスタマイズ方法をメモ書きします。

カスタマイズの構成

今回のカスタマイズではテーマファイル内のテンプレートファイルを一切編集しません。

子テーマ化する必要はありませんし、テーマ内のphpファイルはノータッチです。


強引にPHPテンプレートファイルを編集する方法もあるんですが、WordPressでサイトを運営する場合、テーマのテンプレートファイルを直接編集してしまうとテーマのバージョンアップで上書きされカスタマイズが消えます。

バージョンアップによる影響を受けにくいカスタマイズをしておくと、運営が楽になります。

＜バージョン情報＞
デモサイトはWordPress、JIN:Rともに記事執筆時に利用可能な最新バージョンです。

• WordPress：6.5.3

• JIN:R：1.3.2

更新履歴

• 2024年5月11日　最新バージョン（1.3.2）で動作確認しました。

• 2024年3月17日　最新バージョン（1.3.0）で動作確認しました。

• 2022年11月20日　記事公開

ヘッダーにサブメニューを表示する方法は別の記事で解説しています↓