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 :
- 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
- vous le trouverez :
- 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.
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.
bonjour
Trés bonne article a quand la suite j attend avec impatience et surtout la customisation avancée surtout niveau display coté fond-end
cordialement
Merci Cyril ! J’y travaille… 😉
Bonjour
Super je viens juste de passer à Caldera et Pods
Donc j’ai voulu faire un truc similaire mais un peu galère, je vais l’adapter avec ton super tuto.
Une petite question avec pods, impossible d’avoir des images dans un template ou directement en affichant le champs, j’ai uniquement les liens.
Qu’est ce que je peux faire de mal :p ?
help please
J’ai trouvé !
En passant par un template c’est une balise image que je dois mettre,
J’ai choisi de modifier l’affichage des dates avec l’onglet Option complémentaire car ça me plaçait le mois avant le jour, la c’est ok avec les options wordpress par contre le mois est toujours en anglais, j’ai Fr sélectionné par défault pourtant
J’attend la suite moi aussi lol ! En plus c’est nickel car je propose par mon asso des offres d’emplois sur ma région A pluche Merci Bon tuto et en Français en plus
A bientôt
C’est cool si tu as trouvé.
Dans le prochain tuto, je vais expliqué plus en détails l’utilisation des templates et l’insertion de shortcodes pour utiliser divers modules Divi.
Pour l’instant, j’attends qu’un bug sur le plugin Caldera Custom Fields soit corrigé pour terminer mon tuto…
Salut Pierre,
Merci pour ce tuto, je découvre Pods, c’est de la balle 🙂
OKi j’attends avec impatience la suite
Au fait je cherche a créer une base de donnée justement pour des annonces, afficher en fonction d’une recherche sur formulaire
Pas de p pour le formulaire de recherche et l’affichage mais que peut t’on utiliser pour justement alimenter cette base, requetes mysql etc.
Bonjour merci pour ce tuto bien détaillé,
j’ai une question, concernant la réception de ces offres une fois que le candidat à postulé , je ne c’est pas ou réglé une adresse mail de reception de ces postulation, s’auriez vous m’indiqué ou faut t’il modifier celà?
Merci
Dans ton formulaire Caldera Forms, onglet “De”, ajoute ton mail dans le champ “Destinataires”. 😉
Bonjour Pierre,
Etant intéressé par l’utilisation de ces deux produits, j’ai testé ce tuto. Il est très bien car la pratique c’est bien mieux que la théorie.
A bientôt pour la suite.
Merci.
Bonjour Pierre
J ai un peu la meme question que Rico
concernant pods c est bien mais peut utiliser pour crée des site de petites annonces,
annuaire de site car je ne vois pas comment peut ont faire pour utiliser un formulaire afin d alimenter le custom post
cordialement
Bonjour Cyril, en fait pour faire le lien avec le formulaire Caldera Forms et le custom post type, il faut utiliser le plugin Caldera Custom Fields.
J’ai commencé un tuto sur le sujet (qui est un peu la suite de celui-ci) mais un petit bug entre Caldera Custom Fields et Pods me bloque : les images uploadées via le formulaire arrivent bien dans la médiathèque mais ne s’affichent pas dans l’article.
Merci pierre pour votre réponse rapide
moi cela ne me derange pas dans la mesure ou les utilisateurs n auront pas image a uploader
par contre une autre questions
– la gestion des Access control and custom roles management est bien possible car effectivement il ne faudrai pas qu’un autre utilisateurs puissent delete ou modifier l’annonce d un autre car je sais que cela est possible avec toolset type c est un composant qui permet de gère ce genre de cas (composant access) et la je ne vois pas l equivalent avec pods
cordialement Cyril
Dans ce cas, je n’autoriserais l’accès au formulaire qu’aux utilisateurs enregistrés.
Ainsi, lors de la soumission du formulaire, avec Caldera Forms tu peux récupérer l’identifiant ou le nom de l’utilisateur et ensuite, avec un plugin de gestion de rôles, restreindre les droits aux différents articles.
merci bien pierre
auriez-vous un plugin de gestion de roles qui irai bien avec pods et caldera ?
cordialement cyril
Il y a User Role Editor qui est bien.
Si tu veux en parler un peu plus en détails et échanger sur le sujet avec d’autres utilisateurs, je t’invite à nous rejoindre sur notre groupe d’entre-aide FaceBook.
merci pour le plugin je vais regarde de sont coté
et voila j ai rejoint le groupe d entre-aide sur facebook
cordialement Cyril
Bonjour,
Comment ajouter un identifiant CSS (par exemple : offres-emploi) à la ligne qui contient le module texte ? Ou est-ce que cela se trouve svp ?
L’identifiant CSS s’ajoute dans les paramètres de la ligne, onglet “Avancé”.
C’est expliqué dans le tuto dans la partie “Affinez la mise en forme avec un peu de CSS”. 😉
Merci beaucoup !
Pourrai-je avoir le lien vers le tuto svp ? merci d’avance 🙂
Dans CE tuto. 😀
Relis attentivement…
Bonjour Pierre
Ton tuto m’a bien servi pour démarrer
J’aurai une question, j’affiche un pods dans un champs texte, j’ai ciblé mon pods en avec un with de 48%.
Ca fonctionne très bien mais comment l’afficher en 100% sur un mobile.
Dans css personnalisé divi-child j’ai mis un Média queries
@media only screen
and (max-width : 320px) {
.description-deux {
display: block;
width:88%;
margin:auto;
}
}
description-deux est la div qui englobe le pods, si tu evux regarder un exemple les pliants, sur le site web
Merci beaucoup
Salut, tu as mis 320px pour une particulière? Je pense que tu peux essayer de modifier par 640px ça marchera un peu mieux 😉
Bonjour Pierre,
Très très intéressant. Merci beaucoup.
Un petit snippet supplémentaire serait génial : comment ajouter un bouton “Je postule” à coté de chaque offre d’emploi ? Ce bouton ouvrirait le formulaire Caldera form mais avec l’offre en question préremplie dans le formulaire 🙂
Easy ou compliqué 🙂
Parce que si beaucoup d’offres, la liste déroulante “Pour quelle offre postulez vous” risque d’être conséquente 🙂
Dernière chose : est ce qu’on peut ajouter des tris avec Pods ? Pour par exemple classer les offres par Secteurs d’activités ?
Merci Pierre.
Bonjour excellent tuto comme à votre habitude ;),
je rencontre un soucis lorsque j’active le visual builder je vois apparaitre les trait mais lorsque je suis sur la page normal rien une idée ??
Merci pour tes encouragements. 🙂
Pour ton problème, peut-être un souci de cache ou une erreur de CSS ?…
Bonjour, je tente ma chance… Merci pour cet excellent tuto !
Je cherche comment afficher les annonces comme un blog : en liste (éventuellement juste l’extrait) + lien vers l’annonce complète.
Mon pb : pouvoir partager chaque annonce sur les réseaux sociaux. Si j’ajoute un shortcode de social media plugin sous le pods, il récupère l’URL (unique) de la page des annonces. Pourtant chaque annonce a bien son slug. Une idée serait merveilleusement bienvenue, je sèche…
Merci ! 🙂
Dans ce cas, je te conseille d’utiliser l’excellent plugin Portfolio Posts Pro qui est très souple et complet. Une valeur sûre. 👍🏻
(bizarre je ne vois pas la réponse à mon commentaire ?)
Merci pour le conseil. Portfolio Posts Pro a l’air très bien en effet, mais du coup on se retrouve avec une gestion de blog classique, non ? Quid du lien avec le formulaire Caldear? Ce qui est intéressant dans la méthode du tuto, c’est de pouvoir récupérer les titres des annonces dans le champ du formulaire pour postuler.
Portfolio Posts Pro est un module basé sur le module “portefeuille filtrable” de Divi et qui permet d’afficher les articles du CPT de son choix.
Ça remplace juste l’affichage des articles que j’ai fait à la main dans le tuto, en apportant de nouvelles fonctionnalités et une facilité de personnalisation.
Bonjour Pierre,
Merci pour le tuto j’ai testé … tout est parfait.
Mon souci c’est que je ne recois plus de mail des postulants après deux a trois tests .
j’ai verifier mon hebergement, il m’ont notifié qu’il se peut que j’emporte des virus(spams) il m’ont conseillé de changer le mot de passe de mon adresse email. Je l’ai fait mais c’est pareille. J’allais être vraiment heureux si je recevrai les pièces joint dans ma boite mail de recrutement.
n’aurais-tu pas une solution pour moi ?
Merci d’avance !
Regarde dans les entrées de Caldera Forms, normalement tu devrais y voir les soumissions.
Après, il y a peut-être un souci au niveau de l’envoi depuis WordPress, ou alors les notifications arrivent dans tes spams, ou encoure tu as un plugin de cache qui bloque et dont il faut modifier les réglages…
Bonjour,
Merci beaucoup pour ton tuto qui est vraiment au top !
cependant j’aimerai réaliser, un autre type de page. J’aimerai faire apparaitre les offres d’emploi sous forme de blog, et avoir un détail complet en cliquant dessus.
Comme https://www.welcometothejungle.co/fr/companies/wttj/jobs
Merci d’avance
Dans ce cas, je te conseille l’excellent Portfolio Posts Pro que j’utilise régulièrement.
Par exemple, tu pourras ajouter un filtre comme le module “Portfolio filtrable” de Divi, ouvrir les posts dans une nouvelle page ou une pop-up… Bref, il est super complet. 🙂
Bonjour,
tres bon tuto.
L’idéal serait de pouvoir ajouter un bouton «consulter l’annonce» sur chaque annonce et insérer automatiquement le titre de l’annonce dans le formulaire.
Quelqu’un a une piste ?
d’avance merci.
Si tu ajoutes un bouton “Consulter l’annonce”, le principe est totalement différent, ça fonctionnera dans le même principe qu’un blog : page d’archives et 1 article par offre.
Dans ce cas, intéresse-toi au plugin pour Divi Portfolio Posts Pro.
Je ne comprends pas ta question au sujet du titre de l’annonce… As-tu vu que dans le formulaire, en choisissant “Postuler à une offre”, on choisit dans la liste l’annonce qui nous intéresse en fonction de son titre ?
Salut Pierre, et merci beaucoup pour ce tuto très interessant!
je rencontre un problème avec la configuration des conditions sur Caldera.
J’ai bien suivi le tuto mais je n’arrive pas à afficher à la fois “choisissez un offre” et upload CV et LDM.
Lorsque je sélectionne postuler à une offre, par exemple, je vois “choisissez une offre” mais pas upload CV et LDM. je ne comprends pas très bien pourquoi.
J’ai du mal à comprendre quand une condition est validée ou non car lorsque tu ajoutes une règle, les champs sélectionnés sur la droite ne se réinitialise pas, du coup je ne sais pas à quelle règle s’applique les champs cochés.
J’espère que c’est assez clair, ça n’est pas évident à décrire sans image ^^
Merci encore
j’ai une deuxième interrogation.
Lorsque j’ajoute le CSS pour créer la ligne de séparation, elle apparaît aussi avant le premier titre.
Y a t il un moyen de la faire disparaître?
merci
Quentin