Créer un thème complet – part 3 | DSAA Design La Martinière

Dernière mise à jour le 15 avril 2016 par LMD

Le fichier index.php

C’est le fichier qui est utilisé par défaut comme page d’accueil du site. Il va contenir le code pour afficher le contenu du site, notamment les articles. Nous ferons simple, mais il est possible de spécifier quels articles seront affichés ou pas sur cette page.

Le code de ce fichier se répartit de deux manières :
– le cœur du code, qui permet d’appeler les articles. C’est ce que l’on appelle la boucle WordPress. Il représente pour nous, ce que contient la balise <section>
– le reste du code qui consiste à appeler le code qui a été écrit dans les autres fichiers, header.php, sidebar.php et footer.php. Ce principe, appelé include en PHP permet au final de reconstituer le code complet correspondant au contenu initial de notre page HTML.

L’appel du fichier header.php

C’est une simple fonction PHP qui tient en une ligne, à placer au début du fichier index.php :
<?php get_header() ; ?>

Pour mémoire, la balise ouvrante <section> se trouve dans le fichier header.php; il ne faut donc pas la remettre dans le fichier index.php

La boucle WordPress

Voici le code général de la boucle :

[pcsh lang= »xml » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

<?php if(have_posts()): ?>
	<?php while( have_posts() ) : the_post(); ?>
    	<article class="vignette">
    		
			<h3>
				<a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a>
			</h3>
			<div class="thumb_engin"><?php the_post_thumbnail('thumbnail'); ?></div>
			<p> <?php the_excerpt(); ?></p>
  		</article>
		<?php endwhile; ?>
<?php endif; ?>

[/pcsh]

Celle-ci commence par un test pour vérifier qu’il y a bien dans la base de données quelque chose à afficher (s’il y a des posts), ce test devant se clore par l’instruction endif :
<?php if(have_posts()): ?>
code de la boucle
<?php endif; ?>

À l’intérieur de la condition, on poursuit par une boucle while() qui consiste à afficher les posts tant qu’il y en a (grâce à la fonction the_posts) et qui se termine également par l’instruction endwhile :
<?php while( have_posts() ) : the_post(); ?>
code pour le contenu des posts
<?php endwhile; ?>

Enfin, à l’intérieur de la boucle PHP, se trouve le code HTML qui va baliser les éléments des posts que l’on choisit d’afficher. Cela se traduit par l’insertion de fonctions PHP qui sont toutes sur le modèle the_quelquechose(). Vous pouvez trouver la liste des fonctions disponibles dans ce contexte dans le codex WordPress. On parle de marqueurs de modèle, et plus particulièrement de marqueurs des articles :
https://codex.wordpress.org/fr:Marqueurs_de_Modele

Ici, nous retiendrons trois choses, le titre de l’article (the_title), l’image à la une (the_post_thumbnail) et un extrait du texte de l’article (the_exerpt). Bien entendu, ce choix est à adapter à vos besoins. Il ne faut pas oublier de mettre un lien (the_permalink) sur le titre, ce lien permet d’ouvrir l’article seul dans une page, généralement la page single.php, que nous ne créerons pas dans le cadre de ce tutoriel (renseignez-vous sur le net pour cela).

Pour en savoir plus sur la boucle WordPress, toujours le codex :
https://codex.wordpress.org/fr:La_Boucle

L’appel des autres fichiers

Il faut d’abord penser à clore la balise <section> ouverte dans le fichier header.php :
</section>

De même que pour le fichier header.php, il faut clore le fichier index.php en appelant si besoin le fichier sidebar.php, puis le fichier footer.php, ce qui se traduit à la fin du code par les deux lignes suivantes :
<?php get_sidebar() ; ?>
<?php get_footer() ; ?>

Voici donc le code complet du fichier index.php :