Il peut arriver que dans certains cas que vous aillez besoin de faire appel à des personnes extérieures à votre organisation pour la rédaction du contenu de votre site web. C’est notamment souvent pour l’écriture d’articles. Alors se pose à vous la question : doit je leurs donner accès au back office de mon WordPress ? Si pour un rédacteur régulier la réponse est bien évidement oui , c’est moins évident pour un rédacteur occasionnel. C’est là qu’interviens la possibilité de création d’articles sur votre site WordPress en Front avec le plugin « Caldera Custom Fields ».

Même si cet article est basé sur Caldera Custom Fields », vous pouvez faire la manipulation avec d’autres plugin de formulaire WordPress.

Préambule

Sachez que « Caldera Custom Fields » est un Add-on du plugin « Caldera Forms ». Il vous faudra donc avoir installé ces deux plugins pour que tout fonctionne. On part du principe que vous savez installer des plugins. Si ce n’est pas le cas vous pouvez consulter cet excellent article fait par WP Formation : Comment installer un plugin WordPress gratuit ou premium

Tout d’abords pour télécharger les plugins depuis « WordPress.org » : cliquez sur leur image respectives. Ensuite faite l’installation de vos deux plugin et activez les.

Création du formulaire en back office

Dans notre exemple nous allons voir comment créer un article à partir d’un formulaire. tout d’abords il vous faut créer le formulaire et y ajouter les champs adéquates.

1. Connectez-vous à votre tableau de bord WordPress
2. Naviguez vers le menu « Caldera Forms » puis cliquez sur « Formulaire« . Cela ouvrira la page des paramètres Caldera Forms

3- Pour ajouter un nouveau formulaire, sélectionnez le bouton « Nouveau formulaire » qui se trouve près du haut de la page


4. Dans ce scénario, nous utiliserons le modèle vierge. Sélectionnez celui-ci dans la liste des modèles

5.N’oubliez pas de nommer votre formulaire avec un nom intéressant ou facilement compréhensible comme « Formulaire création d’un article » ou « Création Article Rédacteur Externe »


Une fois cliqué sur « Créer un formulaire« , Vous voila alors sur la page d’ajout des champs de votre formulaire et de réglages divers de celui-ci.

Bravo vous venez de créer votre premier formulaire. Il ne contient toutefois pas de champs. C’est ce que nous allons voir maintenant.

 

Créer les champs du Formulaire

Pour pouvoir créer un nouvel article dans WordPress, il faut un minimum d’informations à savoir : un titre, un contenu, une catégorie, une image mise en avant et le statut de l’article.

Les quatres premières informations seront des champs de votre formulaire. Le statut de l’article qui sera créé sera pour des raisons évidentes mis automatiquement en « Brouillon« . Cela vous permettra de valider l’article créé depuis votre WordPress et d’en modifier le contenu au besoin avant publication en ligne.

Voici ci-dessous le type de champ par contenu pour votre formulaire :

 

Créez votre premier champs : « Titre de l’article »

  1. Mettez votre souris sur le bouton « Add field » puis glissez/déposez celui-ci dans le premier rectangle blanc en dessous
  2. Pour ce premier champs on va créer le champs « Titre de l’article » qui sera de type « Texte sur une ligne« . Sélectionnez cet item dans la liste qui apparaît puis cliquez sur « Set field« 
  3. Une fois fait vous devrez remplir les règles de ce champs qui se trouve alors sur le droite de votre écran. Remplissez les telles que cella est sur l’image ci-dessous. N’oubliez pas de cocher la case « Requis« 

 

Le champs  : « Contenu de l’article »

  1. Mettez votre souris sur le bouton « Add field » puis glissez/déposez celui-ci dans le premier rectangle blanc en dessous du champs « Titre de l’article« 
  2. Sélectionnez l’item dans la liste qui apparaît puis cliquez sur « Set field« 
  3. Une fois fait vous devrez remplir les règles de ce champs qui se trouve alors sur le droite de votre écran. Remplissez les telles que cella est sur l’image ci-dessous. N’oubliez pas de cocher la case « Requis« 

 

Le champs : Catégorie

Ce champs correspond aux « Catégories » d’articles que vous avez créé dans votre WordPress. si vous n’en avez pas ou bien que vous avez qu’une seule catégorie alors se champs ne vous sert à rien dans ce formulaire.

  1. Mettez votre souris sur le bouton « Add field » puis glissez/déposez celui-ci dans le premier rectangle blanc en dessous du champs « Contenu de l’article« 
  2. Dans le menu « Select » à gauche sur l’écran « Fields » , sélectionnez l’item dans la liste qui apparaît puis cliquez sur « Set field« 
  3. Une fois fait vous devrez remplir les règles de ce champs qui se trouve alors sur le droite de votre écran. Remplissez les telles que cella est sur l’image ci-dessous. Pour pouvoir y associer les taxonomies vous devrez cliquer sur « Remplir automatiquement« 

 

Le champs : Image mise en avant

Dans ce champs nous allons demander à l’utilisateur d’uploader une image qui servira d’image mise en avant sur votre article. Attention car le formulaire ne contrôle pas la taille ni le poids de celle-ci. Du coup si votre utilisateur n’est pas un minimum formé au bonne pratique sur internet, il risque de vous uploader sur le site une image de grande taille avec un poids très lourd. Cela va poser un problème ensuite d’affichage sur votre site et de lenteur de page. Heureusement toutefois on peut limité le type de fichier qu’il peux envoyer (exemple: jpg et png)

  1. Mettez votre souris sur le bouton « Add field » puis glissez/déposez celui-ci dans le premier rectangle blanc en dessous du champs « Catégorie« 
  2. Dans le menu « Fichier » à gauche sur l’écran « Fields » , sélectionnez l’item dans la liste qui apparaît puis cliquez sur « Set field« 
  3. Une fois fait vous devrez remplir les règles de ce champs qui se trouve alors sur le droite de votre écran. Remplissez les telles que cella est sur l’image ci-dessous. N’oubliez pas de cocher « Add to media Library », afin que l’image uploader soit visible dans le menu Médias de votre WordPress.

Le bouton de soumission du formulaire

Comme tout bon formulaire vous devez avoir un bouton qui permet à l’internaute de vous envoyer son formulaire une fois rempli. C’est le job que nous allons attribuer au bouton « Soumettre l’article ».

  1. Mettez votre souris sur le bouton « Add field » puis glissez/déposez celui-ci dans le premier rectangle blanc en dessous du champs « Image mise en avant« 
  2. Dans le menu « Fichier » à gauche sur l’écran « Fields » , sélectionnez l’item dans la liste qui apparaît puis cliquez sur « Set field« 
  3. Une fois fait vous devrez remplir les règles de ce champs qui se trouve alors sur le droite de votre écran. Remplissez les telles que cella est sur l’image ci-dessous.

Voila donc le dernier élément de votre formulaire positionné. Grâce à l’arrivée du bouton vous avez maintenant accès en haut de la page à l’item « Save Form ». Cliquez dessus pour sauvegarder votre formulaire.

En back office votre formulaire devrais ressembler maintenant à cela :

 

Ajouter un processus de traitement de formulaire

Pour que votre formulaire puisse fonctionner nous devons maintenant lui indiquer comment réagir une fois que l’internaute à rempli le contenu de celui-ci et appuyé sur le bouton « Envoyer votre article« .

À l’intérieur du générateur Formulaire Caldera, il y aura un onglet appelé « Traitements » situé en haut de l’écran. Une fois que vous entrez dans cet onglet, procédez comme suit :

  1. Cliquez sur le bouton « Ajouter un traitement« 
  2. Dans la liste des traitements, recherchez et sélectionnez . Cela ajoutera le traitement à votre formulaire et vous donnera les paramètres de ce traitement
  3. Une fois fait vous devrez remplir les règles de ce traitement qui se trouve alors sur le droite de votre écran. Remplissez les telles que cella est sur l’image ci-dessous

Les plus attentif d’entre vous auront remarqué qu’il n’y a rien de rempli pour le réglage  « Post Author« . Volontairement on l’a laissé vide dans l’exemple car tout dépend de ce que vous voulez faire de cet article qui va vous être envoyé : le publier au nom de la rédaction, au nom de son auteur ou autre. Si vous avez des questions sur comment faire sur ce sujet laissez un commentaire ci-dessous on vous expliquera comment faire et attribuer l’article à la bonne personne.

Paramètres additionnels

Pour que le formulaire que vous venez de créer fonctionne correctement certains paramètres doivent être modifiés, mais cela dépend entièrement de vous.

  • Désactiver la notification par courrier électronique – Pour ce faire, sélectionnez simplement l’onglet Courrier électronique dans l’éditeur de formulaire Caldera (« De« ) et sélectionnez « Disable Mailer« .
  • Désactiver les entrées – Pour désactiver les entrées, sélectionnez Paramètres de formulaire en haut de la page de configuration du formulaire Caldera (« Form Setting« ). Une fois dans l’onglet des paramètres de formulaire, définissez « Sauvegarder les données » comme désactivées.

N’oubliez pas de sauvegarder votre formulaire une fois ces réglages complémentaires finis.

Mettre le formulaire en ligne

C’est bien beau tout ça on a jolie formulaire mais comment je le met à disposition de mes rédacteurs ?

Pour cela on va utiliser un shortcode créer automatiquement quand vous avez sauvegarder pour la première fois votre formulaire. Tout d’abords créez avec WordPress la page dans laquelle vous souhaitez intégré le formulaire.

Dans l’éditeur cliquez sur   puis dans la fenêtre qui s’ouvre (cf-ci-dessous) cocher le bon formulaire et cliquer sur « Insérer le formulaire »

Quand c’est fait votre écran de back office WordPress de modification de la page devrais ressembler à cela :

Voila c’est terminé, sauvegardez votre page et mettez là ligne en donnant l’url à vos rédacteurs. Dès qu’ils soumettrons un article celui-ci sera visible dans la liste des articles de votre back office WordPress.

J’attire votre attention sur le coté sécurité de tout cela. Définissez à minima votre page comme « Protégé par mot de passe » dans l’option de visibilité de la page pour éviter que quiconque viennent vous envoyez des articles. L’idéal est d’empêcher également l’accès à celle-ci à toute personne non enregistré et logée sur votre site internet.

Je reconnais ce tutoriel est long à lire mais la mise en pratique de tout cela se fait en moins de 10 minutes dans votre WordPress.

PARTAGER
Article Précédent[ITW] Nathalia de la société Semrush – QueDuWeb 2017
Article SuivantOuverture officielle du Slack de WPNormandie

Fondateur de WPNormandie, passionné et utilisateur de WordPress depuis 2004, je partage avec la communauté WordPress et Digitale après avoir tant reçu. Ayant été CEO et CTO en agence et chez l’annonceur, j’interviens maintenant en tant qu’indépendant comme « Responsable Opérationnel Digital et E-commerce à temps partagé » pour des PME/PMI/STARTUP – Un défaut : je mange des clowns avariés au petit déjeuner – Une qualité : j’aime profondément les gens et partager.

10 COMMENTAIRES

  1. Merci pour ce merveilleux tuto 😉

    Et merci à cette extension Caldera qui vaut le détour ! Juste une question. Avons-nous moyen d’attacher une pièce jointe de type pdf au post ? En d’autres termes, pouvons-nous publier l’article avec un média autre que l’image mise en avant (en fichier-joint) ?

    Merci d’avance et bravo longue vie à votre asso 😉

    • merci pour vos encouragements vis à vis de l’association (http://asso.wpnornandie.fr), concernant l’attachement d’un fichier PDF : c’est possible. il suffit de rajouter un champ de type « Fichier » dans l’onglet « Fichier » quand vous construisez le formulaire. Attention toutefois à bien restreindre le type de fichier possible au téléchargement dans l’option du champs. Cela se fait sur cette option : « Types autorisés« . Si vous ne le faite pas les personnes pourront envoyer n’importe quel type de fichier et donc potentiellement peut être provoquer une faille de sécurité de votre site.