Créer son thème WordPress – Part. 2

Dans la première partie nous avons commencer à mettre en place la structures de fichiers minimale pour créer notre thème sur mesure.
WikiWeb Lozère

Nous allons à présent détailler ce que l’on va déclarer dans chacun des fichiers de notre thème Mary, pour qu’il soit identifiable, installable et fonctionnel par WordPress.

Pour l’instant nous nous concentrons sur son fonctionnement de base. Nous verrons ensuite l’intégration HTML5 et CSS3 de notre maquette, puis la mise en place des fonctionnalités d’édition spécifiques au projet de site Web de communes.

1- Le fichier style.css

Fichier très très important ! Car c’est grâce au commentaire multi-lignes écrit au début du fichier, que WordPress va détecter la présence de votre nouveau thème, et vous permettre de l’activer dans l’administration.

Il est sympa WordPress, il fonctionne quasi tout seul, ou presque. Comme je dis souvent, le plus compliqué avec WordPress c’est de comprendre sa simplicité 😀
Bibi.

Voici le commentaire que vous devez impérativement avoir dans votre fichier style.css :

/*
 Theme Name: Mary Theme
 Text Domain: mary
 Version: 1.0
 Requires at least: 4.7
 Requires PHP: 5.2.4
 Description: Thème développé par la société AFA-Multimédia pour la mise en place de sites Web institutionnels dédiés aux communes, communautés de communes ou autre regroupement de citoyens.
 Tags: custom theme, afa-multimedia, mairie, bootstrap, jquery
 Author: AFA-Multimédia
 Author URI: https://afa-multimedia.com/
 License: Tout droit réservé à AFA-Multimédia SARL - 2019
 */

ATTENTION !!!

Vous remarquerez qu’il n’y a pas d’~~espace~~ entre le nom de l’attribut et sa valeur.

Donc le plus important :

Theme name: Nom ou intitulé de votre thème tel qui apparaîtra dans l’administration.
Text Domain: il s’agit de l’identifiant, en quelque sorte, de votre thème. Il sera très utile pour déclarer vos propres HOOK, vos chaines de caractères pour les fichiers de traduction, vos déclarations de fonctions, etc.
Le reste est important mais pas pour le bon fonctionnement du thème. Cela vous permettra de bien renseigner la partie « Détails du thème » consultable en administration. Utile aussi si vous poster vos créations sur un Git et que vous la partager avec la communauté WordPress.org.

2- Screenshot !

Pour avoir du style, vous allez créer un fichier image en .jpg ou .png que vous nomerez screenshot.jpg ou screenshot.png.

En le déposant à la racine de votre dossier de thème, il sera automatiquement reconnu par WordPress et s’affichera dans l’espace Apparence > Thèmes comme ceci :

3- Index.php

Hiérarchie des modèles de présentation WordPress

Récapitulons. Nous avons le fichier style.css correctement paramétré, avec les commentaires de déclaration de thème, un fichier screenshot.jpg pour la présentation en backoffice.

Il nous faut à présent un premier modèle de page pour que le thème soit fonctionnel et commence à afficher du contenu.

Il s’agit du fichier index.php. Dans la logique de WordPress, ce fichier sera le modèle de présentation utilisé par défaut si aucun autre modèle ne correspond à la requête effectuée en consultation.

3-1 Structure de index.php

Chaque modèle de présentation doit être constitué d’une structure HTML5 et de la boucle principale de WordPress qui va vérifier la présence de publication(s) et en afficher le contenu si il n’y a pas d’erreur.

Découpe de la Structure HTML5

Pour rappel la structure minimale en HTML5 est la suivante :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <!-- Votre structure de contenu : présence de la boucle WordPress -->
</body>
</html>

Il y a de forte chance pour que tous vos modèles de page aient en commun la structure d’en-tête et le pied de page de votre interface.

Pour éviter de dupliquer le code de vos en-tête et pied de page sur tous les modèles que nous devrons créer par la suite, nous allons les disposer, à la racine de votre thème, dans les fichiers suivants :

header.php : va accueillir la structure HTML de la balise <!DOCTYPE html> jusqu’à la balise <body> voire même le début de votre conteneur principal.
footer.php : va accueillir la structure HTML de la balise de fermeture de votre conteneur ou directement à partir du </BODY> puis du </HTML>.

A présent créez les fichiers header.php et footer.php à la racine de votre thème. Puis insérez respectivement les codes suivants :

HEADER.php

<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?> >
	<head>
		<meta charset="<?php bloginfo( 'charset' ); ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" >
		<?php wp_head(); ?>
	</head>
	<body <?php body_class(); ?> >

FOOTER.php

<?php wp_footer(); ?>
	</body>
</html>

Vous remarquerez qu’il y a quelques appels de fonction PHP, natives à wordpress qui sont appelées. Voici ce à quoi elles correspondent :

language_attributes() : intègre directement l’attribut HTML lang= » » en fonction de la langue utilisée par le site. En français on aura lang= »fr-FR »
bloginfo( ‘charset’ ) : Cette fonction permet de récupérer tout un tas d’informations relatives à votre système Wordpres. Dans ce cas, nous récupérons le type d’encodage des caractères. UTF-8.
wp_head() : la présence de cette fonction juste après la dernière balise <META> et avant l’ouverture du <BODY> est obligatoire. Elle va permettre à WordPress d’ajouter tous les scripts, les CSS ainsi que les META complémentaires qui seront associés et déclarés par votre thème ou par WordPress lui-même.
body_class() : cette fonction permet à WordPress d’ajouter dynamiquement les différentes classes générées en fonction du type de publication consulté, de leur modèle de présentation, de leur identité,etc.
wp_footer() : tout comme wp_head(), cette fonction permet à WordPress d’ajouter les différents éléments, de scripts généralement, qui doivent être présent en fin de DOM.

Création du fichier index.php

A présent il nous faut créer le fichier index.php à la racine du thème puis le composer avec nos deux fichiers précédents, puis la boucle de base de WordPress.

Dans un premier temps insérer le code suivant dans votre index.php :

<?php
/** Modèle principal de page **/
get_header();
?>

<!-- MA BOUCLE WORDPRESS -->

<?php
get_footer();

Les fonctions get_header() et get_footer() iront respectivement chercher les fichiers header.php et footer.php pour les intégrer à index.php.

ATTENTION : ne fermez jamais votre marqueur php « ?> » en fin de fichier.

Il ne reste plus qu’à mettre en place la boucle principale de WordPress entre ces deux appels de fonction.

<?php
/** Modèle principal de page **/
get_header();
?>
<!-- MA BOUCLE WORDPRESS -->

<?php if( have_posts() ) : 
          while( have_posts() ) : the_post(); ?>

<!-- affichage des données de publication -->

<?php endwhile; 
endif; ?>

<?php
get_footer();

La boucle de WordPress est constituée d’une structure conditionnelle IF() qui va vérifier si il existe une ou plusieurs publications via la fonction have_post() qui retournera un booléen.

Si une ou plusieurs publications existent, alors on utilise une boucle WHILE (tant que) pour exécuter l’affichage des données.

Je rappelle que le fichier index.php sera utilisé par défaut si aucun autre modèle de présentation n’est trouvé. On peut donc imaginer, pour l’instant que celui-ci affichera une liste de publications présentant :

Le titre
L’image à la une
l’extrait ou le contenu complet de la publication

Pour cela vous allez ajouter le code suivant à index.php en choisissant soit la fonction the_excerpt() pour l’extrait, soit the_content() pour le contenu complet.

<?php
/** Modèle principal de page **/
get_header();
?>
<!-- MA BOUCLE WORDPRESS -->

<?php if( have_posts() ) : 
          while( have_posts() ) : the_post(); ?>

<article class="post">
	<h2><?php the_title(); ?></h2>
        <?php the_post_thumbnail(); ?>
        <!-- afficher l'extrait d'une publication -->
        <?php the_excerpt(); ?>
        <!-- afficher le contenu d'une publication -->
        <?php the_content(); ?>
</article>

<?php endwhile; 
endif; ?>

<?php
get_footer();

Naturellement vous pouvez compléter cette structure de code avec des éléments HTML afin de prévoir la mise en forme que vous souhaitez.

Fonctions complémentaires

Voici quelques fonctions complémentaires que vous pouvez utiliser pour enrichir les informations de vos publications. Comme WordPress est basé sur une logique blog, vous allez pouvoir afficher des éléments tels que les dates, l’auteur, etc.

the_time( get_option( ‘date_format’ ) : afficher la date de publication.
the_author() : afficher le nom de l’auteur de la publication.
comments_number() : afficher le nombre de commentaires liés à la publication.
the_permalink() : afficher le lien cliquable pour accéder à la publication.

3-2 Pour aller plus loin…

Vous pouvez retrouver l’article complet et détaillé, sur le site CAPTAINWP, du code d’exemple que je vous propose ici :

<?php get_header(); ?>
<h1>Le blog Capitaine WP</h1>
<?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
     <article class="post">
	  <h2><?php the_title(); ?></h2>
          <?php the_post_thumbnail(); ?>
          <p class="post__meta">
                Publié le <?php the_time( get_option( 'date_format' ) ); ?> 
                par <?php the_author(); ?> - <?php comments_number(); ?>
          </p>
          <?php the_excerpt(); ?>
          <p><a href="<?php the_permalink(); ?>" class="post__link">Lire la suite</a></p>
     </article>
<?php endwhile; endif; ?>
<?php get_footer(); ?>

3-3 Structure finale de index.php pour MARY

Dans notre cas d’étude et pour bien faire notre thème « MARY », Voici le code complet que je vous propose pour le modèle par défaut index.php.

Vous remarquerez la présence de nombreuses classes CSS dans la structure HTML. Ne vous en préoccupez pas pour l’instant, il s’agit de classes BOOTSTRAP, que je détaillerez dans le prochain articles

INDEX.php

<?php
	get_header();
?>
<main id="site-content">
	<?php
	if ( have_posts() ) :
		while ( have_posts() ) : the_post(); ?>
			<header class="bg-secondary text-center py-5 my-0 text-light">
				<h1><?php the_title(); ?></h1>
                        </header>
			
			<section class="container my-5 py-5 border-top border-bottom overflow-auto">
				<?php the_content(); ?>
                        </section>
		<?php
		endwhile; //end while
	endif; //fin if have_post
	?>
</main><!-- #site-content -->

<?php get_footer();

Le prochain article sera consacré à la présentation détaillée des fichiers header.php et footer.php. J’y présenterai également les nouvelles fonctionnalités auxquelles nous ferons appel.

ACCÉDER À LA PART. 3