Amélioration du plug-in WordPress Expand + Collapse Funk

Après Improved Include Page la semaine dernière, je me suis attaqué au plug-in Expand + Collapse Funk, qui me posait quelques soucis. J’en ai profité également pour y ajouter le support des shortcodes.


Ce plug-in permet de rendre des pages visuellement plus compactes, en plaçant une partie du contenu dans une section masquée, qui s’affiche en cliquant sur son en-tête.

Mon premier souci est un problème de rendu. Le plug-in ajoute un chevron devant l’en-tête, mais avec le thème Twentyfourteen un saut de ligne apparait entre le chevron et le texte de l’en-tête.

En-tête
Contenu

Il s’agit visiblement d’un conflit CSS : la classe de l’en-tête est expand-content-link et le thème applique automatiquement certaines règles de style à tous les éléments dont le nom de classe contient content. Pour résoudre ce problème, il suffit donc de passer en revue tous les fichiers du thème, pour y remplacer expand-content-link par expand-cnt-link.

Ceci aura par contre pour effet de casser le fonctionnement du plug-in sur les pages déjà existantes. Pour le réparer, un petit coup de JavaScript va permettre de renommer la classe sur les éléments existants. Pour ce faire, ouvrez le fichier expand-collapse-funk.php, cherchez la fonction et remplacez :

Par :

Et voilà !

En-tête
Contenu

Deuxième problème, l’extension du contenu est effectuée via JavaScript, et est donc impossible à effectuer si le JavaScript a été désactivé au niveau du navigateur. Il est donc préférable d’afficher tout le contenu par défaut et de le masquer via JavaScript au chargement de la page. Ainsi, en l’absence de support JavaScript, il sera visible.

C’est à nouveau dans le fichier expand-collapse-funk.php que ça se passe.

Pour changer le rendu par défaut de masqué à affiché :

  1. Renommer la classe ecf_opened en ecf_closed (deux occurrence à remplacer dans le fichier)
  2. Inverser les positions des chevrons : remplacer \e601 par \e600 et inversement (une occurrence de chaque)
  3. Passer l’attribut display de la classe .hidden-content de none à block.

Pour masquer les éléments via JavaScript au chargement de la page, ajouter :

Juste après :

Vos visiteurs sans JavaScript devraient désormais voir tout le contenu.

Pour finir, il y a un petit bug lorsque plusieurs éléments masqués sont imbriqués : l’affichage d’un élément entraîne l’affichage de tous ses éléments fils. Pour que seul le premier élément soit affiché, il faut remplacer :

Par :

Voilà pour les corrections.

Reste maintenant à mettre en place des shortcodes. Le but du shortcode est de ne pas intégrer directement du code HTML dans l’article, mais simplement une balise, ce qui offre ensuite une plus grande souplesse d’évolution (par exemple, le renommage de la classe CSS indiqué plus haut aurait été plus simple si cette classe n’était pas enregistrée « en dur » dans les articles existants). Par exemple, le shortcode [gallery type="slideshow"] insère une galerie d’image en mode diaporama.

En regardant le code d’un autre plug-in, il est relativement simple de comprendre comment déclarer un shortcode. Il suffit de créer une fonction qui prendra en paramètre les attributs du shortcode (sous forme de dictionnaire nom => valeur) et le contenu du shortcode puis d’enregistrer cette fonction comme gestionnaire de shortcode à l’aide de la fonction add_shortcode().

Ce qui nous donne donc le code suivant, à intégrer dans le fichier expand-collapse-funk.php :

Le shortcode supporte cinq attributs :

  • title : le texte du lien permettant d’afficher/masque le contenu,
  • containerclasses : liste de classes CSS supplémentaires à ajouter au conteneur (titre + contenu),
  • titleclasses : liste de classes CSS supplémentaires à ajouter au titre,
  • contentclasses : liste de classes CSS supplémentaires à ajouter au contenu,
  • keepbr : désactive la suppression automatique des lignes vides au début et à la fin du contenu.

Déclarer une zone masquable se fait alors simplement avec le shortcode. Insérer [ecf title="Titre"]Contenu[/ecf] donnera :

Titre
Contenu

Il y a par contre une limitation sur la gestion des shortcodes dans WordPress : on peut imbriquer des shortcodes différents, mais pas plusieurs occurrences d’un même shortcode.

La solution de contournement est toute simple : définir plusieurs shortcodes différents. Une petite boucle et c’est réglé :

Il devient ainsi possible d’empiler plusieurs éléments masqués.

Par exemple, le code :

Donnera :

Parent
Child 1
Child of child 1
Child of child 1 content
Child 2
Child 1 of child 2
Child 1 of child 1 content
Child 2 of child 2
Child 2 of child 2 content
Child 3 of child 2
Child 3 of child 2 content
Child 3
Child 3 content
[html]<style>
.indent50 {padding-left: 50px}
.ita {font-style: italic}
</style>[/html]

Toutes ces améliorations devraient être incluses par l’auteur dans une future version de son plug-in.

En attendant, vous pouvez télécharger la version modifiée (55 Ko).

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.