Comment télécharger une image WordPress depuis le frontend avec un plugin

Le téléchargement d'images est l'une des choses les plus importantes lorsqu'on parle d'un site web, car les images sont,基本上, ce qui donne le style à un site sans images, un site pourrait paraître trop vieux ou ne pas obtenir le nombre de clients/utilisateurs que nous aimerions obtenir.

En dehors de cela, donner la possibilité à vos utilisateurs de télécharger des images dans le frontend pourrait vous donner de nombreux avantages tels que leur permettre de télécharger des documents ou n'importe quelle image qu'ils aimeraient utiliser pour, par exemple, un profil.

Dans cet article, nous allons évaluer quelques plugins qui nous permettent de réaliser ce que nous voulons faire.

Comment télécharger une image WordPress depuis le frontend avec un plugin

Ici, nous allons discuter de plusieurs façons de télécharger des images WordPress avec plusieurs types de plugins.

Télécharger des fichiers dans le Frontend à l'aide d'un plugin de formulaire

L'un des moyens les plus rapides et les plus accessibles consiste à utiliser un plugin de formulaire, cela est utile lorsque nous devons créer, par exemple, un formulaire de contact où nous devons demander à l'utilisateur de télécharger un document ou toute information utile en utilisant une image.

Il existe de nombreux plugins qui vous permettent de créer des formulaires avec un champ de téléchargement de fichiers, l'un d'eux est Contact Form 7 qui vous permet de télécharger des fichiers sur votre site en frontend gratuitement.

Ainsi, pour utiliser des formulaires pour permettre à vos utilisateurs de télécharger des fichiers sur le frontend, nous devrons créer le formulaire en premier lieu, donc après avoir installé le plugin, allez à Contact > Ajouter un nouveau.

Dans cet écran, vous aurez des balises HTML avec le shortcode pour chaque champ à l'intérieur, par défaut, un formulaire est créé avec les champs de base.

Comme nous voulons ajouter un champ de téléchargement de fichier, cliquez sur l'emplacement où vous souhaitez ajouter le champ, puis cliquez sur le fichier dans les boutons/options disponibles.

Cela ouvrira une popup où vous pouvez définir des limites pour le téléchargement de votre fichier, ajouter toutes les limites que vous voulez, et enfin, cliquez sur insérer une balise.

Cela ajoutera le shortcode pour le champ dans le contenu du formulaire.

Maintenant, vous pouvez personnaliser autant que vous le souhaitez votre formulaire, ajouter d'autres champs, ou ajouter du HTML et aussi du CSS si vous le souhaitez, car le formulaire accepte toutes ces sortes de personnalisations.

Lorsque tout est fait, vous pouvez ajouter un titre et cliquer sur Enregistrer.

Cela générera un shortcode que vous pouvez utiliser pour intégrer le formulaire dans votre article ou page, copiez, puis utilisez le bloc disponible dans votre éditeur de page pour ajouter un shortcode, dans ce cas, nous verrons comment l'ajouter avec l'éditeur Gutenberg.

Maintenant, vous devez le publier et vous pourrez voir le formulaire avec les champs que vous avez ajoutés et le bouton de téléchargement de fichier.

Tout ce que vous avez à faire est de cliquer sur Choisir un fichier et de sélectionner le fichier, dans ce cas, votre image, parmi vos dossiers sur votre PC.

Après avoir cliqué sur soumettre, cela devrait être fait et l'image devrait maintenant être sur votre site.

De cette façon, vos utilisateurs pourront télécharger des images sur votre site, ainsi que d'autres informations dont nous pourrions avoir besoin comme le nom ou l'e-mail de la personne qui a téléchargé en utilisant un formulaire, vraiment simple et fonctionnel.

Utilisation du plugin de téléchargement de fichiers WordPress

Maintenant que nous avons vu la façon normale "ancienne", voyons comment télécharger une image mais en utilisant ce plugin qui nous permettra d'intégrer une option de téléchargement de fichier dans n'importe quel article ou page sans avoir besoin de remplir d'autres informations ou de créer un formulaire du tout.

Tout d'abord, nous devons avoir le plugin "WordPress File Upload" installé, car cela nous donnera toutes les options nécessaires pour créer l'option de téléchargement de fichiers.

Après avoir activé ce plugin sur notre site, nous devrions être en mesure de voir une option de menu disponible pour vérifier tous les fichiers que nous téléchargeons en l'utilisant.

Afin de l'utiliser, tout ce que nous avons à faire est d'ajouter un shortcode [wordpress_file_upload] là où nous voulons l'afficher, dans ce cas, nous avons un article avec quelques informations préparées où nous avons ajouté le shortcode afin que vous puissiez vérifier à quoi cela ressemblerait dans l'éditeur Gutenberg et le frontend.

Éditeur Gutenberg

Interface publique

Maintenant que notre formulaire de téléchargement est ajouté, tout ce que vous avez à faire est de cliquer sur "Sélectionner un fichier" pour explorer les fichiers de votre PC, et enfin, cliquez sur Télécharger le fichier.

En cliquant sur ce bouton, vous permettez à vos utilisateurs de télécharger une image ou un fichier sur votre site, et la meilleure partie est que nous pouvons sélectionner où sur le serveur nous voulons télécharger l'image directement sous les paramètres du plugin ainsi que la façon dont cela ressemble et de nombreux autres paramètres pour le formulaire.

L'endroit principal où nous pouvons vérifier les téléchargements sera dans l'option "Télécharger des fichiers" dans le menu de gauche du tableau de bord d'administration, c'est la page principale du plugin où tous les fichiers téléchargés sont affichés.

Comme vous pouvez le voir, un plugin facile et fonctionnel qui nous permettra d'obtenir des images de nos utilisateurs sans grande difficulté, plus que de coller le shortcode dans le backend et d'attendre que les utilisateurs téléchargent le fichier.

Gérer les médias par rôle d'utilisateur à l'aide de WP Media Folder

Comme nous pouvons le voir, il existe de nombreuses façons de permettre à nos utilisateurs de télécharger des images et des fichiers dans le frontend, mais le problème dans ces cas est que les images pourraient être téléchargées "de manière aléatoire" et nous ne pourrions pas avoir un bon contrôle exact de l'endroit où elles sont téléchargées, pas de soucis à avoir ! WP Media Folder à la rescousse.

WP Media Folder

Tout d'abord, nous devons avoir installé WP Media Folder, c'est le plugin qui nous permettra d'utiliser toutes les fonctionnalités disponibles pour faire fonctionner cela.

Maintenant que nous l'avons installé, nous devrons activer l'option pour limiter l'accès, pour cela, allez dans Paramètres > WP Media Folder, et nous pourrons voir la WP Media Folder page de configuration principale.

Dans cette section, accédez à Accès & Conception > Accès aux médias.

Dans cette section, afin de limiter les médias par rôle d'utilisateur et de générer automatiquement un dossier dédié à chaque rôle d'utilisateur, nous sélectionnerons Accès aux médias par utilisateur ou Rôle d'utilisateur et Rôles d'utilisateur.

Nous avons également plus d'options comme la sélection d'un dossier de chemin ou permettant au rôle/utilisateur de voir tous les autres médias de rôle/utilisateur.

Maintenant que nous avons activé l'option pour n'autoriser qu'un rôle d'utilisateur à modifier ses propres médias, disons que nous avons un rôle d'éditeur et que nous voulons que tous les utilisateurs sous ce rôle puissent voir et gérer leurs médias pour les articles et les pages.

Avec les options que nous avons sélectionnées, tout cela devrait être possible, alors voyons, pour cela, tout ce que nous avons à faire est de nous connecter en tant que Rédacteur et de télécharger les médias comme ils le feraient normalement.

Lorsque vous êtes connecté en tant que rédacteur, vous pourrez voir la médiathèque comme ceci.

Comme vous pouvez le voir, il y a deux sections où la médiathèque vous indique que nous sommes dans un dossier appelé "editor" alors téléchargeons des médias pour vérifier comment cela fonctionnerait.

Le processus de téléchargement serait exactement le même que vous faites habituellement, il pourrait être réalisé à l'aide d'un outil de téléchargement frontal ou simplement en utilisant votre médiathèque, tout ce que ce rôle d'utilisateur télécharge sera limité automatiquement pour le rôle d'utilisateur.

L'un des avantages de l'utilisation de WP Media Folder est que ce rôle (et tous les autres ayant accès à wp-admin) pourra créer des dossiers en utilisant le + Ajouter un nouveau dossier bouton.

Nous pouvons confirmer que sous la médiathèque un dossier Éditeur a été créé et à l'intérieur se trouve le dossier que nous avons créé en utilisant le rôle Éditeur, et c'était aussi simple que de cliquer sur un bouton !

Maintenant que nous avons activé l'option accès média, un dossier sera créé pour chaque rôle qui accède à votre médiathèque et télécharge une image, et pourra partager ou non les médias avec les autres utilisateurs sous le même rôle en fonction des paramètres que vous choisissez, vous pouvez également avoir plus de contrôle sur vos médias à l'aide de filtres.

Quelle fonctionnalité incroyable et vraiment facile à utiliser ! N'est-ce pas ?

Permettez à vos utilisateurs de télécharger des fichiers de la manière la plus professionnelle

Dans cet article, nous avons pu voir comment permettre à nos utilisateurs de télécharger leurs images de la manière la plus professionnelle et adapter notre site à chaque cas, comme simplement soumettre un formulaire ou également permettre à nos rédacteurs de créer un dossier partagé que seuls ils pourront voir dans la médiathèque, et ce n'est pas tout ! Avec WP Media Folder vous pourrez faire plus de choses comme connecter votre médiathèque à un service cloud, Génial ! N'est-ce pas ?

Vérifiez plus sur WP Media Folder et la limitation d'accès ici!