Ver1.4.1をリリースしました(5/19)

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

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番号*/

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

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

5 Comments

とらきち

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

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

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

返信する
サルワカくん

貼り付ける位置が誤っているようです。記事に記載のある通り、

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

は、</header>のすぐ上に配置してください。

返信する
とらきち

誤って16行目辺りのすぐ上に貼っていました。70行目ほどのに配置し直して上手くいきました。どうもありがとうございました。

返信する
kakyo

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

返信する
サルワカくん

貼り付けたCSSの下記の部分で調整できます。

.sng-tel {
    right: 8px;/*右端からの距離*/
    top: 11px;/*上からの距離*/
/*その他省略*/
}

それから、PCで見たときにヘッダーメニューと電話番号がかぶってしまっているようなので
外観⇒カスタマイズ⇒サイト基本情報⇒「大画面表示時にもロゴを中央寄せ」にチェック
とすると良いかと思います。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です