FORMATION WORDPRESS · MODULE 06/08 · 10 HEURES
Vous débutez totalement ? Commencez par la section « Mode débutant » de chaque atelier : elle explique où cliquer, quoi faire et comment vérifier votre résultat. Le code vient après les manipulations simples. Voir aussi le guide de prise en main →
Vous construisez une petite interface de consultation des réalisations sans exposer les brouillons ni autoriser des écritures anonymes.
Route GET limitée aux contenus publiés ; validation des paramètres ; démonstration de permissions sur POST ; composant JavaScript fetch sans injection HTML ; plan de tests d’erreur.
PARCOURS GUIDÉ
Cliquez sur une étape pour découvrir sa mission. Le bouton « Aller à cette étape dans le cours » ouvre directement sa procédure détaillée. Le switch en colonne de droite enregistre votre avancement.
Votre première route GET Les routes REST se déclarent sur rest_api_init . Une route publique doit renvoyer uniquement les contenus que le visiteur peut consulter. Exemple de route add_action(…
Action : lire la procédure, la reproduire, puis activer le switch après contrôle du résultat.
Valider les paramètres et les limites Les API peuvent recevoir des valeurs mal formées : elles doivent être filtrées avant leur utilisation. Paramètre contrôlé ‘args’ => [
‘per_page’ => [
…
Action : lire la procédure, la reproduire, puis activer le switch après contrôle du résultat.
Protéger POST, PATCH et DELETE Pour modifier le contenu, une requête POST ne doit pas être ouverte à tous. Les permissions s’évaluent sur l’utilisateur réellement authentifié et parfois sur…
Action : lire la procédure, la reproduire, puis activer le switch après contrôle du résultat.
Afficher les données avec fetch sans XSS La réponse JSON ne doit pas être injectée comme HTML de confiance. Préférez textContent et la construction des éléments DOM. JavaScript d’affichage async…
Action : lire la procédure, la reproduire, puis activer le switch après contrôle du résultat.
Tests REST et tableau des erreurs Une API professionnelle s’évalue sur ses refus, pas seulement sur la réponse « heureuse ». Matrice à remplir GET public → 200 ; n’expose aucun…
Action : lire la procédure, la reproduire, puis activer le switch après contrôle du résultat.
COURS APPROFONDI & ATELIERS
Ces exemples sont volontairement progressifs. Les extraits de code s’exécutent dans des fichiers PHP d’un thème/plugin WordPress, pas directement dans le texte d’une page LiveCanvas.
L’API REST permet à un outil externe de lire certaines informations de WordPress. Avant d’écrire une route, observons les réponses existantes sans les modifier.
Navigateur → https://votre-site.test/wp-json/ et /wp-json/wp/v2/posts.
{
"id": 12,
"title": {"rendered": "Actualités de l’agence"},
"status": "publish"
}
Une réponse JSON apparaît et les brouillons ne sont pas visibles anonymement.
En cas d’erreur 404, vérifiez les permaliens et que l’API REST n’est pas bloquée par une extension de sécurité.
API : interface d’échange de données. JSON : format texte structuré. GET : méthode de lecture.
Les routes REST se déclarent sur rest_api_init. Une route publique doit renvoyer uniquement les contenus que le visiteur peut consulter.
add_action( 'rest_api_init', function (): void {
register_rest_route( 'atelier/v1', '/projects', [
'methods' => 'GET',
'permission_callback' => '__return_true',
'callback' => function () {
return get_posts( [
'post_type' => 'agency_project',
'post_status' => 'publish',
'numberposts' => 6,
] );
},
] );
} );
/wp-json/atelier/v1/projects en navigation privée.id, title, url) dans la version professionnelle.Attention : l’exemple commence simplement ; la version métier doit limiter précisément les champs exposés et contrôler tous les paramètres.
Le résultat est-il reproductible ? Gardez une preuve (capture ou extrait de code), puis validez l’interrupteur « Étape 01 » dans votre suivi.
Une route personnalisée doit déclarer ses paramètres, types et limites afin d’éviter des requêtes excessives ou invalides.
Plugin → rest_api_init/register_rest_route ; navigateur → /wp-json/agency/v1/projects?per_page=3.
register_rest_route('agency/v1','/projects', [
'methods'=>'GET',
'permission_callback'=>'__return_true',
'callback'=>function() {
return new WP_REST_Response(['message'=>'À remplacer par vos projets publiés'],200);
}
]);
La route répond avec des contenus publiés et refuse ou borne un paramètre invalide.
Une réponse publique ne doit jamais contenir de mot de passe, clé API, brouillon privé ou e-mail interne.
Endpoint : adresse d’une route API. Validation : contrôle des paramètres reçus.
Conseil : Le code ci-dessus est une structure de route, pas encore une recherche de projets.
Les API peuvent recevoir des valeurs mal formées : elles doivent être filtrées avant leur utilisation.
'args' => [
'per_page' => [
'type' => 'integer',
'default' => 6,
'minimum' => 1,
'maximum' => 24,
'sanitize_callback' => 'absint',
],
],
args à la définition de la route de la première étape.(int) $request['per_page'] comme nombre d’articles.?per_page=3, puis ?per_page=0 et ?per_page=100.Le nombre maximal de contenus exposés est contrôlé côté serveur.
Le résultat est-il reproductible ? Gardez une preuve (capture ou extrait de code), puis validez l’interrupteur « Étape 02 » dans votre suivi.
La lecture publique et la modification de données n’ont pas les mêmes risques. Chaque action d’écriture doit vérifier l’identité et les capacités de l’utilisateur.
Plugin → permissions de la route REST ; WordPress → Réalisations → Brouillons.
// Exemple de contrôle :
'permission_callback' => function () {
return current_user_can('edit_posts');
}
Un anonyme ne peut pas créer de projet ; un utilisateur autorisé peut créer un brouillon contrôlé.
Attention : un nonce REST n’est pas un jeton d’autorisation autonome et n’établit pas la permission d’écrire. Il faut vérifier current_user_can().
Authentification : qui est connecté ? Autorisation : que peut-il faire ? Validation : la donnée respecte-t-elle le format attendu ?
Pour modifier le contenu, une requête POST ne doit pas être ouverte à tous. Les permissions s’évaluent sur l’utilisateur réellement authentifié et parfois sur l’objet ciblé.
'permission_callback' => function () {
return current_user_can( 'edit_posts' );
},
'callback' => function ( WP_REST_Request $request ) {
$id = wp_insert_post( [
'post_type' => 'agency_project',
'post_status' => 'draft',
'post_title' => sanitize_text_field( $request['title'] ),
], true );
return is_wp_error( $id ) ? $id : [ 'id' => $id ];
},
current_user_can( 'edit_post', $post_id ) ou delete_post selon l’opération.agency_project.À éviter : une permission basée seulement sur la présence d’un nonce ; un nonce ne prouve pas qu’on possède le droit de modifier l’objet.
Le résultat est-il reproductible ? Gardez une preuve (capture ou extrait de code), puis validez l’interrupteur « Étape 03 » dans votre suivi.
JavaScript peut consulter une API et mettre à jour un bloc de page sans rechargement. Les données renvoyées doivent être insérées de façon sûre.
Thème/plugin → assets/js/projects.js ; navigateur → Inspecter → Console/Réseau.
fetch('/wp-json/wp/v2/posts?per_page=3')
.then(r => { if (!r.ok) throw new Error('API indisponible'); return r.json(); })
.then(posts => {
const list = document.querySelector('#agency-projects');
posts.forEach(post => {
const li = document.createElement('li');
li.textContent = post.title.rendered;
list.appendChild(li);
});
})
.catch(() => console.warn('Chargement impossible'));
Une liste de titres apparaît, et une erreur réseau affiche un message sans casser la page.
Évitez innerHTML pour afficher directement des champs JSON non fiables : une chaîne contenant des balises pourrait devenir du HTML actif.
fetch : API JavaScript pour faire une requête HTTP. textContent : affectation de texte non interprété comme HTML.
La réponse JSON ne doit pas être injectée comme HTML de confiance. Préférez textContent et la construction des éléments DOM.
async function afficherProjets() {
const res = await fetch('/wp-json/atelier/v1/projects');
if (!res.ok) throw new Error('Chargement impossible');
const projects = await res.json();
const list = document.querySelector('#projects-list');
list.replaceChildren();
projects.forEach(project => {
const item = document.createElement('li');
item.textContent = project.post_title;
list.append(item);
});
}
afficherProjets().catch(console.error);
<ul id="projects-list"></ul>.wp_enqueue_script, pas en collage de code non contrôlé.< et > : il ne doit pas être interprété comme HTML.Les données sont affichées sans innerHTML d’une valeur non fiable.
Le résultat est-il reproductible ? Gardez une preuve (capture ou extrait de code), puis validez l’interrupteur « Étape 04 » dans votre suivi.
Une API doit être testée avec plusieurs profils d’accès et plusieurs types de réponses, pas seulement avec un administrateur déjà connecté.
Outils de développement, Postman/équivalent, ou interface de test des requêtes API.
Exemple concret : Livrable : tableau « scénario / rôle / méthode / résultat attendu / résultat observé ».
Une matrice prouve les refus et autorisations attendus ; aucun brouillon n’est renvoyé publiquement.
Un code HTTP 200 ne signifie pas que la réponse est sûre : vérifiez aussi le contenu retourné.
HTTP 401 : authentification requise ; 403 : accès interdit ; 400 : requête invalide.
Une API professionnelle s’évalue sur ses refus, pas seulement sur la réponse « heureuse ».
GET public → 200 ; n'expose aucun brouillon
GET per_page=100 → 400 ; argument refusé
POST anonyme → 401/403 ; contenu non créé
POST auteur autorisé → 200/201 ; brouillon créé
PATCH autre auteur → 403 ; modification refusée
ID inexistant → 404 ; message neutre
Une API de démonstration et un tableau de recette montrant les refus d’accès attendus.
Le résultat est-il reproductible ? Gardez une preuve (capture ou extrait de code), puis validez l’interrupteur « Étape 05 » dans votre suivi.
SOURCES & SUPPORTS
Documentation officielle : Consulter la référence WordPress ↗. Vidéos : ajoutez des tutoriels enregistrés et vérifiés dans LiveCanvas ; aucune vidéo factice n’est présentée comme un cours existant.
FIN DU MODULE · ÉVALUATION
Répondez aux cinq questions. Après correction, découvrez votre note sur 20, le nombre d’erreurs et l’explication de chaque réponse. Quatre réponses correctes sur cinq sont nécessaires pour valider le nouveau quiz.