1.8.6 Released !

SANGOでヘッダー右上に電話番号を表示する方法

v1.8からの注意点

SANGO バージョン1.8から、スマホのヘッダーに検索ボタンが表示されるようになりました。検索ボタンと電話番号は併用できないため、このカスタマイズを行う際には、外観⇒カスタマイズ⇒詳細設定の「モバイルのヘッダー検索ボタンを非表示にする」にチェックを入れるようにしてください。

SANGOで「ヘッダーの右上に電話番号などを載せたい」ということもあるかと思います。このページでは、そのカスタマイズの仕方を解説します。

カスタマイズ後のイメージ

TEL番号 PC表示の画像

  モバイルの場合

上のように、閲覧端末の画面サイズが768px以上の場合には、電話アイコンと電話番号が表示され、767px以下の場合には、電話のアイコンのみが使用されるようになっています。リンクで電話番号を指定することで、スマホからアイコンをタップすると、直接電話をかけることができるという仕様です。

事前準備

子テーマ

ここでは、子テーマを使ってのカスタマイズ方法を紹介します。導入方法は次の記事を参考にしてください。

WordPressの子テーマとは?安全にカスタマイズを行う方法

FTPソフト

FTPソフトがないとこのカスタマイズは出来ません。

【FileZillaの使い方】WordPressでFTPソフトを使おう
【FileZillaの使い方】WordPressでFTPソフトを使おう

バックアップ

いざというときのために必ずバックアップは取っておきましょう。

WordPressでバックアップを取る4つの方法(初心者向け)
WordPressでバックアップを取る4つの方法(初心者向け)

カスタマイズ手順

手順1:header.phpを子テーマに複製

FileZillaなどを使って、親テーマのheader.phpを子テーマ内に複製します。この時点では、ファイル名も、内容も全く同じにしましょう。これで、子テーマのheader.phpが読み込まれて表示されるようになります。

手順2:子テーマのheader.phpにHTMLコードを追加

複製された子テーマのheader.phpを開き、70行目あたりの</header>を見つけます。このコードのすぐ上に、以下のコードを貼り付けます。

header.php
<a class="sng-tel dfont" href="tel:000000000"><i class="fa fa-phone"></i> <span>000-0000-0000</span></a>

↑「000-0000-0000」という文字列がパソコンなどで表示される電話番号になります。「tel:00000000000」の部分がアイコンをタップしたときに繋がる電話番号のリンクです(こちらはハイフンなしで)。それぞれ電話番号に書き換えましょう。

手順3:専用のCSSを追加

次に、子テーマのstyle.cssに以下のCSSをまるっとコピペします。

style.css
/*ヘッダーにTEL番号*/
.sng-tel {
    position: absolute;
    right: 8px;
    top: 11px;
    color: #FFF;/*文字色*/
    letter-spacing: .5px;
    font-size: 24px;
}
.sng-tel span {
	 display: none;
}
@media only screen and (min-width: 768px) {
  .sng-tel { 
	 top: 6px;
	 right: 15px;
  }
  .sng-tel:hover {
	text-decoration: none;
	 opacity: .5;
  }
  .sng-tel span {
	 display: inline;
	 vertical-align: middle;
	 font-size: 20px;
  }
  .sng-tel .fa {
	 vertical-align: middle;
  }
}
/*END ヘッダーにTEL番号*/

ブラウザのキャッシュを削除してカスタマイズ完了!

これでカスタマイズは完了です。キャッシュを削除して、確認してみてください。

11 COMMENTS

toto 2019/02/06

いつもありがとうございます。
子テーマのheader.phpに追記した後、style.cssに追記しようと思ったのですが公開をクリックすると「何かうまくいかなようです」などと出て、エラーが発生して公開ができません。
追記した部分を削除すると問題なく公開できるのでインターネットの接続状況が悪いというわけではないようです。
解消法をお教えいただけないでしょうか。

回答を見る
2019/01/03

お世話になります。
スマホでのヘッダー右の電話アイコンの下にTELとかの文字を表示したいのですがどのようにすればよいのでしょか?
お手数おかけしますがよろしくお願いいたします。

回答を見る
sin 2018/11/03

はじめまして!電話番号の右上表示の設定をしたところ、PCとiPhone6sではそれぞれ正常に表示されるのですが、iPhone8+の画面だとアイコン表示が左下に回り込んでしまいます。ついでに番号も青字で表示されてしまい、なんとも見づらくなってしまいます。
どうすれば治りますか?お願い致します。

回答を見る
kakyo 2018/06/15

いつもありがとうございます。
カスタマイズしたところ、スマホ表示の受話器アイコンの位置を調整したいのですが子テーマstyle.cssのどの部分を変更すれば変更できますでしょうか?
よろしくお願いいたします。

回答を見る
とらきち 2018/05/21

いつもありがとうございます、SANGOテーマに満足しながら制作を進めております。

本記事の通りに子テーマの方にheader.phpとstyle.cssへの追記をしたつもりなのですが、「常に電話番号表示がされない」状態になってしまいます。
ファーストビュー時(更新時の一瞬)はPC右上にふわっと表示されるのですが、常に表示されない、幅を変えてもアイコン表示されない状態です。

ソースを見るとたしかに記述した電話番号が表示されているのですが…
解消法をご教示いただけないでしょうか。

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン