コードなしでWordPressの投稿やページにCTAボタンを追加する方法

公開: 2022-03-11

あなたの製品がどれほど素晴らしいか、またはあなたが提供する優れたサービスがどれほど素晴らしいかを人々に伝えるサイトにたくさんのテキストがあるのは、すべて素晴らしくてダンディです。しかし、彼らがそれらの製品やサービスを簡単に利用するための何らかの手段がなければ、あなたは自分自身と話している方がよいでしょう。したがって、訪問者に何らかのアクションを課してダイアログを続行できるようにする必要があります。これは、WordPressボタンが脚光を浴びる場所です。

WordPressのアクションボタンを呼び出す必要があるのはなぜですか？

CTA（または召喚状）ボタンは、ユーザーが次の行動を取るように促します。「今すぐ購入」または「カートに追加」ボタンのように簡単にすると、すぐに販売を確保できます。または、訪問者を特定の方向にさらに「ファンネル」するように設計された他のコンテンツに誘導することもできます。

CTAボタンの他の例は次のとおりです。

続きを読む
今すぐ読む
ダウンロード
ニュースレターを購読する
YouTubeで見る
Spotifyで聞く
このページをブックマークして
今すぐ参加

CTAボタンの配置も重要です。たとえば、商品リストの最初に「今すぐ購入」ボタンを配置しても、人々はあなたが何を購入してほしいかわからないため、あまり意味がありません。さらに、ほとんどの場合、長い製品の説明を読んでから、ページを上にスクロールして購入する必要はありません。ボタンを期待どおりの位置に配置する必要があります。

したがって、ボタンは、ユーザーがボタンを必要とする可能性が最も高い投稿またはページの論理的なポイントに配置します。たとえば、Webサイト（CTAでもある）のメインメニューボタンは通常、ページの上部にあり、人々はそれらを見つけることを期待しています。

さらに、CTAボタンのデザインは、ユーザーがボタンを押す意欲にも大きな役割を果たします。彼らは注目を集めるのに十分明白である必要がありますが、人々を怖がらせるほど「あなたの顔に」そうではありません。人々は自分で決めることができると思うのが好きで、何をすべきかを「言われる」ことを常に感謝するとは限らないことを忘れないでください。したがって、CTAボタンはそれを反映する必要があります。

サイトにCTAボタンを配置すると、コンバージョンを改善するのに役立ちます。適切に設計して適切に配置すると、大きな影響を与える可能性があります。

WordPressでボタンを作成する方法

WordPressの純粋主義者は、サイトにボタンを作成するには、コードやCSSをいじくり回す必要があると言うかもしれません。確かに、あなたがそれらを完全にオーダーメイドにしたいのであれば、その中に真実の要素があります。

ただし、あなたが私のようで、コーディングスキルがゼロの場合は、WordPressにCTAやその他のボタンタイプを追加するためのいくつかの代替方法があることを知って幸せです。ここでは、そのうちの3つを紹介しますが、CSSやコードの知識や経験は必要ありません。

オプション1-グーテンベルクを使用する

Gutenbergは、WordPressが2018年の終わりにプラットフォームのバージョン5で導入した、従来のエディターに代わるブロックエディターです。まったく新しいものと同様に、グーテンベルクはさまざまなレビューを受けました。否定的なレビューは、主に古典的なエディターに慣れた人々からのものでした。しかし、それはここにとどまります、そしてあなたがそれに慣れたら、古典的なエディタに戻ることは古風な感じがします。

記事は以下に続く

グーテンベルクには、さまざまなことを行うためにコンテンツに追加するいくつかの便利な「ブロック」が含まれています。当然、ボタンが含まれており、ボタンを追加するのは子供の遊びです。

ステップ1

まず、ボタンを表示する投稿またはページに新しいブロックを挿入する必要があります。

これを行うには、Enterキーを押すだけです（必要に応じて、ブロックの上にあるミニツールバーに表示される上下の矢印を使用して、後でブロックを再配置できます）。

グーテンベルクを使用してページまたは投稿にボタンを挿入する-新しいブロックを挿入する

グーテンベルクを使用してページまたは投稿にボタンを挿入する-新しいブロックが強調表示されます

ステップ2

[タイプ/ブロックを選択する]フィールドにスラッシュ（/）を入力すると、一般的に使用されるブロックのリストがポップアップ表示されます。私の場合、ボタンブロックオプションが上部に表示されていますが、/ buttonsと入力すると、使用可能なボタンオプションのみが表示されます。

グーテンベルクを使用してページまたは投稿にボタンを挿入する-ボタンブロックを見つける

ステップ3

「ボタン」を選択します。新しいボタンフィールドが自動的に挿入されます。画面の右上にある小さな歯車のアイコンを押してブロックエディタを呼び出し、ボタンを設定できるようにします。

グーテンベルクを使用してページまたは投稿にボタンを挿入する-投稿に挿入された新しいボタンとボタンエディターの呼び出し方法

ステップ4

ボタンをダブルクリックして、含めるテキストを入力します。

グーテンベルクを使用してページまたは投稿にボタンを挿入する-ボタンに表示されるテキストを入力する

次に、画面の右側にあるブロックエディタのオプションを使用して、ボタンの色、輪郭、サイズ、形状などを変更します。

グーテンベルクを使用してページまたは投稿にボタンを挿入する-ボタンエディターの使用がボタンの外観と動作にどのように影響するか

ステップ5

ボタンを配置するには、フローティングツールバーのオプションを使用します。

グーテンベルクを使用してページまたは投稿にボタンを挿入する-ボタンの位置を変更する

ステップ6

ここで、ボタンが指すハイパーリンクを追加する必要があります。リンクは、外部のWebアドレス、または別のページにつながる内部のWebアドレス、またはWebサイトへの投稿にすることができます。

フローティングツールバーのリンクボタンをクリックし、URLフィールドにURLを入力し、その横にある曲線の矢印を押して入力します。

記事は以下に続く

グーテンベルクを使用してページまたは投稿にボタンを挿入する-ボタンにハイパーリンクを追加する

ステップ7

これでボタンが作成されました。プレビューオプションを使用して公開すると、どのように表示されるかを確認できます。サイズ、位置、色などに必要な調整は、手順4と5を繰り返すことで行うことができます。

グーテンベルクを使用してページまたは投稿にボタンを挿入する-完成したボタンをプレビューする

オプション2–Elementorの使用

Elementorは、ドラッグアンドドロップのおかげでページや投稿を簡単に作成できる人気のビジュアルエディタープラグインです。 Elementorでボタンを作成することは、Gutenbergに似ていますが、特にElementor Proを使用している場合は、より多くのスタイリングとカスタマイズの可能性があります。

Elementorを使用して投稿またはページに簡単なボタンを追加する方法の概要を次に示します。