Les templates personnalisés

Les templates personnalisés

Tutoriel publié en novembre 2011 par Galdon dans la catégorie Wordpress

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.

Template personnalisé

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

Formulaire de contact - template personnalisé

Ç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 :

Formulaire de contact complet - template personnalisé

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.

503 commentaires :
Seuls les 10 derniers commentaires sont affichés.
Cliquez ici pour afficher tous les commentaires
commentaire n°4431 par stoner_15@hotmail.com
stoner_15@hotmail.com mardi 23 juillet 2019, 18:17
Invest in Bitcoin and earn from $ 3000 per day: https://chogoon.com/srt/h5i0z?reUI11G87X
commentaire n°4432 par mail@townandcountryhomecare.co
mail@townandcountryhomecare.co mardi 23 juillet 2019, 18:17
Invest in Bitcoin and earn from $ 3000 per day: https://chogoon.com/srt/h5i0z?reUI11G87X
commentaire n°4434 par lava_9@msn.com
lava_9@msn.com mercredi 24 juillet 2019, 11:29
How to Turn $30,000 into $128,000: https://hideuri.com/a56v7e?zWoNHkou
commentaire n°4435 par wen00711@msn.com
wen00711@msn.com mercredi 24 juillet 2019, 11:29
How to Turn $30,000 into $128,000: https://hideuri.com/a56v7e?zWoNHkou
commentaire n°4436 par armandozt@msn.com
armandozt@msn.com mercredi 24 juillet 2019, 11:29
How to Turn $30,000 into $128,000: https://hideuri.com/a56v7e?zWoNHkou
commentaire n°4437 par ms4deltadawn@yahoo.com
ms4deltadawn@yahoo.com mercredi 24 juillet 2019, 11:29
How to Turn $30,000 into $128,000: https://hideuri.com/a56v7e?zWoNHkou
commentaire n°4438 par gdwsr663@bellsouth.net
gdwsr663@bellsouth.net mercredi 24 juillet 2019, 11:29
How to Turn $30,000 into $128,000: https://hideuri.com/a56v7e?zWoNHkou
commentaire n°4439 par jaunblanco2@yahoo.com
jaunblanco2@yahoo.com mercredi 24 juillet 2019, 11:29
How to Turn $30,000 into $128,000: https://hideuri.com/a56v7e?zWoNHkou
commentaire n°4440 par traianpavel@hotmail.com
traianpavel@hotmail.com mercredi 24 juillet 2019, 11:29
How to Turn $30,000 into $128,000: https://hideuri.com/a56v7e?zWoNHkou
commentaire n°4441 par darwin_salez@yahoo.com
darwin_salez@yahoo.com mercredi 24 juillet 2019, 11:29
How to Turn $30,000 into $128,000: https://hideuri.com/a56v7e?zWoNHkou
facultatif
Facebook Twitter RSS Email
Forum Excel
Venez découvrir le nouveau forum excel question/réponse à la stackoverflow.com !
Forum Excel
hit parade n'en a rien a foutre du W3C Positionnement et Statistiques Gratuites Vincent Paré