WordPressでPC・スマホサイトのヘッダー右上に電話番号を表示させる方法【ストーク編】

WordPressでPC・スマホサイトの右上に電話番号を表示させる方法【ストーク編】

WordPressのテーマを使っている方でよくある悩みが、電話番号をヘッダー部分に表示させたいという点があげられます。

電話番号を表示させることのできるWordPressのテーマって実は少ないんです。というのも、WordPressはブログツールとして開発され、今ではメディア構築の為に用いられています。なので、信頼関係を構築して、お問合わせという流れを作りたいためヘッダー部分に電話番号というテーマが少ないように思えます。

もちろん、テーマによっては電話番号表記が既存でついているテーマはありますが、デメリットの方が目立ち、そのテーマを使うのはあきらめてしまいます。

なので、使いたいテーマでカスタマイズをするしかないケースがあります。
※テーマによっては複雑な仕様の為、カスタマイズが難しい場合もあると思っていてください。

今回は、WordPressテーマ「ストーク」を使ってPCサイトで電話番号を表示・スマホサイトで電話タップのアイコンを置く方法をお伝えします。
ご自身のテーマに置き換えて、カスタマイズするのにもお役に立てれれば幸いです。

結果どんな感じになるのかが気になりますよね。紹介します。
こんな感じ

ワードプレスPCヘッダーに電話番号

PCで表示

スマホ上部にお問合わせアイコン

スマホで表示

ではWordPressの「ストーク」でヘッダーに電話番号・電話アイコンを表示させる方法を紹介いたします。

注意
必ず子テーマを作成してください。テーマの更新の際にもとに戻ってしまいます。
ストークの子テーマに関してはこちらを参照

手順1:電話番号の画像を作成

まずは、PCサイト、スマホサイトで表示させる電話番号とアイコンを作成します。
今回の例ですと、PCサイトの場合幅は280px、スマホサイトのアイコンの幅は60pxで作成しています。

【PC版】
tel

【スマホ版】
sptel

こんな感じで画像を作成します。

手順2:画像をアップロード

メディア→新規追加で作成した画像をアップロードします。

アップロードした際に、画像のパスをメモしておいてください。

urlをメモ

このURLは次の手順で必要になるので、メモ帳などわかるところに保存しておいてください。
PCの画像とスマホの画像の二種類です。

手順2:header.phpにソースコードを記載

外観→テーマの編集→テーマヘッダー(header.php)を開く

ストーク テーマヘッダー

ここで、<?php if (!is_mobile()):?>の上に以下をコードを追記します。

手順2で保存したURLに変更してください。
電話番号も変更してください。

例)<img src=”PC用の画像のURL”>→<img src=”http://○○.com/wp-content/uploads/tel.jpg”>
例)<a href=”tel:0120-000-000←スマホでタップした時の電話番号を入力”>→<a href=”tel:0466-12-1234″>

この段階では、こんな感じ

 

CSS調整前

画像が表示されていることを確認しましょう。

ここで画像が表示されてない場合は、画像のパス(URL)が正しいか確かめましょう。

手順3:CSSで調整

外観→テーマ編集→スタイルシート(style.css)を開く

スタイルシートに下記を記述します。

これで、まずはプレビューして確認します。

あとは余白(padding・margin)を調整して自分好みの位置にしてあげましょう。

まとめ

いかがでしたか?
今回ワードプレスのテーマ「ストーク」を例にヘッダーに電話番号を表示させる方法を紹介いたしました。

スマホでタップして電話がかけられるかも確認しておいてくださいね。
もしかけれない場合は、手順2の電話番号が違うか、リンクがうまく設定できていないかも知れないので、コードを見直してみましょう。

 

ストークを購入する時に『電話番号を表示させることはできますか?』とたずねましたが、出来ないという事でしたので、自分なりにカスタマイズしてみました。

ご参考までに。

WordPressでPC・スマホサイトの右上に電話番号を表示させる方法【ストーク編】

売上UPの為のホームページに興味ある方、他にいませんか?

ホームページを作るということは、インターネット上にあなたの会社の営業マンを置くということです。もし、その目的でなければ、弊社は役不足かも知れません。

SONIDOはあなたの会社の優秀な営業マンを作ることで、あなた会社の売り上げ向上と集客安定化を使命としてやっています。
Googleの理念に基づき、競合他社と差別化するご提案をしております。

もしあなたが

  • ●ホームページから反応がないので、大変困っている
  • ●リニューアルしたいけど、今の制作会社に頼んでも良いのかどうか迷っている
  • ●ライバル店がホームページで売り上げがアップしたと聞いて内心焦っている
  • ●競合の会社よりも集客したいがどうすればいいのか分からない
  • ●ホームページを作りたいけれど、いくらかかるのか調べている
  • ●もっと安定した売り上げを出す仕組みがほしい

などでお悩みならSONIDOのサービスを一度見てみることをオススメします。

最初に結論をお話ししますと、これらの悩みを解決するのは、ご想像のとおり「集客」です。

SONIDOでは、あなたのホームページを制作し公開してから運用まで、バランス良く動かせていくノウハウを、出し惜しみすることなく提供していきます。

売上の不安を解消する3つの戦略を無料プレゼントします!

起業時・社長の不安の1要素は「売上げ」。
自動新規集客、単価UP、リピート化の戦略を知ることでどのように解決するのか?

・売上アップを望む方
・集客の方法が知りたい方
・マーケティングを勉強したい方

は今のうちにゲットしておいてください!

目次を紹介します。

新規顧客の集客を自動化する戦略

1.お客さんの悩み、欲望に響く、集客力が強い商品を準備する
・・・4P
2.お客さんの心に響く、集客できる反応率の良いメッセージをつくる
・・・5P
3.お客さんが目にするメディアにメッセージを載せる
・・・11P

何度も買ってもらう戦略

4.お客さんに忘れられないように継続的にフォローする
・・・14P
5.お客さんが飽きないような工夫をする
・・・15P
6.お客さんが卒業しない工夫をする
・・・15P

単価UPの戦略

7.バックエンド(利益商品)をつくる
・・・17P
8.アップセル・・・より高い価格の商品を薦める
・・・19P
9.ダウンセル・・・グレードダウンした低価格商品を用意しておく
・・・19P
10.クロスセル・・・購入を決定した顧客に対し、関連商品を薦める
・・・20P
11.コントラスト効果・・・対比の中で「安い」と感じる心理効果をつくる
・・・21P

コメントを残す

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