毎日、潜在的な顧客があなたのWordPressウェブサイトを訪れます。彼らはあなたのコンテンツを読み、サービスをチェックし、本当に興味を持っているかもしれません。
しかし、彼らは何も行動を起こさずに去ってしまいます – メールサインアップも、購入も、問い合わせフォームの送信もありません。
何が起こっているのかは単純です。訪問者は次に何をすべきかを知りません。コールトゥアクションボタンは、コンテンツに関与している人々に明確な指示を与えることで、この問題を解決します。
私たちはWPBeginnerでこのアプローチを使用して、読者をプロサービスや役立つガイドに誘導しており、コンバージョン率に大きな違いをもたらしました。
そのため、コーディングの知識が一切不要で、WordPressサイトにコールトゥアクションボタンを追加するための完全なガイドを作成しました。
注意: この記事は、WordPressにカスタムのコールトゥアクションボタンを追加するためのものです。ソーシャルメディアボタンを追加したい場合は、WordPressにソーシャルシェアボタンを追加する方法に関するガイドを参照してください。
WordPressの投稿とページにボタンを追加する（ステップバイステップ）
WordPressでは、組み込みのボタンブロックを使用して、非常に簡単にボタンを追加できます。これは、Gutenberg WordPressブロックエディターで導入された機能です。
WordPressのブログ投稿やページにコールトゥアクションボタンを追加する複数の方法をご紹介します。ご自身のニーズに最適なソリューションをお選びください。
この記事を簡単にナビゲートするには、以下の目次を自由に使用してください。
- WordPressブロックエディターにコールトゥアクションボタンを追加する方法
- WordPressクラシックエディターにコールトゥアクションボタンを追加する方法
- WordPressプラグインでコールトゥアクションボタンを追加する方法
- How to Add Click-to-Call Button in WordPress
WordPressブロックエディターにコールトゥアクションボタンを追加する方法
私たちの経験では、この方法は簡単で、すべてのユーザーにおすすめです。WordPressブロックエディターの組み込みの「ボタン」ブロックを使用します。古いクラシックエディターを使用している場合は、次のセクションにスキップできます。
まず、ボタンを追加したい新しい投稿を作成するか、既存の投稿を編集する必要があります。
投稿編集画面で、「+」アイコンをクリックし、「レイアウト要素」セクションから「ボタン」ブロックを選択します。
次に、コンテンツエディターにボタンブロックが追加されているのが見えるはずです。
「テキストを追加…」エリアをクリックして、ボタンのテキストを入力するだけです。
その後、ツールバーのリンクボタンをクリックしてリンクを追加します。
投稿やページを検索するか、単にURLをコピーしてリンクフィールドに貼り付けることができます。
完了したら、「Enter」キーを押すか、「適用」アイコンを押してリンクを保存します。
ボタンを中央に表示したい場合は、「均等割り付け」アイコンをクリックしてから「中央揃え」を選択できます。ツールバーからボタンの垂直方向の配置を変更することもできます。
次に、右側のブロック設定パネルでボタンのスタイルをカスタマイズし、テキストと 背景色 を変更できます。
ブロック設定の「スタイル」タブに切り替えるだけで、ボタンのスタイルを調整できます。
デフォルト、アウトライン、スクエアの3つのボタンのスタイルから選択できます。各ボタンをクリックして、最も見栄えの良いものを選択して試すことができます。
カラー設定セクションには、ボタンの背景とボタンテキストの両方に対して5つのカラーバリエーションが含まれています。「カスタムカラー」オプションをクリックすることで、お好みのカスタムカラーを使用することもできます。
ボタンのデザインに満足したら、投稿を保存するか、公開してライブプレビューを確認できます。
デモサイトではこのようになりました。
ボーナスヒント: ボタンのパフォーマンスをどの程度把握したい場合は、MonsterInsightsをお勧めします。アフィリエイトリンク、外部リンク、カスタムイベントの組み込みイベントトラッキングを備えているため、ボタンのパフォーマンスを把握できます。
詳細については、WordPressで追跡すべき重要なマーケティング指標を参照してください。
WordPressクラシックエディターにコールトゥアクションボタンを追加する方法
デフォルトのWordPressブロックエディターは、モダンで、高速で、使いやすいです。一部のユーザーはまだ古いクラシックWordPressエディターを使用しています。
クラシックWordPressエディターの使用は推奨しません。古く、ユーザーが素晴らしいコンテンツを作成するための十分な機能がありません。まだ使用している場合は、無効にしてブロックエディターの使用を開始することをお勧めします。
一方で、まだ使用したいユーザーもいるかもしれません。その場合、WordPressのデザインにボタンを追加するには、別のソリューションが必要になります。
WordPress のクラシックエディターでボタンを追加するには、3 つのオプションがあります。
- HTML/CSSコードでWordPressにボタンを追加する。
- WordPress ボタンショートコードプラグインでボタンを追加します。
- ショートコードを使用せずに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 プラグインのレビュー全体をご覧ください。
ボタンの外観が整ったら、「公開」または「更新」をクリックして作業を保存します。必ずモバイルとデスクトップでウェブサイトをプレビューして、ボタンがすべてのデバイスで正しく表示されるようにしてください。
🔎 コールトゥアクションボタンを次のレベルに引き上げたいですか？コールトゥアクションのベストプラクティスに関する専門家の洞察記事をご覧ください。ここでは、SeedProdの共同創設者であるJohn Turnerが、ランディングページにボタンを表示するためのとっておきのトリックを共有しています。
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で追跡する必要がある重要なマーケティング指標をご覧ください。
動画チュートリアル
この記事がWordPressで簡単にボタンを追加する方法を学ぶのに役立ったことを願っています。また、WordPressでリンクのライブプレビューを表示する方法に関する完全ガイドや、デジタル製品を作成および販売するための最高のツールの専門家による厳選リストもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
キャロリン・R・コックス
ページ上でアクションを実行するボタンはどうでしょうか。例えば、クエリを実行し、クエリデータでページをリロードする（ページを置き換えるのではなく、つまりURLを変更しない）などです。別のページをロードせずにこれを達成する簡単な方法はありますか？よろしくお願いします。
WPBeginnerサポート
これは特定のユースケースに大きく依存するもので、開発者の支援が必要になる可能性が高いです。
管理者
Roger Meachem
やっと、明確で機能する指示に出会えました！ありがとうございます。何時間も様々なことを試しましたが、うまくいきませんでした。おそらく古い記事だったのでしょうが、これは私の問題を解決し、わずか数分で完了しました。完璧でした。これでWordPressサイトで機能するボタンができました。
WPBeginnerサポート
Glad our guide was able to help
管理者
メハ・ジェイン
こんにちは。
テーマのモジュールに「続きを読む」ボタンを追加する方法について、何かアイデアはありますか？
現在使用しているテーマでは、ホームページのモジュールに「続きを読む」ボタンを追加するオプションが提供されていません。
どうすればそこに追加できますか？
敬具
メハ
（私は技術者ではありません。）
WPBeginnerサポート
まずテーマのサポートに連絡することをお勧めします。テーマに追加するための推奨方法があるかもしれません。
管理者
Dreamlife
投稿ありがとうございます。WordPressプレミアムでダウンロードボタンを作成するにはどうすればよいですか？
WPBeginnerサポート
残念ながら、WordPress.comについては、現在許可されているものについてサポートに確認する必要があります。
管理者
Rick Hoffarth
ユーザーをセキュアな支払いを行うためのマーチャントサービスポータルに誘導するために、ボタンにコードを追加する必要があります。これまでのところ、ボタン作成者はURLを求めており、コードは求めていません。コードが必要な別のサイトにボタンを接続するにはどうすればよいですか？
Daniel
はい、これでダウンロードボタンの作り方がわかりましたが、実際にダウンロードを実行するにはどうすればいいですか？
ありがとうございます！
Mark Bologna
まさに私が求めていたものでした。記事を読み、プラグインをダウンロードし、10分以内に動作するボタンができました。ありがとうございます！
Debbie
とても迅速で、まさに必要としていたものでした！本当にありがとうございます。設定が非常に難しいものに手こずっていましたが、ボタンが必要で、これで素早く簡単に作業が完了しました！
Nina
あまり良くない… スタイリングが非常に限られています
Utkarsh Agarwal
同じページ内のセクションにリンクを作成するにはどうすればよいですか？たとえば、投稿の最後に、下にあるコメントセクションを指すボタンを作成する必要があります。
Jen Lewis
このプラグインは無料プランのサイトにインストールできますか？一般的に、WordPressサイトに追加プラグインをインストールするには有料プランのいずれかに加入する必要がありますか？
WPBeginnerサポート
ジェンさん、こんにちは。
おそらくWordPress.comの無料プランを使用しています。セルフホスト型WordPress.orgと無料WordPress.comブログの違いについては、ガイドをご覧ください。
管理者
Daniel
サイドバーでも機能しますか？知る必要があります、ありがとう！
マイク・リッター
このプラグインはライブラリから削除されました。
ジョリン・パワーズ
マイク、これはもうこの方法でボタンを追加できなくなったということですか？もしそうなら、ボタンの追加方法に関する他の情報はどこで確認できますか？
私は仕事のウェブサイトに、食事場所、エンターテイメント場所、ホテルの場所のリストを作成するために3つのボタンを追加する必要があり、それらを投稿ではなくページに追加したいと考えています。そうすれば、常に同じ場所に表示されるようになります。
Furquan
ボタンを探しています。Googleで検索したところ、一番上にあなたの投稿が見つかりましたが、あなたが言及しているプラグインはWordPressにはもうありません。助けていただけますか？
アーチャル
こんにちは。ウェブサイトのホームページにある「Apply」というページではなく、「Apply」というボタンが欲しいのですが。
どうすればできますか？何かヒントはありますか？
bill
ボタンを追加してから無効化してURLを削除しても、ボタンはそのまま残りますか？？
または、プラグインなしで機能するようにCSSコードを入力する方法はありますか？？
Bridget
こんにちは！
これをプラグインのContact Form 7にリンクできますか？もしそうなら、どうすればよいですか？
ありがとうございます！
Alysha
ありがとうございます！素晴らしいですね。このプラグインを使って、ホームページのヘッダーにボタンを追加する方法はありますか？
Toni
これは本当に素晴らしいプラグインです！標準のショートコードよりもはるかに多くのカスタマイズが可能で、独自のCSSを書く必要がありません！
ただ一つ質問があります。ウィジェットのビジュアルテキストエディターではなぜ機能しないのですか？ウィジェットでも機能すれば、とても役立つのですが！
ありがとうございます、
Toni
ウルフ
Thank you!! Spent ages looking for something simple like this. Should have known to come here first
mohamed
記事をありがとうございます…インストールして正常に動作しましたが、URLだけ問題がありました。例えば、URLに（www.example.com）と入力して投稿を公開し、ボタンを押すと、ボタンが（www.example.net/www.example.com）を参照していました。この問題をどう解決すればよいですか？
WPBeginnerサポート
はい、プラグインの問題のようです。次のような完全なURLを追加してみてください。https://014.leahstevensyj.workers.dev
管理者
Altaf
Thank You Bhai i am Done Now and Solve my Wordpress issue
ジョン
ありがとうございます。まさに探していたものでした！
Alec
こんにちは！複数のボタンを横並びに配置することは可能ですか？（異なるアイテムで）そして、参照はどのように機能しますか？
Eric
挿入ボタンを使用してユーザーが任意の画像をアップロードできるようにしたいのですが、この場合でも機能しますか？
Yonatan
サイドバーでも機能しますか？
ジェニー
こんにちは！
これは非常に便利ですが、プラグインに付属しているオプションではなく、カスタム画像ボタンとして使用する方法はありますか？ダウンロードしたボタン画像があり、サイト訪問者にはおなじみのロゴなので、それらを使用したいと考えています。
敬具、
Jenny
カラン・バガット
こんにちは。このプラグインは2つ以上のサイトで使用しており、さらに1つにインストールしましたが、昨日までは正常に動作していました。しかし、突然動作しなくなり、投稿にこれらのボタンを追加するためのツールバーにボタンが表示されなくなりました。削除して再インストールしましたが、問題は解決しません。助けてください。
Blake
エディタのドロップダウンメニューに項目を追加するにはどうすればよいですか？プラグインを使わずに、フォントサイズ、ボタンなど、自分で選択したものを追加したいのですが、方法はありますか？
WPBeginnerサポート
そのためには、TinyMCE Advanced プラグインを使用できます。
管理者
Nancy
ありがとうございます！重ねてお礼申し上げます！ボタンのショートコードでずっとインターネット中を探していました。うまく機能させることができませんでした。いつものように、あなたは簡単な答えを持っています。WordPressのヘルプを他に探す必要はありません！
ブライアン・ミジェット
ボタンを縦ではなく1行に並べるにはどうすればよいですか？ボタンの間に
を入れてみましたが、タグが表示されてしまいます。ボタンを横に並べると、くっついてしまいます。助けてください！
Sacha
有益な情報ありがとうございます！
Prasad Saxena
ウェブサイトのメインページにある各投稿に、「ウェブサイトへ移動」と表示されるボタンを配置したいです。これは「続きを読む」のすぐ隣に配置されるべきです。ボタンは設置できましたが、各投稿に異なるリンクURLを設定する方法がわかりません。
また、URLは投稿自体から挿入することもできます。つまり、執筆中にです。投稿の下に、ボタンへのリンクを入力できるテキストボックスを配置したいです。
助けてください…。
WPBeginnerスタッフ
投稿をビジュアルエディターモードで作成していることを確認してください。ボタンはテキストエディターには表示されません。
CEA
プラグインをインストールして有効化しましたが、エディターに変更が見られません。WP 4.0を使用しています。何が足りないのでしょうか？助けてください！
バル・チャンドラ・ダワン
本日このボタンを追加しましたが、URLが機能しませんでした。
ページ xyz.com/policies に追加し、URLを xyz.com/registration に追加しました。
クリックすると、ページが見つかりませんと表示され、アドレスバーには xyz.com/policies/xyz.com/registration と表示されます。既存のページのURLが追加されているのでしょうか？
なぜかわかりません。
サラ・マクレーン
Very helpful! Thank you
WPBeginnerスタッフ
そうかもしれません。デフォルトのテーマに切り替えて確認しましたか？
Bill Gibson
問題点：リンクの下線がボタンのテキストを通過している（ほとんど打ち消し線のような）ようです。最小サイズと最大サイズの両方のボタンサイズを試しましたが、常にテキストを横切る線が表示されます。手動で「装飾なし」をスタイルに追加しようとしましたが、無視されました。これはテーマ固有の問題でしょうか？ありがとうございます。
SEOサービス
このプラグインをインストールしたばかりですが、とても気に入っています！ブログですぐに活用しています。この情報、本当にありがとうございます。
WPBeginnerスタッフ
いいえ、申し訳ありませんが、このプラグインはそのようには設計されていません。
Prishan Latchman
特定の金額をボタンに追加して、クリックすると現在の値がその設定された金額だけ増加するようなボタンはありますか？
例：ボタンがR20.00に設定され、商品（靴一足）がR100.00に設定されている場合、誰かがボタンをクリックするたびに靴の価格がR20.00ずつ上がり、R120.00になります。
bucur
非常に良いプラグインです、気に入りました 5つ星
Brenda Malone
この素晴らしいプラグインについての情報提供、ありがとうございます！私のサイトにインストールし、作者に寄付もしました。
Rostislav Sofronov
このプラグインは便利なツールで、5つ星評価です
WPBeginnerスタッフ
このような便利なプラグインを作成していただきありがとうございます。
ヘンダーソン ダニエル
情報ありがとうございます。とても参考になりました。
Ross
Thanks for covering our plugin!
ビクトル・デ・ラ・イグレシア
とても素晴らしい！探していたものです！！！
キャロラン
このプラグインをインストールしたばかりですが、とても気に入っています！すでにブログで活用しています。この情報に感謝します。あなたのウェブサイトも大好きです！