Préliminaires, encore et toujours…

Que voici le moment tant attendu d’en venir enfin à la partie publique de notre extension.

Je l’ai déjà évoqué à plusieurs reprises : pour préserver la structure html, nous nous sommes contraints jusqu’ici à n’ajouter aux éléments qui la composent que des attributs data spécifiques, lesquels n’affectent en rien le rendu final de la page par WordPress. La seule modification concrète que nous nous sommes autorisés a été d’effectuer l’isolation de l’image dans un paragraphe indépendant quand cela était nécessaire.

Pour mettre en place la structure à même de répondre à nos besoins, nous allons mettre à profit le hook the_content de sieur WordPress. Ce filtre nous permet d’opérer des modifications au sein du contenu du post tel qu’il nous est délivré par la base de données avant que de procéder à son affichage.

Comme nous l’avons vu déjà en maintes occasions, l’opération d’accrochage se déroule en deux temps :

  • Nous commençons en déclarant une fonction judicieusement nommée content_filtering dans le fichier public/class-text-floating-image-public.php :

  • Nous nous rendons ensuite sans traîner dans la fonction define_public_hooks() du fichier admin/includes/class-text-floatin-image.php pour y supprimer les lignes d’appel aux fonctions enqueue_styles et enqueue_scripts qui ne nous seront au final d’aucune utilité et y rajouter l’appel à notre fonction content_filtering sur le hook the_content :


Et tiens ! Puisque nous en sommes à faire du ménage, nous pouvons sans plus barguigner supprimer :

  • le dossier public/css.
  • le dossier public/partials.
  • les fonctions enqueue_styles() et enqueue_scripts() du fichier public/class-text-floating-image-public.php.
La classe DOMDocument à la rescousse

Pour traiter le contenu html de notre page alors que nous travaillons en php, il nous faut en passer par la classe DOMDocument dont nous créons derechef une instance. Nous y importons le contenu de la page. Nous y effectuons toutes les aménagements nécessaires et, pour finir, nous en renvoyons le contenu à la machine WordPress.

Voilà pour le principe général.

Et voici pour la mise en pratique :

Et du javascript pour mettre de l’huile

Ne reste plus alors qu’à introduire un peu de javascript pour parachever la chose…

Vous noterez cependant que le fichier public/js/text-floating-image-public.js n’est chargé que lorsque la moulinette que nous avons mise en place sur le filtre the_content a détecté des images à traiter.

Conclusion du moment

Nous voilà enfin face à une mécanique parfaitement fonctionnelle. Nous pourrions d’ailleurs nous arrêter là, négligeant les finitions à la manière de ceux qui se sont trop longtemps épuisés à restaurer leur chaumière et repoussent encore et toujours cette foutue dernière couche de peinture.

Mais il me reste une promesse à tenir dont certains se souviennent sans doute : l’internationalisation de l’ensemble. Elle est d’autant plus nécessaire que, dans l’état actuel et pas brillant des choses, nous disposons d’une page d’options rédigée dans la langue de Shakespeare alors que notre pop-up de paramétrage s’exprime lui dans la langue de Molière. Voilà bien un désordre intolérable auquel il nous faut remédier…

Mission que nous tenterons de mener à bien dans le prochain chapitre

(Si c’est pas du cliffhanger, ça, coco !)