Page de blog et cartes d’articles

Quand une page « Blog » est définie comme page des articles dans Réglages → Lecture, son affichage vient du template home.php, pas du texte édité dans la Page Blog.

Exemple de home.php

<?php get_header(); ?> <main id="contenu" class="container"> <h1>Blog et conseils</h1> <div class="cards"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'template-parts/content', 'card' ); ?> <?php endwhile; ?> </div> <?php the_posts_pagination(); ?> </main> <?php get_footer(); ?>

Pas à pas

1. Créez home.php dans le thème.
2. Créez une carte d’article : image, titre, extrait, lien complet et catégorie.
3. Dans Réglages → Lecture, fixez 5 articles par page.
4. Publiez au moins 11 articles de test.
5. Contrôlez pages 1, 2 et 3 ; la pagination doit conserver des URL différentes.

À éviter : utiliser query_posts() pour remplacer la requête principale, ou oublier les cas « aucun article ».

Pagination, archives et catégories

Une archive présente plusieurs contenus partageant une date, un auteur, un type ou une catégorie. Le template category.php peut utiliser la requête principale sans lancer d’autre requête.

Exemple de category.php

<?php get_header(); ?> <main id="contenu" class="container"> <h1><?php single_cat_title(); ?></h1> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'template-parts/content', 'card' ); ?> <?php endwhile; ?> <?php the_posts_pagination(); ?> <?php else : ?> <p>Aucun article dans cette catégorie.</p> <?php endif; ?> </main> <?php get_footer(); ?>

Pas à pas

1. Ouvrez la catégorie « Conseils WordPress » depuis un article.
2. Inspectez le titre et la liste affichée ; testez un second terme.
3. Créez category.php et personnalisez l’introduction.
4. Vérifiez les URLs /category/conseils-wordpress/ (si permaliens configurés ainsi).
5. Ajoutez un état vide dans une catégorie sans publications.

Résultat

Une seule archive s’adapte à chaque catégorie, sans dupliquer chaque page manuellement.

Créer une page Contact custom et réutilisable

Pour les pages classiques, page.php suffit souvent. Pour un design particulier, un fichier comme page-contact.php cible le slug contact ; un template déclaré permet un choix explicite dans l’éditeur.

Exemple : page-templates/contact.php

<?php /** * Template Name: Contact Agence * Template Post Type: page */ get_header(); ?> <main id="contenu" class="container"> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <div class="contact-layout"> <div><?php the_content(); ?></div> <aside><h2>Nos coordonnées</h2><p>Adresse à compléter</p></aside> </div> <?php endwhile; ?> </main> <?php get_footer(); ?>

Pas à pas

1. Créez page-templates/contact.php dans le thème.
2. Dans Pages → Contact → Modèle, sélectionnez « Contact Agence ».
3. Ajoutez l’adresse, un plan et un formulaire depuis une extension de confiance.
4. Vérifiez que le contenu reste modifiable dans WordPress sans retoucher PHP.
5. Testez un envoi de formulaire dans staging et vérifiez la réception de l’e-mail.

Sécurité : ne construisez pas un formulaire d’envoi PHP non protégé au hasard. Nonce, validation serveur, permissions et protections anti-spam doivent être traités ; voir le module plugins.

Adapter templates et édition Gutenberg

Un bon template détermine la structure, pendant que WordPress garde les données modifiables. theme.json permet de proposer une palette et des réglages de l’éditeur, même dans un thème classique.

Exemple theme.json (WordPress récent)

{ "version": 3, "settings": { "color": { "palette": [ { "name": "Bleu", "slug": "bleu", "color": "#18324c" }, { "name": "Corail", "slug": "corail", "color": "#d95e4f" } ] } } }

Pas à pas

1. Ajoutez theme.json dans le dossier du thème.
2. Dans l’éditeur de la page Services, créez une section avec un titre, une grille et un CTA.
3. Vérifiez l’alignement des couleurs entre l’éditeur et le frontend.
4. Comparez un template personnalisé à une page (page-contact.php) avec un template assignable (Template Name).
5. Réutilisez un Template Part pour l’affichage de cartes sans dupliquer son HTML.

Résultat

Le développeur contrôle la structure et l’utilisateur peut modifier les contenus prévus par le template.

Recherche, erreur 404 et recette de navigation

Un utilisateur va tôt ou tard rechercher un terme absent ou ouvrir une mauvaise adresse. Une expérience soignée prévoit aussi ces cas.

Exemple search.php (structure minimale)

<?php get_header(); ?> <main id="contenu" class="container"> <h1>Résultats de recherche</h1> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <a href="<?php echo esc_url( get_permalink() ); ?>"> <?php echo esc_html( get_the_title() ); ?> </a> <?php endwhile; ?> <?php the_posts_pagination(); ?> <?php else : ?><p>Aucun résultat.</p><?php endif; ?> </main> <?php get_footer(); ?>

Pas à pas

1. Ajoutez search.php et 404.php avec un message utile et un lien Accueil.
2. Saisissez une expression présente dans un article puis une expression inexistante.
3. Ouvrez une URL inventée et vérifiez le statut HTTP 404 (pas une page 200 déguisée).
4. Contrôlez les chemins accueil → blog → article → catégorie → contact et le menu sur mobile.
5. Corrigez les liens cassés et documentez l’arborescence finale.

Livrable

Carte de navigation complète, captures des pages personnalisées et rapport de recette responsive.