Cocoonをコーポレートサイトっぽくカスタマイズ!⑦おまけ:ヘッダに電話番号編

Cocoonをコーポレートサイトっぽくカスタマイズ WORDPRESS
スポンサーリンク

誰得コンテンツ、「Cocoonをコーポレートサイトっぽくカスタマイズ!」、前回の「おまけ編」で終わりと思ったのですが、「ヘッダに電話番号表示したい…!」と思ったのでまた追加することにしました。

1回目「トップページ編」、2回目「メニュー編」、3回目「料金表編」、4回目「よくある質問編」、5回目「まとめ編」、「おまけ:新着情報編」とサンプルサイトはこちら。

 

サンプルサイトです。

 

Cocoonのヘッダに電話番号を表示させる

header.phpを編集するのが一般的なやり方なんでしょうけど、今回はメニュー(グローバルナビゲーション)を使用して表示させます。
こんな感じで。

Cocoonのヘッダに電話番号を表示させる

 

「とりあえず表示だけしたい!」といった場合にはいいのかなと。

PCで見た場合にはリンクは動かず、スマホで見た場合は電話番号部分がタップできます。

 

「外観」「メニュー」でカスタムリンクを作成

「外観」「メニュー」でカスタムリンクを作成します。
URLは後で変更するので「http://a」にしておき、リンク文字列には電話のアイコンと電話番号を入れました。
「外観」「メニュー」でカスタムリンクを作成

営業時間などを入れておきたいので、WordPress画面上部の「表示オプション▼」で「説明」にチェックを入れます。

表示オプションで「説明」を表示

「URL」に「tel:0399999999」と入れて、こんなかんじにしておきます。

「外観」「メニュー」でカスタムリンクを作成

 

functions.phpで「PCの場合はリンクなし」「スマホの場合は電話がかかる」ようにする

functions.phpに「PCの場合はリンクなし」「スマホの場合は電話がかかる」設定をします。
こちらのサイトの「PHPを使う方法(端末の種類で切り替え)」を参考にしました。

 

 

CSSで見た目を整える

このままだと見た目がナビゲーションと同じなので、スタイルシートでちょっと変えます。

Chromeのデベロッパーツールなどで電話番号の部分のIDを調べます。

デベロッパーツールなどでCSSのIDを調べる

このサイトの場合は電話番号部分は「menu-item-166」というIDを持っています。

背景を濃いグレーに、余白を小さくするため、下のように書いておきました。

#menu-item-166 { background-color: #666; }
#navi .navi-in>ul>li#menu-item-166>a { padding: 0; }

こんなふうになりましたでしょうか。

Cocoonのヘッダに電話番号を表示させる

ヘッダに電話番号編 まとめ

これでPCだと電話番号表示のみ、スマホだとタップが出来るメニューが出来たかと思います。
とりあえずヘッダ(ナビだけど)に電話番号を表示するだけなら、これが簡単な方法かと思います。

コメント

タイトルとURLをコピーしました