WordPressでボタンのリンクをカスタマイズして固定ページに追加する方法

ランディングページにおける最大の武器のひとつが、CTA（行動喚起）ボタンです。これは、訪問者が資料をダウンロードしたり、メールリストに登録したり、相談を予約したりするためにクリックする要素です。適切にデザインすれば、コンバージョンを大きく後押ししますが、デザインが不十分だと、ユーザーはそのまま読み飛ばし、ページから離脱してしまう可能性があります。

結局のところ、WordPressでボタンを追加する方法、しかも他のページにある一般的なボタンよりも目立つボタンを作る方法を知っていることが、新規顧客を獲得できるか、それとも逃してしまうかの分かれ目になるかもしれません。しかし、それは言うほど簡単ではありません。WordPressはGutenbergエディタでボタンのカスタマイズオプションを提供していますが、それらは基本的なものにとどまります。ユーザーはしばしば、わかりにくい色設定やアニメーションオプションの不足につまずいてしまいます。CTAボタンを凝ったものにしたい場合、Gutenbergエディタではあまり遠くまで行けません。 

WordPressのボタンの制限を回避するには、2つの選択肢があります。重いサードパーティ製のブロックやプラグインをインストールするか、ページ速度とテーマコードを保護する無料で軽量なサーバーレスウィジェットを使うかです。このガイドでは、それぞれの選択肢がどのように機能するかを説明しますので、どちらがあなたのウェブサイトに最適かを判断できます。

Watch on youtube

How to Add a Custom Button to Wordpress

選択肢1：専用のWordPressボタンプラグインをインストールするか、カスタムCSSを使う

WordPressの使い方を学んでいる段階なら、ボタンをカスタマイズするためにサードパーティ製のプラグインやCSSコードに頼ることもあるでしょう。利用可能なプラグインはWordPressの管理ダッシュボードから見つけられますし、WordPressエディタを使って独自のCSSを追加することもできます。 

これらの選択肢を検討する前に、潜在的なデメリットを把握しておきましょう。

• 一部のプラグインはJavaScriptやCSSを過剰に使用するため、ページの読み込み時間が遅くなり、Core Web Vitalsのスコアに悪影響を及ぼす可能性があります。 
• 開発者が常にプラグインを更新し続けるとは限りません。これは将来的なパフォーマンスの問題につながる可能性があります。また、監視すべき対象がひとつ増えることにもなります。
• 誤ったカスタムCSSは、ウェブサイトの現在のグローバルなボタン設定を上書きしてしまう可能性があり、サイト全体の他のボタンの外観に影響を与えます。また、サイトのモバイル対応にも影響を及ぼすことがあります。

まずは最も簡単な選択肢、サードパーティ製のプラグインから始めましょう。サイトにプラグインを見つけてインストールするには、次の手順を実行します。

1. WordPress管理ダッシュボードでプラグインオプションをクリックします。検索バーに必要な機能を入力します。この例では、「custom CTA button WordPress」と入力しました。

2. リストからプラグインを選び、クリックしてその機能について詳しく確認します。優れたWordPressプラグインは、最新の状態に保たれており、お使いのWordPressテーマと互換性があり、ユーザーからの好意的なレビューがあります。気に入ったものが見つかったら、今すぐインストールをクリックします。

3. プラグインのインストールが完了したら、有効化ボタンをクリックします。開発者の指示に従って、カスタムボタンを作成します。 

CSSに精通している場合は、自分でカスタムCTAボタンをコーディングすることもできます。その場合は、次の手順に従ってください。

1. WordPress管理ダッシュボードで外観 > エディターをクリックします。クラシックテーマやサードパーティ製のテーマを使用している場合は、外観 > カスタマイズをクリックします。 

2. スタイル > ⋮ > 追加CSSをクリックします。クラシックテーマやサードパーティ製のテーマでは、追加CSSをクリックします。

3. ボタンのカスタムCSSコードをテキストボックスに入力します。

自分でボタンをコーディングする代わりに、WordPress向けのカスタムCSSの代替手段を試すこともできます。それがJotformボタンウィジェットです。次のセクションでその選択肢を詳しく見ていきます。

選択肢2：無料でカスタマイズ可能なボタンウィジェットを追加する（推奨）

Jotformボタンウィジェットを使えば、独自のグラデーション、アイコン、ホバーエフェクトを備えたCTAボタンを作成できます。この方法は信頼性の高いホスト型の埋め込みで動作するため、サイトのCSSに影響を与えたり、読み込み速度を低下させたりすることはありません。

これを使うには、Jotformでボタンを設定し、カスタムHTMLブロックを使ってそのカスタムボタンをWordPressに埋め込みます。要件に合った、完璧でレスポンシブな独立したボタンが即座に反映されます。試してみるには、次の手順を実行します。

1. Jotformボタンウィジェットにアクセスし、ボタンに関する基本情報を入力します。続行をクリックします。

2. 色、アイコン、その他のスタイルオプションを追加します。角のスタイル、余白、テキストサイズ、フォントを調整したり、さらに強調するためにドロップシャドウを追加したりできます。完了したら、続行をクリックします。

3. レイアウトオプションを確認して選択し、ウェブサイトで無料で試すをクリックします。

4. 指示に従ってJotformで無料アカウントを作成し、埋め込みコードをコピーして、WordPressウェブサイトのカスタムHTMLブロックに貼り付けます。ボタンを表示したいページとセクションを必ず選択してください。

Jotformの無料でノーコードのWordPress向け行動喚起の代替手段は、ボタンの外観と機能を完全にコントロールできます。テキスト、色、角の丸みをカスタマイズしたい場合でも、ホバーアニメーションを追加したい場合でも、Jotformならすべてに対応できます。 

スマートでサーバーレスなウィジェットでWordPressサイトを強化する

Jotformはカスタムボタンのデザイン以上のものを提供します。無料のウェブサイトウィジェットのディレクトリを検索して、コンバージョンを最大化し、ページの肥大化を解消し、サイトのデータベースを軽量に保って超高速な読み込み速度を実現する、その他のツールを見つけましょう。特に人気の高いウィジェットには、次のようなものがあります。

• Google レビューウィジェット：ブランドのGoogleレビューをお好みに応じて表示します
• カウントダウンタイマーウィジェット：イベントへの登録など、特定のアクションを取るまでに残された時間を訪問者に示します
• FAQウィジェット：メディアを豊富に使った回答とカスタムスタイルを備えた、検索可能なFAQツールを提供します
• WordPressフォーム：カスタムフォームを作成してウェブサイトに埋め込めます

クリエイター、ブロガー、またはマーケターであるあなたが集中すべきなのは、優れたコンテンツを生み出し、ファネルを最適化することであって、CSSやプラグインに頭を悩ませることではありません。Jotformの無料でサーバー外で動作するツールを使えば、プレミアムでコンバージョン率の高い機能を数分で導入できるので、あなたが最も得意とする仕事に専念できます。今すぐJotformを始めましょう。