【Cocoon】ヘッダー右上に電話番号＋問い合わせボタンを設置するカスタマイズ方法

SWELLマニアの、かんた（@swell_mania）です。

Web制作の仕事でWordPressテーマCocoonのヘッダーの右上に「電話番号」と、「問い合わせフォームページへのボタン」を設置するカスタマイズをしました。

【デモページ】
カスタマイズを実装したデモサイトです↓

URL：https://webrent.xsrv.jp/demo/co01/

コーポレート系のWebサイトだと定番のヘッダー構成ですが、Cocconの管理機能だけでは設定できません。

【テンプレートファイル編集不要。運用面で安心のカスタマイズ】

テンプレートファイルを編集してしまうと、テーマのアップデートで設定が消えます。

デモサイトはテーマのアップデートでも設定が消えないよう、フックとCSSの追加だけでヘッダーの右上に電話番号、営業時間、問い合わせフォームへのリンクボタンを表示させました。

＜ポイント＞

• フックでのカスタマイズ

• プラグインは不必要

【Cocoonのバージョン】

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

【本記事の内容】

Cocoonのヘッダー右上に「電話番号を表示させたい!」「問い合わせフォームへのリンクを設置したい」

↑こんな作業依頼が再び来た時に、「コピペで作業できるレベルのメモを残しておこう」と思い、この記事を執筆しました。

デモサイトで実際に使った「フックのコード」「CSSのコード」をコピペできる状態にしています。