Comment organiser un theme WordPress et développer plus rapidement ?

Par Alan Pilloud
Publié le 5 février 2016

J’adore chercher de meilleurs moyens de développer plus vite, plus proprement et plus réutilisable.

Cet article propose un aperçu de ma façon de faire un thème sur-mesure pour WordPress.

J’ai créé un thème de base que je réutilise pour chaque nouveau projet. Je peux ainsi fournir un thème sur-mesure en gagnant pas mal de temps.

Pour commencer, voici ce à quoi ressemble mon thème de base :

├── functions
|   ├── backend.php
|   ├── backend-editor.php
|   ├── frontend.php
|   ├── functions.php
|   └── theme-init.php
├── partials
|   ├── card.php
|   ├── hero.php
|   └── tile.php
├── sass
|   ├── partials
|   |   ├── _card.scss
|   |   ├── _hero.scss
|   |   └── _tile.scss
|   ├── _base.scss
|   ├── _styles.scss
|   ├── _variables.scss
|   └── style.scss
├── 404.php
├── footer.php
├── front-page.php
├── functions.php
├── header.php
├── index.php
├── singular.php
└── style.css

Les points principaux qui composent ce thème sont les templates partiels, l’utilisation de sass et la séparation du fichier functions.php en plusieurs autres parties spécifiques.

Cet article expose ces trois points tels que je les utilise dans chacun des thèmes que je développe sur-mesure pour mes clients.

1. Les templates partiels avec get_template_part()

Vous aimez vous répéter ?

Bien sûr que non.

C’est pour ça que tout ce qui pourrait être utilisé à plusieurs endroits du thème doit être fragmenté.

Le but est donc de faire un template pour chaque fragment.

Voici quelques idées de ce qu’on peut fragmenter :

  • les images d’entête de page, les miennes incluent souvent titre et sous-titre
  • les accroches d’articles, utilisable dans les archives, home.php ou les résultats de recherche, etc.
  • les éléments de votre sidebar

Par exemple, considérons les templates partiels suivants :

├── partials
|   ├── hero.php
|   └── hero-small.php

get_template_part() est la fonction qui permet d’inclure un template partiel. Elle supporte deux paramètres. Le premier est une chaîne contenant le chemin et le nom du template, le second est optionnel et il permet de choisir une variante.

On peut inclure nos deux templates partiels de cette manière :

get_template_part('partials/hero');
get_template_part('partials/hero', 'small');

On peut passer des variables aux templates partiels en utilisant set_query_var() :

set_query_var('fields', array(
    'ID' => get_the_ID(),
    'title' => get_the_title()
));

On peut aussi définir plusieurs set_query_var() contenant juste une chaîne. Je préfère l’array, parce ça donne moins de travail.

Dans le template, on récupère ces variables grâce à get_query_var() :

$fields = get_query_var('fields', null);

Et on va vraiment gagner du temps avec ça ?

Hé oui ! Même beaucoup parce que c’est réutilisable : ces templates partiels contiennent très peu de logique ce qui les rend réutilisables de site en site.

Mais aussi parce que vous perdez moins de temps à retrouver vos affaires lorsqu’il faut adapter le theme six mois après avoir mis en ligne le site. On ne se coltine pas des templates qui font deux-mille lignes dans lesquelles il faut faire des fouilles archéologiques.

De plus, quand vous avez besoin de modifier votre élément, il n’y a besoin de le faire qu’à un seul endroit.

2. Organisation du CSS

Je suis convaincu à 100% que les préprocesseurs CSS sont aujourd’hui des outils indispensables à tout expert WordPress.

Ca me donne des frissons quand je pense à “comment on faisait avant”.

Sass est un outil très puissant mais je l’utilise pour des tâches très simples, à savoir :

  • l’inclusion des partiels via @import
  • les variables, ex : $primary-color: #333
  • la compression du css sortant
├── sass
|   ├── partials            // Correspondent aux partials php
|   |   ├── _card.scss      // pour partials/card.php
|   |   ├── _hero.scss      // pour partials/hero.php
|   |   └── _tile.scss      // pour partials/tile.php
|   ├── _base.scss          // imports de bootstrap
|   ├── _styles.scss        // styles globaux
|   ├── _variables.scss     // variables Bootstrap
|   └── style.scss          // le fichier de base

J’utilise des partiels avec Sass qui correspondent aux templates partiels du thème.

Une seule CSS est générée : style.css. Ce fichier est indispensable à la bonne marche du thème et il doit contenir un commentaire d’entête qui décrit le thème.

Voici un exemple vide de l’entête du fichier style.scss :

/*!
Theme Name:
Theme URI:
Description:
Author:
Version:
*/

Notez l’utilisation du point d’exclamation au début du commentaire. Sans celui-ci, le commentaire serait supprimé par Sass.

3. Scinder les fonctions du thème

Il est fréquent que les fonctions du thème prennent de plus en plus d’ampleur et que cela requiert aussi un peu d’organisation.

J’utilise le fichier functions.php pour inclure des parties spécifiques elles-mêmes rangées dans un répertoire functions.

Voici les différents fichiers que j’utilise :

├── functions
|   ├── backend.php
|   ├── backend-editor.php
|   ├── frontend.php
|   ├── functions.php
|   └── theme-init.php

backend.php

En général, j’utilise des fonctions qui me permettent de simplifier le menu principal et la barre du haut. C’est aussi ici que je modifie l’affichage des colonnes dans les pages.

backend-editor.php

Ce fichier est habituellement moins rempli, je ne fais que simplifier davantage le menu pour les éditeurs.

frontend.php

Ici, j’ajoute les fichiers CSS et JS, je nettoie les balises meta qui ne m’intéressent pas.

theme-init.php

Il y a des fonctions qui n’ont besoin d’être exécutées qu’une seule fois à l’activation du thème. Ce sont surtout des options que je mets à jour via update_option().

Pour conclure

Une fois que tout ça est fait, l’idéal est d’en faire un thème que vous réutiliserez à chaque nouveau projet.

J’utilise Github pour stocker mon thème : BWAP Theme.

Grâce à tout ceci, on est maintenant capable de monter très vite un nouveau thème et on peut se focaliser sur l’intégration du design et les fonctionnalités.

Envie d'en parler ?

Ecrivez un email ou DM sur twitter