WordPressエディターにボタンを追加する方法[チュートリアル]

WordPress のボタンブロックがなぜそれほど重要なのでしょうか?

ウェブサイト上のナビゲーションは訪問者や顧客にとって重要です。さらに 1 つのサブページから送信したいと考えています。買い物のプロセス全体をガイドします。そのため、重要なリンクをページ コンテンツ内に正しく挿入することが重要です。

基本的には 2 つの選択肢があります。標準のリンクまたはボタンを使用します。最初のオプションと後のオプションをいつ使用するかについてはさまざまな意見があります。通常、1 つのページには複数の可能なアクションがあります。どちらがプライマリで、どちらがセカンダリであるかを確認する必要があります。ボタンは主なアクションにのみ使用することをお勧めします。こうすることで、この主要なアクションの可視性が向上します。訪問者の注意をこのアクションに集中させることができます。 CTA ボタンと呼ぶこともできます。 1 つのサブページにあまりにも多くのボタンを作成しないでください。

主なボタンの機能とは何ですか?

• ボタンは訪問者の注意を引くことができます – 行動喚起
• ページまたは投稿コンテンツを分離し、読みやすくします。
• ページの向きを調整するのに役立ちます。多くの訪問者はページを目で視覚的にスキャンするだけです
• ハイパーリンクを使用して訪問者を他のページに移動する

ボタンの成功を決定するパラメータは多数あります。重要なのは、サイズ、配置、ボタンの色などです。標準の UI と UX の原則に従う必要があります。緑色は、何かを購入するなどのポジティブなアクションを伴うボタンに使用されます。赤色はネガティブなもの (ニュースレターの購読を解除する場合など) を表します。訪問者のアクションに直接影響を与える、正しく設計されたボタン。

WordPress のページまたは投稿にボタンを追加する

WordPress 5以前の状況

WordPress ブロックエディターが発明されるまで、ボタンの追加は非常に複雑なプロセスでした。この機能は WordPress に本来備わっていなかった機能だからです。 Page Builder またはサードパーティのプラグインでテーマを使用できます。この場合、ショートコードはボタンを作成します。

古い WordPress テーマでは、ビジュアル エディターでショートコードを使用してボタンを追加できます。 「ショートコードの挿入」→「ボタン」をクリックすると、モーダルウィンドウで各種設定を行うことができます。テキスト、テキストの色、ボタンの色、URL、配置など。これらの高度な設定のおかげで、プログラミングを行わずに非常に簡単かつ迅速にボタンを追加できます。

WordPressエディターでボタンブロックを使用するにはどうすればよいですか?

WordPress 5 のおかげで、2 番目の方法があります。はるかに簡単です。 WordPress ビジュアルエディターには、多くの便利なブロックが含まれています。ウェブサイトにボタンを作成するために、エディターで WordPress ボタン ブロックを使用できるようになりました。

WordPress エディターにボタンを追加する方法のステップバイステップガイド

1. まず、ボタンを挿入する場所を決める必要があります
2. ボタン ブロックはさまざまな方法で追加できます。
– トップバーの「+」をクリックするか、ボタンブロックを選択するブロックエディターの任意の場所で「+」をクリックします。

– 検索バーを使用してブロックを見つけることもできます。「ボタン」と書くだけです。

– 「/」を入力すると、利用可能なすべてのブロックにアクセスできます

3. 作成したボタンブロックはさらに設定可能

ボタンのテキストと URL アドレスを追加する

WordPress のブロック ボタンが作成されるとすぐに、その中にテキストを入力できるようになります。 CTA ボタンには、明確なメッセージを含む短いテキストを使用する方がよいことに注意してください。テキストを太字、斜体、または下線付きに設定できます。これらすべての変更は、ツールバーをクリックして行うことができます。ボタンを横に配置したり、中央に配置したりすることもできます。

通常、ボタンは別のページまたは外部 Web サイトを指します。そのため、そのすぐ下に URL アドレスを追加するための入力があります。利点は、URL を追加するときにテキストを選択する必要がないことです。

ボタンの色の変更

新しいエディターを使用すると、WordPress ボタン ブロックを数秒で修正できます。右側のサイドバーの設定を使用してください。ボタンの背景色やボタン内の文字色を変更できます。基本的な定義済みの色があるほか、独自の色を選択することもできます。すべての変更はすぐに表示され、色の組み合わせが適切かどうかを確認できます。

素晴らしい機能は、灰色の背景と白の文字色など、間違った組み合わせを選択すると、WordPress ブロック エディターが Web サイトでボタンを読み取れないことを警告することです。

独自のボタンスタイルを見つけてください

準備されたスタイルの 1 つを使用すると、手間をかけずに非常に迅速にボタンを作成または変更できます。ボタンは、たとえば、丸い、縁取りされた、または長方形に変更できます。ウェブサイトのスタイルやデザインに最も合うものを試してください。

カスタムCSSを使用した編集ボタン

カスタム CSS クラスを使用すると、さらに高度なカスタマイズを実現できます。そうすることで、WordPress エディターに独自の CSS スタイルとスタイル ボタンを希望どおりに追加できます。

ご覧のとおり、ボタンのショートコードを使用するよりもはるかに簡単な方法があります。 WordPress ボタン ブロックは、WordPress ブロック エディターと互換性のあるテーマで使用できます。新しい Citadela WordPress テーマについて詳しく読んでください。これは、WordPress ブロック エディター用に特別に設計および開発されました。

最後に追加のヒント

WordPress のボタンブロックとボタンの成功自体を監視することを忘れないでください。 Google Analyticsを使用している場合は、独自のURLを作成できます。訪問者のクリックを追跡するには、追加できます Google UTMパラメータ。 URLはURLビルダーを使用して作成できます。パラメータを追加すると、訪問元を特定できます。訪問者がどこからショッピング ページに来たのかを知りたい場合に非常に便利です。

WordPress のボタンブロックに関して現在抱えている最大の問題は何ですか?以下のコメントで議論しましょう。ウェブサイトのボタンを使用した経験を共有してください。