見出し画像

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


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

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

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


TCDテーマNANOのヘッダー右上に電話番号を付ける


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

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

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

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


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



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


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

パターン①

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

TCDテーマNANOのヘッダー右上に電話番号を付ける

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



パターン②

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

TCDテーマNANOのヘッダー右上に電話番号を付ける

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



パターン③

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

TCDテーマNANOのヘッダー右上に電話番号を付ける

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





【カスタマイズの概要】


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

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




【テーマのバージョン】

NANO :1.6.2

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



ここから先は

5,084字 / 11画像

¥ 4,980

この記事が気に入ったらサポートをしてみませんか?