Thèmes WordPress : éléments et structure

Le programme de blogging Web WordPress se caractérise par une séparation entre design et noyau de programmation. Les thèmes permettent d’adapter la représentation des contenus du site Web au niveau du Frontend, sans changer le programme en lui-même. Un thème WordPress dispose d’un code source, décrivant comment les contenus enregistrés sur un serveur peuvent être chargés et combinés pour que l’un navigateur Web puisse présenter un contenu homogène lors du chargement d’une page dynamique. Pour des exploitants de pages Web, les thèmes offrent par conséquent la possibilité de concevoir librement, dans la limite des options disponibles, le design et la mise en page d’un site WordPress. La structure d’un thème WordPress est composée de divers fichiers source PHP, couramment appelés fichiers Templates, feuilles de calcul (Stylesheets), données de localisation, ou optionnellement des fichiers JavaScript et autres graphiques. Nous vous montrons dans cet article quels éléments de thèmes WordPress sont bons à connaître, quelles fonctions ils remplissent et comment ces différents éléments constitutifs collaborent.

Eléments de base d’un thème WordPress

Tandis qu’une page Web statique était basée sur un document HTML unique par le passé, qui rassemblait les contenus et les éléments JavaScript et CSS, les thèmes WordPress sont quant à eux composés de plusieurs fichiers Template.  L’intégration de ces différents Templates se fait grâce à la balise Include, permettant d’en inclure plusieurs. Ainsi les contenus issus d’une base de données sur un serveur peuvent être reliés à la page Web et ainsi représentés sur le navigateur Web. Si cette représentation doit impliquer certaines conditions, celles-ci peuvent être précisées dans les balises conditionnelles (Conditional-Tags). On utilise pour cela des plugins appelés Template-Hooks. L’édition de contenus est gérée via un mécanisme caractérisé de Loop selon la terminologie WordPress. 

Fichiers de Templates

Un thème WordPress, avec ses éléments de base, peut être considéré comme un genre de plan de construction pour un site recouvrant différents états. Les pages Web dynamiques ainsi créées et livrées au navigateur Web se composent d’éléments spécialement adaptés à une requête précise : si un utilisateur charge une page de votre site Internet, l’ensemble du Blog WordPress, un avis individuel ou encore un commentaire. Ces modules de base sont appelés des fichiers de Templates. Il s’agit de fichiers source PHP, un mélange d’HTML, de code PHP et de balises de Templates possédant des tâches définies respectivement, et avec exactitude.

Un thème WordPress est considéré comme en état de marche s’il contient des fichiers Template index.php et style.css. En général, une multitude de fichiers Template différents (représentant différents types de contenus) peuvent se trouver dans un thème WordPress. Cela permet d’élargir le panel de fonctions d’un même Template et de votre Blog par extension. Voici une liste des fichiers de Templates de base se trouvant dans presque tout thème WordPress :

  • style.css : il s’agit de l’un des deux éléments de thème WordPress obligatoires. Ce fichier contient des informations d’en-têtes comme le nom du thème, une courte description, le nom du développeur, le numéro de version, la licence du thème ainsi qu’un lien vers celui-ci. Le fichier style.css est donc la feuille de calcul principale du site Web WordPress et laisse de la place pour le code CSS du thème.
  • index.php : il s’agit du second élément obligatoire d’un thème WordPress. Celui-ci offre une vue d’ensemble d’un article et peut être utilisé comme page d’accueil. Au sein de la hiérarchie du Template, le fichier index.php est le dernier élément et sert de fichier de secours. Autrement dit, si aucun autre fichier de Template n’a été créé spécifiquement pour l’édition de contenu, le programme recourt au fichier index.php. L’établissement d’index.php dépend essentiellement du nombre de codes sont intégrés à d’autres fichiers de Templates. Tandis que le fichier index.php d’un thème WordPress simple contient souvent l’ensemble du code source incluant le répertoire racine HTML, le Header, Footer, Sidebar et la navigation, ces éléments sont incorporés dans des fichiers de Templates supplémentaires avec les thèmes les plus complexes (par exemple header.php, footer.php ou encore sidebar.php) de manière à ce que le fichier index.php remplisse seulement la fonction de squelette de base. Le fichier index.phpm montre en général un aperçu des articles dans la zone d’administration.

  • header.php : ce fichier Template contient des indications essentielles d’un site comme le Doctype, la balise HTML ouverte, les éléments d’en-tête comme les méta-balises et les liens vers les feuilles de calcul et autres scripts. De plus, la balise body est généralement ouverte dans le fichier header.php.  Par conséquent, la zone d’en-tête visible, incluant la navigation, peut être déplacée dans le fichier header.php.
  • footer.php : footer.php est l’équivalent de header.php (en-tête), mais pour le bas de page.  La partie visible du bas de page du site est donc placée ici.
  • sidebar.php : il s’agit de l’élément de thème WordPress relatif à la barre latérale. Entrez ici soit directement le code ou recourez aux Widgets Wordpress spéciaux pouvant être chargés avec la fonction dynamic sidebar. Cette procédure présente l’avantage que les contenus Sidebar puissent être gérés depuis la zone d’administration WordPress.

  • content.php : les contributions dans l’aperçu du Blog contiennent en général un lien d’un titre et une vignette graphique, ainsi qu’un extrait de cette même contribution, incluant une ouverture vers un autre article. Ces contenus peuvent être intégrés via le fichier Template content.php. Cela vaut aussi pour les données méta telles que les dates des articles, les auteurs, leur catégorie ainsi que les mots-clés correspondants.

  • single.php : tandis que le fichier index.php propose un aperçu de plusieurs articles, single.php est utilisé par les personnes souhaitant avoir un aperçu unique d’un seul article.

  • home.php: ce fichier de Template propose la possibilité de créer une page d’accueil séparée pour un blog. Si vous renoncez à la construction d’un thème WordPresss avec home.php, votre site Internet affichera (en raison du fichier index.php) une vue d’ensemble des contributions les plus actuelles comme page d’accueil.

  • page.php: permet de représenter les contributions par ordre chronologique. Outre ces contenus dynamiques, de nombreux exploitants de sites Web mettent à la disposition de leurs utilisateurs des contenus spéciaux comme « A propos de l’auteur » par exemple, ou encore des mentions légales, etc, en tant que pages Web statiques. il est possible de créer ce fichier page.php indépendamment de la mise en page et du design d’autres fichiers de Templates comme index.php ou single.php. 

  • 404.php: si vous souhaitez créer une page d’erreur 404 pour votre blog, vous devez utiliser le fichier de Template du même nom. Un formulaire de recherche est également proposé pour les visiteurs à la recherche d’informations.

  • search.php: l‘édition de résultats de recherche peut être définie sur WordPress via search.php.

  • archive.php, category.php, tag.php, author.php, date.php: en dehors de la fonction de recherche, WordPress propose une série de fichiers de Templates avec lesquels il est possible d’ordonner les contributions d’un blog selon certains critères précis. Les catégories, mots-clés, auteurs, ou la date de publication peuvent par exemple servir de filtres possibles. L’édition des contenus se fait avec category.php, tag.php, author.php ou date.php sur WordPress. Si ces fichiers de Templates spécifiques ne sont pas présents, le programme recourt au fichier archive.php.  

  • comments.php: si vous mettez une fonction de commentaires sur votre Blog à la disposition de vos lecteurs, vous avez besoin d’un fichier de Template particulier séparé qui contient le formulaire de commentaire. Vous pouvez définir ce dernier sur WordPress avec comments.php.

  • attachment.php: le fichier de Template attachment.php entre en jeu lorsque les exploitants de sites Web souhaitent intégrer des contenus supplémentaires comme des graphiques, PDFs ou autres fichiers médias.

  • image.php: image.php est une version spéciale d’attachment.php qui permet de définir un affichage individuel pour des graphiques. Si aucun fichier image.php n’est présent, le fichier attachment.php est utilisé.

  • rtl.css: si votre thème Wordpress comprend des langues se lisant de droite à gauche (comme l’arabe ou l’hébreu par exemple), vous devez utiliser le fichier rtl.css.

Pour relier plusieurs éléments de base d’une page WordPress ensembles et pouvoir charger les contenus d’une base de données sur le serveur, il convient d’utiliser des fonctions dans les fichiers de Templates, aussi appelées Template-Tags ou balises de Templates dans la terminologie de WordPress.

Template-Tags

Les balises de Templates sont utilisées au sein des fichiers de Templates dans le but de charger des contenus de la base de données. Tandis que les contenus sont stockés directement dans le code source HTML de sites Web statiques, les Templates WordPress impliquent seulement une instruction déterminant quels contenus doivent être reliés à la base de données. Les balises de Templates permettent le chargement de pages dynamiques avec le logiciel de blogging. Les exemples ci-dessous vous donneront un aperçu des avantages d’un tel concept de site Web :

Un projet Web dispose en général d’un nom utilisé dans chaque sous-page du site. Pour intégrer un tel nom dans votre fichier de Template favori, vous pouvez utiliser la balise de Template suivante : 

bloginfo('name')

Il est aussi pertinent d’automatiser l’affichage d’un tel titre avec la balise suivante :

<title><?php bloginfo('name'); ?> |<?php wp_title(); ?></title>

Tandis que la fonction bloginfo('name') fait office de joker pour le nom du site Web, wp_title() donne le titre actuel de la sous-page en question. Le logiciel de la base de données détermine ainsi quels contenus afficher en guise de joker lors du chargement de la page. Le titre est ensuite créé de la manière suivante :

Nom du blog | Titre de la sous-page

Les titres des pages d’un site Web statique doivent en revanche être indiqués en toutes lettres pour chacune de ses pages HTML : 

<title>Nom du blog | Titre de la sous-page</title>

Mais que faire si vous souhaitez changer le nom de votre blog ? Dans le cas d’un site Web statique vous devez ouvrir le document HTML de chaque sous-page de votre site pour l’adapter manuellement dans l’éditeur. Pour un site Web dynamique, au contraire, le processus d’adaptation est bien plus confortable : les modifications qui concernent toutes les pages Web de votre site peuvent être effectuées à un seul et même endroit dans la base de données. Vous pouvez aussi doter des pages précises d’éléments spécifiques dans les balises de Templates.

Les titres, publications et métadonnées sont chargés dans les fichiers Templates prévus à cet effet et selon le même schéma :

the_title() 
the_content()
the_author() 
the_time()
the_category() 
the_tags()

Vous trouverez un aperçu de balises de Templates dans le Codex de WordPress.org.

Include-Tags

Une forme particulière de balise de Template WordPress est ce qu’on appelle la balise include (Include-Tag), utilisée avec un Template correspondant de manière à pouvoir charger d’autres fichiers de Templates tels que header.php, footer.php ou sidebar.php. Il s’agit ici aussi d’une fonction interne de WordPress avec laquelle les fichiers tels que index.php single.php ou page.php peuvent être intégrés dans les fichiers de Templates de base : 

get_header()
get_footer()
get_sidebar()

L’avantage cité plus haut se manifeste ici : si les codes de l’en-tête, du bas de page ou de la barre latérale sont chargés depuis des fichiers de Templates spécialement prévus pour cela, les modifications qui sont apportées à ces trois fichiers de Templates sont automatiquement prises en compte pour toutes les sous-pages du site grâce au recours à la balise Include.

Template-Hooks

Les Template-Hooks se caractérisent par des interfaces individuelles aux fonctions ou plugins se rattachant au thème de votre blog WordPress. La plupart de ces interfaces sont déjà intégrées au noyau de WordPress. Un développeur de thème ou un utilisateur peut ainsi définir une action avant que la tâche ne commence ou que la demande auprès de la base de données ne se termine. De cette manière, il est possible d’intégrer des informations spéciales directement dans l’en-tête, le bas de page ou la barre latérale. Les développeurs peuvent également intégrer leurs propres hooks (hameçons) dans leurs thèmes.

Balises conditionnelles (Conditional-Tags)

Les balises conditionnelles sont ce qu’on appelle en anglais des PHP-Statements comme if, else ou while par exemple, permettant l’intégration de conditions concernant certains contenus, en combinaison avec des fonctions WordPress. Grâce à cette fonction il est par exemple possible d’afficher un message de bienvenue spécial pour les membres enregistrés : 

if ( is_user_logged_in() ):
    echo 'Welcome, registered user!';
else:
    echo 'Welcome, visitor!';
endif;

La boucle (Loop)

La boucle est définie par un mécanisme responsable de l’affichage de contenus au sein du logiciel WordPress. Fondamentalement, il s’agit de diverses fonctions WordPress reliées entre elles avec des balises conditionnelles. L’exemple ci-dessous vous montre la structure de base d’une boucle WordPress :

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <div class="entry">
        <?php the_excerpt(); ?>
    </div>
<?php endwhile; endif; ?>

L’extrait de code if (have_post()) de la première ligne demande au programme WordPress de vérifier si les contributions en question du blog sont à disposition. Si les contributions se trouvent dans la base de données, la section de code while (have_posts()) : the_post() ordonne au logiciel d’exécuter les fonctions suivantes en boucle jusqu’à have_posts(), ou autrement dit, jusqu’à ce que plus aucune publication ne soit disponible.  

La boucle résume par conséquent toutes les fonctions jusqu’au PHP statement à la ligne 6. Dans cet exemple, la fonction the_title(), sert à l’édition du titre d‘un article, et la fonction the_exerpt(), à indiquer au logiciel de charger un extrait de contribution de la base de données.

Sur la page d’accueil de WordPress, une boucle simple a pour effet d’afficher les titres et aperçus de textes les uns avec les autres, en commençant par les plus récents. Le nombre de contributions affichées peut être configuré dans la zone d’administration. Les boucles WordPress plus complexes comme les métadonnées Author, Date, Category et Tags contiennent un lien pour un affichage isolé de l‘élément en question.

Cet article vous a-t-il été utile ?