WordPress étant à la base un outil de blogging, il est naturel que tout ait été pensé afin de faciliter le travail d’écriture sans se soucier de ce qui se passait derrière le rideau. Le CMS faisait donc automatiquement son travail en enrobant chaque idée de génie que vous pouviez lui écrire dans son éditeur avec des balises appropriées : <p></p> (balises de paragraphe). Oui mais : et si nous on ne veut pas de ce paragraphe automatique WordPress ?
Menu de navigation rapide
Formatage et paragraphe automatique WordPress (« auto p »)
Si vous regardez comment est construite la page d’accueil de ce site qui est « mon miens à moi », vous verrez sous vos yeux ébahis une animation de mon logo fait avec amour qui arrive de toutes parts et qui s’imbrique dans un finish en flash pour le plaisirs des petits et des grands ! Bon forcément dit comme ça, ça fait rêver mais en vrai l’animation n’est pas folle puisque faut pas non plus que ça dure 3 heures, les visiteurs sont pas venus pour ça !
Mais ce qui est important de noter c’est que l’animation est composée d’éléments « svg » qui sont animés par des scripts en javascript. (Je reste schématique, ce n’est pas le sujet de cet article). Pour rappel, voilà à quoi ressemble cette animation :
Cette animation étant présente uniquement sur cette page, je n’ai pas voulu charger les scripts sur tout le site juste pour elle ! Si j’avais mis les scripts dans mon thème enfant par exemple, ils auraient été chargés à chaque page, ce qui n’est pas top pour éviter les requêtes inutiles et une lourdeur pas justifiée.
Afin de faire en sorte que les scripts soient pris en compte, je les ai donc directement mis en HTML sur la page. Oui mais… c’était sans compte sur « l’auto p », le paragraphe automatique de WordPress ! Quand vous écrivez une phrase et que vous appuyez sur « entrer », vous allez certes sauter une ligne mais WordPress va automatiquement envelopper votre phrase dans une balise <p> comme on emballe un cadeau le 24 Décembre (parce que on est à la bourre comme tous les ans !). Du coup votre phrase va ressembler à ceci :
<p>Une belle phrase enveloppée par des balises de paragraphe automatiquement générées par WordPress</p>
« Et alors ? » me direz-vous ? Bah c’est pas cool dans ma situation ! Si ce n’est pas du texte que je veux mettre dans ces balises bah me voilà bien embêté…
« Dans l’éditeur de texte WordPress, chaque paragraphe est automatiquement emballé dans des balises <p></p> »
Exemple concret de ce que donne le paragraphe automatique WordPress
Exemple sans « l’auto p »
Pour rester dans l’exemple que je donne plus haut, voici ce que donne un bout du code de mon animation :
<svg class="logo" viewBox="0 0 236.518 350" preserveAspectRatio="xMidYMid meet"> <g class="katakana" fill="#0099A8"></g> <g class="katakana" fill="#CEDB00"></g> <g class="katakana" fill="#0099A8"></g> <g class="text-fills-gris"></g> <g class="text-fills-vert"></g> </svg>
On voit que le code est correctement rangé, bien comme il faut, avec une balise svg qui englobe le tout et des balises à l’intérieur qui représentent chaque partie de mon logo.
Grâce à cela, le script qui va faire bouger ces éléments peut donc facilement trouver la bonne balise et faire correctement son travail ! Mais c’était sans compter sur….. « l’auto p » : le paragraphe automatique wordpress -tain tain tain tain- …. (musique de suspens, angoisse !)
Exemple avec « l’auto p » de WordPress
Voyons maintenant ce que donnerait le même code si j’avais laissé le paragraphe automatique WordPress activé.
<p> <svg class="logo" viewBox="0 0 236.518 350" preserveAspectRatio="xMidYMid meet"></svg> </p> <p> <g class="katakana" fill="#0099A8"></g> <br> <g class="katakana" fill="#CEDB00"></g> </p> <p> <g class="katakana" fill="#0099A8"></g> </p> <p> <g class="text-fills-gris"></g> <br> <g class="text-fills-vert"></g> </p>
Patatra… les éléments du svg sont aussi coincés qu’un enfant qui voudrait dire non à sa mamie qui lui propose une 3ème fois de la purée parce que « il est maigre cet enfant ! ».
Résultat : l’animation ne se lance pas, rien ne se passe, et vous voilà avec 2 jours passés à faire une animation pour rien ! Et c’est là qu’intervient Hop Pop up et son petit hook WordPress qui permet de désactiver « l’auto p » !!!
Créer le Hook WordPress pour désactiver les paragraphes automatiques WordPress
Le hook seul
Afin de dire à WordPress qu’il est bien gentil mais qu’on aimerait qu’il arrête de faire (trop) bien son travail, on va utiliser que des bonnes choses que l’on trouve dans le codex WordPress (bible du fonctionnement de l’outil, si vous êtes curieux n’hésitez pas ! mais attention c’est pas le plus « sexy » des sites web…). Ce code va être à insérer dans le fichier function.php de votre thème enfant (de préférence)
Voici le code que l’on va utiliser :
remove_filter( 'the_content', 'wpautop' );
Et c’est tout ! Facile non ? Tout ça pour ça me direz-vous ? Eh bien OUI ! mille fois OUI ! Parce que quand vous aurez besoin en CSS ou en Javascript de cibler précisément un élément, quand vous aurez copié-collé un code sur votre site et qu’il ne marchera pas, quand vous aurez besoin de modifier l’aspect d’un bloc sans avoir à repasser 10 fois dessus bah vous serez vraiment content de le trouver celui-là ! (On sent le gars traumatisé par ces exemples qui sentent le vécu…)
Explications :
- On demande à WordPress d’enlever le filtre (remove_filter) qu’il utilise et qui insère automatiquement les balises <p></p>, à savoir ‘wpautop’.
- On lui précise de le faire dans le contenu de la page : ‘the_content’.
Bon à savoir : Ce filtre sert également à insérer les balises <br> qui font sauter une ligne entre chaque paragraphe ! Donc il n’y aura plus d’espaces non plus entre les paragraphes grâce à cette astuce !
Pour aller plus loin avec ce hook WordPress
Un des avantages avec WordPress, c’est que tout est automatisé ! Et du coup quand vous avez un texte, WordPress va automatiquement créer un extrait de celui-ci pour le placer où vous le souhaitez. (Comme par exemple, sur une page blog où vous allez trouver un extrait de chaque article pour vous inciter à cliquer sur ‘lire la suite’).
Si pour une raison ou une autre, vous souhaitez désactiver également le paragraphe automatique WordPress sur ces extraits, vous pouvez facilement le faire en rajoutant juste en dessous du premier hook que l’on a vu, celui-ci :
remove_filter( 'the_excerpt', 'wpautop' );
Et ce n’est pas fini !
Si, comme moi, vous souhaitez uniquement désactiver le paragraphe automatique de WordPress sur les pages de votre site, mais que vous souhaitez les conserver sur les pages articles ou autres parce que…bon….c’est vrai que…enfin….c’est pratique quoi quand il s’agit de faire du blogging ! il suffit d’emballer le tout dans une fonction qui va le dire à WordPress ;
function remove_p_on_pages() {
if ( is_page() ) {
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
}
}
add_action( 'wp_head', 'remove_p_on_pages' );
Explications :
- On demande à WordPress : ‘si c’est une page », alors tu me vires les filtres à auto p
- On met tout ça dans une fonction qui sera chargée en même temps que wp_head, là où ce genre de filtre est chargé automatiquement par WordPress
Et voilà vous avez une belle petite fonction pour virer le paragraphe automatique sur WordPress uniquement sur les pages !
il ne reste plus qu’à insérer ce code dans le fichier function.php de son thème enfant et le tour est joué, vous pouvez sereinement vous amuser à mettre des petites animations sur votre site, ou à sereinement manipuler le DOM de votre site en jQuery !