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

WordPressの投稿やページにコールトゥアクションボタンを追加することで、コンバージョンを高めることができます。これらのボタンは人目を引き、ユーザーに特定の行動を取るように指示します。

例えば、価格ページ、製品ページ、サービスページに訪問者を誘導するために使用することができます。また、特別オファーや新製品、アフィリエイトリンクを宣伝することもできます。

この投稿では、WordPressに美しいコール・トゥ・アクション・ボタンを追加する方法を紹介する。一番の特徴は、コードを書く必要がないことだ。

これらの効果的なボタンを使って、WordPressサイトを強化する簡単な方法を探ってみましょう。

注：この投稿は、WordPressでカスタム・コール・トゥ・アクション・ボタンを追加するためのものです。ソーシャルメディアボタンを追加したい場合は、WordPressにソーシャルシェアボタンを追加するガイドを参照してください。

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

WordPressでは、ビルトインButtonブロックでボタンを簡単に追加できます。これは、Gutenberg WordPressブロックエディターで導入された機能です。

WordPressのブログ投稿やページにコールトゥアクションボタンを追加する複数の方法をご紹介します。あなたのニーズに最も適したソリューションを選択することができます。

この投稿を読み進めるには、以下の目次をご利用いただきたい：

コンテンツの目次

動画チュートリアル

Subscribe to WPBeginner

動画が気に入らなかったり、もっと説明が必要な場合は、このまま読み進めてください。

初期設定エディターを使ってWordPress投稿/ページにボタンを追加する

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

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

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

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

テキストを追加…」エリアをクリックし、ボタンテキストを入力してください。

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

投稿やページを検索したり、リンク欄にURLをコピー＆ペーストするだけでもOK。

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

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

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

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

ボタンのスタイルは、初期設定、アウトライン、スクエアの3種類から選べます。それぞれをクリックして試してみて、最適なものを選んでください。

カラー設定セクションには、ボタンの背景とテキストの両方に5つのカラーバリエーションがあります。それだけでなく、’カスタムカラー’オプションをクリックすることで、お好みのカスタムカラーを使用することもできます。

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

これがデモサイトでの様子です。

ボーナス：ボタンのパフォーマンスを確認したい場合は、MonsterInsightsを使用することをお勧めします。アフィリエイトリンク、アウトバウンドリンク、カスタムイベントのイベントトラッキングがビルトインされているので、ボタンのパフォーマンスを確認することができます。詳しくは、WordPressでトラッキングすべき重要なマーケティング指標をご覧ください。

クラシックエディターでWordPressボタンを作成する

初期設定のWordPressブロックエディターは、現代的で、より速く、より簡単です。 一部のユーザーはまだ古いクラシックWordPressエディターを使用しています。

クラシックWordPressエディターの使用はお勧めしません。これは時代遅れで、ユーザーが素晴らしいコンテンツを作成するのに十分な機能を備えていません。もしまだ使用しているのであれば、エディターをオフにしてブロックエディターを使い始めることをお勧めします。

一方で、それでも使いたいというユーザーもいるだろう。その場合、WordPressサイトにボタンを追加する別のソリューションが必要になります。

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

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

3つのオプションのうち、最初のものはコーディングの方法です。HTML / CSSコードを記述し、ボタンが必要な場所にサイトに追加する必要があります。初心者に優しい方法とは言えません。

2番目のオプションは、最もよく使われる方法です。WordPressのボタンプラグインのほとんどが、ボタンを追加するためのショートコードを提供しているからだ。

ショートコードを覚えることなく、投稿やページに簡単にボタンを追加することができるため、3番目のオプションが最適です。

WordPressでショートコードを使わずにボタンを追加する方法を見てみよう。

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

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

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

新しいボタンをデザインするためのポップアップウィンドウが表示されます。

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

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

その後、ボタンのアイコンを選択することができます。アイコン’タブをクリックすると、ボタンのテキストの前後に追加できるアイコンが表示されます。

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

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

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

8種類のボタンスタイルが用意されている。

同様に、ボタンのサイズも特小から特大まで選ぶことができる。

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

投稿エディター内で、あなたの投稿に表示されるボタンを見ることができます。

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

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

そのデザインに満足したら、投稿を公開したり更新したりして、その動きを見てみましょう。これが、私たちのデモWordPressサイトに表示されたファンシーボタンの外観です。

WordPressにクリックトゥコールボタンを追加する

通常のコールトゥアクションボタンに加え、クリックトゥコールボタンをサイトに追加することで、リードとコンバージョンを高めることができます。

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

タップ・トゥ・コールボタンを使えば、サイト訪問者は即座にあなたのチームと直接話し、必要な情報を得ることができます。見積もり依頼、販売前情報、サポートの問題など、電話による問い合わせは迅速です。

スマートフォンユーザーの増加に伴い、通話ボタンを追加することの重要性はさらに高まっている。

もしビジネスフォンを持っていないのであれば、バーチャル・ビジネス・フォン番号の取得を検討してみてはいかがだろうか。

それでは、WordPressでクリック・ツー・コール・ボタンを追加する方法を順を追って見ていきましょう。

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

有効化した後、Settings ” WP Call Buttonページにアクセスしてプラグイン設定を行い、クリックトゥコールボタンをデザインする必要があります。

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

今すぐ電話ボタンの状態を有効化することから始めます。スイッチのトグルをクリックして有効化します。

その後、電話番号を入力する必要があります。WP Call Buttonには、国コード付きの電話番号フィールドがあります。あなたの国を選択し、あなたのビジネスの電話番号を入力するだけです。

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

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

また、サイト上のどこに先頭固定コールボタンを表示するかを選択できます。初期設定では、すべてのページ、すべての端末にコールボタンが表示されます。特定のページにボタンを表示したり非表示にしたり、モバイル端末のみに表示したりすることもできます。

すべてのオプションを確認したら、下部にある「変更を保存」ボタンをクリックします。その後、あなたのサイトにアクセスして、先頭固定表示ボタンが実際に表示されるのを確認できます。

スティッキー呼び出しボタンの他に、このプラグインを使ってWordPressのページ、投稿日、サイドバーに静的呼び出しボタンを追加することもできます。

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

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

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

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

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

Settings ” WP Call Buttonに移動し、上部にある’Static Call Button’メニューをクリックしてください。

ボタンのオプションをカスタマイズし、ショートコードをコピーするだけです。その後、あなたのサイトの投稿やページでショートコードを使用することができます。

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

外観 ” ウィジェットにアクセスし、コールボタンを表示したいウィジェット対応エリアにWPコールボタンウィジェットをドラッグするだけです。

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

以上です！より詳細なチュートリアルをご覧になりたい場合は、WordPressでクリックトゥコールボタンを追加する方法のステップバイステップガイドをご覧ください。

WordPressでカスタムボタンを追加するボーナス・ヒント

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

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

これらのページビルダーを使えば、思い通りのコールトゥアクションボタンを備えたカスタムランディングページを作成することができます。

何をするにしても、ボタンがどのように機能しているかをトラッキングすることが重要だ。

MonsterInsightsの使用をお勧めします。アフィリエイトリンク、アウトバウンドリンク、カスタムイベントのイベントトラッキングがビルトインされているので、ボタンのパフォーマンスを確認することができます。詳しくは、WordPressでトラッキングすべき重要なマーケティング指標をご覧ください。

この投稿がWordPressで簡単にボタンを追加する方法を学ぶのにお役に立てば幸いです。WordPressのコンバージョントラッキングに関する完全ガイドや、サイトを成長させる最高のWordPressプラグインのリストもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.