AI要約
モバイルページの読み込み時間を短縮するために、サイトでGoogle AMPを使用していますか? AMP(Accelerated Mobile Pages)を設定すると、モバイルデバイスでサイトがより速く読み込まれるようになります。ただし、サイトの一部の機能が正しく動作しなくなる可能性もあります。
このチュートリアルでは、WordPressサイトでWPFormsとAMPを連携させる方法を説明します。
要件: Google AMP互換性はWPForms Liteでのみ利用可能です。 さらに、WPFormsがGoogle AMPと連携するには、サイトにSSL証明書がインストールされており、HTTPS経由で読み込まれている必要があります。HTTPSへの移行方法がわからない場合は、WPBeginnerのこのプロセスに関するチュートリアルを参照してください。
Google AMPとは?
Google AMP(Accelerated Mobile Pages)は、モバイルユーザー向けのWebコンテンツの読み込みを高速化することを目的としたオープンソースイニシアチブです。
しかし、これらの読み込み速度の向上を達成するために、AMPは多くのリソースの読み込みをブロックします。その結果、AMPページでは一部の機能が期待どおりに動作しなくなります。
たとえば、デフォルトでは、WPFormsはフォームがAMPページで読み込まれているかどうかを自動的に検出します。AMPページが検出された場合、ユーザーにはページの完全な(AMPではない)バージョンを読み込むためのリンクが表示されます。

そのため、WPFormsにはGoogle AMP専用の特別な互換性が含まれています。
WPFormsにAMP互換性を追加する
注意: AMPを使用する場合、Number SliderフィールドとModern Style Dropdownフィールドはサポートされていません。WordPressサイトでAMPを有効にしたい場合は、Classic Style DropdownとNumbersフィールドの使用をお勧めします。
開始するには、公式のWordPress用Google AMPプラグインをインストールして有効化する必要があります。プラグインのインストール方法については、WPBeginnerのガイドを参照してください。
Google AMPプラグインのセットアップウィザードを使用して、必要な設定を構成できます。詳細については、AMPとWordPressの使用に関するWPBeginnerの完全なチュートリアルを参照してください。
フォームとAMPプラグインを統合するために追加の設定は必要なく、埋め込まれたすべてのフォームに互換性が自動的に追加されます。
WPFormsとAMPでreCAPTCHAを使用する
AMPでWPFormsのreCAPTCHAを使用するには、reCAPTCHA v3を使用する必要があります。これはAMPでサポートされている唯一のreCAPTCHAバージョンです。
この機能の有効化に関するステップバイステップガイドについては、WPFormsでのreCAPTCHAの設定に関するチュートリアルを参照してください。
現在フォームでv2 reCAPTCHAを使用している場合は、v3 reCAPTCHAに切り替えるためにセットアッププロセス(新しいキーの作成を含む)を繰り返す必要があります。
AMPページでreCAPTCHAを機能させたい場合は、reCAPTCHAの設定でこれを有効にする必要があります。
これを行うには、reCAPTCHA管理ダッシュボードに移動し、WPFormsに追加したv3 reCAPTCHAの歯車アイコンをクリックします。

次に、設定ページの最下部までスクロールし、このキーをAMPページで機能させることを許可するの横にあるチェックボックスを選択します。

注意: CAPTCHA設定は、AMPページではデフォルトで不可視のreCAPTCHAに設定されます。これは、AMPページに埋め込まれたフォームでは、ユーザーにreCAPTCHAバッジが表示されないことを意味します。
設定を保存することを忘れないでください。そうすれば、AMPページでreCAPTCHAバッジが表示されるはずです。
最後に、フォームをテストして、意図したとおりに見え、機能することを確認してください。
これで完了です!Google AMPを使用して、サイトのモバイルユーザーが引き続きフォームを表示および入力できることを確認できるようになりました。
次に、インターネットが利用できない場合でもフォームの送信を収集する方法を学びたいですか?詳細については、オフラインモードアドオンのチュートリアルを確認してください。