誰得コンテンツ、「Cocoonをコーポレートサイトっぽくカスタマイズ！」、前回の「おまけ編」で終わりと思ったのですが、「ヘッダに電話番号表示したい…！」と思ったのでまた追加することにしました。
※こちらクラシックエディタ向けの記事になります。
1回目「トップページ編」、2回目「メニュー編」、3回目「料金表編」、4回目「よくある質問編」、5回目「まとめ編」、「おまけ：新着情報編」とサンプルサイトはこちら。
サンプルサイトです。
スクロールアニメーションについてはコチラの記事で書いてます。
Cocoonのヘッダに電話番号を表示させる
header.phpを編集するのが一般的なやり方なんでしょうけど、今回はメニュー（グローバルナビゲーション）を使用して表示させます。
こんな感じで。
「とりあえず表示だけしたい！」といった場合にはいいのかなと。
PCで見た場合にはリンクは動かず、スマホで見た場合は電話番号部分がタップできます。
「外観」「メニュー」でカスタムリンクを作成
「外観」「メニュー」でカスタムリンクを作成します。
URLは後で変更するので「http://a」にしておき、リンク文字列には電話のアイコンと電話番号を入れました。
営業時間などを入れておきたいので、WordPress画面上部の「表示オプション▼」で「説明」にチェックを入れます。
「URL」に「tel:0399999999」と入れて、こんなかんじにしておきます。
functions.phpで「PCの場合はリンクなし」「スマホの場合は電話がかかる」ようにする
functions.phpに「PCの場合はリンクなし」「スマホの場合は電話がかかる」設定をします。
こちらのサイトの「PHPを使う方法（端末の種類で切り替え）」を参考にしました。
CSSで見た目を整える
このままだと見た目がナビゲーションと同じなので、スタイルシートでちょっと変えます。
Chromeのデベロッパーツールなどで電話番号の部分のIDを調べます。
このサイトの場合は電話番号部分は「menu-item-166」というIDを持っています。
背景を濃いグレーに、余白を小さくするため、下のように書いておきました。
#menu-item-166 { background-color: #666; }
#navi .navi-in>ul>li#menu-item-166>a { padding: 0; }
こんなふうになりましたでしょうか。
ヘッダに電話番号編 まとめ
これでPCだと電話番号表示のみ、スマホだとタップが出来るメニューが出来たかと思います。
とりあえずヘッダ（ナビだけど）に電話番号を表示するだけなら、これが簡単な方法かと思います。
コメント