Principes et définitions

Le thème organise l’affichage des contenus du site.

Un thème est composé de trois catégories de fichiers.

  • Feuilles de styles (CSS) : au moins une est obligatoire « styles.css », sinon le thème ne pourra pas être intégré à WordPress.
  • Fichiers structurant la/les page(s) (PHP) : au moins un est obligatoire « index.php » ou « home.php », sinon rien ne s’affichera sur le site.
  • Probablement un fichier de fonctions (PHP) : « functions.php », il ajoutera / modifiera des fonctionnalités au site.

Informations

https://codex.wordpress.org/Theme_Development

Presque tous les liens vers la partie développement de la documentation officielle de WordPress conduisent à des pages en anglais.

Feuille(s) de style

On a vu qu’il doit exister « styles.css » dans le répertoire du thème. Non seulement elle joue son rôle habituel mais aussi elle donne des informations sur le thème. Lorsque le gestionnaire du site parcourt la page des thèmes, il souhaite en savoir plus sur chacun d’eux. Aussi on place quelques informations en commentaire en début de la feuille.

/*
Theme Name: Mon thème perso
Author: JMC
Description: Thème utilisable
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jmc
Tags: one-column, two-columns, ...
*/

Ces informations, à l’exception des licences et du Text Domain apparaitrons dans la page des thème en cliquant sur « Détails du thème ». Par ailleurs, elles sont indispensables si l’on souhaite envoyer son thème à WordPress.

Dans le même ordre, il est aussi utile de placer dans le répertoire du thème une copie d’écran de sa mise en œuvre afin que l’on en ait une représentation dans la page des thèmes. Ce fichier doit se nommer : « screenshot.png ».

Référence

https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/

Fichiers indispensables de structure

Dans le répertoire du modèle (racine) on doit trouver soit « home.php », soit « index.php » ou encore les deux.

  1. Si aucun n’est présent, le site affichera un message d’erreur “Modèle introuvable…”
  2. Si seul « home.php » est présent et
    • si le site est configuré pour afficher en accueil une page statique, on aura le même message d’erreur.
    • sinon « home.php » est affiché.
  3. Si seul « index.php » est présent, il affiche
    • la page d’accueil statique si elle est demandée,
    • sinon les derniers articles.
  4. Si les deux sont présents…
    • si la page d’accueil statique est demandée, « index.php » l’affiche,
    • sinon « home.php » est affiché.

Cela est bien compliqué. A mon avis, il vaut mieux se passer de « home.php », garder « index.php » (cas 3). Ainsi on laisse l’administrateur du site décider s’il veut en accueil les derniers articles ou une page du site.

C’est ce qui est proposé dans la suite.

Les modèles (template)

Si l’on s’en tient aux deux fichiers obligatoires dans le modèle avec  « index.php » correctement constitué, le site sera opérationnel mais pas du tout personnalisé. Opérationnel car le cœur de WordPress contient ce qu’il faut pour réaliser les affichages de base.

Mais cela peut être surchargé.

Par exemple, si l’utilisateur affiche le contenu d’une page, WordPress saura le faire, à sa façon. Pour personnaliser cet affichage, il suffit de créer dans le répertoire du thème un fichier page.php. ce sera lui qui sera responsable de l’affichage.

Une conséquence est qu’il faut faire attention aux noms de fichiers que l’on donne.

La liste des templates et leur rôle est donnée ici :
https://codex.wordpress.org/Theme_Development#Template_Files

Functions, Hooks, Classes,  Methods, etc.

Comme avec template, utilisons la dénomination WordPress.

Tout cela fait partie du cœur de WordPress et peut être utilisé.

Les « Functions » sont analogues aux fonctions habituelles de PHP. Par exemple “the_title()” affichera le titre de l’élément courant (article ou page).

Les « Hooks » (crochets) représentent des moments dans le déroulement de WordPress. On peut y ajouter une action à faire à ce moment ou insérer un filtre sur les information qui y passent. Par exemple le hooks « init » correspond au moment ou WordPress a fini de se préparer mais n’a pas encore envoyé la page. On peut ajouter une fonction à ce moment par :

add_action( ‘init’, ‘ma_fonction’ );

Les filtres sont aussi accrochés à un moment de WordPress, mais si les fonctions réalisent une action, les filtres reçoivent une information, la traitent/modifient et la renvoient. La liste des filtres est donnée ici :
https://codex.wordpress.org/Plugin_API/Filter_Reference

Les « Classes » sont des classes PHP habituelles. En général on les utilise pour créer des classes dérivées. Par exemple la création d’un nouveau widget se fait en dérivant la classe WP_Widget

class Super_Widgets extends WP_Widget {
/*….*/
}

Les « Methods » sont analogues aux fonctions si ce n’est qu’elles dépendent d’une classe et s’appliquent aux instances de cette classe. Par exemple lors de la définition de classe dérivée ci-dessus on utilise $this->get_field_id( ‘title’ )

qui renvoie la valeur de l’ID associé au champ ‘title’ de l’objet courant ($this).

Référence

https://codex.wordpress.org/Developer_Documentation

https://developer.wordpress.org/reference/

 

La boucle

la boucle est essentielle. Elle est utilisé pour la plupart des affichages : pages, articles ; seuls ou en série.

Voici un exemple typique de boucle :

<?php
while (have_posts()) : the_post(); ?>
 <h1><?php the_title(); ?></h1>
   <div class="text_content">
     <?php
     the_content(__('(more...)'));
     ?>
   </div>
 <hr>
<?php endwhile;
?>

Ici il faut voir ‘post’ dans un sens générique ce peut être un article ou une page. On boucle tant qu’il y a des ‘post’, la fonction « the_post() » fixe le ‘post’ en cours comme élément actuel, il sera utilisé par les fonctions « the_title() » et « the_content() » qui, respectivement, afficheront le titre et le contenu de cet élément.

Il peut être intéressant d’englober la boucle dans une structure conditionnelle

if (have_posts()) :
  /* la boucle
  ....
  */
else:
  echo 'Rien trouvé'
endif;

Cela permet d’afficher un message si, par exemple, une recherche n’a donné aucun résultat.