【SWELL】ヘッダーの右上に電話番号・問い合わせボタンを追加表示するカスタマイズ方法

※2023年11月24日追記
SWELL最新バージョン（2.8.1）でも有効です。

WordPress有料テーマの「SWELL」のカスタマイズについてです。

企業サイトを作っていると、ヘッダーの右上部分に電話番号や営業時間を入れて欲しいといった要望を受けることがあります。

クライアントにヒアリングしてみると、以下の画像のような要望が多いなと感じます。

【企業サイト制作でよくある要望】
・電話番号
・営業時間
・問い合わせフォーム

SWELLの機能だけでこのレイアウトを組むことはできません。

テンプレートファイルを編集する独自カスタマイズをしてしまうと、SWELLのアップデートで設定が消えてしまいます。

できればテンプレートファイルを編集せずにカスタマイズしたいですよね？

仕事でWebサイトを制作をしたさい、なんとか実装しました。その際の作業メモです。

この記事ではSWELLのテンプレートファイルを一切編集せずに、ヘッダの右上にに電話番号や問い合わせボタンを設置した方法をシェアします。

※プラグインは使いません。
※子テーマは必要ありません（あってもOK）。

【デモサイト】カスタマイズを実装したサイト

まずは今回紹介するカスタマイズを実装したデモサイトです。

・架空のIT会社
・架空のアウトドア用品メーカー
・架空の税理士事務所

上記デモサイトのヘッダー部分は、テーマファイルを一切編集していません。SWELLのアップデートがあっても、HTML構造が大きく変わらない限りはメンテしなくていいようにしています。

ヘッダー右上に電話番号を表示するカスタマイズ

クリーンインストールしたWordPressにSWELLの有効化をした状態から解説します。

SWELLの管理画面からちょっとした設定を行い、記事で紹介するサンプルコードを貼り付けるという流れになります。

更新履歴

※SWELLのバージョンアップがあっても使えるように、なるべく記事の内容を更新しています。

• 2023年11月更新：SWELL最新バージョン（2.8.1）に対応させました。

• 2023年5月更新：SWELL最新バージョン（2.7.5.1）に対応させました。

• 2023年1月更新：SWELL最新バージョン（2.7.2.1）に対応させました。

• 2022年8月更新：SWELL最新バージョン（2.6.7）に対応させました。

• 2022年7月更新：SWELL最新バージョン（2.6.5）に対応させました。