Accueil Boite à Outils Aide SPIP Ecrire ce qu’on veut dans SPIP

Publié le : 21 décembre 2005
Imprimer Imprimer cet article

Auteur :
Alain Sichel

Alain Sichel
Ecrire ce qu’on veut dans SPIP

SPIP est remarquable pour nous simplifier la mise en forme des articles dans la plupart des cas [1].

SPIP donne cependant quelques difficultés pour afficher certains éléments d’un article, ce qui nécessite alors quelques astuces... c’est ce que nous allons voir dans cet article.

Astuces simples

- Utiliser du HTML :

SPIP reconnaît les balises HTML. Si vous connaissez ces balises, il devient alors facile d’écrire sous cette forme ce que l’on veut obtenir, par exemple <html><br /></html> pour obtenir un retour à la ligne. On peut aussi souvent se passer des balises <html> </html> qui servent à indiquer à SPIP qu’il s’agit de code HTML, ainsi <br /> est le plus souvent reconnu (en fait, c’est moins évident pour les autres champs que "Texte" et pour les notes en bas de page).

Ainsi le bouton "Sélectionner le code pour le copier" de La syndication de contenu RSS est réalisé par du code HTML, de même que la présentation du menu de navigation de Menu de navigation sans JavaScript :

  

Parfois, il faut associer plusieurs choses pour obtenir le résultat désiré. Ainsi, si je veux indiquer que je suis l’auteur d’une brève, avec mon nom aligné à droite, je peux utiliser <html><p align="right">Alain Sichel</p></html> je peux aussi faire un lien vers ma page de présentation [Alain Sichel->118] mais si je veux faire les deux, pour que le lien soit reconnu par SPIP, il faut supprimer les balises <html> </html> et noter <p align="right">[Alain Sichel->118]</p>

- Affichage de caractères interdits :

Comment fait-on pour afficher le caractère { ou } puisque celui-ci va être interprété par SPIP qui va le faire disparaître et mettre le texte encadré par les accolades en italique. Il faut pour cela indiquer que l’on présente dans son article du code et utiliser <code> </code> pour encadrer les accolades ou tout autre caractère qui ne doit pas être interprété.

Dans le paragraphe précédent, comment ai-je pu écrire <code> </code> ? Essayez-donc pour voir, si vous ne trouvez pas, la solution en bas de page [2].

La plupart des caractères spéciaux sont transformés par SPIP, ainsi, &#8217 ; devient ’
Mais alors, si on a besoin d’expliquer du code, comment éviter cette transformation ? Dans le texte, c’est simple, il suffit d’écrire &#<span>8217;</span>
S’il s’agit de code présenté entre les balises <code> </code> c’est moins évident [3] :

function nettoie($text) {
        $avant = array('\\','&#8217 ;','′','&rsquo;','&bull;');
        $apres = array('',"'","'","'",'- ');
        $text = str_replace($avant, $apres, trim($text));
        return $text;
}

Pour le moment je n’ai pas trouvé mieux que de mettre une espace avant le ; pour éviter la transformation du caractère. Si quelqu’un a une meilleure idée, je suis preneur.

L’article Astuce pour les images fréquemment utilisées donne des exemples de l’utilisation de smileys dans les articles, mais comment faire pour indiquer la combinaison de caractères puisque celle-ci est remplacée par l’image du smiley correspondant ? Il faut donc ruser pour que la combinaison ne soit pas reconnue en intercalant des balises HTML, par exemple en écrivant dans l’article <span>:-</span>)

Astuces avec modification des CSS

Dans certains cas, il peut être utile de modifier la feuille de style principale du site :

- Affichage de couleurs :

On peut bien sûr coder la couleur d’une police en HTML avec par exemple <font color="#6600FF">... </font>, mais ce serait dommage quand on a une feuille de style. Par exemple, l’article Utilisation de la classe easyRSS montre le code d’un script colorisé à la façon de Dreamweaver. Pour cela, j’ai ajouté à la feuille de style :

.bleu {
        color:#0000ff;
        background-color: transparent;
}
.vert {
        color: #009900;
        background-color: transparent;
}
.rouge {
        color: #ff0000;
        background-color: transparent;
}
.orange {
        color: #ff6600;
        background-color: transparent;
}

l’écriture de l’article se faisant par exemple avec :

<span class="bleu">include(</span><span class="rouge">'easyRSS.inc.php'</span><span class="bleu">)</span>;<br>

c’est du HTML, donc c’est parfaitement compris par SPIP qui affiche les couleurs demandées.

- Mise en forme du texte :

En HTML, le texte encadré par les balises <pre> et </pre> est affiché tel quel en respectant les espaces et les retours chariot. Par exemple, voici le début d’une lettre :

<pre>                                Élancourt, le 28 Décembre 2004

                                              MACSF
                                          20, rue Brunel
                                        75856 PARIS Cedex 17<pre>

Voici donc une façon simple d’afficher du texte en respectant sa disposition, sauf que si on ne fait que cela, le plus souvent ce texte sera présenté avec une police non proportionnelle, différente de celle utilisée pour le reste de l’article. Pour supprimer cette différence, voici comment modifier la feuille de style :

body, pre {
font-family : Verdana, Arial, Helvetica;
color : #404040;
font-size : 12px;
}

on reprend les caractéristiques choisies pour l’ensemble du texte (indiqué pour body), dans cet exemple on reprend le choix d’affichage pour le site des MMT, et on ajoute pre pour qu’il s’affiche de la même façon.

Conclusion provisoire

Cet article n’indique pour le moment que quelques astuces. Il sera repris et complété avec d’autres exemples.

 

[1] Voir l’Aide de SPIP et dans l’interface de rédaction et les articles destinés aux nouveaux rédacteurs (Accès réservé aux rédacteurs du site).
On peut quand même espérer qu’une prochaine version soit plus conviviale,
- en ne limitant plus les boutons de mise en forme pour MacOS à Firefox,
- et en permettant de convertir le texte d’un document Word sans être obligé d’avoir besoin d’une macro ou de SpipEdit.

[2] Une solution : <code><code> </code</code>> pas évident, parce que dès que SPIP lit </code> pour lui c’est la fin de la partie "code" et il ne regarde pas ce qu’il y a après.

[3] Cet exemple vient de Editer plusieurs fichiers de syndication 3/3, ici le code est encadré par deux "pipes" | ce qui donne cet encadré sur fond gris, car pour SPIP, c’est la première ligne d’un tableau.




Cliquez ici pour réagir à cet article

 Imprimer Imprimer cet article