Pourquoi commencer par l’environnement ?

WordPress est une application PHP qui utilise une base de données. Ses dossiers wp-admin et wp-includes appartiennent au Core ; wp-content accueille thèmes, extensions et médias. Ne modifiez jamais les fichiers du Core : vous perdriez les changements à la prochaine mise à jour.

Manipulation guidée

1. Sur une installation locale de test (ou un staging privé), créez une base dédiée et installez WordPress depuis son installateur graphique.
2. Connectez-vous à /wp-admin/. Repérez Tableau de bord, Pages, Articles, Apparence et Extensions.
3. Ouvrez Outils → Santé du site ; notez la version PHP, WordPress et les éventuels problèmes.
4. Ouvrez le gestionnaire de fichiers : repérez wp-config.php, wp-content/themes et wp-content/plugins.
5. Installez un thème de test puis comparez les dossiers avant et après.

Résultat visible

Vous devez pouvoir nommer le thème actif et retrouver son dossier ; l’URL d’administration est accessible en HTTPS sur l’environnement de test.

À éviter : installer un plugin depuis une source non fiable ou apprendre sur un site client en production.

De l’URL à la bonne page

Quand quelqu’un demande /blog/, WordPress interprète l’URL, construit une requête et choisit un template. Le fichier réel /blog/index.html n’existe pas forcément : c’est le système de permaliens qui gère cette route.

Manipulation guidée

1. Dans Réglages → Général, contrôlez titre du site et fuseau horaire.
2. Dans Réglages → Permaliens, choisissez « Titre de la publication » puis enregistrez (sur votre environnement de test).
3. Dans Pages → Ajouter, créez « Accueil », « Blog », « À propos », « Services » et « Contact ». Publiez-les.
4. Dans Réglages → Lecture, sélectionnez « Une page statique » : Accueil comme page d’accueil, Blog comme page des articles.
5. Testez les URLs de chaque page et expliquez la différence entre front-page.php et home.php (développés en semaine 3).

Résultat visible

L’URL racine montre la page Accueil ; /blog/ est destinée à la liste chronologique des articles ; chaque page possède un lien permanent lisible.

À éviter : mettre le contenu du blog dans une page statique « Blog » tout en attendant que WordPress y affiche automatiquement les articles sans configuration de Lecture.

Pages, articles, catégories et médias

Une page correspond à un contenu stable (Contact, Services). Un article est un contenu éditorial daté, qui peut être classé avec catégories et étiquettes. Les catégories ont leurs propres archives.

Manipulation guidée

1. Dans Articles → Catégories, créez « Conseils WordPress » et « Actualités de l’agence » avec un slug court.
2. Créez trois articles : « Préparer son site », « Choisir une structure de pages » et « Pourquoi sauvegarder ». Associez chacun à une catégorie pertinente.
3. Rédigez un titre H1 logique, une introduction, au moins un intertitre H2 et une image avec texte alternatif descriptif.
4. Ajoutez une image à Médias et affectez-la comme Image mise en avant à l’un des articles.
5. Dans Apparence → Menus ou Apparence → Éditeur (selon thème), créez une navigation incluant Accueil, Services, Blog et Contact.
6. Contrôlez dans l’admin les statuts Publié/Brouillon et notez l’identifiant d’un article.

Modèle de plan éditorial

ACCUEIL / SERVICES / À PROPOS / CONTACT → Pages BLOG → Articles datés ├─ Conseils WordPress └─ Actualités de l’agence

Résultat visible

Trois articles publiés, deux catégories distinctes, cinq pages et un menu navigable sur ordinateur et téléphone.

À éviter : créer « Accueil » ou « Contact » comme des articles, ou utiliser dix catégories synonymes pour trois publications.

Afficher des contenus avec l’API WP_Query

Le contenu est stocké dans les tables WordPress (les préfixes peuvent différer de wp_). Pour afficher les trois derniers articles, utilisez les API natives, jamais une requête SQL directe dans un template sans nécessité.

Exemple PHP commenté

$articles = new WP_Query( array( 'post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 3, ) ); if ( $articles->have_posts() ) { while ( $articles->have_posts() ) { $articles->the_post(); echo '<a href="' . esc_url( get_permalink() ) . '">'; echo esc_html( get_the_title() ); echo '</a>'; } } wp_reset_postdata();

Comprendre chaque ligne

• WP_Query initialise une requête secondaire, sans remplacer la requête principale.
• post_status => publish exclut les brouillons et les contenus privés.
• the_post() prépare les données globales utilisées par get_the_title().
• esc_url() et esc_html() sécurisent l’affichage dans leur contexte.
• wp_reset_postdata() restaure le contexte après la boucle.

Manipulation guidée

Copiez ce code dans un template de thème de test (pas dans une Page de l’éditeur ni dans le Core). Publiez un quatrième article, actualisez et vérifiez que seuls trois liens apparaissent. En semaine 3, vous intégrerez ce code dans front-page.php.

À éviter : oublier de réinitialiser les données globales, ou coller du PHP brut dans LiveCanvas : LiveCanvas n’est pas un interpréteur PHP.

Contrôle qualité et livrable

Le développeur livre un site reproductible et des éléments observables, pas seulement « ça fonctionne chez moi ».

À rendre

1. L’URL de staging et une capture de Réglages → Lecture (masquer les données confidentielles).
2. La liste des cinq pages et des deux catégories.
3. Une capture du menu au format mobile.
4. Une capture des trois articles affichés par WP_Query, plus le code et la mention de wp_reset_postdata().
5. Une note de deux paragraphes expliquant Page vs Article et Core vs thème/plugin.

Auto-contrôle

• Le Core n’a pas été modifié.
• Les URL répondent sans erreur 404.
• Les brouillons ne se retrouvent pas dans la liste publique.
• La navigation reste utilisable au clavier.

Cas d’erreur à résoudre : une page renvoie 404 après changement de permaliens. Sur staging, réenregistrez les permaliens et vérifiez les règles de réécriture avant de toucher aux fichiers système.