Cette contribution est une généralisation à plusieurs titres de celle d’Aurélien Pierard : Des couleurs dans le texte.
La solution proposée ici est plus générale, inutile de modifier le code du filtre si on désire de nouvelles couleurs, les changer ou en ajouter. Les propriétés sont définies grâce à une feuille de style. À partir de là rien n’empêche d’aller plus loin et d’utiliser ce filtre pour obtenir du gris souligné ou du bleu sur fond jaune...
Deux solutions sont proposées, filtre classique ou plugin ainsi qu’un moyen d’assurer la compatibilité ascendante avec le filtre |couleur proposé dans la contrib inspiratrice si vous l’utilisez.
Solution Filtre
Installation
Copier coller le code suivant dans votre fichier mes_fonctions.php (le créer s’il n’existe pas et le placer dans le dossier « squelettes » - lui aussi à créer à la racine s’il n’existe pas -)
/** filtre de colorisation du texte |couleurs_spip **/
function couleurs_spip($letexte) {
$letexte = preg_replace('<span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+Jmx0O2NzXyguKikmZ3Q7KC4qKSZsdDsvY3NfXDEmZ3Q7PC9jb2RlPg=="></span>iU', '<span class="cs_$1">$2</span>', $letexte);
return $letexte;
}Dans les squelettes ce nouveau filtre |couleurs_spip peut être utilisé comme tous les autres filtres de SPIP. Exemple [(#TEXTE|couleurs_spip)] ou [(#CHAPO|couleurs_spip)] (Pas pour #INTRODUCTION puisque c’est une balise calculée).
D’autre part il faut dans une feuille de style appelée sur chaque page (celle de SPIP par exemple) définir des styles de classe dont le nom doit commencer par « cs_ » et s’appliquant à des éléments de type span. Ci-dessous, à titre indicatif, en voici une dizaine basée sur les codes couleur des résistances, elles-même reprenant celles de l’arc en ciel - du moins admises comme telles
/* couleurs_spip */
span.cs_noir {color: black; }
span.cs_marron {color: maroon; }
span.cs_rouge {color: red; }
span.cs_orange {color: orange; }
span.cs_jaune {color: yellow; }
span.cs_vert {color: green; }
span.cs_bleu {color: blue; }
span.cs_violet {color: purple; }
span.cs_gris {color: gray; }
span.cs_blanc {color: white; }Utilisation
Dans le texte des articles il suffit alors d’entourer le texte à colorier par <cs_rouge>le texte à mettre en rouge</cs_rouge>. C’est tout(respectivement <cs_vert>texte en vert</cs_vert> pour du texte à mettre en vert)
Maintenant on peut aller plus loin, par exemple si le style span.cs_rouge est défini dans la feuille de style :
span.cs_rouge {
color: red;
background-color: silver; }le texte sera en rouge sur fond gris clair. Il est donc possible de définir ainsi des styles pour des parties de texte (gras, italique et souligné par exemple, après tout est une affaire de goût). Si le webmestre veut faire évoluer les styles et varier les couleurs, il lui suffit de modifier la feuille de style. Si on retire le filtre les balises <cs_xxx>...</cs_xxx> seront toujours présentes dans le texte mais non prises en compte et invisibles.
Avantages et inconvénients
La solution filtre permet de maîtriser très précisément les champs où on désire que la colorisation soit prise en compte (#TEXTE, #CHAPO,…). Ceci permet d’éviter un site trop « bariolé ». Les inconvénients sont qu’il faut installer le filtre |couleurs_spip dans les squelettes pour les balises en question, et surtout que l’on ne bénéficie pas dans l’interface privée de l’aperçu « colorisé » des articles. Il faut publier ceux-ci pour que l’effet soit visible dans la partie publique.
Version Plugin
Transformé en plugin deux améliorations sont apportées : il n’y a plus de filtre à mettre dans les squelettes, et surtout l’on dispose d’un aperçu colorisé des articles dans la partie privée.
Le plugin (voir le code du fichier plugin.xml), très simple, se contente d’activer le traitement de la fonction couleurs_spip dans le post-traitement typographique des balises, d’insérer le lien vers la feuille de style contenant les style cs_xxx dans l’entête méta de la partie privée et de la partie publique.
Mise en oeuvre
L’installation se réalise comme tous les autres plugins, cf. http://www.spip.net/fr_article3396.html
Ne pas oublier de rajouter la balise #INSERT_HEAD dans la partie <head> de vos squelettes si elle n’est pas déjà présente, pour permettre l’insertion automatique du lien vers la feuille de style. Une fois activé, la fonctionnalité est immédiatement disponible. Pour rajouter ou modifier des styles, il suffit de le faire dans le fichier couleurs_spip.css se trouvant dans le dossier du plugin du même nom.
La mise en oeuvre côté rédacteur est identique à celle décrite pour le filtre (<cs_rouge>le texte à mettre en rouge</cs_rouge>).
On peut à présent mettre de la couleur et des styles span partout - même les titres - ce qui suivant les sites, les webmestre et les goûts sera jugé soit comme un avantage soit comme un inconvénient...
Notes :
- Ce dernier point peut être restreint par l’utilisation de sélecteur css. Si on ne désire pas que la colorisation soit opérationnelle dans les titres des articles et seulement dans le texte de ceux-ci par exemple il suffit de définir par exemple le style « p.spip span.cs_rouge color : red ; » pour que celui-ci ne s’applique qu’aux span contenu dans les paragraphes de la classe spip.
- Il n’est pas possible d’imbriquer les balises les unes dans les autres. <cs_vert>texte en <cs_rouge>texte en vert</cs_rouge>vert</cs_vert> ne sera pas interprété, seul le texte en vert sera affiché. Il convient de fermer une balise avant d’en ouvrir une autre.
Compatilité ascendante
Si vous utilisez déjà la contrib d’Aurélien Pierard et le filtre |couleur, il suffit de remplacer tout le code de la fonction couleur existante dans le fichier mes_fonctions.php par les lignes suivantes :
function couleur($letexte) {
$letexte = preg_replace('<span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+Jmx0O2NzXyguKikmZ3Q7KC4qKSZsdDsvY3NfXDEmZ3Q7PC9jb2RlPg=="></span>iU', '<span class="cs_$1">$2</span>', $letexte);
$letexte = preg_replace('<span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+XFsoKC4qKSA/KC4qKSlcXSguKilcWy9cMVxdPC9jb2RlPg=="></span>iU', '<span class="cs_$1">$4</span>', $letexte);
$letexte = preg_replace('<span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+Jmx0O3NwYW4gY2xhc3M9JnF1b3Q7Y3NfKFswLTlhLXpBLVpfXSopICsoWzAtOWEtekEtWl9dKikmcXVvdDsmZ3Q7PC9jb2RlPg=="></span>iU', '<span class="cs_$1_$2">', $letexte);
return $letexte;
}Ne pas oublier de créer une feuille de style (ou d’ajouter dans une feuille de style) tous les styles de type span.cs_xxxx correspondant aux couleurs que vous avez déjà utilisées ou redéfinies (pour les couleurs du type « vert clair » il faut créer le code cs_vert_clair). En fichier joint une feuille de style compatible reprenant tous les styles de l’ancien filtre est proposée.
Si vous désirez remplacer le filtre |couleur par le plugin couleurs_spip, il faut faire la même modification dans le fichier couleurs_spip.php du plugin sans modifier le nom de la fonction couleursspip_definirspan et supprimer de vos squelettes le filtre |couleur.
Dans les deux cas les textes existants n’auront pas besoin d’être modifiés et vous pourrez continuer à utiliser l’un ou l’autre des systèmes de balises proposés (cs_couleur ou [couleur]).
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires :
|
