En plus des différents templates définis dans la hiérarchie des templates, il est possible de créer de toutes pièces des templates spécifiques qui pourront être appliqués à des pages.

On appelle ces templates des templates personnalisés (ou custom templates), et ils fonctionnent exactement comme les autres templates, il faut simplement ajouter la métadonnée Template Name au début du fichier pour que Wordpress le reconnaisse :

/*
 * @package WordPress
 * @subpackage Finalclap
 *
 * Template Name: Le nom de votre template personnalisé
**/

Pour apprendre à les utiliser, nous allons créer une page de contact grâce à ces templates personnalisés.

Création du template

Créez un fichier contact.php dans le répertoire de votre thème
(wp-content/themes/finalclap/), et copiez-y ce code :

<?php
/*
 * @package WordPress
 * @subpackage Finalclap
 *
 * Template Name: Formulaire de contact
**/
get_header();
?>

<div class="post">
Contenu statique de la page
</div>

<?php get_footer(); ?>

Ensuite il faut créer une page, allez dans la partie administration de wordpress, puis cliquez sur Pages > Ajouter. Entrez un titre pour votre page (exemple: "Contact"), vous pouvez aussi saisir du texte dans le champ contenu.

Il ne reste qu'à spécifier que cette page va utiliser le template que nous venons de créer. Pour cela, regardez dans la zone Attributs de la page dans la colonne de droite. Vous verrez un champ Modèle qui permet de choisir un template personnalisé, sélectionnez donc Formulaire de contact.

Si vous vous rendez sur cette page (lien "Voir la page"), vous verrez que le contenu du template contact s'affiche :

Ça, c'est vraiment la base, on va y apporter deux modifications :

Afficher le contenu

La première modification va permettre d'afficher le contenu de la page, saisi dans la partie administration, comme ça on pourra éditer le contenu de la page dans la partie administration de wordpress :

<div class="post">
	<?php if (have_posts()) : the_post(); ?>
		<h1><?php the_title(); ?></h1>
		<div><?php the_content(); ?></div>
	<?php endif; ?>
</div>

Créer le formulaire

Seconde modification, nous allons ajouter un formulaire de contact classique : nom, email, objet, message et antispam.

Je vais utiliser les classes CSS du formulaire d'envoi de commentaire, on ne va pas réinventer la roue :

<div id="comments">
<div id="respond">
	<div class="comment-form" style="margin: 20px 0 0;">
	<form method="post" action="">
		<p>Votre <b>Nom</b> :
		<input type="text" size="40" value="" name="nom"/></p>
		
		<p>Votre <b>Email</b> <em>(obligatoire)</em> :
		<input type="text" size="40" value="" name="email"/></p>
		
		<p><b>Objet</b> <em>(obligatoire)</em> :
		<input type="text" size="40" value="" name="objet"/></p>
		
		<p>Votre <b>Message</b> :
		<textarea rows="10" cols="40" name="message"></textarea></p>
		
		<p><b>Antispam</b> <em>(écrivez le résultat de l'addition dans le champ)</em> :<br/>
		1+4 = ?
		<input type="text" size="40" name="quiz" /></p>
		
		<input type="hidden" name="contact_traitement" value="true" />
		<input type="submit" value="Envoyer" style="width: 120px;"/>
	</form>
	</div>
</div>
</div>

Maintenant, retournez voir cette page en front, elle affiche dorénavant le contenu saisi dans la partie admin de Wordpress, ainsi que le formulaire :

Traitement du formulaire

Il ne reste plus qu'à gérer l'envoi du mail. Idéalement on ferait ça avec un plug-in, ça serait plus propre.

Mais là on va le faire dans le même fichier : contact.php, en testant la variable $_POST pour savoir si on doit afficher le formulaire ou le traiter.

Voici le code complet de contact.php :

<?php
/*
 * @package WordPress
 * @subpackage Finalclap
 *
 * Template Name: Formulaire de contact
**/
get_header();
?>

<?php
# ========================
# Traitement du formulaire (envoi du mail)
# ========================
if( isset($_POST['contact_traitement']) ){
	?>
	<div class="post">
	<h1>Mail pas envoyé !</h1>
	<p>Il s'agit simplement d'un exemple, la partie traitement n'est pas opérationnelle, ça n'est pas l'objet de ce chapitre.</p>
	<pre>$_POST : <?php print_r($_POST); ?></pre>
	</div>
	<?php
}


# =======================
# Affichage du formulaire
# =======================
else {
?>
<div class="post">
	<?php if (have_posts()) : the_post(); ?>
		<h1><?php the_title(); ?></h1>
		<div><?php the_content(); ?></div>
	<?php endif; ?>
	
	<!-- J'utilise ici les règles CSS du formulaire d'envoi de commentaire, on ne va pas réinventer la roue -->
	<div id="comments">
	<div id="respond">
		<div class="comment-form" style="margin: 20px 0 0;">
		<form method="post" action="">
			<p>Votre <b>Nom</b> :
			<input type="text" size="40" value="" name="nom"/></p>
			
			<p>Votre <b>Email</b> <em>(obligatoire)</em> :
			<input type="text" size="40" value="" name="email"/></p>
			
			<p><b>Objet</b> <em>(obligatoire)</em> :
			<input type="text" size="40" value="" name="objet"/></p>
			
			<p>Votre <b>Message</b> :
			<textarea rows="10" cols="40" name="message"></textarea></p>
			
			<p><b>Antispam</b> <em>(écrivez le résultat de l'addition dans le champ)</em> :<br/>
			1+4 = ?
			<input type="text" size="40" name="quiz" /></p>
			
			<input type="hidden" name="contact_traitement" value="true" />
			<input type="submit" value="Envoyer" style="width: 120px;"/>
		</form>
		</div>
	</div>
	</div>
</div>
<?php } ?>

<?php get_footer(); ?>

Je vous laisse le soin d'aller plus loin si vous le souhaitez en réalisant la partie traitement (envoi du mail avec la fonction php mail()).

En effet, c'est un cours sur la création de thème wordpress, pas sur PHP !

Fini de lire cette page ? allez faire un tour ici : logo bio, ça peut vous intéresser.

Ce tutoriel fait partie d'un cours : aller au sommaire pour voir les autres chapitres.