Formation « Développer un thème WordPress sur mesure »

La réécriture d’URL dans WordPress

Lecture : 7 minutes • 0

Même si WordPress gère automatiquement les URL du site au travers des permaliens, il reste possible de créer des URL sur mesure pour répondre à vos besoins spécifiques grâce à l’URL rewriting.

WordPress gère seul les URL du site, et les affiche de manière lisible et sexy grâce au réglage par défaut /%postname%/ dans Réglages > Permaliens.

Capture d'écran du panneau de réglage des permaliens dans WordPress
Les permaliens dans WordPress

Mais parfois, pour des besoins spécifiques, vous allez devoir créer des URL spéciales. Et ça, c’est possible grâce à quelques fonctions fournies par WordPress.

Prérequis : Afin de bien appréhender ce cours, il vous faut être à l’aise avec le Template Hierarchy, les Custom Post Types et la WP Query.

Dans quels cas utiliser l’URL Rewriting ?

Il existe de nombreux cas dans lesquels vous voudriez avoir une URL particulière qui sort du système natif de WordPress. Cependant ce sont des cas assez spécifiques. Voici quelques exemples :

Sur ce site, j’utilise une structure d’URL particulière pour gérer mes cours :

https//capitainewp.io/formations/<nom-formation>/<url-cours>

Je simule une relation parent / enfant entre mes CPT Formation et Cours. Pourtant il n’existe pas de telle relation entre Custom Post Types dans WordPress.

Capture d'écran de l'URL d'un cours sur Capitaine WP, avec une URL composée
Les URL composées de Capitaine WP

C’est donc grâce à l’URL Rewriting que j’ai pu faire ça ! Ce système permet à Google de bien comprendre l’architecture de mes cours et leur relation avec la formation. On va justement voir comment j’ai fait dans le prochain cours (premium).

On va commencer avec un exemple plus simple afin de voir le principe de l’URL rewriting.

Imaginons un CPT « Catalogue » dans lequel on afficherait des produits. On veut aussi filtrer les résultats via une WP Query sur mesure. On aurait plusieurs filtres possibles comme :

  • La marque ;
  • La couleur ;
  • Et la taille.

L’URL type serait : monsite.fr/catalogue?brand=adidas&color=red&size=large. On a d’ailleurs vu dans un cours précédent comment faire un tel filtre (premium).

Maintenant, on voudrait une URL plus sexy, du genre : monsite.fr/catalogue/adidas/red/large.

Mais si on tape cette adresse, WordPress va nous renvoyer une erreur 404. Après tout il n’existe aucune page enfant de catalogue qui s’appelle Adidas.

Car en réalité, ce ne sont pas des pages, mais simplement des paramètres GET pour notre filtre. On va donc déclarer tout ça à WordPress, afin qu’il comprenne.

Créer une règle de réecriture d’URL

Bien, maintenant on va donner les instructions à WordPress pour qu’il comprenne ce genre d’URL, et les traite comme il faut.

Pour cela, on va écrire nos instructions dans le fichier functions.php de notre thème.

PHP
functions.php

La fonction est lancée sur le Hook init, très tôt dans l’exécution de WordPress. C’est normal car il faut que le CMS ait cette information avant d’arriver au Template Hierarchy.

Dans la fonction, on va déclarer des tags, c’est-à-dire des paramètres qu’il reconnaitra et qu’il transmettra à la page. S’ils ne sont pas déclarés, ils les ignorera. On déclare donc nos 3 paramètres : brand, color et size via la fonction add_rewrite_tag().

Ensuite tout va se jouer dans la fonction add_rewrite_rule(). On indique 3 paramètres :

  • L’URL telle qu’elle apparaitra dans le navigateur ;
  • La transcription en URL non réecrite, native ;
  • Et la priorité (top indique une priorité haute).

On utilise les expressions régulières pour définir les endroits dynamiques de notre URL. ([^/]+) veut dire qu’on attend à cet endroit un ou plusieurs caractères, qui peuvent être des chiffres, lettres ou caractères spéciaux. Le + veut dire qu’il y en a un ou plusieurs.

On ne va pas rentrer dans les détails des expressions régulières car c’est une syntaxe complexe que tout le monde aime éviter. Et dans la plupart des cas ([^/]+) suffira.

Aparté: Les expressions régulières

Véritable fléau du développeur débutant, les expressions régulières sont toutefois indispensables car elles permettent de vérifier rapidement des chaines et valeurs. Ce sont les expressions régulières qui permettent de vérifier la validité d’une adresse e-mail ou d’un numéro de téléphone dans un formulaire.

C’est un outil puissant pour les développeurs, mais avec une syntaxe certes un peu particulière

Revenons-en à notre expression réguliere : dans notre cas on indique à WordPress que s’il trouve une URL de type : catalogue/truc/truc/truc , qui commence donc par catalogue avec 3 éléments derrière, il devra suivre notre réecriture d’URL.

Le deuxième paramètre est tout autant important : il indique à WordPress comment gérer cette URL.


Avant de poursuivre, voici une petite explication du fonctionnement des URL de WordPress. Tous les permaliens sont des réécritures d’URL. Quand on va sur une page dont l’URL estmonsite.fr/page/, le serveur ne va pas chercher une page index.html située dans le dossier /page/. Ce n’est bien sûr pas comme ça que fonctionne WordPress.

Si on désactive les permaliens, on verrait en fait que l’URL classique serait : monsite.fr/index.php?pagename=page.

Vous pouvez d’ailleurs faire l’essai. Allez dans Réglages > Permaliens et désactivez la réecriture en choisissant Simple. Naviguez ensuite sur votre site et constatez que les URL ont changé :

Capture d'écran d'un site WordPress sans réecriture des URL. Le permalien est donc brut.
les URL WordPress natives, sans réécriture

Dans cet exemple, j’affiche un article et l’URL est index.php/?p=188. En y regardant de plus près, ce sont exactement les mêmes paramètres que ceux de la WP Query. Et pour cause, c’est eux qui vont permettre de définir quelles données récupérer !

En fait peu importe l’URL tapée dans le navigateur, tout passe toujours par index.php (la racine de WordPress), et ce sont les paramètres derrière qui vont permettre à WordPress de comprendre quelle page il doit charger dans la WP Query, et le template dans le Template Hierarchy.

Conseil

La structure des permaliens permet donc à WordPress d’avoir des URL plus jolies et plus lisibles, ce que Google appréciera grandement.

Mais revenons-en à notre code.

Dans notre second paramètre, on indique donc que les 3 éléments trouvés seront reportés dans 3 paramètres de l’URL. $matches est un tableau correspondant aux résultats trouvés par l’expression régulière :

PHP
functions.php

Tous ces paramètres passés dans WordPress s’appellent les Query Vars et pourront être utilisés par la WP Query.

Le premier attribut après index.php est essentiel à WordPress, puisque c’est lui qui lui indique quelle page aller chercher via la WP Query.

  • Pour une page, utilisez index.php?pagename=<slug> ;
  • Pour un article utilisez index.php?p=<id> ;
  • Et pour un CPT, utilisez index.php?post_type=<slug>.

On résume :

  • On a indiqué à WordPress qu’il risque de recevoir une URL du type : /catalogue/ suivie de 3 paramètres ;
  • On lui donne les instructions pour récupérer ces paramètres dans son URL réelle ;
  • On a déclaré ces 3 paramètres via add_rewrite_tag() afin que WordPress puisse nous les restituer.

Maintenant que tout semble bon, on va passer aux tests.

Récupérer nos paramètres d’URL

Avant de tester, il faut retourner dans Réglages > Permaliens et cliquer sur Enregistrer, sans rien modifier. Cela va permettre à WordPress de prendre en compte votre règle, et l’enregistrer en base de données.

Sans ça, votre réecriture ne sera pas prise en compte, et votre URL tombera toujours sur une erreur 404.

Dans mon exemple, j’utilise un Custom Post Type  « catalogue », je vais donc réceptionner mes données dans archive-catalogue.php.

PHP
archive-catalogue.php

Si j’avais utilisé une page, j’aurais utilisé le template page.php (ou page-<id>.php) selon le Template Hierarchy.

Dans un code PHP classique, on aurait récupéré les paramètres via la variable système $_GET, mais pas dans WordPress ! On va attendre que ce dernier aie traité tous les paramètres, et on va les retrouver dans les Query Vars, le tableau de données qui permet à WordPress de monter sa WP Query.

Les noms « brand », « color » et « size » sont les mêmes noms que ceux définis dans add_rewrite_tag().

Désormais, vous pouvez utiliser ces valeurs comme bon vous semble dans votre template. Le cas le plus classique est de venir modifier la WP Query en ajoutant des filtres.

Tapez votre URL site.fr/catalogue/adidas/red/large et testez la bonne récupération des données, par exemple avec un echo :

PHP
archive-catalogue.php

Si tout s’est bien passé, ça devrait fonctionner correctement !

Conseil

Pensez toujours à retourner enregistrer la structure des permaliens dans Réglages > Permaliens après une modification dans votre code, afin que WordPress prenne bien en compte la réecriture d’URL.

Changer l’URL d’un Custom Post Type

On a vu comment créer un Custom Post Type plus tôt dans cette formation. Maintenant vous pourriez avoir besoin de changer son nom dans l’URL.

On ne peut plus changer le slug, sinon on perdrait toutes nos publications rattachées. Mais on peut réecrire son URL :

PHP
functions.php

Du coup dans la barre d’adresse, ce ne sera plus monsite.fr/portfolio, mais monsite.fr/creations.

Pensez là aussi à réenregistrer la structure des permaliens après toute modification.

On peut même aller plus loin et proposer une URL différente en fonction de la langue du site :

PHP

On a pas encore abordé les notions de multilangue et d’internationalisation de thème, mais on abordera ces sujets très bientôt.

Changer l’URL des auteurs

Et enfin, si vous utilisez les pages auteurs sur votre site, vous avez peut-être remarqué que vous ne pouvez pas modifier le slug d’URL, comme on peut le faire pour les catégories et les étiquettes :

Capture d'écran des réglages de permalien de WordPress. Il est possible de modifier les catégories et les étiquettes, mais pas l'auteur
Impossible de modifier le slug des auteurs ici

Du coup, on se retrouve avec des URL du type monsite.fr/author/maxime même sur un site en français.

Alors pour changer ça, on va ajouter un petit bout de code dans functions.php :

PHP
functions.php

Et là aussi, pensez bien à réenregistrer la structure des permaliens.


La mise en place de la réécriture d’URL est plutôt simple avec WordPress, mais ça peut vite devenir un casse-tête sur des sujets plus complexes.

Le plus difficile étant de bien comprendre comment fonctionnent les URL et les paramètres dans WordPress, et leur relation directe avec la WP Query et le Template Hierarchy.

En tous cas vous allez pouvoir créer des URL sur mesure et élégantes grâce à ce système.

0

Questions, réponses et commentaires

    Laisser un commentaire