WordPressのコンタクトフォームを他の言語に翻訳したいですか？
あなたのウェブサイトが英語を母国語としない世界のさまざまな地域の人々にサービスを提供する場合、翻訳は本当に重要です。
WordPressで翻訳を行うのはとても簡単です。単に言葉を翻訳するだけでなく、より多くの人に門戸を開いていることを忘れないでください。🌐
この記事では、WordPressのお問い合わせフォームを翻訳する方法をご紹介します。
WordPressのコンタクトフォームを翻訳する方法
このチュートリアルでは、すでにWPForms が インストールされているものとします。翻訳の処理はコンタクトフォームプラグインごとに若干異なるので、以下の手順は他のフォームプラグインでは正確ではないかもしれません。
この記事で
ステップ1: シンプルなコンタクトフォームを作成する
WPFormsがインストールされ、有効化されていれば、翻訳するフォームを作成することができます。
WordPressの管理メニューを開き、WPForms " Add Newに進みます。
そうすると、フォームの設定画面になります。まずはフォームのタイトルをつけてください。
その後、テンプレートセクションまでスクロールダウンし、2,000 以上の WordPress フォームテンプレートから 1 つを選択します。このチュートリアルでは Simple Contact Form テンプレートを選びます。
テンプレートを使うを押すとすぐに、フォームビルダー内でフォームテンプレートの読み込みが始まります。
左側のパネルから右側のパネルにドラッグすることで、コンタクトフォームにフィールドを追加することができます。
この時点までにフォームに加えた変更を保存するには、必ず「保存」ボタンを押してください。
ステップ 2: フォームフィールドを翻訳する
WPFormsでコンタクトフォームのフィールドを翻訳するのはとても簡単です。
自動翻訳
この翻訳方法に従う場合、まずWPFormsが提供する埋め込みオプションのいずれかを使用してフォームを公開する必要があります。その後、以下の手順に従ってください。
フォームフィールドをあらゆる言語に翻訳する最も速い方法はWeglotプラグインを使うことです。
Weglotは、言語切り替えボタンをクリックするだけで、サイトのコンテンツを瞬時にあらゆる言語に翻訳できる有料プラグインです。
WPForms で作成されたフォームを含め、WordPress サイトのあらゆる種類のコンテンツで動作します。WPForms をインストールしたのと同じ手順で Weglot をインストールできます。
プラグインをインストールした後、WordPress 管理メニューのサイドバーからWeglot をクリックします。
Weglotの設定画面が表示されます。
Weglotの翻訳サービスを利用するには、Weglotでアカウントを作成し、APIキーを使用してアカウントとWordPressを接続する必要があります。
APIの下にあるWeglotリンクをクリックしてWeglotアカウントを作成し、APIキーを取得してください。
Eメールアドレスとパスワードを入力して、新しいアカウントを作成してください。
Weglotから確認メールが送信されます。メール内のリンクをクリックすると、Weglotのダッシュボードにリダイレクトされますので、そこでAPIキーをコピーしてください。
ブラウザのタブをWordPressサイトのWeglotの設定ページに戻し、APIキーを貼り付けます。
また、あなたのサイトの元の言語を選択する必要があります。次に、コンテンツやフォームを翻訳する言語を選択します。
その後、一番下にある「変更を保存」ボタンを押します。
Weglotはあなたのサイトが多言語になったことを確認するモーダルを表示します。
コンタクトフォームを公開したページにアクセスし、下部の言語スイッチを使用してフォームを別の言語に翻訳してください。
ご覧のように、Weglotはフォームフィールドラベル、ボタンテキスト、サブラベルをご希望の言語に翻訳します。
しかし、どの翻訳プラグインもWPFormsのバリデーションとエラーメッセージを自動的に翻訳することはできません。
そのため、ステップ3で示したように、検証メッセージを手動で翻訳する必要がある。
また、Weglotは10日間の無料トライアルが可能な有料プラグインです。10日以降も翻訳機能を使用するには、有料プランを購入する必要があります。
この方法が最適でない場合は、手動でコンタクトフォームを無料で翻訳する方法をご紹介します。
マニュアルフォームの翻訳
WPFormsでフォームを手動で翻訳するのはとても簡単です。フォームフィールドのラベルを変更するには、フォームエディタでフォームフィールドをクリックし、デフォルトのラベルを翻訳したい言語で置き換えるだけです。
翻訳に助けが必要な場合は、Google翻訳のようなオンライン翻訳ツールを使用することができます。
フォームラベルを翻訳した後、名前サブラベル（"First "や "Last "のようなフォームフィールドの下のラベル）について何かする必要があります。WPFormsでは名前サブラベルを編集することはできませんが、これを回避する方法があります。
サブラベルを変更したいフィールドをクリックして、左側のペインの Field Options にアクセスします。そして、Advancedタブをクリックする。
サブラベルを翻訳することはできませんが、サブラベルの代わりにカスタムプレースホルダーを使うことはできます。
プレースホルダーのフィールドに翻訳を挿入します。
次に一番下までスクロールして、「サブラベルを隠す」トグルボタンをクリックする。
また、Submitボタンのテキストとフォーム名（もともと英語のフォーム名を使用している場合）も翻訳する必要があります。
これを行うには、フォームビルダー内の設定 " 一般に進みます。
右側のペインで、フォーム名のテキストボックスに翻訳を入力します。
下までスクロールし、 Submit Button Text（送信ボタンテキスト）とSubmit Button Processing（送信ボタン処理）テキストボックスで同じ手順を繰り返します。
素晴らしい！これでフォーム内のすべてのラベルとテキストが翻訳されました。保存を押して次のステップに進んでください。
ステップ 3: フォームのバリデーションメッセージを翻訳する
バリデーションメッセージは、必須フォームフィールドが空のままになっていたり、誰かが間違ったデータをフォームフィールドに入力したときに表示されるテキストです。
コンタクトフォームのバリデーションメッセージを翻訳するには、フォームビルダーを終了し、WordPressのダッシュボードからWPForms " Settingsに移動します。次にバリデーションタブをクリックします。
そこから、現在のバリデーションメッセージ（デフォルトでは英語）を、コンタクトフォームを翻訳する言語に変更するだけです。
Note: Make sure not to translate the text enclosed in curly brackets like {suggestion}. Changing this placeholder text can display gibberish in your error messages.
完了したら、Save Settingsを押してください。
間違った入力をしたり、必須フィールドをスキップしたりしてフォームをチェックすると、翻訳されたバリデーションメッセージが表示されます。
これで完了です！これでWordPressのコンタクトフォームを翻訳する方法がわかりました。
ほとんどのサイトでは上記の手順で十分ですが、特殊なフィールドを翻訳するためにPHPコードが必要になる場合もあります。
コードを使ったことがなくても、コード・スニペットをコピー・アンド・ペーストするだけでよい。
ボーナス：高度な翻訳オプション
さまざまな特殊なシナリオの詳細に入る前に、まず、WordPressサイトにカスタムコードスニペットを最も簡単な方法で挿入する方法を説明しましょう。
そのためには、WPCodeというプラグインが必要です。このプラグインをあなたのサイトにインストールしてください。
プラグインをインストールしたら、WP管理画面のサイドバーにあるCode Snippetsにカーソルを合わせ、Add Snippetをクリックします。
次に、カスタムコードの追加（新規スニペット）の下にあるスニペットの使用ボタンを押します。
コード・エディター・ウィンドウが開きます。
上部にはスニペットに名前を付けることができ、後で参照するのに便利です。真ん中にはコードエディターがあり、自分でコードを書いたり、他のソースからコピーペーストすることができます。
右上で、コードの性質に応じてコードの種類を選択できます。このシナリオではPHPコードを使用するので、ドロップダウンからPHPスニペットを選択します。
すばらしい。では、フォームの特定の部分を翻訳するためにPHPコードを使う必要がある、よくあるシナリオをいくつか見ていきましょう。
検証メッセージを多言語に翻訳する
同じサイトに異なる言語のフォームがあるサイトを考えてみましょう。上で示したように、手動もしくは Weglot プラグインを使えば簡単にラベルを変更できますが、これらの方法では個々のフォームのバリデーションメッセージを変更することはできません。
あなたのサイトでユーザーが選択した特定の言語に基づいてバリデーションメッセージを変更するには、PHPコードスニペットを挿入する必要があります。
ユーザーが選択した言語に基づいて、フォーム検証メッセージをスペイン語またはフランス語に翻訳するコードスニペットを作成しました。
WPCodeを使って新しいスニペットを追加するために、上で示した手順に従って、コード・エディター内に以下のスニペットを挿入してください：
コードの挿入方法（自動挿入、どこでも実行）を選択する。
次に、一番上までスクロールして戻り、トグル・ボタンを押してコード・スニペットをアクティブに 設定します。Save Snippetボタンをクリックします。
おめでとうございます！選択した言語でバリデーションメッセージが表示されるようになります。
他の言語の翻訳を追加したい場合は、その言語のICL言語コードが必要です（スペイン語は'es'、フランス語は'fr'）。で始まるコード行を追加するだけです：
case '[insert your language code]':
次に、上記のコード例で示したのと同じコード・ブロックを、case行の直後に使用する。
各検証メッセージの翻訳を、以下のように角括弧内の等号の右側に追加します（特定の検証メッセージのタイプは、二重の前方スラッシュで示されます）：
//valid number
$strings[ 'val_number' ] = '[Enter your translation]'
そして、各コード行ごとに繰り返す。
このコードはWPMLと Polylangプラグインでテストしました。他の言語の翻訳プラグインとの互換性は保証されていません。
メール確認フィールドのサブラベルを翻訳する
Eメール確認フィールドを使用している場合、サブラベルを他の言語に翻訳したい場合があります。
前の例で示したように、WPCodeを使用して挿入されたいくつかのカスタムPHPコードでこれを行うことができます。
これが必要なコードだ：
サブラベルの翻訳されたテキストは、$properties関数の等号の右側に挿入する必要があります。
例えば、Eメール確認フィールドのスペイン語サブラベルのために、上記のコードをどのように変更する必要があるかを以下に示します：
$properties[ 'inputs' ][ 'primary' ][ 'sublabel' ][ 'value' ] = __( 'Introduce tu correo electrónico', 'plugin-domain' );
$properties[ 'inputs' ][ 'secondary' ][ 'sublabel' ][ 'value' ] = __( 'Para confirmar, vuelva a ingresar su dirección de correo electrónico aquí', 'plugin-domain' );
上記のコードは、あなたのサイトのフォームのEメール確認フィールドのバリデーションメッセージをグローバルに変更します。しかし、上記のコードを少し修正することで、個々のフォームに対してのみ変更することも可能です。
/**
* Customize email field properties.
*
* @link https://wpforms.com/developers/how-to-change-sublabels-for-the-email-field/
*/
function wpf_dev_email_field_properties( $properties, $field, $form_data ) {
// Only process this snippet on the form ID 123
if ( absint( $form_data[ 'id' ] ) !== 123 ) {
return $properties;
}
// Change sublabel values
$properties[ 'inputs' ][ 'primary' ][ 'sublabel' ][ 'value' ] = __( 'Enter Your Email', 'plugin-domain' );
$properties[ 'inputs' ][ 'secondary' ][ 'sublabel' ][ 'value' ] = __( 'To confirm, re-enter your email address here', 'plugin-domain' );
return $properties;
}
add_filter( 'wpforms_field_properties_email' , 'wpf_dev_email_field_properties', 10, 3 );
コード行の中で if ( absint( $form_data[ 'id' ] ) !== 123 )123 "をフォームIDに置き換えてください。
フォーム ID はWPForms " All Formsにアクセスして、目的のフォームのショートコードにある ID を見ればわかります。
その他の翻訳オプション
特定の種類のフォームだけに関連する、他の特定のフィールドやバリデーションを翻訳したい場合は、次の開発者向けドキュメントをご覧ください：
次に、アコーディオン・フォームを作成する
アコーディオンデザインは、長いフォームを折りたたみ可能なセクションで埋めやすくする素晴らしい方法です。アコーディオンフォームの作成に関する詳細なガイドでは、WordPress でアコーディオンフォームを作成するためのすべての手順を紹介しています。
フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。
"*/</code> "は機能しないので削除してください。
アナ - 機会があれば、サポートで直面している問題の詳細をお知らせください。
WPFormsのライセンスをお持ちの方は、メールサポートをご利用いただけますので、サポートチケットを送信してください。
それ以外の場合は、WPForms Lite WordPress.orgのサポートフォーラムで限定的な無料サポートを提供しています。
ありがとう🙂。