ワードプレス 電話番号 リンクの追加方法｜クリックで電話できるボタンを設置しよう

消費者の63パーセントがモバイルデバイスで商品やサービスの情報を探すことを好むため、あなたのサイトがスマートフォンの画面で閲覧されている可能性は非常に高いといえます。しかも、こうした消費者の多くは急いでおり、今すぐ連絡を取りたいと考えています。問い合わせまでのステップが増えるほど、訪問者が諦めて競合他社に流れてしまうリスクも高まります。

サイト上にプレーンテキストで電話番号を記載するだけでは、余計なステップが生まれます。訪問者は番号をメモし、サイトを離れ、電話アプリを開いて番号を入力しなければなりません。クリックトゥコール（タップで発信）ボタンがあれば、これらすべてをワンタップの操作に置き換えることができます。

WordPressでは、ブロックエディタを使って任意のボタンを電話番号リンクに変換し、タップするだけで発信できるボタンを作成できます。ただし、訪問者がスクロールしても画面上に固定表示され、サイト全ページに表示されるフローティング通話ボタンの機能は標準では用意されていません。

サイトに通話ボタンを設置する方法は2つあります。1つ目は、Gutenbergのネイティブボタンを作成し、リンク先を「tel:」URLに設定する方法です。この方法は機能しますが、配置した場所にのみ表示されます。2つ目は、無料のホスティング型ウィジェットを使用する方法で、ページ上にフローティング表示され、訪問者のスクロールに追従します。

地域密着型のビジネスオーナー、フリーランサー、またはWordPressフォームに精通した方で、ワードプレス 電話番号 リンク（クリックトゥコールボタン）を追加したいとお考えなら、このガイドで両方の方法を解説しています。コード不要で実現できるため、WordPressの使い方を学び始めるのにも最適です。

方法1：Gutenbergのネイティブボタンを手動で作成する

プラグインや外部ツールを使わずに、Gutenbergのボタンブロックと「tel:」リンクを使って、WordPressでクリック可能な電話番号リンクを作成できます。WordPress上では通常のリンクとして扱われますが、URLが「https:」ではなく「tel:」で始まるため、スマートフォンでタップすると訪問者の電話アプリが起動し、あなたの番号が自動的に入力された状態になります。

Gutenbergリンクを使ってwordpress 電話番号 リンク（クリックトゥコールボタン）を設定する手順は以下のとおりです。

1. 編集したいページまたは投稿を開き、プラスアイコンをクリックしてボタンを検索し、選択します。ボタンの中をクリックして、「今すぐ電話する」などのテキストを入力します。

2. ボタンを選択した状態で、リンクアイコンをクリックするかCmd+Kを押し、「tel:」に続けてスペースやハイフンなしで電話番号を入力します（例：「tel:15555551212」）。国際電話番号の場合は、プラス記号と国番号を含めます（例：「tel:+442079460192」）。Enterを押して適用します。

3. ブロック設定サイドバーを使って、塗りつぶしまたはアウトラインのスタイルを選択し、色を設定し、角丸（ボーダーラディウス）を調整します。幅を100パーセントに設定するのがおすすめです。フルワイドのボタンは親指でタップしやすくなります。右上の保存をクリックしたら、スマートフォンでページを開いてボタンをタップし、正しく発信されることを確認しましょう。

この方法で作成されるのは、特定のページの配置した場所にのみ存在する静的なボタンです。長いページの途中まで読み進めた訪問者は、すでにボタンをスクロールで通り過ぎてしまっており、使うには上までスクロールし直す必要があります。サイトエディタでフッターテンプレートにボタンを追加すれば、各ページに手動で設置する手間は省けます。しかし、フッターに配置したボタンでも、ユーザーはページの一番下までスクロールしなければクリックできません。

今すぐ電話したいと思っている訪問者にとって、探さなければ見つからないボタンは使われにくいボタンです。

方法2：無料のフローティング クリックトゥコール ウィジェットを追加する（推奨）

WordPressにフローティング電話ボタンを設置してコンバージョンを向上させたいなら、ホスティング型ウィジェットが最もスマートな解決策です。おすすめのWordPressプラグインでも実現できますが、ボタン1つのためにプラグインを追加でインストール・管理・更新する必要があります。Jotformのクリックトゥコール ウィジェットのような無料ホスティング型ウィジェットなら、ボタンがページ上にフローティング表示されるため、お客様がスクロールしても常に見える状態を保てます。

ウィジェットが生成する埋め込みコードをコピーし、WordPressのフッターにあるカスタムHTMLブロックに貼り付けるだけで、サイト全ページにレスポンシブなフローティングボタンを追加できます。これにより、長いページの途中にいる訪問者も、上までスクロールし直すことなくボタンをタップして発信できます。

WordPressにワードプレス 電話番号 リンク（クリックトゥコールボタン）を追加する方法は以下のとおりです。

1. Jotformのワークスペースページで作成をクリックし、ウェブサイトウィジェットを選択して「Click to Call」と検索し、ウィジェットを使用をクリックします。

2. 国番号付きの電話番号を入力し、アイコンの横にテキストを表示したい場合は「今すぐ電話する」などのラベルを追加します。次に、ボタンのスタイルを設定し、画面の下端および側面からの表示位置を調整します。モバイルのみに表示する設定も可能で、タップで発信する可能性が最も高い訪問者に向けて優先的に表示できます。

3. 公開をクリックし、埋め込みコードをコピーします。

4. WordPressの管理画面に移動します。1つのページにのみボタンを追加する場合は、そのページをブロックエディタで開き、ボタンを表示したい位置でプラスアイコンをクリックし、カスタムHTMLを選択してHTMLを編集をクリックします。コードを貼り付けたら、更新をクリックします。

5. すべてのページに追加する場合は、エディタを閉じてダッシュボードのサイドバーから外観に移動します。エディターを選択し、フッターテンプレートを開いてカスタムHTMLブロックを追加し、コードを貼り付けて更新をクリックします。

この方法なら、プラグインを一切インストールすることなく、見た目を完全にコントロールできます。色、サイズ、形状をテーマに合わせて設定し、画面上のボタン表示位置を選び、表示するデバイスを指定する——これらすべてをウィジェットビルダーから行えます。

スマートなサーバーレスウィジェットでWordPressサイトを強化する

電話ボタンは、機能ごとに専用プラグインを使わずにWordPressサイトへ追加できる機能のひとつにすぎません。Jotformの無料ウェブサイトウィジェットディレクトリには150種類以上のオプションが用意されており、たとえば以下のようなものがあります。

• WhatsAppチャットボタン — 電話よりもメッセージを好むお客様向けで、会話が不要な質問に適しています
• カウントダウンタイマー — プロモーションや予約の締め切りを表示し、訪問者に残り時間を知らせます
• トップに戻るボタン — 長いサービスページ向けで、モバイルでもナビゲーションをすぐ使える状態に保ちます

いずれも電話ボタンと同様にカスタムHTMLブロックで埋め込めるため、サイトに新しい機能を追加するたびにプラグインをインストール・更新する必要がありません。

ビジネスオーナーとして、小さな機能ひとつのためにプラグインを管理するよりも、お客様からの電話に対応する方がはるかに有意義です。Jotformのクリックトゥコール ウィジェットのような無料ツールを使えば、モバイルユーザーが電話したいと思ったまさにその瞬間にリードを獲得できます。今すぐ無料でお試しください。