Créez une rubrique offres d'emploi - Divi Community

Je vais vous expliquer comment créer une rubrique “offres d’emploi” pour votre site.
Il s’agit d’une page sur laquelle les offres seront bien sûr listées mais où il y aura également un formulaire rempli dynamiquement en fonction des offres disponibles et qui permettra de postuler à celles-ci.

Pour ce faire, je n’utiliserai que des plugins gratuits, à savoir Pods et Caldera Forms.
Vous êtes prêts ? Alors c’est parti pour un looong tuto !

Installez les plugins

Première étape, se procurer Pods et Caldera Forms !
Rendez-vous dans la rubrique Extensions de l’administration de votre WordPress, faites une recherche puis installez et activez ces 2 plugins.

Tout d’abord : Pods

Créez votre custom post type

Pods va donc nous permettre de créer un “custom post type” (ou “type d’article personnalisé” en français dans le texte) pour rassembler nos offres d’emploi.

Dans le menu de WordPress, un nouvel élément intitulé Administration est apparu (généralement en dernière position). Cliquez dessus pour afficher la page d’options de Pods.
Choisissez ensuite Créer un nouveau (sous-entendu : un nouveau custom post type).

Ceci fait, remplissez les champs de la manière suivante :

  • Type de contenu personnalisé (déjà sélectionné par défaut)
  • Précisez le nom de votre custom post type, au singulier et au pluriel
  • Cliquez sur Avancé pour nommer le Pod (pas de caractère spécial, pas d’espace… c’est l’identifiant qui vous servira par la suite à appeler le Pod)
  • Validez avec le bouton Étape suivante

Allez maintenant faire un tour dans l’onglet Libellé pour préciser la syntaxe à employer pour votre custom post type.
Voici une capture d’écran des principaux champs à remplir.

Passez cette fois par l’onglet Interface Admin pour régler la manière dont votre custom post type apparaitra dans le menu de WordPress.
A minima, vous avez à remplir les champs Nom du menu et Icone de menu (cliquez sur l’icone d’aide pour afficher l’URL où récupérer les codes des icones).

À ce stade, après avoir cliqué sur Enregistrer le Pod, vous devriez avoir quelque chose comme ça dans votre menu WordPress :

Pour finir, allez dans l’onglet Gérer les champs.
Votre custom post type contient déjà par défaut un champ Titre (impératif, ce sera le nom de l’offre) et un champ Contenu (celui-ci peut être désactivé, mais dans ce cas de figure il nous sera utile car il contiendra le descriptif de l’offre).

En complément, nous allons également ajouter 2 champs personnalisés supplémentaires :

  • pour préciser le type de contrat proposé (CDD, CDI…)
  • pour préciser le nombre d’heures travaillées (35 ou 39 heures)

Pour commencer, cliquez sur le bouton Ajouter un champ.

Dans l’onglet Basique, remplissez le libellé du champ personnalisé, son nom (pas de caractère spécial, pas d’espace… c’est son identifiant) et choisissez Texte brut comme type de champ.
Validez en cliquant sur le bouton Save Field.

Créez ensuite un second champ personnalisé de type Relation.
Dans Lié à, sélectionnez Simple (liste définie manuellement) puis ajoutez vos options dans le champ Options personnalisées.

  • Inscrivez une option par ligne
  • L’élément à gauche de la barre verticale correspond à la valeur de l’option (ce que va comprendre le formulaire)
  • L’élément à droite de la barre verticale correspond à l’intitulé de l’option (ce que va voir l’utilisateur)
    Par exemple, dans certains cas on peut avoir un intitulé “t-shirt” qui a pour valeur “30” ; celle-ci pourra être utilisée dans des calculs.
    La valeur peut également simplement être un raccourci de l’intitulé : “Je viendrai à la réunion” pourrait avoir pour valeur “présent”, ce qui simplifie la base de données des soumissions du formulaire.

Vous pouvez également aller jeter un œil dans l’onglet Options de champs complémentaires et tester d’autres réglages, si vous souhaitez utiliser plutôt des boutons radio, une liste avec auto-complétion ou encore autoriser le choix multiple…

Cliquez enfin sur les boutons Save Field puis Enregistrer le Pod.

Ajoutez des offres

Vous pouvez désormais vous rendre dans votre custom post type “Offres d’emploi” pour créer des offres.
Voici à quoi devrait ressembler une offre type. Remarquez que les champs personnalisés que vous avez ajoutés pour le type de contrat et les horaires apparaissent dans une metabox nommée Plus de champs.
Créez maintenant 3 ou 4 offres de principe pour avoir du contenu à afficher sur votre page d’offres d’emploi.

Au tour de Caldera Forms

Créez le formulaire

Dans le menu de WordPress, cliquez sur Caldera Forms et créez un nouveau formulaire vierge que vous construirez selon le principe suivant :

Je ne détaillerai pas ici tout le process de création du formulaire ; je vais seulement m’arrêter sur les 2 champs suivants :

  • “Vous souhaitez…”
    • ces boutons radio permettront soit de postuler à une offre publiée, soit d’envoyer une candidature spontanée
    • nous allons mettre en place des conditions logiques de manière à afficher les 2 champs suivants en fonction de l’option choisie
  • “Pour quelle offre postulez-vous ?”
    • ce champ Menu déroulant ne s’affichera que si l’utilisateur souhaite postuler à une offre publiée
    • ce champ est rempli automatiquement par les noms des offres publiées en le configurant comme sur la capture d’écran suivante.
      Il suffit de cocher Remplir automatiquement puis de choisir votre custom post type, en précisant que ce sont les titres des articles qui s’afficheront dans la liste déroulante.

Configurez les conditions logiques

Dans l’onglet Conditions, cliquez sur Ajouter un groupe conditionnel et configurez-le comme sur la capture d’écran ci-dessous, de manière à ce que lorsque l’utilisateur choisit de postuler à une offre publiée, le champ de sélection des offres s’affiche.

Ajoutez ensuite un second groupe conditionnel pour que les champs d’envoi de fichiers n’apparaissent que lorsque l’utilisateur choisit de postuler à une offre (publiée ou spontanée). C’est du détail, mais ça permet d’alléger visuellement le formulaire en n’affichant les champs que quand ils sont nécessaires.

Pour terminer, faites un détour par l’onglet De afin de régler les notifications, ainsi que par l’onglet Réglages du formulaire afin d’affiner les réglages (message de succès, etc.).
Et bien sûr, si ce n’est pas encore fait, n’oubliez pas de cliquer sur Enregistrer le formulaire !

Créez la page des offres d’emploi

La page d’exemple que j’ai créée est construite sur le gabarit illustré par la capture d’écran suivante.
En ce qui me concerne, je préfère utiliser un module texte pour insérer mes formulaires Caldera Forms car ainsi les réglages de texte s’appliquent aux labels des champs.

Si vous souhaitez aller plus loin dans la personnalisation du style de vos formulaires Caldera Forms, vous pouvez consulter cet article sur le blog d’Elegant Themes ou acquérir mon plugin Caldera Forms Style Customizer qui permet de styler chaque élément de formulaire via le customizer de WordPress sans toucher au code.

Insérez votre formulaire dans la page

Pour insérer dans le module Texte votre formulaire qui permettra à l’utilisateur de postuler aux offres d’emploi, vous avez 2 méthodes :

  1. vous avez copié le shortcode correspondant à votre formulaire
    • vous le trouverez :
      • soit sur la page d’options principale du plugin Caldera Forms
      • soit dans l’onglet Réglages du formulaire de votre formulaire d’offres d’emploi (champ Code court)
    • collez le shortcode dans votre module Texte, dans Contenu -> Texte -> Contenu -> Visuel
  2. vous l’insérez directement depuis le champ Contenu de votre module Texte en cliquant sur l’icone noir Caldera Forms que vous pouvez voir sur la capture d’écran ci-dessous.

Insérez vos offres d’emploi dans la page

Comme je l’expliquais dans cet article de présentation de Caldera Forms, Pods et Caldera Forms sont étroitement liés car Josh Pollock (le développeur principal de Caldera Forms) a fait partie de l’équipe de développement de Pods. C’est pour cette raison que les 2 plugins partagent le même principe de “Magic Tag”, une sorte de shortcode qui permet d’afficher facilement, et là où on le souhaite, des données traitées par le plugin.
Juste pour info : si le principe est le même, la syntaxe, elle, est différente. Un Magic Tag de Caldera Forms ressemble à %Salut%, alors qu’un Magic Tag de Pods ressemble à {@Salut}.

Comme vous pourrez le voir 2 captures d’écran plus loin, les Magic Tags de Pods doivent être imbriqués dans un shortcode [pods name=”nom_de_votre_pod”] [/pods] de manière à créer une boucle afin que les informations s’affichent autant de fois que nécessaire.
Souvenez-vous, le nom du Pod est celui que vous lui avez donné au moment où vous avez créé votre custom post type, après avoir cliqué sur Avancé (voir capture d’écran n°3).

Pour insérer le shortcode, plutôt que de le saisir, vous pouvez cliquer sur le bouton noir intitulé Pods shortcode en choisissant les options comme sur la capture d’écran ci-dessous.
Vous devrez ajouter les Magic Tags dans le champ Modèle personnalisé :

  • {@post_title} : appelle le titre de l’article (donc le nom de l’offre d’emploi)
  • {@post_content} : appelle le contenu de l’article (donc le descriptif de l’offre d’emploi)
  • {@contrat} : appelle notre champ personnalisé de type “texte” où est précisé le type de contrat (remarquez qu’on peut ajouter du texte simple en complément de nos Magic Tags)
  • {@horaires} : appelle notre champ personnalisé de type “liste déroulante” où sont précisés les différents horaires

En savoir plus sur les Magic Tags de Pods, si vous souhaitez afficher la date de publication, une image, faire des conditions, etc.

Une fois votre shortcode inséré dans le module Texte, vous pouvez styler vos Magic Tags comme vous le feriez avec n’importe quel texte (niveaux de titre, graisse, corps, couleur…).

Il ne vous reste plus qu’à publier votre page et à admirer le résultat !

Affinez la mise en forme avec un peu de CSS

Vous avez certainement remarqué que j’ai ajouté un trait de séparation entre les offres pour rendre la page plus lisible.
Pour ce faire, il vous suffit d’ajouter un identifiant CSS (par exemple : offres-emploi) à la ligne qui contient le module texte avec vos offres d’emploi en allant dans les paramètre de la ligne, Avancé -> ID et classes CSS.
Collez le code suivant dans le fichier style.css de votre thème enfant ou dans Options du thème -> Général -> Personnaliser CSS.

#offres-emploi p p h2:before {
height: 3px;
content: "";
background-color: #969b9f;
display: block;
margin-bottom: 30px;
}

Détaillons le code :

  • Ligne 1 :
    • vous retrouvez l’identifiant que vous avez ajouté à votre ligne
    • ensuite, ciblez le titre de l’offre :
      • dans mon cas c’est du h2 mais peut-être avez-vous utilisé un autre niveau de titre ?
      • ce h2 est situé après 2 balises p (Pods à tendance à ajouter parfois des balises <p></p> sans contenu, pour je ne sais quelle raison…).
        Ceci permettra de ne pas mettre de ligne de séparation avant le titre de la première offre
    • j’utilise un pseudo élément :before pour faire la ligne
  • Ligne 2 : vous pouvez ajuster l’épaisseur de la ligne de séparation
  • Ligne 3 : il faut définir un contenu quand on utilise :before ou :after (même s’il est vide)
  • Ligne 4 : définissez la couleur de la ligne de séparation
  • Ligne 5 :  la ligne est de type block
  • Ligne 6 : ajoutez une marge en bas pour détacher la ligne du titre

Enfin la conclusion !

Pour rédiger ce tuto, j’ai choisi un exemple bien précis avec les offres d’emploi, mais le principe peut bien évidemment être décliné pour d’autres thématiques avec des champs personnalisés supplémentaires, un classement par catégorie, un ordre d’affichage des articles autre que par date de publication/modification…  et encore de très nombreuses autres options.

Sachez également que si vous recherchez une méthode plus simple pour créer votre modèle personnalisé qui permet d’afficher le shortcode et les Magic Tags de Pods, Sean Barton (encore lui !) a développé un petit plugin nommé Pods module for Divi facilitant le process.

Dans un futur article, nous irons encore plus loin dans l’interactivité entre le contenu du site et l’utilisateur car je vous expliquerai comment concevoir une page de petites annonces publiées par le visiteur et ce, toujours avec Pods et Caldera Forms.