WordPressでコードなしで行動喚起ボタンを追加する方法

毎日、潜在的な顧客があなたのWordPressウェブサイトを訪れます。彼らはあなたのコンテンツを読み、サービスをチェックし、本当に興味を持っているかもしれません。

しかし、彼らは何も行動を起こさずに去ってしまいます – メールサインアップも、購入も、問い合わせフォームの送信もありません。

何が起こっているのかは単純です。訪問者は次に何をすべきかを知りません。コールトゥアクションボタンは、コンテンツに関与している人々に明確な指示を与えることで、この問題を解決します。

私たちはWPBeginnerでこのアプローチを使用して、読者をプロサービスや役立つガイドに誘導しており、コンバージョン率に大きな違いをもたらしました。

そのため、コーディングの知識が一切不要で、WordPressサイトにコールトゥアクションボタンを追加するための完全なガイドを作成しました。

WordPressの投稿とページにボタンを追加する（ステップバイステップ）

WordPressでは、組み込みのボタンブロックを使用して、非常に簡単にボタンを追加できます。これは、Gutenberg WordPressブロックエディターで導入された機能です。

WordPressのブログ投稿やページにコールトゥアクションボタンを追加する複数の方法をご紹介します。ご自身のニーズに最適なソリューションをお選びください。

この記事を簡単にナビゲートするには、以下の目次を自由に使用してください。

• WordPressブロックエディターにコールトゥアクションボタンを追加する方法
• WordPressクラシックエディターにコールトゥアクションボタンを追加する方法
• WordPressプラグインでコールトゥアクションボタンを追加する方法
• How to Add Click-to-Call Button in WordPress

WordPressブロックエディターにコールトゥアクションボタンを追加する方法

私たちの経験では、この方法は簡単で、すべてのユーザーにおすすめです。WordPressブロックエディターの組み込みの「ボタン」ブロックを使用します。古いクラシックエディターを使用している場合は、次のセクションにスキップできます。

まず、ボタンを追加したい新しい投稿を作成するか、既存の投稿を編集する必要があります。

投稿編集画面で、「+」アイコンをクリックし、「レイアウト要素」セクションから「ボタン」ブロックを選択します。

次に、コンテンツエディターにボタンブロックが追加されているのが見えるはずです。

「テキストを追加…」エリアをクリックして、ボタンのテキストを入力するだけです。

その後、ツールバーのリンクボタンをクリックしてリンクを追加します。

投稿やページを検索するか、単にURLをコピーしてリンクフィールドに貼り付けることができます。

完了したら、「Enter」キーを押すか、「適用」アイコンを押してリンクを保存します。

ボタンを中央に表示したい場合は、「均等割り付け」アイコンをクリックしてから「中央揃え」を選択できます。ツールバーからボタンの垂直方向の配置を変更することもできます。

次に、右側のブロック設定パネルでボタンのスタイルをカスタマイズし、テキストと 背景色 を変更できます。

ブロック設定の「スタイル」タブに切り替えるだけで、ボタンのスタイルを調整できます。

デフォルト、アウトライン、スクエアの3つのボタンのスタイルから選択できます。各ボタンをクリックして、最も見栄えの良いものを選択して試すことができます。

カラー設定セクションには、ボタンの背景とボタンテキストの両方に対して5つのカラーバリエーションが含まれています。「カスタムカラー」オプションをクリックすることで、お好みのカスタムカラーを使用することもできます。

ボタンのデザインに満足したら、投稿を保存するか、公開してライブプレビューを確認できます。

デモサイトではこのようになりました。

WordPressクラシックエディターにコールトゥアクションボタンを追加する方法

デフォルトのWordPressブロックエディターは、モダンで、高速で、使いやすいです。一部のユーザーはまだ古いクラシックWordPressエディターを使用しています。

クラシックWordPressエディターの使用は推奨しません。古く、ユーザーが素晴らしいコンテンツを作成するための十分な機能がありません。まだ使用している場合は、無効にしてブロックエディターの使用を開始することをお勧めします。

一方で、まだ使用したいユーザーもいるかもしれません。その場合、WordPressのデザインにボタンを追加するには、別のソリューションが必要になります。

WordPress のクラシックエディターでボタンを追加するには、3 つのオプションがあります。

1. HTML/CSSコードでWordPressにボタンを追加する。
2. WordPress ボタンショートコードプラグインでボタンを追加します。
3. ショートコードを使用せずにWordPressにボタンを追加する。

1つ目はコーディング方法です。HTML/CSSコードを記述し、ボタンが必要な場所にウェブサイトに追加する必要があります。初心者向けではありません。

2番目のオプションが最も一般的に使用される方法です。これは、ほとんどのWordPressボタンプラグインがボタンを追加するためのショートコードを提供しているためです。

3番目のオプションが最適です。なぜなら、ショートコードを覚える必要なしに、投稿やページに簡単にボタンを追加できるからです。

ショートコードを使用せずにWordPressにボタンを追加する方法を見てみましょう。

まず最初に行うべきことは、Forget About Shortcode Buttonsプラグインをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

プラグインを有効化したら、新しい投稿を作成するか、既存の投稿を編集します。エディターで、ビジュアルエディターに「ボタンを挿入」という新しいボタンが表示されます。

投稿に新しいボタンを挿入するには、「ボタンを挿入」アイコンをクリックする必要があります。

これにより、新しいボタンをデザインできるポップアップウィンドウが表示されます。

まず、ボタンのテキストとURLを追加する必要があります。ボタンのテキストを追加すると、下のボックスにライブプレビューが表示されます。

次に、リンクに nofollow タグを追加し、下のチェックボックスオプションをクリックしてリンクを新しいタブで開くことができます。

その後、ボタンのアイコンを選択できます。「アイコン」タブをクリックすると、ボタンのテキストの前または後に挿入できるアイコンが表示されます。

これらのアイコンは実際にはアイコンフォントです（WordPress投稿エディターでアイコンフォントを使用する方法を参照してください）。

次に、カラーボックスアイコンをクリックして、ボタンのテキストカラーと背景色を選択できます。

その後、ドロップダウンメニューをクリックしてボタンのスタイルを選択します。

すぐに使用できる8種類のボタンがあります。

同様に、ボタンのサイズも extra small から extra large まで選択できます。

見た目に満足したら、「更新」ボタンをクリックするだけです。

ボタンは、投稿エディター内で、投稿に表示されるとおりに確認できます。

クラシックエディターのツールバーボタンを使用して、ボタンのテキストを選択し、ボタンの配置を設定することもできます。

ボタンをダブルクリックすると「ボタンの挿入」ポップアップが表示され、必要に応じてボタンを再編集できます。

デザインに満足したら、投稿を公開または更新して、実際に動作を確認できます。これが、デモのWordPressウェブサイトに派手なボタンが表示された方法です。

WordPressプラグインでコールトゥアクションボタンを追加する方法

基本的なWordPressのボタンオプションだけでは、目を引くコールトゥアクションボタンを作成するには不十分な場合があります。そのため、Ultimate Blocksを使用することをお勧めします。これにより、ボタンをカスタマイズするさらに多くの方法が得られます。

始めるのは簡単です。まず、WordPressプラグインをインストールして有効化します。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドをお読みください。

次に、投稿またはページを開き、エディターで「ボタン（改良版）」ブロックを探します。

デフォルトのWordPressボタンとの主な違いの1つは、「レスポンシブコントロール」設定です。ここで、タブレット、デスクトップ、またはモバイルデバイスでボタンを非表示または表示できます。

この方法で、さまざまな画面サイズに合わせてコールトゥアクションをカスタマイズできます。

次に、ボタンにカスタムアイコンを追加できます。

これにより、ボタンがより視覚的に魅力的になり、ページ上で目立つようになります。

プロバージョンを選択すると、さらに多くの設定を探索できます。たとえば、ボタンにアニメーション効果を追加して、訪問者にとってより魅力的で目立つようにすることができます。

プラグインができることすべてを確認するには、Ultimate Blocks プラグインのレビュー全体をご覧ください。

ボタンの外観が整ったら、「公開」または「更新」をクリックして作業を保存します。必ずモバイルとデスクトップでウェブサイトをプレビューして、ボタンがすべてのデバイスで正しく表示されるようにしてください。

WordPressにクリックして電話するボタンを追加する方法

通常のコールトゥアクションボタンに加えて、リードやコンバージョンを促進するために、ウェブサイトにクリックコールボタンを追加することもできます。

クリック・トゥ・コールボタンは、特定の種類のコール・トゥ・アクションボタンであり、ユーザーがタップするだけでチームに電話をかけることができます。

タップして電話するボタンを使用すると、サイト訪問者はすぐに担当者と直接話して必要な情報を得ることができます。見積もり依頼、販売前の情報、またはサポートの問題について話し合っている場合でも、電話は迅速です。

スマートフォンユーザーの数が増加しているため、今では「今すぐ電話」ボタンを追加することはさらに重要になっています。

ビジネスフォンをお持ちでない場合は、仮想ビジネス電話番号の取得を検討するとよいでしょう。

それでは、WordPressでクリックして電話をかけるボタンをステップバイステップで追加する方法を見ていきましょう。

まず最初に行うべきことは、WP Call Buttonプラグインをインストールして有効化することです。詳細な手順については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化後、設定 » WPコールボタンページにアクセスして、プラグインの設定を構成し、クリックして電話するボタンのデザインを作成する必要があります。

まず、スティッキーコールボタンの設定が表示されます。スティッキーコールボタンは、ユーザーがサイトを閲覧する際にコールボタンも一緒に移動する、コンバージョン最適化機能です。

「今すぐ電話する」ボタンのステータスを有効化することから始めることができます。スイッチトグルをクリックするだけで有効化できます。

その後、電話番号を入力する必要があります。WPコールボタンには、国コード付きの電話番号フィールドがあります。国を選択して、会社の電話番号を入力するだけです。

ビジネス用の電話番号をお持ちでない場合は、Nextivaから取得できます。信頼できるビジネスVoIPプロバイダーです。

次に、通話ボタンのテキストを編集し、通話ボタンの位置と色を選択できます。

また、スティッキーコールボタンをウェブサイトのどこに表示するかを選択することもできます。デフォルトでは、すべてのページ、すべてのデバイスにコールボタンが表示されます。特定のページでボタンを表示または非表示にしたり、モバイルデバイスにのみ表示したりできます。

すべてのオプションを確認したら、下部にある「変更を保存」ボタンをクリックできます。その後、ウェブサイトにアクセスして、スティッキーなコールボタンが機能していることを確認できます。

固定コールボタンの他に、このプラグインを使用して、WordPressのページ、投稿、およびサイドバーに静的なコールボタンを追加することもできます。

WordPress のブロックエディターを使用している場合、WP Call Button ブロックを使用して、ページに簡単に「今すぐ電話」ボタンを追加できます。

新しいページを作成するか、既存のページを編集して、ページエディターでWP Call Buttonブロックを追加します。

その後、ボタンのテキスト、ボタンの色、テキストの色、フォントサイズをカスタマイズし、電話アイコンを表示または非表示にすることができます。

デザインに満足したら、ページを公開または更新できます。

クラシックWordPressエディターを使用している場合は、Static Call Buttonジェネレーターを使用してショートコードを取得する必要があります。

設定 » WP Call Button に移動し、上部にある「静的コールボタン」メニューをクリックします。

ボタンオプションをカスタマイズしてショートコードをコピーするだけです。その後、ウェブサイトの任意の投稿またはページでショートコードを使用できます。

WP Call Buttonプラグインを使用すると、WordPressのサイドバーやその他のウィジェット対応エリアにも通話ボタンを追加できます。

単純に 外観 » ウィジェット に移動し、WP Call Button ウィジェットを、コールボタンを表示したいウィジェット対応エリアにドラッグします。

これで、タイトルと説明を追加し、高度な設定セクションからコールボタンをカスタマイズできます。完了したら、ウィジェットを保存します。

それで全部です！より詳細なチュートリアルをご覧になりたい場合は、WordPressでクリックして電話をかけるボタンを追加する方法のステップバイステップガイドをご覧ください。

ボーナスのヒント：WordPressページビルダープラグインを使用する

行動喚起ボタンを追加するだけでは十分でない場合があります。ヒーロー画像、メニュー、カスタムレイアウトでページや投稿をカスタマイズしたい場合もあります。

その場合は、SeedProdやThrive Architectのような、ドラッグ＆ドロップ式のWordPressページビルダープラグインの使用をお勧めします。

これらのページビルダーは、カスタムランディングページを、思い通りの派手なコールトゥアクションボタンで作成するのに役立ちます。

何をするにしても、ボタンのパフォーマンスを追跡することが重要です。推測はビジネス成長のための最良の戦略ではありません。

MonsterInsightsの使用をお勧めします。アフィリエイトリンク、外部リンク、カスタムイベントの組み込みイベントトラッキングを備えているため、ボタンのパフォーマンスを把握できます。詳細については、WordPressで追跡する必要がある重要なマーケティング指標をご覧ください。

動画チュートリアル

WPBeginnerを購読する

この記事がWordPressで簡単にボタンを追加する方法を学ぶのに役立ったことを願っています。また、WordPressでリンクのライブプレビューを表示する方法に関する完全ガイドや、デジタル製品を作成および販売するための最高のツールの専門家による厳選リストもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。