ウェブサイトについて話すとき、画像のアップロードは最も重要なことの1つです。画像は基本的に、サイトのスタイルを与えているからです。画像のないサイトは古く見えたり、望む顧客/ユーザーを獲得できない可能性があります。.

これに加えて、フロントエンドでユーザーに画像をアップロードする可能性を与えることは、例えばプロファイルに使用したい任意の画像やドキュメントをダウンロードできるようにするなど、多くの利点をもたらす可能性があります。.

この投稿では、やりたいことを実現するためのいくつかのプラグインを評価します。.

プラグインを使用してWordPressのフロントエンドから画像をアップロードする方法

ここでは、WordPressの画像をさまざまな種類のプラグインでアップロードするいくつかの方法について説明します。.

フォームプラグインを使用してフロントエンドでファイルをアップロードする

最も迅速でアクセスしやすい方法の1つはフォームプラグインを使用することです。これは、例えば、ユーザーがドキュメントや画像を使用して有用な情報をアップロードする必要がある連絡フォームを作成する必要がある場合に便利です。.

ファイルアップロードフィールドを含むフォームを作成できるプラグインは数多くあり、その1つがContact Form 7で、フロントエンドでサイトにファイルを無料でアップロードできます。.

したがって、フォームを使用してユーザーがフロントエンドでファイルをアップロードできるようにするには、まずフォームを作成する必要があります。プラグインをインストールした後、コンタクト > 新規追加に移動します。

この画面では、HTMLタグ内に各フィールドのショートコードが表示されます。デフォルトでは、基本的なフィールドを持つフォームが作成されます。.

ファイルアップロードフィールドを追加したい場合は、フィールドを追加したい場所をクリックし、利用可能なボタン/オプションのファイルをクリックします。.

これにより、ポップアップが開き、ファイルのアップロード制限を設定したり、必要な制限を追加したり、最後にタグを挿入をクリックします。

これにより、フォームコンテンツのフィールドのショートコードが追加されます。.

これで、フォームを必要なだけカスタマイズできます。他のフィールドを追加したり、HTMLやCSSを追加したりすることもできます。フォームでは、あらゆる種類のカスタマイズが可能です。.

すべて完了したら、タイトルを追加して保存をクリックします。

これにより、投稿またはページにフォームを埋め込むために使用できるショートコードが生成されます。コピーして、ショートコードを追加するためのページエディタで利用可能なブロックを使用します。この場合、Gutenberg Editor を使用して追加する方法を確認します。.

次に、それを公開する必要があり、追加したフィールドとファイルアップロードボタンが表示されたフォームが表示されます。.

必要なのは、[ファイルを選択] をクリックして、PC上のフォルダからファイル（この場合は画像）を選択することだけです。.

送信をクリックすると、処理が完了し、画像がサイトにアップロードされます。.

この方法では、ユーザーがフォームを使用してサイトに画像をアップロードできるようになります。その他の情報（名前やメールアドレスなど）も必要に応じてアップロードできます。非常にシンプルで機能的です。.

WordPress ファイルアップロードプラグインの使用

通常の「古い」方法を見てきましたが、このプラグインを使用して画像をアップロードする方法を見てみましょう。これにより、他の情報を入力したりフォームを作成したりすることなく、任意の投稿やページにファイルアップロードオプションを埋め込むことができます。.

まず最初に、「WordPress File Upload」プラグインをインストールする必要があります。これにより、ファイルアップロードオプションを作成するために必要なすべてのオプションが提供されます。.

このプラグインをサイトでアクティブにすると、使用してファイルをアップロードする際に、すべてのファイルを確認できるメニューオプションが表示されるはずです。.

それを使用するには、ショートコード[wordpress_file_upload]を表示したい場所に追加するだけです。この場合、ショートコードを追加した投稿を用意して、Gutenberg Editor とフロントエンドでの表示を確認できるようにしました。

グーテンベルクエディター

フロントエンド

アップロードフォームが追加されたら、PCファイルを参照するために「ファイルを選択」をクリックし、最後に「ファイルのアップロード」をクリックするだけです。.

このボタンをクリックすると、ユーザーはサイトに画像またはファイルをアップロードできます。これの最高の部分は、プラグイン設定の下で直接、サーバーのどこに画像をアップロードするかを選択できることと、フォームの外観やその他の多くの設定が可能であることです。.

アップロードを確認できる主な場所は、管理ダッシュボードの左側のメニューにある「ファイルのアップロード」オプションです。これは、アップロードされたすべてのファイルが表示されるプラグインのメインページです。.

ご覧のとおり、簡単で機能的なプラグインで、ユーザーが画像をアップロードする際に大きな不便さを与えることなく、バックエンドでショートコードを貼り付けてファイルをアップロードするのを待つだけで済みます。.

WP Media Folderを使用してユーザー役割ごとにメディアを管理する

ご覧のとおり、フロントエンドでユーザーに画像やファイルをアップロードさせる方法は数多くありますが、それらのケースでは、画像が「ランダムに」アップロードされる可能性があり、これらのアップロード先を正確に制御することはできません。でも心配はいりません！ WP Media Folder が救世主です。.

WP Media Folderには、メディアライブラリへのアクセスを管理するための特別なツールが用意されています。これは、誰がどこに画像をアップロードするかを制御したい場合や、ユーザーが他の役割/ユーザーのメディアを見ることができないように、メディアライブラリで自分のメディアを直接管理できるようにしたい場合に非常に役立ちます。

まず最初に、 WP Media Folderをインストールする必要があります。これにより、この機能を実現するために利用可能なすべての機能を使用できるようになります。.

インストールが完了したら、アクセスを制限するオプションを有効にする必要があります。そのためには、設定 > WP Media Folderに移動し、WP Media Folderのメイン設定ページを表示します。

このセクションでは、アクセスとデザイン > メディアアクセスに移動します。

このセクションでは、ユーザー役割ごとにメディアを制限し、ユーザー役割ごとに専用のフォルダを自動生成するために、ユーザーによるメディアアクセス またはユーザー役割とユーザー役割を選択します。

パスフォルダーの選択や、役割/ユーザーに他のユーザー/役割のメディアを表示させるなどのオプションもあります。.

これで、ユーザー・ロールに自身のメディアの編集のみを許可するオプションを有効にしました。たとえば、エディター・ロールがあり、このロールを持つすべてのユーザーが投稿やページのメディアを表示および管理できるようにするとします。.

私たちが選択したオプションを使用すると、これらすべてが可能になるはずなので、実際に試してみましょう。そのためには、編集者としてログインし、通常と同じようにメディアをアップロードするだけです。.

エディターとしてログインすると、このようにメディア ライブラリが表示されます。.

ご覧のとおり、Media Library が「editor」というフォルダにいることを知らせる 2 つのセクションがあります。いくつかのメディアをアップロードして、どのように機能するかを確認してみましょう。.

アップロードのプロセスは、通常行うのとまったく同じです。フロントエンドのアップロードツールを使用するか、メディアライブラリを使用するだけです。このユーザーロールがアップロードするすべてのものは、ユーザーロールに対して自動的に制限されます。.

を使用する利点の 1 つは、WP Media Folderこのロール (および wp-admin にアクセスできる他のすべてのロール) が、+ 新しいフォルダーの追加 ボタンを使用してフォルダーを作成できることです。

メディア ライブラリの下にエディターフォルダが作成され、内部にはエディターの役割を使用して作成したフォルダがあり、ボタンをクリックするだけで作成できたことを確認できます！

メディア アクセス オプションを有効にすると、メディア ライブラリにアクセスして画像をアップロードするロールごとにフォルダが作成され、選択した設定に応じて、同じロールを持つ他のユーザーとメディアを共有するかどうかを選択できます。また、フィルターを使用してメディアをより詳細に制御することもできます.。

なんて素晴らしい機能で、とても使いやすいんでしょう！

ユーザーが最もプロフェッショナルな方法でファイルをアップロードできるようにする

この投稿では、ユーザーがプロフェッショナルな方法で画像をアップロードできるようにし、フォームを送信するだけの場合や、編集者が共有フォルダーを作成してメディアライブラリでのみ表示できるようにする場合など、サイトを各ケースに適応させる方法を確認しました。これだけではありません！WP Media Folderを使用すると、メディアライブラリをクラウドサービスに接続するなど、さらに多くのことができます。すばらしいですね！

の詳細についてはこちらをご覧くださいWP Media Folderとアクセス制限こちら!