Anatomie d’une page WordPress

C ‘est une des grandes forces de WordPress : des milliers de thèmes sont disponibles, gratuitement ou non, pour permettre à chacun de créer un site ou un blog à son image. Mais comment est-ce que tout cela fonctionne ? Comment, alors qu’un outil comme GetSimple CMS propose des fonctionnalités différentes dans chaque thème, WordPress arrive à uniformiser l’expérience utilisateur ?

rayonX

Nous allons voir que les différentes pages de nos sites internet ont toutes une structure en commun, un squelette plus ou moins souple, mais surtout vraiment efficace qui permet aux développeurs de thème de ne pas avoir à se soucier d’autre chose que de la création graphique et aux développeurs de ne pas avoir à se soucier d’autre chose que de l’efficacité de leur code.

separateur

Les différents types de page

Chaque thème est composé d’une multitude de fichiers destinés pour certains à prendre en charge l’affichage d’un type de page, pour d’autres à fournir des fonctions et / ou outils pour permettre cet affichage.

La page d’accueil

Par défaut il s’agit du fichier index.php qui contient une boucle qui affiche les articles classés par date de publication avec des liens précedent / suivant pour naviguer au sein de la liste.

Vous pouvez choisir d’afficher une page statique en allant dans le menu Réglages → Lecture de votre interface d’administration et en indiquant quel modèle de page devra jouer le rôle de page d’accueil et lequel devra lister les articles. Si vous souhaitez faire de gros travaux sur votre page d’accueil, il peut être préférable de choisir cette technique plutôt que de modifier le fichier index.php, vous aurez ainsi une solution de repli en cas d’urgence et ne modifierez pas le comportement des pages archives, catégorie et tag.

Les pages statiques

S’il ne doit y avoir qu’un seul fichier qui gère vos pages statiques, il s’appelle page.php. Mais de nombreux thèmes WordPress  proposent plusieurs options pour ce type de page : sans la sidebar, sur 2 ou 3 colonnes… c’est pourquoi vous trouverez fréquemment des fichiers de type page-xxx.php dans les répertoires de vos thèmes (il n’y a pas de règle imposée pour le nommage de ces fichiers mais c’est une convention bien pratique).

Vous avez vous-même la possibilité de créer vos modèles de page en vous basant sur le fichier de base. Il n’y a pas de limites à ce que vous pouvez faire : inclusion de code spécifique, refonte graphique pour créer un univers spécifique…

Les articles de blog

Le fichier single.php est en charge de la présentation d’un article. Il s’agit globalement d’une boucle qui ne récupère qu’un post et affiche son contenu.

A vous de choisir si vous préférez une ou deux colonnes, une sidebar ou non… toutes les modifications faites sur le fichier single.php seront répercutées sur tous vos articles.

Les pages archives, catégorie et tag

Faire compliqué pour rendre les choses simples… Par défaut, ces trois pages se comporteront comme la page index.php. Si le thème contient un fichier archive.php il définira le comportement des 3 pages. Si vous ajoutez un fichier tag.php, la page tag l’utilisera, et uniquement la page tag. C’est la même chose pour le fichier category.php qui ne gérera l’affichage que des pages catégorie.

Pour résumer cette hiérarchie il faut imaginer :

  • index.php
    • archive.php
      • tag.php
      • category.php

separateur

La structure d’une page sous WordPress

Quel que soit le type de page que vous manipulez, WordPress fixe une structure commune (en-tête, contenu, barre latérale et pied de page) grâce à trois fichiers qui servent à contrôler les parties identiques à toutes les pages. Voyons de quels fichiers il s’agit

L’en-tête de page

header.phpTypiquement on y retrouve le logo, le menu et éventuellement un moteur de recherche ou un formulaire de connexion. Personnellement j’y ajoute un fil d’Ariane pour simplifier la navigation et améliorer le référencement, mais vous pouvez y placer ce que vous voulez (bannières publicitaires, slider …).

Notez que le fichier header.php contient aussi le code html de début de page et la section <head></head>. C’est donc ce fichier qu’il faudra modifier si vous voulez faire appel à un nouveau script js ou ajouter une feuille de style css.

Le pied de page

footer.phpMentions légales, plan de site, liens vers vos autres sites… le pied de page est une zone d’expression libre pour un grand nombre de webmasters (même s’il est déconseillé d’en faire un catalogue de liens). Sachant que cette zone est commune à toutes vos pages, utilisez le fichier footer.php proprement pour y présenter des informations qui sont réellement pertinentes quel que soit le contexte.

le panneau latéral

sidebar.phpLa difficulté du fichier sidebar.php c’est qu’on attend de la barre latérale qu’elle apporte un supplément d’informations à la page en cours alors que WordPress en fait un élément statique quel que soit le contexte. Pour cette raison, une grande majorité des blogs (et à l’heure actuelle je ne fais pas exception à la règle) y présentent la liste des catégories, un ou plusieurs pavés publicitaires, un nuage de tags, les archives…

Mais vous êtes libres d’ajouter des champs personnalisés à vos articles pour les présenter en colonne de droite et proposer un contenu annexe pertinent. Vos visiteurs et votre référencement vous en remercieront.

separateur

Crédit photo : http://www.morguefile.com/archive/display/14577

6 réponses

  1. […] Plus d'infos sur la structure des pages chez Responsive-mind.fr/structure-page-wordpress. […]

  2. Franck dit :

    Bonjour,
    très intéressante partie sur la sidebar et le champs perso est un outil extraordinaire mais je suis confronté à un soucis « responsive » puisque ces infos liées à la page en cours disparaisse en cas de lecture sur un mobile, et je ne trouve pas la solution pour « en cas de mobile » mettre mes champs persos dans le l article vu que « n’a pu sidebar » 🙂

  3. Renaud M.G. dit :

    Une solution serait de ne pas simplement cacher les blocs en css mais d’utiliser du javascript pour permettre aux utilisateurs d’afficher / masquer la sidebar par dessus le contenu de la page (je sais que ça marche super bien avec jQuery mobile)

  4. […] Plus d’infos sur la structure des pages chez Responsive-mind.fr/structure-page-wordpress. […]

  5. […] Anatomie d'une page WordPress. C ‘est une des grandes forces de WordPress : des milliers de thèmes sont disponibles, gratuitement ou non, pour permettre à chacun de créer un site ou un blog à son image. […]

  6. […] Plus d’infos sur la structure des pages chez Responsive-mind.fr/structure-page-wordpress. […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *