Créer Un Modèle Pour Un Thème avec WordPress

Lorsqu’on crée ou modifie un thème avec WordPress, il arrive qu’on veuille créer une page qui sort complètement de la structure utilisée pour les autres pages du site.  C’est souvent le cas de la page d’accueil d’un site.

Pour créer une page avec un design complètement personnalisé, il vous faut créer un nouveau modèle (anglais: template).  Un modèle sert à définir l’apparence d’une page web dans WordPress.

Par défaut, toutes les pages créées dans la section d’administration utilisent le code se trouvant dans page.php du répertoire de votre thème.

Pour créer un nouveau modèle, vous devez tout d’abord créer un fichier avec l’extension .php contenant un nom significatif dans le répertoire de votre thème.  Supposons que vous souhaitez créer une page d’accueil  pour votre site web, vous pouvez créer le fichier accueil.php.

Ouvrez le fichier et copiez le code suivant:

<?php
/*
Template Name: Accueil
Description: Page d'accueil
*/
?>
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Accueil</title>
  <meta name="description" content="Page d'accueil">
</head>
<body>
	<h1>Bienvenue sur ma page d'accueil</h1>
</body>
</html>

Sauvegardez le fichier et fermer.  Ensuite, dans votre section d’administration:

  1. Créez une nouvelle page;
  2. Donnez-lui un titre (ex: Accueil);
  3. Inscrivez un peu de texte (ex: Bienvenue sur ma page d’accueil);
  4. Du côté droit dans la section Attributs de la page, choisissez votre nouveau modèle : Accueil;
  5. Publiez la page et allez le résultat.

La page affiche uniquement le texte inscrit dans le fichier PHP sans se soucier du titre ou du contenu inscrit lors de la création de la page.

Vous devez maintenant faire en sorte que le titre et le contenu s’affiche dans votre page.  Ouvrez le fichier et faites en sorte que votre fichier ressemble à ceci:

<?php
/*
Template Name: Accueil
Description: Page d'accueil
*/
?>
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Accueil</title>
  <meta name="description" content="Page d'accueil">
</head>
<body>
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<h1><?php the_title(); ?></h1>
		<div>
			<?php the_content(); ?>
		</div>
	<?php endwhile; ?>
	<?php endif; ?>
</body>
</html>

Les lignes 15 à 20 ont été ajoutées au fichier.

Les lignes 15 et 20 permettent de récupérer les valeurs de WordPress entre ces deux lignes.  On appelle cette section « The Loop».  La puissance de WordPress passe par cette section.  Elle peut sembler intimidante au départ, mais vous verrez ces lignes dans presque tous les fichiers de votre thème.

À l’intérieur de la loop, nous allons maintenant intégrer le titre et le contenu tels qu’insérés dans la section d’administration.  Deux fonctions WordPress permettent d’y arriver:

  • the_title() : insertion du titre;
  • the_content() : insertion du contenu.

Sauvegardez le tout et rafraichissez la page.

Consultez la documentation officielle pour plus d’informations sur la création de modèle dans WordPress.

Vous avez maintenant la base!  À vous maintenant de complexifier vos modèles en fonction de votre inspiration en y ajoutant le HTML et CSS requis!

À propos de l'auteur

Maxime Jobin

Maxime Jobin est un entrepreneur, un programmeur, un stratège technologique, un chargé de cours et un passionné de WordPress. Il aime partager ses connaissances et permettre aux entreprises de devenir plus productives et réduire leurs coûts d'exploitation grâce aux technologies.

2 commentaires