Anatomie de Twenty Twelve

Transcription

1 25 Anatomie de Twenty Twelve Architecture de base d un thème WordPress Avant de faire connaissance avec les fichiers qui composent Twenty Twelve, il est important de comprendre comment est conçu un thème WordPress. Figure Différentes zones d une page : entête, contenu et pied de page. Index.php et style.css Tout d abord, intéressons-nous aux deux fichiers piliers de tout thème WordPress : index.php et style.css. Ce sont les deux fichiers de base qu il faut avoir pour créer un thème WordPress. Sans l un des deux, votre thème ne sera pas valide. Index.php regroupe l ensemble du code PHP et HTML de votre thème, tandis que style.css intégrera les styles CSS de votre thème. Une bonne pratique de création de thème WordPress est de créer un premier contenu dans index.php, par exemple la page d accueil de votre site, et de le décliner ensuite dans différents autres fichiers. Par exemple, une page d accueil est constituée de différentes parties : l en-tête, le contenu et le pied de page. Cet en-tête et ce pied de page vont se retrouver sur toutes les pages du site. Il est donc judicieux de les isoler dans un fichier à part entière afin de pouvoir les récupérer pour les autres pages sans avoir besoin de reprendre le même code dans

2 294 Thème par défaut, twenty twelve tous les fichiers. Ainsi, on va créer un "header.php" pour l en-tête et un "footer. php" pour le pied de page. Dans chaque fichier qui affichera un type de page différent, on appellera alors ces deux fichiers pour en afficher le contenu. Nous verrons tout cela plus en détail par la suite. La suite des fichiers à intégrer dépendra de la complexité de votre thème. Si votre site est un simple blog, avec un seul type de contenu, alors la structure de votre thème sera relativement simple. En revanche, si vous souhaitez créer un site complet avec portfolio et différents types de formats d articles pour votre blog, alors la structure sera plus complexe. Dans cette section, nous allons analyser la structure de Twenty Twelve, qui est relativement classique et bien organisée, pour vous permettre de bien comprendre comment tout cela fonctionne. Figure Fichiers composant Twenty Twelve. Architecture de fichiers de Twenty Twelve Nous allons commencer par faire un rapide tour des fichiers qui composent Twenty Twelve et ensuite, nous verrons comment sont conçus et organisés chacun d entre eux. Voici donc le schéma de l architecture de Twenty Twelve :

3 Anatomie de Twenty Twelve 295 Le thème est composé de 36 fichiers, dont certains sont regroupés dans des dossiers. On retrouve les fichiers principaux que sont index.php et style.css. Nous allons détailler le contenu de chacun de ces fichiers tout en créant une trame qui vous permettra de comprendre l architecture générale d un thème WordPress. Hiérarchie des fichiers L ensemble des fichiers composant un thème WordPress suit une certaine organisation, que l on appelle la hiérarchie des fichiers. Pour bien comprendre comment cette hiérarchie fonctionne, prenons un exemple : Le fichier de base, comme nous l avons vu précédemment, est le fichier index. php. C est une sorte de fichier générique ; il sera utilisé si aucun autre fichier plus précis n est proposé. Dans l architecture d un thème WordPress, il existe toute une série de fichiers à utiliser. Par exemple, pour afficher un article, il faut aller chercher le fichier single. php ; pour afficher une catégorie, category.php, etc. Tous ces fichiers suivent une logique définie par WordPress. Supposons que votre site web ne contienne que le fichier index.php et que vous vouliez afficher un article ; quand vous taperez l URL de l article, ce sera le contenu généré par le fichier index.php qui sera affiché. En revanche, si le thème possède un fichier article.php, alors c est son contenu qui sera affiché. WordPress a prédéfini par défaut toute une série de fichiers faciles à repérer pour identifier des pages sur un site web. Tous ces fichiers ne sont pas obligatoires, mais plus votre thème sera détaillé et plus vous pourrez personnaliser chacune des pages de votre site (voir Figure 25.03). Ce schéma nous montre clairement quel fichier sera appelé selon la requête que fera le visiteur du site. Si le premier fichier recherché n existe pas, alors c est le suivant qui le remplacera dans la hiérarchie et ainsi de suite, jusqu à l index.php qui est obligatoire. Analysons l ensemble des fichiers que l on peut utiliser pour composer un thème WordPress : 404.php : s affiche quand l URL de la page souhaitée ne mène nulle part, la page n existant pas. search.php : affiche les résultats de recherche effectués sur le site. archive.php : dédié à l affichage d articles, que ce soit par mois ou par années. Affiche aussi les pages de catégories, tags, auteurs, dates, si ces dernières ne sont pas représentées par un fichier plus précis comme category.php, tag.php, etc. single.php : permet d afficher la page de l article. page.php : affiche le contenu d une page statique du site web. home.php : est utilisé pour créer une page d accueil dédiée. comments-popup.php : permet d afficher la fenêtre pop-up des commentaires.

4 296 Thème par défaut, twenty twelve Figure Hiérarchie des fichiers pouvant composer un thème. Ensuite, à différents niveaux de pages secondaires, on a un troisième niveau de pages. Par exemple, le fichier archive.php ne sera appelé que s il n existe pas de fichier plus précis. C est le cas ici des fichiers suivants : taxonomy.php : permet d afficher une liste d articles par taxonomie (voir la section "développement" du livre pour de plus amples informations). category.php : permet d afficher une liste d articles par catégorie. tag.php : affiche une liste d articles correspondant à un mot-clef précis. author.php : affiche tous les articles demandés pour un auteur. date.php : affiche les articles pour une date donnée. archive-$posttype.php : permet d afficher toute une série d articles correspondant à un type précis. On ne parle pas ici de formats d articles, mais de Custom Post Types, les types de contenu particuliers (voir Chapitre 37 sur les Custom Post Types). En dessous, on remarque que single.php n est pas le seul fichier permettant d afficher un article. Il est également possible de définir une page précise pour un attachement, une pièce jointe (attachment.php), un Custom Post Type (single-$posttype.php) et enfin pour styler de manière plus précise un article individuellement sur le blog (single-post.php).

5 Anatomie de Twenty Twelve 297 Et ainsi de suite, selon le type de contenu affiché. À noter le fonctionnement de la page d accueil, qui est assez particulier et qu il est intéressant de comprendre, surtout que Twenty Twelve est le premier thème par défaut de WordPress à employer ce genre de fichiers. Le fichier le plus précis pour afficher le contenu d une page d accueil est front-page. php. S il ne figure pas dans le dossier du thème, alors l orientation sera différente selon le type de contenu. Si le contenu affiché est une page, on va se diriger vers les fichiers de "pages statiques". Si un fichier spécifique a été créé pour afficher une page en particulier (page-$slug.php ou page-$id.php), alors c est cette page qui affichera le contenu sur la page d accueil. Il est également possible d avoir créé un contenu spécifique et de l avoir mis dans un fichier spécifique ($custom. php). Enfin, si l on souhaite afficher des articles sur la page d accueil, on pourra utiliser home.php ou encore plus simple, index.php. Voilà globalement le fonctionnement des fichiers WordPress entre eux. Si vous le comprenez, alors vous saisirez facilement le fonctionnement de Twenty Twelve. Présentation détaillée des fichiers de Twenty Twelve Header.php Nous commençons par ce fichier, car c est là que vont être stockées les informations de base pour créer notre première page. Sans en-tête, une page web ne peut être affichée. Le fichier header.php intègre aussi les informations qui afficheront visuellement l en-tête du site, avec le titre, la description et le menu de navigation. Comme nous avons pu le voir précédemment, l en-tête du thème est séparé de son contenu pour être réutilisé plus rapidement et simplement sur toutes les pages du site. Information sur le fichier et Doctype Tout d abord, WordPress fournit quelques informations utiles sur le thème et plus particulièrement ce fichier : <?php /** * The Header for our theme. * * Displays all of the <head> section and everything up till <div id="main"> * WordPress Twenty_Twelve Twenty Twelve 1.0 */?>

6 298 Thème par défaut, twenty twelve En dessous, on trouve le doctype, nécessaire sur n importe quelle page web : <!DOCTYPE html> Puis on retrouve les attributs de langage qui vont être conditionnés selon que vous êtes sur Internet Explorer 7/8 ou un autre navigateur. En effet, pour Internet Explorer, on a ajouté ici la classe CSS "ie". Cela permet notamment de styler certains éléments spécifiquement pour le navigateur de Microsoft : <!--[if IE 7]> <html class="ie ie7" <?php language_attributes();?>> <![endif]--> <!--[if IE 8]> <html class="ie ie8" <?php language_attributes();?>> <![endif]--> <!--[if!(ie 7)!(IE 8) ]><!--> <html <?php language_attributes();?>> <!--<![endif]--> La balise <head> En dessous, on ouvre la balise <head>. Celle-ci est relativement simple et courte : <head> <meta charset="<?php bloginfo( charset );?>" /> <meta name="viewport" content="width=device-width" /> <title><?php wp_title(, true, right );?></title> <link rel="profile" href=" /> <link rel="pingback" href="<?php bloginfo( pingback_url );?>" /> <?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions.?> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri();?>/js/html5.js" type="text/javascript"></script> <![endif]--> <?php wp_head();?> </head> On a tout d abord le code identifiant le type de caractères utilisés, fourni grâce à la fonction <?php bloginfo( charset );?>. En dessous, on trouve la métadonnée concernant le viewport et permettant de gérer les différents types de supports utilisés, comme les tablettes et les smartphones. Ensuite, on a la balise <title> qui permet d afficher le titre du site web. Attention, cela ne va pas l afficher sur votre site web, mais dans la barre du haut de votre fenêtre et aussi pour différentes utilisations, comme les moteurs de recherche. En dessous, on retrouve deux liens menant vers la page du XFN 1.1 et vers l URL des pingbacks.