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・スマホサイトの右上に電話番号を表示させる方法【ストーク編】

WEB制作会社が知らなかった、ホームページ集客の成功技術をプレゼント!!

約10年間ホームページ制作会社で働き、失敗と成功を経験し 3年以上のホームページでの集客をコンサルティングして結果を出してきた 5年後も安定した収入を作り出せる「ホームページ集客の仕組みづくり」 是非この機会にダウンロードして、あなたのホームページの集客に役立ててください。 もしあなたが
  • ●ホームページ集客を夢で終わらせない戦略
  • ●星の数ほどある中から選んでもらう方法
  • ●ホームページが集客効果を上げるコツ
  • ●ホームページ集客で失敗するポイント
  • ●ホームページ集客を成功へ導くポイント
など、77ページにわたって解説しています。 また内容はホームページ制作会社が知らなかったことや教えてくれないことでもあります。

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

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

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

もしあなたが

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

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

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

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

コメントを残す

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