Salut, logo-theme custom wordpress

On continue sur notre lancé dans la création d’un thème WordPress. J’avoue que la dernière fois on a pas fait grand chose mais c’était nécessaire pour la suite.

Dans ce nouvel article, nous allons découvrir comment fonctionne un thème, et donc un ou plusieurs templates. Comme tu t’en es peut-être rendu compte, le dossier wp-content dont je te parlais la dernière fois (Préparer WordPress en local), contient de nombreux fichiers dont le corps même du thème qu’on veut créer.

Nous allons explorer ce dossier et essayer de comprendre comment WordPress construit un  thème avec les briques qu’on lui donne.

Il va falloir être un minimum rigoureux dans l’organisation des fichiers puisque WordPress va chercher tel fichier ou tel autre grâce à leur nom, donc attention aussi aux noms qu’on donne…

On décortique HTML5 blank

Comme dans tout thème, il y a des fichiers incontournables:

  • index.php : c’est le fichier qui sera appelé en dernier par wordpress, on verra la hiérarchie des fichiers plus tard,
  • function.php : ce fichier est appelé dès qu’un template l’est aussi. C’est au sein de ce fichier qu’on va pouvoir rajouter des fonctions à notre thème, lier des fichiers de script JS, lier des bibliothèques comme JQuery, FontAwesome, etc. Il permet aussi d’ajouter des champs personnalisés (custom fields). Ce ne sont ni des articles ni des pages, mais un type de contenu particulier qu’on souhaite créer, comme des évènements par exemple. Tu l’auras compris, ce fichier est très important dans notre thème!
  • les templates standards : pages.php, single.php, category.php, 404.php, etc… Ces fichiers sont des trames de base sur lesquelles on va s’appuyer pour monter notre thème. On peut aussi tout supprimer pour repartir de zéro. Dans un premier temps comme on apprend on va modifier ce qui existe déjà et rajouter des choses.
  • style.css : celui là tu le connais, c’est le fichier de style qui permets de styliser notre page.
  • nos fichiers : et oui nous allons devoir créer des fichiers PHP pour alimenter et compléter notre thème. Au lieu de créer des fichiers en .html, on va créer des .php.

Tu auras sûrement remarqué qu’il y a un dossier JS, qui nous permettra de stocker nos fichiers Javascript et un dossier img, pour mettre les images (les backgrounds, les sliders, boutons, bannières etc…). Les images qui sont des illustrations d’un contenu sont stockées dans un autre fichier, accessible depuis la partie média du back-office de WordPress.

Les templates standards

Les templates standards sont des exemples de page qui correspondent à des contenus de WordPress. Depuis l’administration de WordPress tu as du te rendre compte qu’il est possible de créer des pages ou des articles.

« Mais un article c’est bien une page? C’est quoi la différence? »

Article ou page?

C’est là où il faut faire attention lorsqu’on démarre avec WordPress, il fait la différence entre une page et un article. Il ne faut pas oublier qu’à la base WordPress est un outil fait pour réaliser des blogs. Si tu prends l’exemple de celui-ci par exemple il y a du contenu fixe, qui ne change jamais ou seulement lorsque j’ai une mise à jour  faire:

  • A propos,
  • Contact,
  • Mes certifications,
  • Mon parcours de formations, etc.

C’est ce que j’appellerais du contenu froid, qui reste figé dans le temps.

Les articles sont ce que je vais appeler du contenu chaud, ils correspondent à un fil d’actualité comme pour un journal par exemple. C’est la partie vivante de ton projet.  Les articles peuvent faire parties d’une catégorie (sujet commun, même famille), pas les pages.

Pour revenir à l’arborescence, le fichier single.php sera appelé lorsqu’on voudra afficher un article et page.php, sera appelé si on souhaite une page. Voyons maintenant comment WordPress agence et fait communiquer ces fichiers.

Les includes

WordPress appelle telle ou telle partie page grâce à un principe de PHP très pratique: les includes. Je n’affirmerais pas qu’il s’agit de la fonction include de PHP, puisqu’il y a aussi de la Programmation Orientée Objet dans WordPress, et qu’il y a d’autres moyen de faire des includes en POO. Je ne rentrerais pas dans le détail puisqu’on en a pas besoin ici, et que je n’ai pas pris le temps d’éplucher tous les fichiers de WordPress pour voir comment cela était fait.

Il va falloir écrire ou plutôt appeler ces includes, ce n’est pas magique non plus. Si tu ne demandes pas d’avoir un footer, tu n’en auras simplement pas. Ces includes ne se font pas comme en php si tu en as l’habitude, mais en appelant des fonctions dans le fichier php, qui se chargera de récupérer la partie, le fichier,  que tu as demandée, et l’insèrera où tu l’as demandé.

L’index.php

Prenons l’exemple de l’index.php qui se trouve dans le fichier du thème html5 blank. Voici le code que tu devrais avoir :

<?php get_header(); ?>

	<main role="main">
		<!-- section -->
		<section>

			<h1><?php _e( 'Latest Posts', 'html5blank' ); ?></h1>

			<?php get_template_part('loop'); ?>

			<?php get_template_part('pagination'); ?>

		</section>
		<!-- /section -->
	</main>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Tu peux d’ores et déjà remarquer un chose si tu l’avais jamais vu, il y a du code PHP au milieu du code HTML. Le code php est écrit entre des balises php. Ce qui est souvent le cas quand on écrit du PHP.

Dans cet exemple simple, toutes les fonctions get_(quelque chose) réalisent les includes dont on parlait précédemment. Donc si on lit cette page:

  • get_header(); => donne moi le header,
  • main => on ouvre une balise HTML qui contiendra le corps de la page (notamment une section),
  • get_template_part(‘….’) => donne moi telle partie de template (on y reviendra),
  • on referme les balises main et section comme on le ferait dans n’importe quel fichier HTML,
  •  get_sidebar(); => donne moi la sidebar,
  • get_footer(); => donne moi le footer.

Je pense que cette façon de faire est assez simple à comprendre, notamment ce que je disais dans mon article précédent, si on veut modifier le header, la sidebar ou autre, on modifiera simplement le fichier PHP correspondant et la modification sera faite pour toutes les pages.

Comme tu peux le voir, l’index fait appel à plusieurs parties pour construire une seule page. Rappelle toi de l’image de la chaîne de montage de voiture dont je parlais dans mon article précédent. On a assemblé ici plusieurs pièces détachées pour faire un ensemble complet!

La hiérarchie des fichiers WordPress

J’en avais parlé au début, WordPress reconnait quel fichier appeler grâce au nom de celui ci. Les fichiers répondent à une certaine hiérarchie, comme dans une sorte d’arbre.

Petite précision qui semble évidente mais je pense qu’il est tout de même bon de le rappeler: sur n’importe quelle page web, chaque bouton correspond à un itinéraire qui lui est propre. Je veux dire par là qu’un bouton ou un lien ne dirige jamais vers plus d’une page. Les routes sont donc définies à l’avance sur une page: un bouton ou un lien correspond à une URL unique.

Imagine maintenant que la hiérarchie de WordPress est un arbre dont l’extrémité de chaque branche est un bouton d’une page, et que chaque bouton appelle donc une page particulière. Chaque branche est une route unique qui conduit vers d’autre branche (autre page, article) ou le pied du tronc (page par défaut).  Wordpress fonctionne comme cet arbre. Si une route ne mène nulle part, alors on arrivera au pied du tronc, dans le fichier index.php qui servira de template de base, en guise de voiture balais si on veut.  C’est très imagé, j’espère que c’est clair…

Heureusement, il existe des schémas pour mieux comprendre le fonctionnement de cette hiérarchie. Je te conseille vivement d’aller voir le site wphierarchy.com. Le schéma est très clair, et comme tu peux le voir tout mène in-fine au fichier index.php. Ce schéma aide à comprendre les relations et routes possibles entre les fichiers. (à lire de gauche à droite).

hiérarchie fichier wordpress - source wphierarchy

Schéma extrait du site wphierarchy.com.

Si j’ai un conseil à te donner, c’est d’imprimer ce schéma et le garder bien en évidence, on va s’en servir tout le temps!

Exemple de la page d’accueil

Pour terminer cet article, on va voir comment faire pour avoir une page d’accueil.

Pour cela regarde dans la colonne de gauche (en gris), il y a un block  « Site Front Page », ça c’est ce qu’on veut. C’est une page particulière qui va nous servir de point d’entré sur notre site, bref une page d’accueil. WordPress va ensuite chercher s’il y un fichier front-page.php, il y a 2 possibilités:

  • soit on veut une page « statique »,
  • soit on veut un résumé des derniers articles, dans ce cas, WordPress va charger la page home.php si elle existe. Sinon, le CMS chargera l’index.php.

Il est possible de choisir depuis l’administration, quel type de page d’accueil on souhaite depuis la section Réglage/Lecture:

définition de la page d'accueil - wordpress

Statique? Vraiment?

Le premier cas que j’ai évoqué juste avant correspond à ce qui est coché sur la photo ci-dessus. On va donc pouvoir saisir du contenu statique, donc qui ne varie pas, mais on va aussi pouvoir y insérer un ou plusieurs  flux d’articles de catégories différentes. C’est là que la création d’un thème personnalisé prends tout son sens, on va pouvoir faire tout un tas de choses sans oublier la différence notable que fait WordPress entre un article et une page.

D’ici le prochain article, je t’invite à voir la différence d’affichage entre les deux propositions de page d’accueil. Pour que la différence soit visible, n’hésites pas à créer un peu de contenu dans ton projet, et à mettre des images.

Dernière astuce pour rendre le changement plus visuel: lors de la création d’un article tu as la possibilité de mettre une image à la une, tout en bas dans la sidebar de droite de la partie d’admin permettant de rédiger un article. N’hésites pas à en mettre, ces images apparaîtront en présentation de ton article sur ta page d’accueil.

Bon tests et à très bientôt,

Guillaume