De retour dans Créer un thème Repo-Ready ! Dans les articles précédents, on a mis en place le thème dans l’administration de WordPress, mais il n’affiche encore que du contenu hardcodé et les styles et scripts ne chargent pas. On va bientôt corriger tout ça, mais avant, on va réorganiser un peu notre fichier index.php un peu (beaucoup) crado en le découpant en petits fichiers plus modulables et faciles à maintenir.
Le problème actuel
Le soucis pour l’instant est qu’on a qu’un seul fichier qui contient tout. Plus tard on va créer plusieurs templates pour gérer les différentes vues du thème. Qu’est-ce qu’on va faire des éléments qui ne sont pas vraiment destinés à changer, comme la navigation par exemple ? On copie-colle ce bout de code partout, sur tous les templates ?
Bien sûr que non. Simplement parce que si on a besoin de changer le balisage du menu, pour une raison ou une autre, on va devoir le faire sur tous les templates. Faire ça, c’est dupliquer du code et le but du jeu, si on veut faire les choses proprement, c’est de limiter au maximum la duplication de code.
Diviser pour mieux régner
Donc ce qu’on va faire, c’est segmenter notre page et mettre le contenu à répéter dans leur propre fichier, qu’on va appeler ensuite quand on en a besoin. Comme ça, on peut appeler le même fichier dans les différents templates, et si on veut modifier l’affichage de l’élément concerné, on a qu’un seul fichier à modifier, et les changements se répercuteront partout.
On va donc commencer par prendre tout le header du site, c’est-à-dire de la déclaration <!DOCTYPE html> jusque la balise fermante du <header>. On peut même prendre la balise <div id="content" class="site-content"> qui ouvre la zone de contenu, puisqu’elle sera répétée sur tous les templates du site, comme notre navigation. Puis on va couper-coller tout ça dans un nouveau fichier qu’on va appeler header.php.
De la même façon, on va prendre tout le pied de page du site, en partant de la balise <div> fermant la zone de contenu jusqu’en bas du document et mettre le tout dans un nouveau fichier que l’on va appeler footer.php.
Toujours de la même façon, on va prendre toute la barre latérale du site contenant les widgets marquée par les balises <aside>, et on va la mettre dans son fichier nommé sidebar.php.
Maintenant, pour appeler ces fichiers dans notre template index.php, on va utiliser à l’endroit où étaient ces éléments les fonctions get_header() pour appeler le fichier header.php, pour appeler footer.php, et pour appeler sidebar.php.
[pastacode lang=”php” manual=”%3C%3Fphp%20get_header()%3B%20%3F%3E%0A%0A%20%20%20%20%3Cmain%20id%3D%22primary%22%20class%3D%22content-area%22%20role%3D%22main%22%3E%0A%0A%20%20%20%20%20%20%20%20%3Carticle%20class%3D%22post%20hentry%22%3E…%3C%2Farticle%3E%0A%20%20%20%20%20%20%20%20%3Carticle%20class%3D%22post%20hentry%22%3E…%3C%2Farticle%3E%0A%20%20%20%20%20%20%20%20%3Carticle%20class%3D%22post%20hentry%22%3E…%3C%2Farticle%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3Cnav%20class%3D%22navigation%20posts-navigation%22%20role%3D%22navigation%22%3E…%3C%2Fnav%3E%0A%0A%20%20%20%20%3C%2Fmain%3E%3C!–%20%23main%20–%3E%0A%0A%3C%3Fphp%20get_sidebar()%3B%20%3F%3E%0A%3C%3Fphp%20get_footer()%3B%20%3F%3E” message=”index.php est beaucoup plus lisible” highlight=”” provider=”manual”/]
Et voilà, c’est magique.
Déjà, notre template index.php est plus lisible, et on sait maintenant que pour afficher l’entête du site avec la navigation dans nos autres templates, on a juste à appeler le fichier header.php avec la fonction get_header().
Gérer plusieurs headers/sidebars/footers
Dans notre prototype, on a vu qu’on avait plusieurs zones de widgets. On avait une zone de widget principale dans la barre latérale, mais on a aussi une zone de widget dans le menu et dans le footer.
WordPress appelle les zones de widgets “sidebar” . C’est un peu un abus de langage, parce qu’une zone de widgets n’est pas forcément une barre latérale, mais bon. Dans notre thème, on a donc trois sidebars.
On va simplement traiter nos deux autres sidebars exactement de la même façon, c’est-à-dire les mettre dans leur propre fichier.
On va prendre la zone de widget du menu, qui est située maintenant dans le fichier header.php entre les balises <aside>, et la mettre dans un fichier que l’on va appeler sidebar-menu.php.
Puis on va mettre la zone de widget du footer située dans footer.php, entre les balises <aside>, dans sidebar-footer.php.
Dans le fichier header.php, je vais appeler la zone de widget du menu en utilisant la même fonction que pour la zone de widget principale, mais je vais lui passer le nom de ma zone de widget, vu que je ne veux pas appeler la zone de widgets par défaut. Je lui passe donc “menu” : get_sidebar( 'menu' ), et la fonction va appeler le fichier sidebar-menu.php.
[pastacode lang=”php” manual=”%3Cdiv%20class%3D%22menu-wrapper%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%3Cheader%20class%3D%22menu-header%22%3E…%3C%2Fheader%3E%0A%0A%20%20%20%20%3Cform%20action%3D%22%22%20method%3D%22GET%22%20name%3D%22s%22%20class%3D%22search-form%22%20role%3D%22search%22%3E…%3C%2Fform%3E%0A%0A%20%20%20%20%3Cul%20class%3D%22primary-menu%22%3E…%3C%2Ful%3E%0A%0A%20%20%20%20%3Cul%20class%3D%22social-icons%22%3E…%3C%2Ful%3E%0A%0A%20%20%20%20%3C%3Fphp%20get_sidebar(%20’menu’%20)%3B%20%3F%3E%0A%0A%3C%2Fdiv%3E” message=”header.php est bien plus clean” highlight=”11″ provider=”manual”/]
Dans footer.php, j’appelle ma zone de widget avec get_sidebar( 'footer' ), et la fonction va appeler le fichier sidebar-footer.php.
[pastacode lang=”php” manual=”%3Cfooter%20id%3D%22colophon%22%20class%3D%22site-footer%22%20%3E%0A%0A%20%20%20%20%3C%3Fphp%20get_sidebar(%20’footer’%20)%3B%20%3F%3E%0A%0A%20%20%20%20%3Cdiv%20class%3D%22footer-wrapper%22%20role%3D%22contentinfo%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22site-info%22%3E…%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%3Cul%20class%3D%22social-icons%22%3E…%3C%2Ful%3E%0A%0A%20%20%20%20%3C%2Fdiv%3E%3C!–%20.footer-wrapper%20–%3E%0A%3C%2Ffooter%3E%3C!–%20%23colophon%20–%3E” message=”footer.php” highlight=”3″ provider=”manual”/]
La fonction get_sidebar() sans paramètre va simplement chercher un fichier appelé sidebar.php. Si vous lui passez une chaîne de caractères, elle va chercher sidebar-{chaîne}.php, simplement. C’est une convention qu’il faut respecter, sinon ça ne marche pas.
Les fonctions get_header() et get_footer() fonctionnent exactement de la même façon. Vous pouvez passer un nom dans get_header() et la fonction ira chercher header-{nom}.php et si elle ne trouve pas ce fichier, elle prendra header.php.
Ce qui veut simplement dire que vous pouvez créer plusieurs headers et plusieurs footers différents et les appeler selon le contexte ou template ! C’est pas surpuissant, ça ?
Voilà, on a découpé les parties de notre thème en fichiers plus petits, et plus maintenables, que l’on pourra réutiliser dans les différents templates. Nos fichiers sont bien plus lisibles maintenant.
Dans le prochain article, on va s’occuper des styles de notre thème, et on va permettre à WordPress de les charger correctement.
PS: Si vous avez aimé ce article et êtes intéressé pour apprendre à développer pour WordPress en utilisant les meilleures pratiques, jetez-un oeil à WPCookBook ! C’est un vrai livre de recettes WordPress pour apprendre à développer pour WordPress proprement et exploiter au maximum tous les outils et APIs mis à notre disposition. Inscrivez-vous pour être notifié de sa publication !