WordPressを追加する方法クリックしてあなたのウェブサイトのボタンを呼び出す

ここHeroThemesでは、サイトの訪問者があなたに助けを求める必要がないように、高品質のWordPressナレッジベーステーマとプラグインの作成に多大な努力を払っています。

ただし、人々は依然として電話によるサポートを必要としています。また、Webサイトの訪問者が簡単に電話をかけられるようにするために、サポート以外の理由もたくさんあります。

しかし、人々がモバイルデバイスでブラウジングしているとき、あなたがしたい最後のことは、彼らにあなたの電話番号を自分で入力させるか、またはいくつかの小さな電話番号をクリックしてみなければならないことです。 代わりに、クリックして呼び出すボタンを使用すると、はるかに優れたオプションになります。

この投稿では、いくつかの単純な無料プラグインまたは独自のHTMLの両方を使用して、WordPressのクリックして呼び出す機能をWebサイトに追加する方法を紹介します。 技術的な知識レベルに関係なく、フォローして見栄えの良いクリックして呼び出すボタンを作成できます。

プラグインまたはHTMLを呼び出すためにクリックを使用する必要がありますか？

プラグインを使用するのが、見栄えのするものを作成する最も簡単な方法です。 したがって、すぐに「機能する」ものが必要な場合は、プラグインルートを使用するのが適切な理由です。 ただし、プラグインがサポートする場所にのみ呼び出しボタンを表示するように制限されます。

Click to Callボタンをサイトのどこにでも追加できるようにしたい場合、または別のプラグインを使用したくない場合は、独自のHTMLを使用してClick to Call機能を追加するのは、ハイパーリンクを挿入するのとほぼ同じです。かなりユーザーフレンドリーなアプローチ。 ただし、見栄えを良くするために、基本的なカスタムCSSを追加する必要があるかもしれません。これは覚えておくべきことです。

このガイドでは、両方の方法を紹介します。 プラグインルートから始めましょう…

アプローチ1：無料のWordPressクリックを使用してボタンプラグインを呼び出す

プラグインを呼び出すためのいくつかの異なるWordPressクリックがありますが、そのうちの3つだけのステップバイステップガイドを紹介します。

• 本当にシンプルなClickTo Callバー–スタンドアロンのボタンを追加するのではなく、このプラグインはモバイル訪問者の画面の下部にバー全体を追加します。 人々があなたに電話をかけるのを本当に明白/簡単にしたいのなら、これは良いオプションです。
• 今すぐ呼び出すボタン–上記のプラグインのような完全なバーに加えて、このプラグインでは、フローティングアクションボタンスタイルの呼び出しボタンをさらに使用することもできます。
• 今すぐ呼び出すボタンUltimate–このプラグインは、同じ呼び出しを今すぐ下のバーに追加します。 しかし、ユニークな点は、電話で対応できる場合の「営業時間」を設定できることです。 営業時間外は、ボタンは訪問者に電話ではなく電子メールを送信するように促します。

本当にシンプルなクリックしてバープラグインチュートリアルを呼び出す

このプラグインは無料でWordPress.orgから入手できるため、 [プラグイン]→[新規追加]に移動して、WordPressダッシュボードから直接インストールできます。

プラグインをインストールしてアクティブ化したら、 [設定]→[本当に簡単]に移動して、プラグインを構成します。 そこで、次のことができます。

• クリックして呼び出すボタン機能を有効にする
• 通話ボタンの横にテキストCTAを追加する
• 訪問者が呼び出す電話番号を選択します
• Click toCallボタンで使用する色を設定します

次に、変更を保存してボタンを有効にします。 このボタンはモバイル訪問者にのみ表示されるため、デスクトップコンピューターから閲覧している場合は表示されません。

モバイルでどのように表示されるかの例を次に示します。

今すぐお電話ボタンプラグインチュートリアル

上で述べたように、[今すぐ呼び出す]ボタンプラグインは、[今すぐ呼び出す]バーのアプローチに加えて、フローティングアクションの[今すぐ呼び出す]ボタンを使用できるという点で、もう少し柔軟性があります。

他の人と同じように、WordPress.orgにリストされています。つまり、[プラグイン]→[新規追加]に移動してインストールできます。

プラグインをインストールしてアクティブ化したら、 [設定]→[今すぐ呼び出す]ボタンに移動してプラグインを構成します。

上部では、次のことができます。

• ボタンを有効にする
• 訪問者が呼び出す電話番号を入力します
• ボタンのテキストを選択します（必要に応じて）

[詳細設定]リンクをクリックして、その他の設定を表示することもできます。 これにより、位置や色を変更したり、クリックトラッキングを追加したりできます。

ボタンを有効にすると、モバイル訪問者にのみ表示されるため、モバイルデバイスからプレビューして、実際の動作を確認する必要があります。

フローティングアクションボタンアプローチのサイトの例を次に示します。

今すぐお電話ボタンUltimateプラグインチュートリアル

Call Now Button Ultimateプラグインのユニークな点は、訪問者があなたに電話をかけられるようにする時間を選択できることです。 電話番号が利用できない営業時間外に、訪問者に代わりに電子メールを送信するように求めるプロンプトを表示できます。

他の人と同様に、WordPressダッシュボードの[プラグイン]→[新規追加]に移動して、この無料のプラグインをインストールしてアクティブ化できます。

それが終わったら、WordPressダッシュボードの[今すぐ呼び出す]ボタンUltimate領域に移動して設定します。

上部で、プラグインを有効にして、電話番号とメールアドレスを入力できます。

次に、ページのさらに下で、操作時間を入力し、ボタンのテキストと色を構成できます。

他のプラグインと同様に、[今すぐ電話]ボタンはモバイル訪問者にのみ表示されます。

営業時間中の様子は次のとおりです。

そして、これがあなたの営業時間外の様子です：

アプローチ2：WordPressクリックしてHTMLボタンを呼び出す

クリックしてWordPressプラグインを呼び出す代わりに、独自のクリックを使用してHTMLを呼び出してボタンを作成することもできます。 このアプローチの利点は、サイトのどこにでもボタンを追加できることです。

このようなボタンを作成するには、通常のハイパーリンクを使用して、電話番号をtel：スキーマでラップします。

外観は次のとおりです。電話番号の例を自分の電話番号に置き換え、必要に応じてテキストCTAを編集する必要があります。

<a href="tel:+1-123-456-7890">Call HeroThemes!</a>

これですべてです。

必要に応じて、通常のハイパーリンクの代わりに独自のカスタムCSSを使用してボタンを作成できます。

たとえば、次のHTMLを使用できます。

<a href="tel:+1-123-456-7890" class="call-button">Call HeroThemes!</a>

次に、WordPressサイトにカスタムCSSを追加して、ボタンにすることができます。 例えば：

.call-button {
color: #fff !important;
background: #0ba9d5;
padding: 20px;
border-radius: 5px;
display: inline-block;
border: none;
}

WordPressカスタマイザーまたはSimpleCSSのような無料のプラグインを介してカスタムCSSを安全に追加できます。

ただし、覚えておいてください。 デフォルトでは、クリックしてHTMLボタンを呼び出すと、デスクトップコンピューターを含むすべての訪問者に表示されます。

これを変更する場合は、CSSメディアクエリを使用して、モバイルデバイスでのみボタンを表示できます。 たとえば、このスニペットは、幅600pxを超える画面サイズのボタンを非表示にします。

@media only screen and (min-width: 600px) {
.call-button {
display: none;
}
}

今日からWordPressのクリックして電話ボタンを使い始めましょう！

プラグインを使用する場合でも、独自のカスタムHTMLを使用する場合でも、WordPressでクリックして呼び出すボタンを簡単に作成できます。

ボタンを配置すると、モバイル訪問者がこれまで以上に簡単に連絡できるようになります。

覚えておいてください–電話は人的資源に重いです。

電話を受ける回数を減らしたい場合は、WordPressナレッジベースまたはFAQセクションを作成すると、訪問者は1対1の電話サポートを必要とせずに必要なサポートを受けることができます。 そして、それはあなたにたくさんの時間と労力を節約することができます。

Heroicナレッジベースプラグイン、KnowAllテーマ、またはHeroicFAQプラグインの使用を開始する方法を学びます。