Mémos

M é m o - l a b .

Créer son propre thème

Ce chapitre explique comment développer son propre thème. Le contenu des fichiers qui est proposé correspand à un kit de démarrage qui devra être enrichi par la suite en fonction des besoins, notamment en ce qui concerne le fichier functions.php.

Créer le dossier <projet>/wp-content/themes/mytheme. Le dossier mytheme représente notre thème. Dans ce dossier, créer les dossiers et fichiers suivants :

  • fichier index.php
  • fichier style.css
  • fichier functions.php
  • fichier header.php
  • fichier footer.php
  • fichier front-page.php et/ou home.php
  • fichier assets/css/app.css
  • fichier assets/js/app.js
  • dossier template-parts

Le dossier template-parts n’est pas obligatoire mais souvent utilisé pour placer du code qui sera utilisé par différents templates et éviter la duplication de code. on peut y placer par exemple la loop de WP dans le fichier loop.php. L’appel de ce fichier depuis un template se fait alors en utilisant la fonction <?php get_template_part(‘template-parts/loop’); ?>.

Dans le fichier style.css, nous définissons notre thème.





style.css

/*
Theme Name: mytheme
Author: moi
Author URI: https://.../
Description: thème personnalisé du site
Version: 1.0
*/

Les fichiers header.php et footer.php sont des layouts définissant la partie statique du site que l’on retrouve sur toutes les pages comme le header, la navigation et le footer par exemple. Ces 2 layouts seront utilisés par tous les autres templates.





header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo('charset'); ?>">
        <title>My site</title>
        <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
	


footer.php
        
        <?php wp_footer(); ?>
    </body>
</html>

Les templates php doivent appeler les fichiers header.php et footer.php.





template.php

<?php get_header(); ?>
// code 
<?php get_footer(); ?>

Dans le fichier functions.php, nous appelons les assets (ressources) css et js. Récupérer ce contenu via le chapitre Chargement des ressources css et js. Penser à remplacer path/to/app.css par dist/css/app.css.

Le fichier app.css est la feuille de style de notre site.

Pour comprendre le fonctionnement des fichiers front-page.php, home.php et index.php, se référer au chapitre Template hierarchy. Prenons par exemple la création d’un site web « classique » et non d’un blog. Nous créons une page Accueil définie comme « Page d’accueil », WP utilisera alors le template front-page.php à l’appel de cette page. si nous créons une page Blog par la suite définie comme « Page des Articles », WP utilisera alors le template home.php.
Lorsque nous créerons une nouvelle page Autre page, le template utilisé sera page-autre-page.php. le slug ‘autre-page’ se trouve dans le permalink de la page.
Le chapitre Les requêtes et la loop WordPress explique comment récupérer dans les templates les contenus saisis en admin.

Le fichier index.php est obligatoire même s’il ne contient aucun code.