Le programme de blogging Web WordPress se ca­rac­té­rise par une sé­pa­ra­tion entre design et noyau de pro­gram­ma­tion. Les thèmes per­met­tent d’adapter la re­pré­sen­ta­tion 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 en­re­gis­trés sur un serveur peuvent être chargés et combinés pour que l’un na­vi­ga­teur Web puisse présenter un contenu homogène lors du char­ge­ment d’une page dynamique. Pour des ex­ploi­tants de pages Web, les thèmes offrent par con­sé­quent la pos­si­bi­lité de concevoir librement, dans la limite des options dis­po­nibles, 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, cou­ram­ment appelés fichiers Templates, feuilles de calcul (Sty­le­sheets), données de lo­ca­li­sa­tion, ou op­tion­nel­le­ment des fichiers Ja­vaS­cript et autres gra­phiques. Nous vous montrons dans cet article quels éléments de thèmes WordPress sont bons à connaître, quelles fonctions ils rem­plis­sent et comment ces dif­fé­rents éléments cons­ti­tu­tifs col­la­bo­rent.

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 ras­sem­blait les contenus et les éléments Ja­vaS­cript et CSS, les thèmes WordPress sont quant à eux composés de plusieurs fichiers Template.  L’in­té­gra­tion de ces dif­fé­rents Templates se fait grâce à la balise Include, per­met­tant 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 re­pré­sen­tés sur le na­vi­ga­teur Web. Si cette re­pré­sen­ta­tion doit impliquer certaines con­di­tions, celles-ci peuvent être précisées dans les balises con­di­tion­nelles (Con­di­tio­nal-Tags). On utilise pour cela des plugins appelés Template-Hooks. L’édition de contenus est gérée via un mécanisme ca­rac­té­risé de Loop selon la ter­mi­no­lo­gie WordPress. 

Fichiers de Templates

Un thème WordPress, avec ses éléments de base, peut être considéré comme un genre de plan de cons­truc­tion pour un site re­cou­vrant dif­fé­rents états. Les pages Web dy­na­miques ainsi créées et livrées au na­vi­ga­teur Web se composent d’éléments spé­cia­le­ment adaptés à une requête précise : si un uti­li­sa­teur charge une page de votre site Internet, l’ensemble du Blog WordPress, un avis in­di­vi­duel ou encore un com­men­taire. 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 res­pec­ti­ve­ment, et avec exac­ti­tude.

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 dif­fé­rents (re­pré­sen­tant dif­fé­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 obli­ga­toires. Ce fichier contient des in­for­ma­tions d’en-têtes comme le nom du thème, une courte des­crip­tion, le nom du dé­ve­lop­peur, 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 prin­ci­pale 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 obli­ga­toire 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é­rar­chie 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é­ci­fi­que­ment pour l’édition de contenu, le programme recourt au fichier index.php. L’éta­blis­se­ment d’index.php dépend es­sen­tiel­le­ment 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é­per­toire racine HTML, le Header, Footer, Sidebar et la na­vi­ga­tion, ces éléments sont in­cor­po­rés dans des fichiers de Templates sup­plé­men­taires 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’ad­mi­nis­tra­tion.

  • header.php : ce fichier Template contient des in­di­ca­tions es­sen­tielles 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é­ra­le­ment ouverte dans le fichier header.php.  Par con­sé­quent, la zone d’en-tête visible, incluant la na­vi­ga­tion, peut être déplacée dans le fichier header.php.
  • footer.php : footer.php est l’équi­valent 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 di­rec­te­ment 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’ad­mi­nis­tra­tion WordPress.

  • content.php : les con­tri­bu­tions dans l’aperçu du Blog con­tien­nent en général un lien d’un titre et une vignette graphique, ainsi qu’un extrait de cette même con­tri­bu­tion, 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 cor­res­pon­dants.

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

  • home.php: ce fichier de Template propose la pos­si­bi­lité de créer une page d’accueil séparée pour un blog. Si vous renoncez à la cons­truc­tion d’un thème Word­Presss avec home.php, votre site Internet affichera (en raison du fichier index.php) une vue d’ensemble des con­tri­bu­tions les plus actuelles comme page d’accueil.

  • page.php: permet de re­pré­sen­ter les con­tri­bu­tions par ordre chro­no­lo­gique. Outre ces contenus dy­na­miques, de nombreux ex­ploi­tants de sites Web mettent à la dis­po­si­tion de leurs uti­li­sa­teurs 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 in­dé­pen­dam­ment 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 for­mu­laire de recherche est également proposé pour les visiteurs à la recherche d’in­for­ma­tions.

  • 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 con­tri­bu­tions d’un blog selon certains critères précis. Les ca­té­go­ries, mots-clés, auteurs, ou la date de pu­bli­ca­tion 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é­ci­fiques ne sont pas présents, le programme recourt au fichier archive.php.  

  • comments.php: si vous mettez une fonction de com­men­taires sur votre Blog à la dis­po­si­tion de vos lecteurs, vous avez besoin d’un fichier de Template par­ti­cu­lier séparé qui contient le for­mu­laire de com­men­taire. Vous pouvez définir ce dernier sur WordPress avec comments.php.

  • at­tach­ment.php: le fichier de Template at­tach­ment.php entre en jeu lorsque les ex­ploi­tants de sites Web sou­hai­tent intégrer des contenus sup­plé­men­taires comme des gra­phiques, PDFs ou autres fichiers médias.

  • image.php: image.php est une version spéciale d’at­tach­ment.php qui permet de définir un affichage in­di­vi­duel pour des gra­phiques. Si aucun fichier image.php n’est présent, le fichier at­tach­ment.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 ter­mi­no­lo­gie 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 di­rec­te­ment dans le code source HTML de sites Web statiques, les Templates WordPress im­pli­quent seulement une ins­truc­tion dé­ter­mi­nant quels contenus doivent être reliés à la base de données. Les balises de Templates per­met­tent le char­ge­ment de pages dy­na­miques 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’au­to­ma­ti­ser 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 char­ge­ment 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 ma­nuel­le­ment dans l’éditeur. Pour un site Web dynamique, au contraire, le processus d’adap­ta­tion est bien plus con­for­table : les mo­di­fi­ca­tions qui con­cer­nent toutes les pages Web de votre site peuvent être ef­fec­tué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é­ci­fiques dans les balises de Templates.

Les titres, pu­bli­ca­tions et mé­ta­don­né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 par­ti­cu­lière de balise de Template WordPress est ce qu’on appelle la balise include (Include-Tag), utilisée avec un Template cor­res­pon­dant 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é­cia­le­ment prévus pour cela, les mo­di­fi­ca­tions qui sont apportées à ces trois fichiers de Templates sont au­to­ma­ti­que­ment prises en compte pour toutes les sous-pages du site grâce au recours à la balise Include.

Template-Hooks

Les Template-Hooks se ca­rac­té­ri­sent par des in­ter­faces in­di­vi­duelles aux fonctions ou plugins se rat­ta­chant au thème de votre blog WordPress. La plupart de ces in­ter­faces sont déjà intégrées au noyau de WordPress. Un dé­ve­lop­peur de thème ou un uti­li­sa­teur 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 in­for­ma­tions spéciales di­rec­te­ment dans l’en-tête, le bas de page ou la barre latérale. Les dé­ve­lop­peurs peuvent également intégrer leurs propres hooks (hameçons) dans leurs thèmes.

Balises con­di­tion­nelles (Con­di­tio­nal-Tags)

Les balises con­di­tion­nelles sont ce qu’on appelle en anglais des PHP-Sta­te­ments comme if, else ou while par exemple, per­met­tant l’in­té­gra­tion de con­di­tions con­cer­nant certains contenus, en com­bi­nai­son avec des fonctions WordPress. Grâce à cette fonction il est par exemple possible d’afficher un message de bienvenue spécial pour les membres en­re­gis­tré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 res­pon­sable de l’affichage de contenus au sein du logiciel WordPress. Fon­da­men­ta­le­ment, il s’agit de diverses fonctions WordPress reliées entre elles avec des balises con­di­tion­nelles. 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 con­tri­bu­tions en question du blog sont à dis­po­si­tion. Si les con­tri­bu­tions 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 pu­bli­ca­tion ne soit dis­po­nible.  

La boucle résume par con­sé­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 con­tri­bu­tion 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 com­men­çant par les plus récents. Le nombre de con­tri­bu­tions affichées peut être configuré dans la zone d’ad­mi­nis­tra­tion. Les boucles WordPress plus complexes comme les mé­ta­don­nées Author, Date, Category et Tags con­tien­nent un lien pour un affichage isolé de l‘élément en question.

Aller au menu principal