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

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

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

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

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

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

注: この記事は、WordPressにカスタムのコールトゥアクションボタンを追加する方法について説明しています。ソーシャルメディアボタンを追加したい場合は、WordPressにソーシャル共有ボタンを追加する方法をご覧ください。

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

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

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

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

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

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

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

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

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

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

その後、ツールバーの[リンク]アイコンをクリックしてリンクを追加します。

投稿またはページを検索するか、URLをコピーしてリンクフィールドに貼り付けることができます。リンクを新しいウィンドウで開きたい場合は、「新しいタブで開く」スイッチを切り替えることもできます。

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

ボタンを中央に表示したい場合は、まず親の[ボタン]ブロック（コンテナ）を選択する必要があります。次に、「アイテムの配置を変更」アイコンをクリックし、「アイテムを中央揃え」を選択します。

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

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

通常、デフォルトやアウトラインなど、さまざまなボタンのスタイルを選択できます。それぞれをクリックして試してみて、どれが一番見栄えが良いか確認してください。

カラー設定セクションでは、テーマ固有のカラーパレットから色を選択できます。カスタムカラーツールをクリックすると、お好みのカスタム色を使用することもできます。

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

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

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プラグインのインストール方法に関するステップバイステップガイドをお読みください。

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

Ultimate Blocksボタンの大きな利点の1つは、高度な「レスポンシブコントロール」設定です。これにより、タブレット、デスクトップ、またはモバイルデバイスでボタンを非表示または表示させることができます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

クラシックWordPressエディターを使用している場合は、ショートコードを取得するために静的電話ボタンジェネレーターを使用する必要があります。

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

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

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

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

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

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

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

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

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

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

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

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

動画チュートリアル

WPBeginnerを購読する

WordPressでボタンを追加することに関するよくある質問

WordPressにボタンを追加することについて、読者からよく寄せられる質問をいくつかご紹介します:

ウェブサイトにコールボタンを追加するにはどうすればよいですか？

クリックして電話をかけるボタンを追加する最も簡単な方法は、無料のWP Call Buttonプラグインを使用することです。これにより、ボタンをタップすると自動的に電話番号がダイヤルされるボタンを作成できます。

効果的なコールトゥアクションの例をいくつか教えてください。

効果的なコールトゥアクション（CTA）は、ユーザーに何をすべきかを正確に伝える、力強く緊急性のある動詞を使用します。例としては、「今すぐ始める」、「無料電子書籍をダウンロード」、「本日登録」、「コミュニティに参加する」などがあります。

WordPressにフローティングアクションボタンを追加するにはどうすればよいですか？

Sticky MenuやWP Call Buttonのようなプラグインを使用して、フローティング（固定）アクションボタンを追加できます。これらのプラグインは、ユーザーがページを下にスクロールしても、ボタンが画面の下部または側面に表示されたままになります。

ボタンにURLを追加するにはどうすればよいですか？

WordPressでボタンにURLを追加するには、ボタンブロックをクリックし、ツールバーの「リンク」アイコン（チェーンリンク）を選択します。目的のURLをフィールドに貼り付け、Enterキーを押して保存します。

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

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。