WordPressに電話番号を表示・クリック発信させる方法｜スマホ対応の設定手順
はじめに
WordPressで店舗サイトや会社サイトを運営している場合、電話番号の掲載は問い合わせ獲得に直結する重要な要素です。特にスマホからアクセスするユーザーにとって、電話番号を見つけたあとにそのままタップして発信できるかどうかは、問い合わせ率に大きく影響します。
ただし、WordPress上に電話番号をテキストとして入力しただけでは、必ずしもスマホでクリック発信できるとは限りません。ユーザーが電話番号をコピーしたり、手入力したりする必要があると、その時点で離脱につながる可能性があります。
この記事では、WordPressに電話番号を表示する方法から、スマホでタップして発信できる「telリンク」の設定手順、ヘッダー・フッター・サイドバーへの設置方法、デザイン上の工夫、うまく動かないときの対処法まで解説します。
1. WordPressで電話番号を表示・クリック発信させる基本
WordPressで電話番号を掲載する方法は、大きく分けて「電話番号を文字として表示する方法」と「電話番号をリンク化してクリック発信できるようにする方法」の2つがあります。
店舗サイト、美容室、整体院、士業、クリニック、工務店など、電話問い合わせが重要なサイトでは、単に電話番号を表示するだけでなく、スマホからすぐに発信できる状態にしておくことが大切です。
1-1. 電話番号を表示するだけではスマホで発信できない理由
WordPressの投稿や固定ページに「03-1234-5678」のように電話番号を入力すると、画面上には電話番号が表示されます。しかし、これはあくまで通常のテキストです。
一部のスマホブラウザでは電話番号を自動認識して発信リンクに変換する場合もありますが、すべての環境で同じように動作するわけではありません。テーマやブラウザ、端末の設定によっては、タップしても何も起きないことがあります。
そのため、確実にスマホで電話発信できるようにするには、電話番号に専用のリンクを設定する必要があります。
1-2. クリック発信に必要な「telリンク」とは
電話番号をタップして発信できるようにするには、「telリンク」を使います。telリンクとは、電話番号に対して設定するリンク形式のことで、通常のURLの代わりに「tel:」を使います。
例えば、次のように記述します。
HTML<a href="tel:0312345678">03-1234-5678</a>
ユーザーがこのリンクをスマホでタップすると、電話アプリが起動し、発信確認画面が表示されます。これにより、ユーザーは番号を入力する手間なく電話をかけられます。
表示上は「03-1234-5678」のように見やすく書き、リンク先には「tel:0312345678」のように半角数字で設定するのが基本です。
1-3. スマホ・PCでの表示や動作の違い
telリンクはスマホでは非常に便利ですが、PCでは環境によって動作が異なります。
スマホの場合、タップすると電話アプリが起動します。一方、PCの場合はSkype、FaceTime、Zoom Phoneなどの通話アプリが設定されていれば起動することがあります。通話アプリが設定されていないPCでは、クリックしても何も起きない、またはエラーのような表示になる場合もあります。
そのため、WordPressで電話番号を掲載する際は、スマホユーザーには発信ボタンとして分かりやすく表示し、PCユーザーには電話番号を確認しやすい形で表示する設計が理想です。
1-4. 電話番号リンクを設定すべき場所
電話番号リンクは、問い合わせにつながりやすい場所に設置することが重要です。
代表的な設置場所は、ヘッダー、フッター、問い合わせページ、会社概要ページ、店舗情報ページ、サイドバー、スマホ画面下部の固定ボタンなどです。
特にスマホでは、画面をスクロールしなくても電話ボタンが見える位置にあると、問い合わせのハードルが下がります。ただし、目立たせすぎるとユーザー体験を損なう場合もあるため、サイトの目的やデザインに合わせて配置を調整しましょう。
2. WordPressで電話番号をクリック発信させる設定手順
WordPressで電話番号をクリック発信させる方法は、使用しているエディターや設置場所によって異なります。ここでは、投稿・固定ページ、ブロックエディター、クラシックエディター、HTMLで直接記述する方法を順番に解説します。
2-1. 投稿・固定ページに電話番号リンクを設置する方法
投稿や固定ページに電話番号リンクを設置する場合は、電話番号の文字列にリンクを設定します。
まず、WordPressの管理画面から「投稿」または「固定ページ」を開きます。電話番号を表示したい箇所に「03-1234-5678」のように入力します。次に、その電話番号の文字を選択し、リンク設定ボタンをクリックします。
リンク先には通常のURLではなく、次のように入力します。
HTMLtel:0312345678
設定後、ページを更新してスマホで確認します。電話番号をタップしたときに発信確認画面が開けば設定完了です。
2-2. ブロックエディターでtelリンクを設定する方法
現在のWordPressでは、ブロックエディターを使っているサイトが多くあります。ブロックエディターでも、通常のリンク設定と同じ操作でtelリンクを設定できます。
段落ブロックやボタンブロックに電話番号を入力し、リンクアイコンをクリックします。リンク先に「tel:0312345678」のように入力して保存します。
ボタンブロックを使う場合は、ボタンのテキストを「電話で問い合わせる」や「03-1234-5678に電話する」とすると、ユーザーにとって分かりやすくなります。
スマホからの問い合わせを重視する場合は、単なるテキストリンクよりもボタン形式にしたほうがタップしやすく、視認性も高くなります。
2-3. クラシックエディターで電話番号リンクを設定する方法
クラシックエディターを使っている場合も、電話番号リンクの設定は簡単です。
本文内に電話番号を入力し、リンク化したい文字列を選択します。そのうえでリンク挿入ボタンをクリックし、URL欄に「tel:0312345678」と入力します。保存または更新すれば設定完了です。
ビジュアルエディターでうまく設定できない場合は、テキストエディターに切り替えてHTMLを直接確認するとよいでしょう。リンクが正しく設定されていれば、次のような記述になります。
HTML<a href="tel:0312345678">03-1234-5678</a>
2-4. HTMLで直接telリンクを記述する方法
テーマファイルやカスタムHTMLブロック、ウィジェットなどに直接記述する場合は、HTMLでtelリンクを作成します。
基本形は次の通りです。
HTML<a href="tel:0312345678">03-1234-5678</a>
「電話で問い合わせる」というテキストにリンクを設定する場合は、次のように記述します。
HTML<a href="tel:0312345678">電話で問い合わせる</a>
ボタン風にしたい場合は、classを付けてCSSでデザインします。
HTML<a class="tel-button" href="tel:0312345678">電話で問い合わせる</a>
HTMLを直接編集する場合は、記述ミスがあるとリンクが正常に動作しないため、保存後に必ずスマホでテストしましょう。
2-5. 電話番号の正しい書き方とリンク形式
電話番号の表示部分は、ユーザーが読みやすいようにハイフンを入れて問題ありません。
HTML03-1234-5678
一方で、リンク先のhref属性には、半角数字を使うのが基本です。
HTMLtel:0312345678
携帯電話番号の場合は、次のように設定します。
HTML<a href="tel:09012345678">090-1234-5678</a>
国際電話を想定する場合は、日本の国番号「+81」を使って記述することもあります。
HTML<a href="tel:+81312345678">+81-3-1234-5678</a>
日本国内向けの一般的なサイトであれば、まずは「tel:0312345678」のように市外局番から半角数字で設定すれば問題ありません。
3. ヘッダー・フッター・サイドバーに電話番号を表示する方法
電話番号は、問い合わせページだけでなく、サイト全体で目に入りやすい場所に設置すると効果的です。特にヘッダーやフッター、サイドバーは多くのページで共通表示されるため、電話問い合わせを増やしたい場合に適しています。
3-1. ヘッダーに電話番号を表示して問い合わせを増やす方法
ヘッダーは、ユーザーがサイトにアクセスして最初に目にする場所です。電話問い合わせを重視する業種では、ヘッダーに電話番号を表示することで、問い合わせまでの導線を短くできます。
テーマによっては、カスタマイザーからヘッダー上部に電話番号を設定できる場合があります。管理画面の「外観」から「カスタマイズ」を開き、ヘッダー設定やサイト基本情報、連絡先情報などの項目を確認しましょう。
テーマに電話番号入力欄がない場合は、ヘッダー用のウィジェットエリアやメニュー、テーマファイルにtelリンクを追加する方法があります。
ヘッダーに設置する場合は、電話番号だけでなく「受付時間」や「定休日」も一緒に表示すると、ユーザーが電話しやすくなります。
3-2. フッターに電話番号を設置する方法
フッターは、会社情報や店舗情報をまとめて掲載する場所として適しています。ページ下部まで読んだユーザーは、サービス内容に興味を持っている可能性が高いため、フッターに電話番号を設置しておくと問い合わせにつながりやすくなります。
WordPressの管理画面から「外観」→「ウィジェット」を開き、フッターエリアにカスタムHTMLや段落ブロックを追加します。そこに次のような電話番号リンクを入力します。
HTML<p>お電話でのお問い合わせ：<a href="tel:0312345678">03-1234-5678</a></p>
<p>受付時間：平日 9:00〜18:00</p>
フッターには、住所、会社名、営業時間、問い合わせフォームへのリンクもあわせて掲載すると、サイト全体の信頼感が高まります。
3-3. サイドバーやウィジェットに電話番号を表示する方法
ブログ記事やサービスページの横にサイドバーがあるテーマでは、サイドバーに電話番号を表示するのも効果的です。
管理画面の「外観」→「ウィジェット」から、サイドバーエリアにカスタムHTMLやブロックを追加します。電話番号、営業時間、簡単な案内文を入れると、記事を読んでいる途中のユーザーにも問い合わせを促せます。
例えば、次のような内容です。
HTML<div class="side-contact">
<p>お急ぎの方はお電話ください</p>
<p><a href="tel:0312345678">03-1234-5678</a></p>
<p>受付時間：平日 9:00〜18:00</p>
</div>
ただし、スマホ表示ではサイドバーが本文下に回り込むテーマも多いため、スマホで見たときの配置も必ず確認しましょう。
3-4. メニューに電話番号リンクを追加する方法
グローバルメニューやスマホメニューに電話番号リンクを追加することもできます。
管理画面の「外観」→「メニュー」を開き、「カスタムリンク」を追加します。URL欄に「tel:0312345678」、リンク文字列に「電話する」や「03-1234-5678」と入力してメニューに追加します。
スマホメニュー内に電話リンクがあると、ユーザーがメニューを開いた流れでそのまま問い合わせできます。特に店舗サイトや予約制サービスでは、「予約する」「電話する」「アクセス」などのメニューを分かりやすく並べると効果的です。
3-5. 固定電話ボタンをスマホ画面下部に表示する方法
スマホからの電話問い合わせを増やしたい場合は、画面下部に固定の電話ボタンを表示する方法があります。ユーザーがページをスクロールしても常に電話ボタンが表示されるため、問い合わせの機会を逃しにくくなります。
HTMLは次のように記述します。
HTML<a class="fixed-tel-button" href="tel:0312345678">電話で問い合わせる</a>
CSSの例は次の通りです。
CSS.fixed-tel-button {
display: none;
}
@media screen and (max-width: 768px) {
.fixed-tel-button {
display: block;
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
padding: 14px;
text-align: center;
border-radius: 8px;
background: #333;
color: #fff;
text-decoration: none;
z-index: 9999;
}
}
実際に使用する際は、サイトのデザインに合わせて色や余白を調整しましょう。また、画面下部に固定ボタンを置く場合は、本文やフッターの内容と重ならないよう注意が必要です。
4. 電話番号を見やすくデザインするスマホ対応の工夫
電話番号を掲載していても、見つけにくかったり、タップしにくかったりすると問い合わせにはつながりません。特にスマホでは画面が小さいため、電話番号の見せ方やボタンの大きさが重要です。
4-1. タップしやすいボタン型デザインにする方法
スマホユーザー向けには、電話番号をテキストリンクのまま表示するより、ボタン型にしたほうが分かりやすくなります。
例えば、次のようなHTMLを用意します。
HTML<a class="tel-button" href="tel:0312345678">電話で問い合わせる</a>
CSSでボタン風に整えます。
CSS.tel-button {
display: inline-block;
padding: 14px 24px;
border-radius: 6px;
background: #333;
color: #fff;
text-decoration: none;
font-weight: bold;
}
ボタンの文言は「電話する」だけでもよいですが、「無料相談を電話で予約する」「今すぐ電話で問い合わせる」など、行動が分かる言葉にするとクリックされやすくなります。
4-2. 電話番号と営業時間をセットで表示する
電話番号だけを表示すると、ユーザーは「今かけてもよいのか」「受付時間内なのか」を判断できないことがあります。電話問い合わせを増やしたい場合は、電話番号と営業時間をセットで表示しましょう。
例えば、次のように掲載します。
HTML<p>お電話でのお問い合わせ</p>
<p><a href="tel:0312345678">03-1234-5678</a></p>
<p>受付時間：平日 9:00〜18:00</p>
営業時間、定休日、折り返し対応の有無を明記しておくと、ユーザーが安心して電話できます。
4-3. CTAボタンとして電話番号を目立たせる
電話番号は、単なる連絡先ではなくCTAとして設計することが大切です。CTAとは、ユーザーに具体的な行動を促す要素のことです。
例えば、サービス紹介ページの末尾に「まずはお電話でご相談ください」という見出しを置き、その下に電話番号ボタンを設置すると、ページを読んだユーザーが次の行動に移りやすくなります。
電話番号ボタンの近くには、「相談無料」「当日予約可」「見積もり無料」など、電話するメリットを添えると効果的です。ただし、事実と異なる表現や過度な煽り文句は避けましょう。
4-4. PCでは通常表示、スマホでは発信ボタンにする方法
PCでは電話番号を確認できれば十分でも、スマホでは発信ボタンとして表示したい場合があります。その場合は、CSSのメディアクエリを使って表示を切り替えます。
例えば、PCでは通常の電話番号を表示し、スマホではボタン型にすることができます。
HTML<p class="tel-text">電話番号：03-1234-5678</p>
<a class="tel-sp-button" href="tel:0312345678">電話で問い合わせる</a>
CSS.tel-sp-button {
display: none;
}
@media screen and (max-width: 768px) {
.tel-text {
display: none;
}
.tel-sp-button {
display: block;
padding: 14px;
text-align: center;
border-radius: 6px;
background: #333;
color: #fff;
text-decoration: none;
}
}
このようにデバイスごとに表示を調整すると、PCとスマホそれぞれに適した導線を作れます。
4-5. 誤タップを防ぐ余白・文字サイズの考え方
スマホで電話番号リンクを設置する場合は、誤タップを防ぐための余白も重要です。電話ボタンの周囲に十分なスペースがないと、ユーザーが別のリンクを押してしまったり、意図せず電話発信画面を開いてしまったりすることがあります。
電話ボタンは、指で押しやすいサイズにし、上下左右に余白を持たせましょう。文字サイズも小さすぎると読みづらいため、本文より少し大きめに設定すると視認性が高まります。
また、固定ボタンを設置する場合は、ページ下部のメニューやCookieバナー、チャットボタンなどと重ならないように確認してください。
5. プラグインを使って電話番号を表示・発信させる方法
WordPressでは、プラグインを使って電話番号ボタンや固定表示ボタンを設置することもできます。HTMLやCSSの編集に不慣れな場合は、プラグインを使うことで比較的簡単に設定できます。
5-1. プラグインを使うメリット・デメリット
プラグインを使うメリットは、専門的なコードを書かなくても電話番号ボタンを設置できることです。管理画面から電話番号、表示位置、ボタンの色、表示条件などを設定できるものもあります。
一方で、プラグインを増やしすぎるとサイトの表示速度や管理性に影響する場合があります。また、長期間更新されていないプラグインは、WordPress本体やPHPのバージョンアップに対応できない可能性があります。
そのため、プラグインは便利ですが、本当に必要な場合に絞って導入することが大切です。
5-2. 電話発信ボタンを設置できるプラグインの選び方
電話発信ボタン用のプラグインを選ぶ際は、次の点を確認しましょう。
まず、現在のWordPressバージョンに対応しているかを確認します。次に、最終更新日が古すぎないか、利用者数や評価が極端に低くないかを見ます。
また、スマホだけに表示できるか、画面下部に固定表示できるか、デザインを調整できるかも重要です。日本向けのサイトで使う場合は、電話番号の表示形式や日本語表示に違和感がないかも確認しておきましょう。
5-3. 固定表示・追従ボタンに対応したプラグイン
スマホ画面下部に追従する電話ボタンを設置したい場合は、固定表示に対応したプラグインを選びます。追従ボタンとは、ユーザーがページをスクロールしても画面の下部や端に表示され続けるボタンのことです。
追従ボタンは問い合わせ導線として便利ですが、表示面積が大きすぎると本文が読みにくくなることがあります。特にスマホでは画面が小さいため、ボタンの高さや表示位置に注意しましょう。
電話ボタンだけでなく、問い合わせフォーム、LINE、予約ページなど複数のCTAを並べられるプラグインもあります。ただし、選択肢を増やしすぎるとユーザーが迷うこともあるため、目的に合わせて整理することが重要です。
5-4. プラグインを使わずに設定したほうがよいケース
電話番号リンクを1か所または数か所に設置するだけであれば、プラグインを使わずにHTMLやブロックエディターで設定したほうがシンプルです。
例えば、問い合わせページに電話番号リンクを追加するだけなら、telリンクを設定するだけで十分です。ヘッダーやフッターに電話番号を表示する場合も、テーマのカスタマイザーやウィジェットで対応できることが多くあります。
プラグインを使わないほうが、サイトの構成が軽くなり、不要なトラブルも避けやすくなります。
5-5. プラグイン導入時の注意点
プラグインを導入する前には、必ずバックアップを取っておきましょう。新しいプラグインを追加すると、テーマや既存プラグインと干渉する場合があります。
導入後は、スマホとPCの両方で表示を確認します。電話ボタンが正しく表示されているか、タップして発信画面が開くか、他のボタンやメニューと重なっていないかを確認してください。
また、使っていないプラグインは停止するだけでなく、不要であれば削除しましょう。管理するプラグインの数を減らすことで、セキュリティ面でも安心です。
6. 電話番号リンクがうまく動かないときの原因と対処法
WordPressで電話番号リンクを設定しても、うまく動かないことがあります。多くの場合、telリンクの記述ミスや、全角文字、テーマ・プラグインの影響が原因です。
6-1. 電話番号をタップしても発信画面が開かない
スマホで電話番号をタップしても発信画面が開かない場合は、まずリンクが正しく設定されているか確認しましょう。
見た目は電話番号でも、実際にはリンクが設定されていないことがあります。編集画面で電話番号を選択し、リンク先が「tel:0312345678」のようになっているか確認してください。
また、PCのプレビュー画面だけで確認している場合、スマホでの動作が分からないことがあります。必ず実機のスマホで確認することが重要です。
6-2. telリンクの記述ミスを確認する
telリンクでよくある記述ミスは、「tel:」が抜けているケースです。
誤った例は次の通りです。
HTML<a href="0312345678">03-1234-5678</a>
正しい例は次の通りです。
HTML<a href="tel:0312345678">03-1234-5678</a>
また、「tel：」のコロンが全角になっていると正しく動作しない場合があります。必ず半角の「:」を使いましょう。
6-3. 全角数字・ハイフン・スペースによる不具合
リンク先の電話番号に全角数字や不要なスペースが入っていると、端末によっては正常に認識されないことがあります。
例えば、次のような記述は避けたほうが安全です。
HTML<a href="tel:０３−１２３４−５６７８">03-1234-5678</a>
リンク先は、次のように半角数字で記述します。
HTML<a href="tel:0312345678">03-1234-5678</a>
表示部分にはハイフンを入れて問題ありませんが、href属性の中はできるだけシンプルにするのがおすすめです。
6-4. テーマやプラグインの影響を確認する
telリンクの記述が正しいのに動作しない場合は、テーマやプラグインの影響を確認します。
特に、リンクの動作を変更するプラグイン、セキュリティ系プラグイン、キャッシュ系プラグイン、ページビルダー系プラグインが影響している場合があります。
一時的にキャッシュを削除したり、別のブラウザで確認したりすると原因を切り分けやすくなります。テーマファイルを直接編集している場合は、HTML構造が崩れていないかも確認しましょう。
6-5. PCでクリックしたときの挙動を確認する
telリンクはスマホ向けの機能ですが、PCでもクリックできる状態になります。PCでクリックした場合、通話アプリが起動することもあれば、何も起きないこともあります。
これは必ずしも不具合ではありません。PCに電話発信用のアプリが設定されていない場合、telリンクが期待通りに動作しないことがあります。
そのため、PCでは電話番号を見やすく表示し、スマホでは発信ボタンとして使いやすくする設計が現実的です。
7. 電話番号を掲載するときのSEO・集客上のポイント
WordPressに電話番号を掲載することは、ユーザーの利便性だけでなく、サイトの信頼性や集客にも関係します。特に地域ビジネスでは、電話番号、住所、店舗名などの情報を正確に掲載することが重要です。
7-1. 電話番号の掲載がユーザーの安心感につながる理由
サイトに電話番号が掲載されていると、ユーザーは「実在する会社・店舗である」と感じやすくなります。問い合わせフォームだけのサイトよりも、電話番号が明記されているサイトのほうが安心感を与えやすい場合があります。
特に、高額なサービス、緊急性のあるサービス、初めて利用する店舗では、電話で直接確認できることが信頼につながります。
電話番号は単なる連絡手段ではなく、ユーザーの不安を減らす情報としても重要です。
7-2. 店舗・会社情報と電話番号を統一する
サイト内に複数のページがある場合、電話番号の表記を統一しましょう。あるページでは「03-1234-5678」、別のページでは「03 1234 5678」のように表記がバラバラだと、ユーザーが不安に感じることがあります。
会社名、住所、電話番号、営業時間などの基本情報は、サイト内で統一することが大切です。複数の場所に電話番号を掲載している場合は、変更時にすべての箇所を更新できるよう管理しておきましょう。
7-3. Googleビジネスプロフィールとの情報整合性
店舗や地域ビジネスの場合、WordPressサイトに掲載する電話番号とGoogleビジネスプロフィールの電話番号を一致させることが重要です。
Googleビジネスプロフィール、公式サイト、SNS、ポータルサイトなどで電話番号や住所が異なっていると、ユーザーが混乱します。特に店舗移転や電話番号変更の後は、各媒体の情報が古いまま残っていないか確認しましょう。
サイト内の情報と外部サービスの情報を揃えることで、ユーザーが安心して問い合わせしやすくなります。
7-4. 構造化データで電話番号を伝える方法
会社や店舗の情報を検索エンジンに分かりやすく伝える方法として、構造化データがあります。構造化データとは、サイト内の情報を検索エンジンが理解しやすい形式で記述するための仕組みです。
電話番号を含む組織情報や店舗情報を構造化データで記述すると、検索エンジンに会社名、住所、電話番号などを整理して伝えやすくなります。
ただし、構造化データを追加したからといって必ず検索順位が上がるわけではありません。まずは、サイト上に正確な電話番号や会社情報を掲載し、そのうえで必要に応じて構造化データを整備しましょう。
7-5. 電話問い合わせを増やす配置と導線設計
電話問い合わせを増やすには、電話番号をただ掲載するだけでなく、ユーザーが問い合わせしたくなるタイミングに配置することが大切です。
例えば、サービス内容を説明した直後、料金表の近く、よくある質問の下、実績紹介の後などは、ユーザーの関心が高まっている場所です。そこに電話ボタンを設置すると、自然な流れで問い合わせにつながります。
また、電話番号の近くには「相談無料」「予約受付中」「お急ぎの方はお電話ください」など、行動を後押しする文言を添えると効果的です。
8. WordPressの電話番号表示で注意すべきこと
WordPressに電話番号を掲載する際は、利便性だけでなく、運用面やリスクにも注意が必要です。電話番号を公開すると問い合わせが増える一方で、営業電話や迷惑電話が増える可能性もあります。
8-1. 個人情報・営業電話対策を考える
個人事業主や小規模事業者の場合、個人の携帯電話番号をそのまま公開するかどうかは慎重に判断しましょう。サイト上に電話番号を掲載すると、ユーザーだけでなく営業目的の連絡が来ることもあります。
必要に応じて、事業用の電話番号を用意したり、電話代行サービスを利用したりする方法もあります。問い合わせフォームや予約フォームと併用することで、電話対応の負担を減らすこともできます。
8-2. 営業時間外の問い合わせ対応を明記する
電話番号を掲載する際は、営業時間外の対応についても明記しておくと親切です。
例えば、「受付時間：平日 9:00〜18:00」「営業時間外は問い合わせフォームをご利用ください」「不在時は折り返しご連絡いたします」などの案内があると、ユーザーは安心して連絡できます。
営業時間外に電話がつながらない場合でも、別の問い合わせ手段を用意しておくことで機会損失を減らせます。
8-3. スマホ表示の確認を必ず行う
電話番号リンクを設定したら、必ずスマホで表示と動作を確認しましょう。PCの管理画面やプレビューでは問題なく見えても、スマホではボタンが小さすぎたり、他の要素と重なっていたりすることがあります。
確認すべきポイントは、電話番号が見やすいか、タップしやすいか、発信確認画面が開くか、固定ボタンが邪魔になっていないかなどです。
可能であれば、iPhoneとAndroidの両方で確認すると安心です。
8-4. 複数店舗・複数部署の電話番号を掲載する場合
複数店舗や複数部署の電話番号を掲載する場合は、どの番号にかければよいのか分かりやすく整理しましょう。
例えば、「東京店」「大阪店」「採用窓口」「お客様サポート」など、電話番号ごとに役割を明記します。ユーザーが迷わないように、表やカード形式で整理すると見やすくなります。
それぞれの電話番号にtelリンクを設定する場合は、リンク先の番号を間違えないよう注意してください。番号が多いほど入力ミスが起きやすいため、公開前の確認が重要です。
8-5. 電話番号変更時に確認すべき箇所
電話番号を変更した場合は、WordPressサイト内のすべての掲載箇所を確認する必要があります。
確認すべき場所は、ヘッダー、フッター、サイドバー、固定ページ、投稿記事、問い合わせページ、会社概要ページ、メニュー、固定ボタン、構造化データ、テーマファイル、ウィジェットなどです。
また、Googleビジネスプロフィール、SNS、外部ポータルサイト、広告のリンク先ページなども忘れずに更新しましょう。古い電話番号が残っていると、問い合わせの機会損失やユーザーの混乱につながります。
まとめ
WordPressで電話番号を表示するだけなら、投稿や固定ページに番号を入力するだけでも可能です。しかし、スマホからタップして発信できるようにするには、「telリンク」の設定が必要です。
基本の書き方は、次の通りです。
HTML<a href="tel:0312345678">03-1234-5678</a>
表示部分はユーザーが読みやすいようにハイフンを入れ、リンク先は半角数字でシンプルに記述すると安心です。
電話番号リンクは、問い合わせページだけでなく、ヘッダー、フッター、サイドバー、メニュー、スマホ画面下部の固定ボタンなどに設置できます。特にスマホユーザーを意識する場合は、タップしやすいボタン型デザインにし、営業時間や問い合わせ案内も一緒に表示しましょう。
また、電話番号がうまく動かない場合は、telリンクの記述ミス、全角文字、不要なスペース、テーマやプラグインの影響を確認してください。
WordPressの電話番号表示は、ユーザーの利便性を高めるだけでなく、信頼感や問い合わせ数にも関わる重要な設定です。サイトの目的に合わせて、見やすく、押しやすく、分かりやすい電話導線を整えましょう。