fbpx

売上を上げる集客ホームページ制作なら神奈川県藤沢市のソニド-SONIDO-

【今だけ無料】理想のお客さんをグイグイ引き寄せるホームページの秘訣

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

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

この記事を書いている人 - WRITER -
コンテンツマーケティング・集客ネタ・マーケティングネタなど不定期ですが更新しています! 楽しんで仕事ができる!全てはテストというマインド!をモットーに日々精進しております!!
詳しいプロフィールはこちら

Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /home/webstyleair/sonido.jp/public_html/wp-content/plugins/crayon-syntax-highlighter/util/crayon_util.class.php on line 73

WordPressのテーマでよくある悩みが、ヘッダー部分に電話番号が表示できない点があげられます。

電話番号を表示させることのできるWordPressのテーマって実は少ないんです。

というのも、WordPressはブログツールとして開発され、メディア構築の為に用いられています。

信頼関係を構築して、お問合わせという流れが一般的ですので、ヘッダー部分に電話番号を表示させるテーマが少ないように思えます。

電話番号表記ができるテーマはありますが、デメリットの方が目立ち、そのテーマを使うのはあきらめてしまうケースもあるでしょう。

その場合、使いたいテーマをカスタマイズするしかありません。
※テーマによっては複雑な仕様の為、カスタマイズが難しい場合があります。

今回は、WordPressテーマ「ストーク」を使ってPCサイトで電話番号を表示・スマホサイトで電話タップのアイコンを置く方法をご紹介します。

ご自身のテーマに置き換えて、カスタマイズするのにもお役に立てれれば幸いです。

 

 

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

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

PCで表示

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

スマホで表示

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

注意
必ず子テーマを作成してください。テーマの更新の際に電話番号が消えてしまいます。
ストークの子テーマに関してはこちらを参照

 

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

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

【PC版】
tel

【スマホ版】
sptel

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

 

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

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

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

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)を調整して自分好みの位置にしてあげましょう。

 

まとめ

WordPressのテーマ「ストーク」を例にヘッダーに電話番号を表示させる方法を紹介いたしました。

電話でのお問合わせを増やしたい場合は、是非試してみてください。

 

必ずスマホでタップして電話がかけられるかも確認しておいてくださいね。

もしかけれない場合は、手順2の電話番号が違うか、リンクがうまく設定できていないかも知れないので、コードを見直してみましょう。

 

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

参考までに。

 

集客力が10倍アップするホームぺージ
「ホームぺージを作ったのに集客につながらない」
と嘆いているあなたへ

このレポートでは、ホームぺージから成果を出すための原動力となった「ホームページ集客成功の最大の秘訣」について公開しています。例えば、、、

●なぜ、62.1%のホームページは集客できないのか?(これを知ると、ホームページはもちろん、ビジネスモデルの根本的な部分から考え直したくなるでしょう)
●ストップ!これを知る前に業者にホームページの制作を依頼してはいけません(制作業者が集客できるホームページが作れない最大の理由)
●独立しても仕事がなかった私が人生のどん底で見つけた、インターネットを使って集客を成功させるための”最大の秘訣”(これを知っただけでも、あなたのホームページ対する考え方は180度変わってしまうでしょう)
●「買ってください」とお願いするのはもうたくさん?だったら、この方法を使ってください。売り手と買い手の立場を逆転させる”ちょっとずる賢い方法”
●売れるホームページとトップセールスマンの”意外な共通点”。プラス、あなたのホームページを嫌われるセールスマンから売れるセールスマンにするために必ず知っておくべきこと…

などなど、36ページにわたって解説しています。

今なら、このレポートを読んでくれた人限定で「シークレット・プレゼント」をご用意しています。プレゼントの内容は読んでからのお楽しみですが、商品の割引とかクーポンとか、そういったオファーではありません。完全無料のプレゼントです。

きっと喜んでいただけると思いますが、実はかなり労力がかかる代物なので(笑)、正直に言って、いつまで続けられるかわかりません、、、

この記事を書いている人 - WRITER -
コンテンツマーケティング・集客ネタ・マーケティングネタなど不定期ですが更新しています! 楽しんで仕事ができる!全てはテストというマインド!をモットーに日々精進しております!!
詳しいプロフィールはこちら

- Comments -

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


「ホームページ集客成功の最大の秘訣」のレポートを
無料でプレゼント

集客力が10倍アップした!
ホームぺージ集客成功の7ステップ

あなたはホームページ集客でこんな間違いをしていませんか?
今すぐダウンロード
close-link
HP集客成功の7ステップ
ホームぺージ集客でこんな間違いをしていませんか?
無料ダウンロード
close-image

ホームページから
集客できない企業様へ

HPで集客力が10倍UP!

ホームページ集客
「成功の7ステップ」を
プレゼント!

あなたはホームページ集客で
こんな間違いをしていませんか?
無料でダウンロード
Terms and Conditions apply
close-link
Click Me