【TCD】NANOのヘッダー右上に電話番号と問い合わせリンクを設置するカスタマイズ

WordPressテーマ「NANO」のカスタマイズメモです。

NANOはTCDテーマの中でコーポレート系向けのデザインテンプレートとして販売されているテーマです。

せっかくコーポレートサイトを作るなら、ヘッダー右上に電話番号や営業時間、問い合わせフォームへのリンクを設置したいって思いませんか？

「ヘッダーの目立つところに電話番号と問い合わせボタンを設置して欲しい」とクライアントから相談されることがよくあります。

Web制作の実務経験者とすると、ヘッダーに電話番号を表示させることはコーポレートサイトにとって必須レベル。

NANOでもヘッダーの右上に電話番号を付ける方法がないか調べたんですが、TCDテーマオプション経由での設定は不可能でした。

テンプレートファイルを直接編集する方法もありますが、、テーマのアップデートで設定が上書きされてしまいます。子テーマ化するのも、ちょっと面倒。。。

WordPressサイトの運用上、テンプレートファイルは直接編集しないほうが良いので、テンプレートファイルを編集しないで電話番号と問い合わせフォームを表示させる方法を見つけて実装してみました。

【カスタマイズパターン】

NANOのヘッダー右上に、電話番号と問い合わせボタンを設置したカスタマイズを3パターン作ってみました。

パターン①

「電話番号」＋「問い合わせボタン」の構成↓

※サイトURL：https://webrent.xsrv.jp/demo/nano01/

パターン②

「電話番号」＋「問い合わせボタン×2」の構成↓

※サイトURL：https://webrent.xsrv.jp/demo/nano02/

パターン③

「問い合わせボタン×2」の構成↓

※サイトURL：https://webrent.xsrv.jp/demo/nano03/

【カスタマイズの概要】

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

TCDテーマオプションで、ヘッダーの検索ボタンと言語リンクを非表示にした後、空いたスペースに電話番号と問い合わせボタンを設置しています。

【テーマのバージョン】

NANO ：1.6.2

本記事執筆時に利用可能な最新バージョンです。