WordPressでアドレスをオートコンプリートする方法

サイトのアドレスを自動的に入力しますか？ あなたは正しい場所に来ました。 このガイドでは、WordPressでアドレスをオートコンプリートする方法を説明します（コーディングは不要です）。

現在、ほとんどのeコマースストアは、顧客が何かを購入するときに住所を含むフォームに記入するように顧客に求めています。 ユーザーがアドレスを手動で入力できるようにするか、オートコンプリートツールを使用してユーザーを支援することができます。 アドレスを自動入力することにより、ユーザーは入力時にリアルタイムで表示されるいくつかのアドレスから提案された場所を選択できます。

住所フィールドにオートコンプリートを使用することは、eコマースストア、特に請求先住所と配送先住所のセクション、チェックアウトページ、または[マイアカウント]ページで非常に一般的です。

WordPressでアドレスをオートコンプリートする理由

WordPressでアドレスを自動入力すると、Webサイトのユーザーエクスペリエンスを向上させることができます。 顧客は住所をすばやく入力できるだけでなく、間違いやタイプミスも回避できます。

買い物客が住所を入力すると、可能な住所が画面に表示されるので、正しい住所を選択するだけです。 これにより、ユーザーに表示されるオプションがGooglePlacesおよびGoogleMaps APIと統合されているため、エラーを減らすことができます。

これは、ユーザーに提供できる最も便利な機能の1つです。 サイトでのユーザーエクスペリエンスを向上させることで、売り上げを伸ばし、たまに買い物をする人を定期的な顧客に変える可能性が高くなります。

WordPressにオートコンプリートアドレス機能を追加する利点をよりよく理解できたので、それをサイトに追加する方法を見てみましょう。

WordPressでアドレスをオートコンプリートする方法

WordPressでオートコンプリートアドレスを追加する最も簡単で効果的な方法は、プラグインを使用することです。 このチュートリアルでは、オートコンプリートGoogleアドレスを使用します。 それはユーザーフレンドリーなインターフェースを持ち、非常に使いやすいです。

このプラグインを使用するには、Google PlacesAPIキーとアドレスフィールドのフォームIDが必要です。 次に、WordPressWebサイトにオートコンプリートアドレスを追加するために従う必要のある一連の簡単な手順があります。 手順は次のとおりです。

1.プラグインをインストールしてアクティブ化します

オートコンプリートGoogleアドレスプラグインをインストールしてアクティブ化するには、WordPress管理者で[プラグイン]> [新規追加]に移動します。 次に、検索バーでプラグインを探します。 その後、[今すぐインストール]をクリックしてアクティブにします。

2. Google PlaceAPIキーを入力します

プラグインをアクティブにしたら、ダッシュボードの[オートコンプリート]タブに移動します。 ウェブサイトにはGooglePlaceAPIキーが必要です。

その方法を見てみましょう。

2.1。 Google PlacesAPIキーにアクセスする方法

APIキーにアクセスするには、Googleアカウントにログインし、 Google DeveloperConsoleにアクセスします。 次に、 [プロジェクトの選択]を押して、新しいプロジェクトを作成します。

プロジェクト名を入力して、[作成]をクリックする必要があります。 次に、新しいプロジェクトにリダイレクトされます。

次のステップは、APIを有効にすることです。 これを行うには、ダッシュボードの[ライブラリ]セクションに移動します。

ここでは、Google PlacesAPIを検索する必要があります。 これは通常、この画面に表示される最初のオプションの1つですが、見つからない場合は、検索バーを使用して検索してください。

これで、PlacesAPIの概要ページが表示されます。 [有効にする]をクリックしてAPIを承認します。

次に、ダッシュボードに戻り、[資格情報]タブに移動して、[資格情報の作成]を押します。 APIキーオプションを選択する必要があるドロップダウンメニューが表示されます。

それでおしまい！ これで、APIキーが正常に作成されました。 コピーして、WordPressダッシュボードの[オートコンプリート]タブに貼り付けるだけです。

オートコンプリートアドレス機能がWordPressで正しく機能することを確認するには、Google Maps JavaScriptAPIを有効にする必要があります。 その方法を見てみましょう。

2.2。 Google Maps JavaScriptAPIを有効にする

Google Maps JavaScript APIを有効にするには、まず、 Google DeveloperConsoleダッシュボードから[ライブラリ]タブに移動します。 次に、 Google Maps JavaScript APIを見つけて選択し、有効にします。

それでおしまい！ これで、次のステップに進み、フォームIDを追加する準備が整いました。

3.フォームIDを入力します

Google Place APIキーを入力した後、オートコンプリートアドレス機能を追加するアドレスフィールドのフォームIDも必要になります。 WordPressダッシュボードで、オートコンプリートに移動します。 APIキーフィールドのすぐ下に、フォームIDを入力するための別のフィールドがあります。

フォームIDを見つけるには、次の手順に従ってください。

3.1。 フォームIDを見つける方法

オートコンプリートアドレス機能を追加するためのフォームIDを見つけるには、フィールドが配置されているページに移動します。 次に、アドレスフィールドを右クリックして、[検査]オプションを選択します。 または、フィールドのテキスト領域をクリックして、キーボードショートカットのCtrl + Shift + iを使用することもできます。

これで、[要素]タブに、Webページのすべての要素を検査および表示できる開発者ツールが表示されます。 コードやプログラミングに慣れていない場合でも、心配する必要はありません。 フィールドのコードが強調表示されます。 この場合、以下に示すように、フォームIDはaddress-form-1です。

ご覧のとおり、 id =“ address-form-1”と表示されていますが、実際のフォームIDはaddress-form-1です。

フォームIDを見つけて、WordPress管理ダッシュボードのフォームIDフィールドにコピーするだけです。

次に、ダッシュボードの[オートコンプリート]タブにフォームIDを入力して変更を保存し、アドレスフィールドのあるページに移動します。

最後に、フォームIDを対応するフィールドに貼り付け、変更を保存します。 複数の住所フィールドをオートコンプリートする場合は、各フォームIDを追加し、カンマで区切ります。

それでおしまい！ WordPressにオートコンプリートアドレス機能を追加しました。 今後、ユーザーが住所の入力を開始すると、場所のすべての候補を含むドロップダウンメニューが表示されます。 場所を選択するだけで、完全な住所が自動的に入力されます。

アドレスの自動入力は、最初のステップにすぎません。 さらに一歩進んでカスタマーエクスペリエンスを向上させたい場合は、ストアで注文をオートコンプリートすることもできます。 それを行う方法を見てみましょう。

ボーナス：注文をオートコンプリートする方法

オートコンプリート注文機能を追加することは、サイトのカスタマーエクスペリエンスを向上させるもう1つの優れた方法です。 注文を自動完了することで、注文を即座に処理して確認できるため、買い物客は数時間かかる可能性のある取引の確認を待つ必要がありません。 さらに、ユーザーは購入した商品やサービスにすぐにアクセスできるため、注文を手動で確認する必要はありません。 これは、仮想製品およびダウンロード可能な製品に非常に適しています。

サイトで注文をオートコンプリートする最も簡単で最速の方法は、プラグインを使用することです。 そこにはいくつかのツールがありますが、このデモでは、オートコンプリートWooCommerceOrdersを使用します。 この無料ツールは、最高のプラグインの1つであり、WooCommerceやPayPalなどの支払いゲートウェイとシームレスに統合して、注文をオートコンプリートし、購入をすぐに確認します。

次に進んで、このプラグインの使用方法を見てみましょう。 始める前に、WebサイトでWooCommerceが適切に設定されていることを確認してください。

1. WooCommerceAutocomplete注文のインストールとセットアップ

プラグインをインストールするには、WordPressダッシュボードで、 [プラグイン]> [新規追加]に移動し、オートコンプリートWooCommerceOrdersを検索します。 次に、[今すぐインストール]をクリックしてアクティブにします。

その後、 WooCommerce> Settingsに移動し、 AutocompleteOrdersタブを開きます。 次に、[モード]で[仮想製品の有料注文のみ]を選択し、変更を保存します。

2.PayPalデータ転送IDキーにアクセスします

次に、PayPalからデータ転送IDキーを取得する必要があります。 このためには、PayPalにログインして、設定に移動します。 [販売者ツール]タブで、[ウェブサイトの設定]の[更新]ボタンをクリックします。

[自動復帰]セクションを見つけて[オン]ラジオボタンを選択して自動復帰を有効にする必要があるWebサイト設定オプションにリダイレクトされます。 次に、リターンURLを入力して保存します。

その後、 [支払いデータ転送]セクションまで下にスクロールし、[オン]ラジオボタンを選択して有効にします。 支払いデータ転送用のIDトークンが表示されます。 このIDキーが必要になるので、コピーして便利な場所に置いてください。

3.WooCommerceにPayPalIDキーを入力します

WooCommerceにPayPalIDキーを入力するには、 [WooCommerce]> [設定]に移動し、[支払い]タブを開きます。 次に、 PayPalの[管理]ボタンを押します。

ここで、 PayPal IDキーオプションを見つけて、コピーしたPayPalデータ転送IDキーをテキスト領域に入力します。 最後に、PayPalアカウントのその他の詳細を設定し、変更を保存します。

これは、WooCommerceのオートコンプリート注文機能を追加する方法です。 設定方法の詳細については、このステップバイステップガイドをご覧になることをお勧めします。 さらに、役立つ情報がたくさんあるオートコンプリートWooCommerceOrdersのドキュメントをご覧ください。

結論

要約すると、 utocompletingアドレスは、サイトのユーザーエクスペリエンスを向上させるための優れた方法です。 これにより、買い物客は住所を入力する時間を節約でき、間違いやタイプミスを防ぐことができます。

このガイドでは、コーディングなしでWordPressサイトにオートコンプリートアドレス機能を含める方法を説明しました。 次の方法を見てきました。

• オートコンプリートGoogleアドレスプラグインをアクティブにして設定します
• Google PlaceAPIキーを取得する
• オートコンプリートを追加するアドレスフィールドのフォームIDを見つけます

さらに、 Autocomplete WooCommerceOrdersプラグインを使用して注文をオートコンプリートする方法を見てきました。 これにより、注文を即座に確認し、売り上げを伸ばすことができます。

この記事が役に立った場合は、サイトを最大限に活用するためのその他のガイドを次に示します。

• WooCommerceチェックアウトフィールドを編集する方法
• GoogleマップをWordPressに統合する方法
• チェックアウトの最適化：完全ガイド

WordPressサイトでアドレスの自動入力を開始しましたか？ どのような方法を使用しましたか？ 以下のコメントセクションでお知らせください。