AI要約
サイトでユーザーにファイルのアップロードを許可しますか？ WPFormsのファイルアップロード機能を使用すると、オンラインフォームを通じてファイルやメディアを簡単に収集できます。
このガイドでは、WPFormsのファイルアップロードフィールドの使用方法を説明します。
開始する前に、WPFormsがWordPressサイトにインストールおよび有効化されていることを確認する必要があります。ライセンスを確認したら、新しいフォームを作成するか、既存のフォームを編集してください。
ファイルアップロードフォームの作成
フォームビルダーを開いたら、フォームにファイルアップロードフィールドを追加します。フォームビルダーの左側にあるフィールド名をクリックするか、フィールドをプレビューエリアの目的の場所にドラッグアンドドロップすることで、フォームにフィールドを追加できます。
アップロードの許可ファイルタイプ
セキュリティは、WPFormsにとって非常に重要な優先事項です。デフォルトでは、安全なファイルタイプ（WordPressコアで許可されているものと同じ）のみを許可します。これらは次のとおりです。
- 画像 （例：.png、.gif、.jpg）
- ドキュメント（例：.doc、.xls、.ppt、.pdf）
- 音声 （例：.wav、.mp3、.mp4）
- ビデオ（例：.mpg、.mov、.wmv）
許可ファイルタイプの追加
フォームで追加のファイルタイプをサポートしたい場合は、ユーザーに追加のファイルタイプをアップロードさせる方法に関するチュートリアルを確認してください。
ファイルタイプの制限
特定のフォームで許可したいファイル拡張子を制限するには、フォームビルダーでファイルアップロードフィールドをクリックします。次に、フィールドオプションパネルで、許可されるファイル拡張子フィールドに、許可したい拡張子（カンマ区切り）を指定できます。
これにより、他の拡張子のファイルがフォームにアップロードされるのを防ぎます。
アップロードの最大ファイルサイズの指定
デフォルトでは、フォームの最大ファイルサイズはサーバーで設定された制限に制限されます。サーバーで定義されたフォームの最大値を確認するには、フォームビルダーでファイルアップロードフィールドをクリックします。
次に、最大ファイルサイズ設定の横にある 疑問符（?）アイコン にカーソルを合わせると、サーバーが処理できる最大ファイルサイズが表示されます。
フォームの最大ファイルサイズをさらに制限したい場合は、最大ファイルサイズフィールドに数値を指定することで行うことができます。
注意：サイトの最大アップロードサイズを増やしたい場合は、ホスティングプロバイダーに連絡して、可能かどうかを確認する必要があります。詳細については、WPBeginnerのWordPressで最大ファイルアップロードサイズを増やす方法に関するチュートリアルを確認してください。
「モダン」と「クラシック」スタイルの選択
ファイルアップロードフィールドには、クラシックとモダンの2つのスタイルオプションがあります。
これらのオプションを表示するには、フォームビルダーを開き、プレビューエリアのファイルアップロードフィールドをクリックしてフィールドオプションを表示する必要があります。次に、詳細タブをクリックして追加設定を表示します。
詳細オプションにはスタイルドロップダウンがあり、モダンとクラシックを選択できます。
モダン スタイル
ファイルアップロードフィールドのモダンなスタイルは、ドラッグアンドドロップボックスを表示します。訪問者がフォームを使用する際、このフィールドをクリックしてデバイスからファイルを選択するか、デスクトップからファイルをボックスにドラッグすることができます。
このスタイルでは、ユーザーは単一のファイルアップロードフィールドに複数のファイルをアップロードすることもできます。
モダンなスタイルはAJAXアップロードを使用してファイルアップロードを処理します。これは、特に大きなファイルのアップロードは、サイトのホスティングサーバーに多くのリソースを要求し、最終的にフォーム送信後に遅延が発生する可能性があるため役立ちます。
しかし、AJAXアップロードはアップロードプロセスを迅速に開始し、フォームの送信をより速くします。
クラシック スタイル
ファイルアップロードフィールドのクラシックなスタイルは、「ファイルを選択」ボタンを表示します。モダンなスタイルと同様に、ユーザーはファイルをこのボタンにドラッグするか、ボタンをクリックしてデバイスからファイルを選択できます。
ただし、クラシックなスタイルは、単一のファイルアップロードフィールドに複数のファイルをアップロードすることはサポートしていません。
注意: ファイルアップロードボタンの外観を会社のブランディングに合わせてカスタマイズしたいですか？モダンおよびクラシックなアップロードフィールドの両方のボタンのスタイリングを変更する手順については、開発者ドキュメントをご覧ください。
複数ファイルのアップロード
ユーザーが一度に複数のファイルをアップロードできるようにするには、ファイルアップロードフィールドがこれを許可するように設定されていることを確認する必要があります。これを行うには、フィールドオプションを開くためにファイルアップロードフィールドをクリックします。
次に、詳細タブで、まだ設定されていない場合はスタイルドロップダウンをモダンに設定します。
このスタイルは、ユーザーがこのフィールドに1つ以上のファイルをアップロードできるようにする前に必要です。
一般フィールドオプションタブに戻り、最大ファイル数設定を探します。デフォルトでは1に設定されていますが、必要に応じて増やすことができます。
注意: サイトのホスティング環境がアップロードしたいファイルの数を適切に処理できるかどうかわからない場合は、フォームを公開する前にテストを実行することをお勧めします。また、アップロードに関するアドバイスについて、サイトのホスティングプロバイダーに問い合わせることも検討してください。
通知へのファイルアップロードリンクの含める
通知メールにアップロードされたファイルを含めるには、{all_fields}または{field_id}のスマートタグを使用できます。
そうすると、メール通知にアップロードされたファイルへのリンクが含まれます。
これにより、WordPressダッシュボードにログインせずに、ファイルをすばやく表示またはダウンロードできます。
注意: メール通知の設定方法についてサポートが必要ですか？ 詳細については、通知設定の構成に関するチュートリアルをご覧ください。
フォーム通知メールへのファイルの添付
WPFormsを使用すると、オンラインフォームからアップロードされたファイルを添付ファイルとして受信できます。これらの添付ファイルは、ファイルの追加のバックアップレイヤーを提供します。これは、後でWordPressからファイルが削除された場合でも、メールでアクセスできることを意味します。
これを有効にするには、フォーム通知設定の詳細設定セクションに移動し、ファイルアップロード添付ファイルを有効にするオプションをオンに切り替える必要があります。
注意: この機能はデフォルトで無効になっています。通知メールでファイル添付ファイルを受信するには、手動で有効にする必要があります。
この機能の詳細については、ファイルアップロード添付ファイルに関するガイドを参照してください。
アップロードされたファイルの保存
デフォルトでは、ユーザーがアップロードしたファイルは、サイトのアップロードディレクトリ内のWPFormsフォルダに保存されます。
ただし、ファイルをWordPressメディアライブラリにアップロードしたい場合は、フィールドオプションパネルの詳細設定タブに移動し、ファイルをWordPressメディアライブラリに保存するオプションをオンに切り替えます。
ファイルをどこに保存しても、個々のエントリ内のファイルのリンクをクリックすることで、フォームのエントリで常にアクセスできます。
注意: フォームエントリを削除すると、そのエントリ内でアップロードされたファイルも削除されます。重要なファイルは別の場所に保存することをお勧めします。
必要に応じて、エントリを編集することで、特定のエントリからアップロードされたファイルを削除することもできます。ファイルのリンクの横にある赤いゴミ箱アイコンをクリックするだけです。
注意: ファイルアップロードフィールドをメディアライブラリにアップロードを保存するように構成した場合、メディアライブラリからファイルを削除する必要があります。
削除したいファイルをエントリから削除したら、変更を保存するために更新ボタンをクリックしてください。
ファイルアクセスを制限する
ファイルアップロードフィールドを使用すると、特定のWordPressユーザーへのアクセスを制限したり、パスワード保護を追加したりすることで、アップロードされたファイルにアクセスできるユーザーを制御できます。これを行うには、フィールドオプションを開くには、ファイルアップロードフィールドをクリックします。
次に、詳細設定タブで、ファイルアクセス制限を有効にするトグルボタンをオンにします。
有効になったら、ユーザーベースの制限またはパスワード保護のいずれかを選択できます。これらの設定の構成の詳細については、アップロードされたファイルへのアクセスを制限する方法に関するガイドを確認してください。
カメラキャプチャの有効化
デバイスからファイルをアップロードできることに加えて、ユーザーがファイルアップロードフィールドで直接写真やビデオをキャプチャできるようにすることもできます。
このオプションを有効にするには、フィールドオプションパネルの詳細設定タブを開き、カメラを有効にする設定をオンに切り替えます。
有効にすると、フォーマット（写真またはビデオ）を設定し、ビデオを選択した場合は時間制限を調整できるようになります。
フロントエンドでは、ユーザーはアップロードフィールドに更新されたテキストが表示され、「ファイルをドラッグアンドドロップするか、ファイルを選択してアップロードするか、カメラでキャプチャします。」と表示されます。通常どおりファイルをアップロードするか、カメラリンクをクリックして新しい写真を撮るか、ビデオを録画できます。
カメラオプションの使用に関する詳細については、カメラフィールドの使用方法ガイドをご覧ください。
アップロードされたファイルの圧縮
WPFormsは、サイトにアップロードされたファイルを圧縮しません。ただし、ファイルをWordPressメディアライブラリに保存することを選択した場合、WordPressは画像を自動的に圧縮します。
注意：サイトにアップロードする前に画像を最適化したい場合は、WPBeginnerのサイトのパフォーマンスを向上させるために画像を簡単に最適化する方法に関するチュートリアルをご覧ください。
よくある質問
これらは、ファイルアップロードフィールドに関してよく寄せられる質問の一部です。
フォームでユーザーに大きなファイルをアップロードさせたいのですが、うまくいきません。どのような選択肢がありますか？
ファイルアップロードにモダンなスタイルを使用する場合、WPFormsはファイルを自動的に「チャンク」でアップロードします。これにより、アップロードの効率が向上し、サーバーによって設定された一部の制限（サーバータイムアウトなど）を回避できます。
これにより、フォーム内の大きなアップロードの問題のほとんどが解決されますが、ファイルの最大サイズは依然としてサーバーによってMAX_FILE_UPLOADという設定で制限されることに注意することが重要です。これは、サーバーのファイルサイズ制限が10MBの場合、それより大きいファイルをアップロードできないことを意味します。
サーバーのファイルアップロードサイズ制限の調整を検討したい場合は、ホスティングプロバイダーにお問い合わせください。詳細については、WordPressで最大ファイルアップロードサイズを増やす方法に関するWPBeginnerのチュートリアルをご覧ください。WordPressで最大ファイルアップロードサイズを増やす方法。
Cloudflareユーザーは、アップロード制限がプランタイプによって決定されることに注意してください。現在の制限は次のとおりです。
- 無料およびプロ： 100 MB
- ビジネス： 200 MB
- エンタープライズ： 500 MB（カスタマイズについてはサポートにお問い合わせください）
詳細については、Cloudflareのアップロードサイズ制限をご覧ください。
大きなファイルをアップロードしているわけではありませんが、ファイルアップロードプロセスがフリーズして完了しません。なぜですか？
サイトのSSL接続の設定ミスにより、ファイルのアップロードが正常に行われない場合があります。
たとえば、サイトが安全でない（HTTP）接続で読み込まれ、アップロードされたファイルなどのサイトアセットが安全な（HTTPS）接続で読み込まれる（またはその逆）場合、この問題が発生する可能性があります。これにより、混合コンテンツエラーが発生し、フォームでのファイルのアップロードが防止されます。
サイトのホストはSSL設定を簡単に更新できるため、このエラーが発生した場合は必ずホストに連絡してください。また、WordPressでのSSL問題のトラブルシューティングに関するWPBeginnerのガイドも確認してください。WordPressでのSSL問題のトラブルシューティング。
アップロードされたファイルが通知メールで添付ファイルではなくリンクとして表示されるのはなぜですか？
フォームでファイルアップロードの添付が無効になっています。フォーム通知設定の詳細設定オプションから有効にする必要があります。詳細については、ファイルアップロード添付を有効にするガイドをご覧ください。
メール通知へのファイルの添付は、メールの到達性を損なう可能性があるため、デフォルトで無効になっています。たとえば、メールサービスプロバイダーが最大ファイルサイズを10MBしか許可していないのに、ユーザーが10MBを超えるファイルをアップロードした場合、メールは配信されません。
AndroidデバイスのFacebookおよびInstagramモバイルブラウザでファイルアップロードが機能しないのはなぜですか？
一部のアプリ内ブラウザでは、現在ファイルアップロードがサポートされていません。これの最も顕著な例は、FacebookとInstagramのブラウザです。
幸いなことに、この問題をユーザーのために修正するプラグインを作成しました。以下のボタンをクリックして、Escape Facebook/Instagram In-App Browsersプラグインをダウンロードできます。
Escape Facebook/Instagram In-App Browsersプラグインをダウンロード
プラグインをダウンロードしたら、サイトにインストールして有効化するだけです。
フォームが送信されず、ファイルアップロードフィールドが含まれています。何が問題なのでしょうか？
ファイルアップロードフィールドを追加した後、フォームの送信が停止またはハングする場合、問題は通常、ファイルサイズの制限、SSLの誤設定、またはJavaScriptの競合に関連しています。ファイルを添付せずにフォームを送信してみてください。送信される場合は、ファイルアップロードフィールドが原因です。そこから、サーバーで設定されている最大ファイルサイズ制限を確認し、上記のFAQにあるSSLトラブルシューティングのヒントを確認し、プラグインの競合をテストしてください。
Safariでファイルアップロードが機能しません。どうすれば修正できますか？
Safariでは、特にHEIC画像の場合や、プライバシー設定がAJAXアップロードに必要なクロスオリジンリクエストをブロックする場合に、モダン（ドラッグアンドドロップ）アップロードスタイルで問題が発生することがあります。ユーザーがSafariでファイルをアップロードする際に問題が発生したと報告した場合は、詳細設定タブでファイルアップロードフィールドをクラシックスタイルに切り替えて、問題が解決するかどうかを確認してください。問題が続く場合は、プラグインの競合をテストしてください。Safariは他のブラウザよりもJavaScriptの競合に敏感です。
これで、WPFormsでファイルアップロードフィールドを使用する方法がわかりました。
次に、ユーザーがフォームの入力方法に基づいて異なる通知メールを送信する方法を学びたいですか？完全なチュートリアルについては、WPFormsで条件付きフォーム通知を作成する方法をご覧ください。