Ver1.3.2をリリースしました(1/27)

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

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

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

コメントを残す

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