SWELLのヘッダーの右上に電話番号やボタンを設置する方法を解説します。
ヘッダーの右側に電話番号や資料請求のボタン、歯医者や整体院の場合は受診時間と曜日の一覧表を表示させたいというのがコーポレートサイトを作る時に要望として出てくる可能性が非常に高いです。
無料WordPressテーマのCocoonでもヘッダーの右上に電話番号を実装する方法の質問があります。
実際に私自身もマッサージ屋さんのサイト作成をお願いされて作る時に電話番号と曜日毎の営業時間を表示させて欲しいとお願いをされました。
そして、やり方を調べたら既にある機能で簡単に出来たのでご紹介します。
簡単にやり方の概略を説明するとウィジェットのヘッダー内部に設置します。
電話番号だけならウィジェットのヘッダー内部に配置するだけで実現可能です。
電話番号とボタンの２つ以上設置したい場合はブログパーツを２カラムや３カラムで作成しショートコードをウィジェットのヘッダー内部にカスタムHTMLウィジェットに入力すれば実現できます。
電話番号やボタン１つ配置する
まずはSWELLのヘッダーの右上に電話番号やボタン１つを配置する方法を紹介します。
ブログパーツを新規作成します。
ボタンを配置したり電話番号を入力したら適当なタイトルを付けて保存。
外観⇒ウィジェットに行きカスタムHTMLをヘッダー内部に配置します。
カスタムHTMLをドラッグアンドドロップもしくはウィジェットを追加をクリックすれば追加できます。
作成したブログパーツのショートコードをカスタムHTMLに入力。
こんな感じでボタンを配置する事ができます。
下記のように電話アイコンのショートコードと電話番号を入力すれば電話番号を表示させる事も可能です。
リンク先を「tel:電話番号」にすればクリックすれば電話をかける事ができるようになります。
<a href=”tel:012012345678″> 0120-1234-5678</a>
電話番号とボタンの２つ配置する
電話番号とボタンの２つ配置する場合はブログパーツ作成時にリッチカラムブロックかカラムブロックを使って２カラムで配置します。
電話番号は文字列だと勝手に改行されてしまうので画像にした方が良いでしょう。
まとめ
SWELLのヘッダー内部ウィジェットを使用すればヘッダーの右側に電話番号や資料請求のボタンを簡単に設置する事が可能です。
コメント