Tuto wordpress – Formulaire front-end, Custom Post Type, Taxonomies et Metaboxes

Il arrive parfois que l’on associe un blog wordpress à son site vitrine . Il est donc toujours intéressant de pouvoir récuperer certaines données envoyées depuis le site vitrine, en front-end donc, vers la base de données wordpress et de gérer tout cela à la manière des Posts dans l’administration de WordPress. Aujourd’hui nous allons donc découvrir comment lier un formulaire de contact à wordpress de cette maniere.

tutoriel wordpress taxonomie metabox custom post type

WordPress est un outil complet utile a tout moment dans la création de site internet

Tout d’abord, nous allons avoir besoin d’un formulaire basique en HTML et PHP qui vous permettra de récupérer plusieurs informations concernant vos visiteurs. Je vous affiche ici un exemple de formulaire avec sa partie de traitement des données récupérées. Je ne reviendrais pas ici sur la façon de creer un formulaire HTML, ni même sur comment analyser les données reçues.

</pre>
<div>
<!--?php if (isset($erreur)) {<br ?-->echo '
<div>'.$erreur.'</div>
';
}
elseif (isset($message)) {
echo '
<div>'.$message.'</div>
';
}
?>
<div>
<h2>Contactez-nous...</h2>
<form action="Contact.php" method="post"><label for="name">Votre nom :*
<em>(Uniquement des lettres)</em> </label><input type="text" name="name" pattern="[a-zA-Z]{1,30}" placeholder="votre nom*" />

<label for="firstname">Votre prénom :* <em>(Uniquement des lettres)</em></label><input type="text" name="firstname" pattern="[a-zA-Z]{1,30}" placeholder="votre prénom*" />

<label for="societe">Nom de votre entreprise : </label><input type="text" name="societe" placeholder="Nom de votre entreprise" />

<label for="email">Votre email :* </label><input type="email" name="email" placeholder="votre email*" />

<label for="Sujet">Choisissez un sujet :* </label>
<select name="Sujet"><option value="-1">Choisissez un sujet</option><option value="0">Demande de devis</option><option value="1">Demande de renseignements</option><option value="2">Candidature Spontannée</option><option value="3">Autres</option></select>
<label for="message">Votre message :* </label>

<textarea name="message"></textarea>
<span>* les champs avec un astérisque sont obligatoires.</span>
<input type="submit" value="Envoyer" /></form></div>
</div>
<pre>

Et la partie qui traite les données  à inserer sur la page qui traite les données  ( pour cette fois je l’ai mis dans le meme fichier contact.php que le formulaire.

<!--?php </pre-->
if (isset($_POST['name']) AND isset($_POST['firstname']) AND isset($_POST['email']) AND isset($_POST['Sujet']) AND isset($_POST['message'])) {

 if (!empty($_POST['name']) AND !empty($_POST['firstname']) AND !empty($_POST['email']) AND !empty($_POST['message'])){
 $testnom = preg_match('#[0-9]#i',$_POST['name']);
 $testprenom = preg_match('#[0-9]#i',$_POST['firstname']);
 $testmail = preg_match('#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#',$_POST['email']);
 $sujet = $_POST['Sujet'];
 if ($testnom == true) {
 $erreur = 'Votre prénom n\'est pas correct. Avez vous déja vu un nom avec des chiffres ?';
 }
 elseif ($testprenom == true) {
 $erreur = 'Votre prenom n\'est pas correct. Avez vous déja vu un prenom avec des chiffres ?';
 }
 elseif ($testmail == false) {
 $erreur = 'Votre email n\'est pas correct. Pour rejoindre une newsletter, il vous faut forcement un email valide, non ?';
 }
 elseif ($sujet > 3 OR $sujet < 0) {  $erreur = 'Le sujet choisi n\'existe pas ! merci de réessayer.';  }  else{  $nom = strip_tags($_POST['name']);  $prenom = strip_tags($_POST['firstname']);  $mail = strip_tags($_POST['email']);  $sujet = strip_tags($_POST['Sujet']);  $message = htmlspecialchars($_POST['message']);  if(!empty($_POST['societe'])){  $societe = strip_tags($_POST['societe']);  }  else{  $societe = 'Aucune';  }  if ($sujet==0){  $sujet = 'devis';  }  else if ($sujet==1) {  $sujet = 'renseignements';  }  else if ($sujet==2) {  $sujet = 'candidature';  }  else if ($sujet==3) {  $sujet = 'autre';  } }  }  else{  $erreur = "Merci de renseigner tous les champs avec un astérisque !";  }  } ?>

Une fois donc que l’on a un formulaire lisible et compréhensible, il est necessaire de venir lui implémenter le moteur de wordpress. Pour cela , nous allons inclure le fichier wp-load.php qui contient tout le coeur de wordpress et surtout qui nous permettra donc d’utiliser les differentes fonctions propres à wordpress sur une partie de site qui n’est pas dans wordpress. Nous allons dans le même temps, indiquer que nous ne voulons pas utiliser le template actif de wordpress . Le code suivant s’insère donc au début du fichier de traitement des données avant le code de traitement ci-dessus.

<!--?php // Placez ce code au début de votre code php define('WP_USE_THEMES', false); require('dossier_wordpress/wp-load.php'); ?-->

Une fois que le moteur de wordpress est prêt, il ne reste plus qu’a préparer la réception des données. Pour cela j’ai choisi un petit plugin très simple à utiliser, il s’agit de WordPress-Cuztom-Helper . Téléchargez donc l’archive de ce petit plugin qui va nous permettre de creer des « Types de Posts Cuztomisés » ou encore Custom Post Type. Maintenant il faut extraire le contenu de l’archive dans un dossier custom que vous placerez dans le dossier « inc » de votre thème wordpress

Le lien vers ce plugin sera donc « /wp-content/themes/votre_theme/inc/custom »

A ce stade profitez en pour créer aussi un fichier types_and_taxonomies.php dans le dossier « inc », puis ajoutez les fichiers necessaires dans le fichier functions.php situé dans votre thème de la manière suivante.


include('inc/custom/cuztom.php');

include('inc/types_and_taxonomies.php');

Les custom post types

Voilà, nous venons d’ajouter un plugin qui va nous permettre d’utiliser les  custom post types dans wordpress,nous sommes donc fin prêts à travailler sur le fichier types_and_taxonomies.php. Dans un premier temps, on demande l’enregistrement d’un nouveau type de post que l’on va nommer « Contact ».

$Contact = register_cuztom_post_type(
	'Contact' // <= ceci est le nom de votre nouveau type de post );

Puis on lui attribut quelques spécificités.

 $Contact = register_cuztom_post_type( 	'Contact', 	array( 		'menu_icon' => get_template_directory_uri() . '/img/contact-icon-admin.png',
		'public' => false,
		'show_ui' => true,
		'supports' => array( 'title','editor', 'date' )
	)
);

N’ayez pas peur ! Voici des explications à ce que l’on vient d’ajouter.

  • menu_icon => vous permet d’afficher une icone personnalisé dans le menu d’administration de wordpress
  • public => sur false, empêche l’affiche des posts de manière publique.
  • show_ui => Nous avons donc enlevé l’affichage publique mais il faut quand même pouvoir travailler sur nos données depuis l’admin, il faut donc demander d’afficher les données, passez donc show_ui sur true
  • supports => ceci est un tableau qui va nous permettre d’afficher des parametres necessaires pour gerer nos données. title permet d’afficher le titre, editor affiche l’editeur de texte et date affiche la date d’enregistrement du post.

A partir de là, vous devriez voir déja du changement depuis la dashboard de worpress avec l’affichage dans la colone de menu de Contacts. 

Les taxonomies

Pour ma part, j’ai souhaité avoir des catégories de demandes de contact, ce sont dans mon formulaires les differents sujets. Pour cela, j’ai créé une taxonomie associée à mon custom post type. A la suite du code précédent, j’ai donc ajouté ceci :

$Contact->add_taxonomy('Sujet');

Comme vous pouvez maintenant le voir, il est donc possible de créer des « sujets » pour les contacts. Si vous vous rendez dans la création d’un nouveau contact depuis l’administration, vous pourrez voir que l’on a la possibilité de taper un titre, un message, de choisir un sujet, tout cela à peu près comme pour rédiger un nouvel article. Afin d’avoir un affichage plus clair , j’ai choisi de créer un champs qui récupère l’email du contact qui fait sa demande. Pour faire cela, il est necessaire d’utiliser ce que l’on appelle les métaboxes.

Les metaboxes

Dans wordpress, Une metaboxes est essentiellement un encart oui une boite (box) dans lequel on peut ajouter des informations pour le rédacteur d’un post, ou encore des champs personnalisés qui permettront de récuperer des données d’une manière plus propre que si elles étaient perdues dans le post.

Ajoutez donc a la suite de votre fichier types_and_taxonomies.php le code suivant :

// on stipule une nouvelle metabox pour les contacts
$Contact->add_meta_box(
 'contact_email', // l'identifiant de votre metabox
 'Contacter l\'auteur du message',  // le titre de votre metabox qui s'affichera en haut de la metabox
 array( // un tableau contenant les differents champs de formulaire que nous avons besoin
 array( // chaque champs est un tableau avec plusieurs propriétés
 'name' => 'contact_email_field',  // l'identifiant de votre champs
 'label' => 'Email de l\'auteur', // le label de votre champs
 'type' => 'text', // le type de votre champs
 'description' => '', //la description de votre champs
 'explanation' => '' // les explications que vous pouvez afficher pour informer le rédacteur de comment utiliser ce champs
 )
 )
);

Concernant les metaboxes que nous utilisons via wordpress cuztom helper , il existe des wikis créés par l’auteur qui vous permettront de rentrer un peu plus dans les détails et surtout d’utiliser d’autres types de metaboxes.

Bon on a bien travaillé sur la partie wordpress et sur nos custom post types. Il est temps de revenir à notre formulaire de départ.

Le traitement des données vers wordpress

Pour le moment, votre formulaire ne sert pas à grand chose. En effet, il est affiché, mais aucune donnée n’est enregistrée. il convient donc après avoir traiter les données, de les envoyer sous forme de post à wordpress.

Premierement, améliorons le traitement de certaines données grâce à certaines fonctions de wordpress telles que sanitize_email() ou wp_kses_post() qui permettront d’eviter des failles de sécurité que vous pourriez oublier. Commencez donc par changer vos lignes de traitement de cette maniere :

$mail = sanitize_email($_POST['email']);
 $sujet = strip_tags($_POST['Sujet']);
 $message = wp_kses_post($_POST['message']);

puis maintenant passons a l’envoi des données. Pour cela nous allons creer un tableau ( array ) qui va contenir les informations de notre nouveau post.

// Créer un nouveau post
 $contact_post = array(); // <= création d'un tableau
 $contact_post['post_title'] = $sujet; //<= le titre de la demande
 $contact_post['post_content'] = '<strong>'. $nom .' '.$prenom .'</strong>
 // <= le contenu du post
 Sujet : <strong> '. $sujet .' </strong> '.$devis.'

 Société : '.$societe.'

 ---------------------

 '.$message;
 $contact_post['post_status'] = 'publish'; // <= le status du post doit être publié
 $contact_post['post_type'] = 'Contact'; // le type de post sera donc ici notre custom post type "contact"

Inserez donc le code ci dessus juste avant l’accolade de fermeture du code de traitement
Maintenant que notre tableau contenant les données de notre post est prêt, il faut l’envoyer à wordpress. Pour cela nous allons faire une condition qui affichera un message au visiteur si sa demande a bien été envoyée ou non. Nous récupérerons aussi l’id du post créé afin de pouvoir lui ajouter le type de sujet ainsi que de pouvoir stocker l’email dans la metabox créée plus tôt. Ecrivez les lignes suivantes à la suite.

 if($post_id = wp_insert_post($contact_post ,true)){
wp_set_object_terms( $post_id, $sujet, 'sujet', false ); //<= ajout du post dans le sujet adapté
update_post_meta($post_id,'_contact_email_contact_email_field',$mail); // <= insertion de l'email dans la metabox
//Votre message destiné à être affiché au visiteur
$message = "Votre message a bien été envoyé !";
}else {
erreur =  "Une erreur s'est produite lors de l'envoi de votre demande.";
}

Voilà donc votre formulaire prêt à recevoir des demandes de contact. Bien sur il va falloir aménager tout ces bouts de code en fonction de vos besoins.

Bonus…

Pour finir, voici un petit bonus qui vous aidera à afficher dans votre dashboard (tableau de bord) de wordpress le nombre de post d’un certain type que vous avez. Le plugin que j’utilise actuellement s’appelle Glance That. Vous le trouverez sur le site des extensions de wordpress ou sur le site suivant . Une fois l’extension installée, vous n’avez plus qu’) choisir le type de poste que vous souhaitez afficher et le tour est joué.

J’espère que ce tutoriel vous aura plu ! N’hésitez pas à me poser des questions ou à me donner vos avis pour améliorer ce tutoriel.



13Mar
2014

Wahou ! il y a déja 3 commentaires sur cet article. Réagir à cet article »

  1. Assouan

    Posté le 30 décembre 2016 à 21 h 01 min

    Bonojour ,
    tres belle aricle . je suis sur la partie traitement qui stipule le remplacement des lignes de codes par :$mail = sanitize_email($_POST[’email’]);
    $sujet = strip_tags($_POST[‘Sujet’]);
    $message = wp_kses_post($_POST[‘message’]);

    malheureusement je vois pas ces lignes a remplacer voici mes codes :

    contact.php

    Document sans titre

    Contactez-nous…
    Votre nom :*
    (Uniquement des lettres)

    Votre prénom :* (Uniquement des lettres)

    Nom de votre entreprise :

    Votre email :*

    Choisissez un sujet :*
    Votre message :*

    Choisissez un sujet
    Demande de devis
    Demande de renseignements
    Candidature Spontannée
    Autres

    * les champs avec un astérisque sont obligatoires.

    3 OR $sujet

  2. Lucas P.

    Posté le 30 décembre 2016 à 22 h 08 min

    Bonjour,

    Ce sont des lignes a ajouter afin de verifier les données envoyées à wordpress.

  3. Assouan

    Posté le 4 janvier 2017 à 12 h 50 min

    bonjour le plugin permetttant de cree des « Types de Posts Cuztomisés » ou encore Custom Post Type est il le fichier cuztom.php ou cuztom-master.php a télécharger

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *