Les bases

On va commencer simplement.

On débute un site WordPress avec quelques articles et pages.

On crée dans le répertoire des thèmes un répertoire que l’on appellera « developpement ». On y place une feuille de style minimum « style.css ».

La voici :

/*
Theme Name: Thème de démonstration
Author: Moi-même
Description: Version en développement
Version: 0.0
*/

 

Quant au fichier « index.php ». Voilà un exemple :

<?php get_header(); ?>

<main id="main">
   <?php
   if (have_posts()) :
     while (have_posts()) : the_post(); ?>
       <h1><?php the_title(); ?></h1>
       <p>
         Créé le <?php the_time('d m Y à H:i:s') ?>
         par <?php the_author() ?>
       </p>
       <div>
         <?php
         the_content(__('(more...)'));
        ?>
       </div>
      <hr>
    <?php
    endwhile;
    else: ?>
      <p><?php _e('Désolé, rien à afficher'); ?></p>
    <?php
    endif; ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Quelques explications…

  1. Au début, la fonction « get_header() » demande à WordPress d’inclure les éléments débutant la page, il s’agit de du « DOCTYPE », de l’ouverture de l’élément « html », puis l’élément HTML « head », le début du « body » incluant une « div » de début contenant le titre du site et sa description.
  2. Cela est suivi par la boucle. Là on trouve quelques fonctions permettant d’afficher pour chaque article sa date de création son auteur et son contenu. Pour celui-ci la fonction « the_content() » prend un paramètre qui, dans le cas où la boucle affiche plusieurs éléments et l’élément courant contient une balise « Lire la suite… », n’affichera que le début. En l’occurrence, la fonction « __() » traduit le texte passé en paramètre (si une table de traduction est prévue dans le thème).
  3. Ensuite, la fonction « get_sidebar() » produira l’affichage des annexes (Recherche, Pages, Archives, Catégories et Méta).
  4. On termine par get_footer() qui produit la signature de WordPress et ferme les éléments « body » et « html ».

Le mieux est d’essayer : produire un thème ainsi construit, vérifier dans un navigateur et examiner le source de la page. On remarquera au passage que l’on peut cliquer sur les liens pour avoir des contenus uniques, par exemple sur les pages du site.

Il est déjà possible de personnaliser en complétant la feuille de styles. On peut trouver les sélecteurs à partir du navigateur / source : éléments, id, classes.