Le fichier index.php, premier template de notre thème WordPress
Dans la précédente étape de ce cours sur la création d’un thème pour le CMS WordPress, nous avons configuré notre thème grâce au fichier style.css. Nous avons également ajouté quelques règles css basiques.
Il est maintenant temps de créer notre premier template !
Qu’est ce qu’un template ?
Nous allons maintenant créer le fichier index.php.
Définition d’un fichier template WordPress
Dans WordPress, ce fichier php correspond à un fichier de template. Les fichiers de template sont des fichiers qui permettent d’afficher le contenu de notre site WordPress en fonction du contexte.
Si la page d’accueil est demandée par l’internaute, le template de la page d’accueil sera appelé. Si c’est un article, le template article sera appelé etc.
La hiérarchie des templates
Le choix du template en fonction du contexte dans lequel se trouve notre visiteur est régit par un concept du CMS WordPress : la hiérarchie des templates.
Pour mieux comprendre ce concept, voici une image de cette hiérarchie.
L’image se lit de gauche à droite. En fonction du type de page, les templates (en rouge, bleu et bleu foncé) sont chargés dans cet ordre là. Si le fichier de template n’est pas présent dans le thème, le système essaye de charger le suivant et ainsi de suite. On voit que pour tous les types de page, le dernier template de la liste est « index.php ». Il se trouve tout à droite de l’image.
Cela veut dire que peu importe le type de page, le fichier index.php peut-être utilisé. C’est pour ça que ce fichier est si important.
Création du fichier index.php
Création de l’en-tête
Tout d’abord créons un marquage HTML simple.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Hello</title>
</head>
<body>
<p>Hello World !</p>
</body>
</html>A la ligne 4 et 5, nous ajoutons une balise meta viewport qui adapte la largeur du contenu à la largeur de l’appareil utilisé pour consulter le site web. Cette balise est très importante pour créer un thème WordPress responsive.
Si vous vous rendez sur la page d’accueil de votre site WordPress vous allez obtenir un joli “Hello World !”
Nous allons maintenant ajouter des fonctionnalités de WordPress pour dynamiser l’affichage du contenu.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title><?php wp_title(''); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
<?php wp_head(); ?>
</head>
<body>
<header id="header">
<h1><?php echo bloginfo('name'); ?></h1>
<nav id="navigation">
</nav>
</header>
<div id="wrap">
<section id="content">
</section>
<aside id="sidebar">
</aside>
</div>
<footer id="footer">
</footer>
<?php wp_footer(); ?>
</body>
</html>A la ligne 6, nous utilisons la fonction wp_title() qui permet d’afficher le titre de la page en cours.
A la ligne 7, nous ajoutons la feuille de style style.css grâce à la fonction bloginfo(‘stylesheet_url’) qui permet de récupérer l’url de ce fichier.
A la ligne 9, nous ajoutons la fonctionnalité wp_head(). Cette fonction est un peu particulière. Elle permet à WordPress d’ajouter du code dans la partie “head” du site. Cette fonction est notamment utilisée par des plugins pour ajouter des fonctionnalités. Si vous n’ajoutez pas cette balise votre thème ne sera pas compatible avec certains plugins.
A la ligne 30, nous ajoutons la fonction wp_footer() qui est similaire à wp_head() mais pour le footer.
Affichage des articles avec la boucle WordPress (loop)
Maintenant, affichons les articles de notre blog. Pour cela, nous allons faire appel à une fonctionnalité de WordPress appelée “La boucle”.
Placez ce code dans la balise “<section id=”content>” :
<?php if(have_posts()) : ?>
<div id="loop">
<?php while(have_posts()) : the_post(); ?>
<article>
<h1><?php the_title(); ?></h1>
<p>Publié le <?php the_time('d/m/Y'); ?><?php if(!is_page()) : ?> dans <?php the_category(', '); ?><?php endif; ?></p>
<?php if(is_singular()) : ?>
<?php the_content(); ?>
<?php else : ?>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>">Lire la suite</a>
<?php endif; ?>
</article>
<?php endwhile; ?>
</div>
<div id="pagination">
<?php echo paginate_links(); ?>
</div>
<?php else : ?>
<p>Aucun résultat</p>
<?php endif; ?>Quelle que soit la page affichée par WordPress, c’est le système de boucle qui permet d’afficher le contenu. Si vous êtes sur la page d’accueil, elle va afficher les x derniers posts. Si vous êtes la page d’un article, elle va afficher l’article en question. Si vous êtes sur une catégorie, elle affichera les x derniers articles de la catégorie.
Voici comment elle fonctionne :
La condition if(have_posts()) (ligne 1) permet de vérifier s’il y a des posts à afficher.
S’il y a des posts à afficher, nous pouvons alors lister les contenus grâce à une boucle “while”.
Nous avons donc while(have_posts()) : the_post(); (ligne 3) qui signifie :
“Tant qu’il y a des posts à afficher, alors on charge le post en cours. »
La fonction the_post() permet de charger le post en cours.
Dans cette boucle, nous pouvons afficher le contenu grâce à des fonctions de WordPress.
Par exemple :
- Pour afficher le titre de l’article, on utilisera the_title()
- Pour afficher un extrait de l’article, on utilisera the_excerpt()
- Pour afficher le lien vers l’article, on utilisera the_permalink()
Dans WordPress, on peut également utiliser des conditions comme if(!is_page()) ou if(is_singular()) pour afficher un contenu différent.
La fonction is_page() permet de déterminer si la page est en cours est une page WordPress. Le “!” devant la fonction permet d’inverser la condition.
Ainsi, if(!is_page()) (ligne 7) revient à dire :
“Si la page est en cours n’est pas une page alors …”.
Dans notre exemple, nous nous servons de cette fonction pour afficher (ou pas) la catégorie de la page en cours.
En effet, dans WordPress, les deux types de contenu sont “Pages” et “Articles”. Les articles peuvent avoir des catégories contrairement au page.
La ligne 7 permet donc de ne pas afficher de texte quand une page est affichée par le site.
La fonction is_singular() permet de déterminer si la page en cours est un post ou une page.
Si c’est le cas, on affiche le contenu entier avec la fonction the_content() (ligne 9), sinon, on affiche l’extrait avec the_excerpt() (ligne 11).
On utilise cette technique pour différencier l’affichage des contenus (articles, pages) de l’affichage des listes de contenus (catégories, résultats de recherche …).
Après la boucle, nous pouvons afficher le système de pagination (s’il existe de nombreux articles). Cette pagination s’affiche avec la fonction paginate_links(); (ligne 18).
Enfin, si aucun post n’est trouvé, on peut afficher un message comme quoi il y a aucun résultat (ligne 21).
Notre chapitre sur la création du template index.php est maintenant terminé.
Nous pouvons maintenant passé à la création du fichier functions.php qui permet d’activer et de créer des fonctionnalités pour notre thème WordPress.