Usages avancés dans spip publié le 07/02/2019  - mis à jour le 04/01/2021

Des fonctionnalités supplémentaires

Article destiné aux webmestres ainsi qu’aux rédacteurs soucieux d’approfondir les possibilités offertes par le squelette académique.

Adresses électroniques

Utiliser le logiciel de courrier du client

Sélectionner votre texte et cliquer sur le bouton de la barre typographique de spip indiqué sur l’illustration ci-dessous (il suffit ensuite de copier-coller l’adresse électronique dans le champ de la boîte d’invite qui s’ouvre) :
Bouton spip "faire un lien"

Résultat :

Adresses électroniques
Partie privée Partie publique
 Ecrire au [webmaster->webmaster@ac-poitiers.fr]   Ecrire au webmaster 

 

Utiliser le formulaire de SPIP

Vous pouvez souhaiter ne pas faire apparaître "en dur" les adresses électroniques que vous insérez dans vos articles (pour éviter le SPAM par exemple) ou bien encore, vous souhaitez que l’internaute puisse écrire à cette adresse même si son ordinateur est dépourvu de logiciels de courrier actifs.
Il suffit pour cela d’utiliser la syntaxe ci-dessous pour que le clic sur le lien inséré renvoie automatiquement vers un formulaire qui se charge de reconstruire l’adresse en ac-poitiers.fr

Attention : uniquement valable pour les adresses en ac-poitiers.fr

Exemples :
pour pouvoir écrire à "cyrano.bergerac@ac-poitiers.fr", deux formules possibles :

  • 1. utiliser les éléments nominatifs de l’adresse
    • Pour obtenir :
      Vous pouvez écrire à cyrano.bergerac
    • Écrire :
      Vous pouvez écrire à <mail|m=cyrano.bergerac>

 Spip reconstruit l’adresse en ac-poitiers (attention, le point entre le nom et le prénom est impératif).

 

  • 2. utiliser une alternative textuel  :
    • Pour obtenir :
      Vous pouvez écrire à Monsieur Cyrano de Bergerac
    • Écrire :
      Vous pouvez écrire à <mail|m=Cyrano.Bergerac|t=Monsieur Cyrano de Bergerac>

Explications :
m indique l’élément de l’adresse mél qui vient se placer devant @ac-poitiers.fr
t vous permet de remplacer cet élément pour l’affichage public par le texte de votre choix
| sépare les éléments (cet élément "pipe" s’obtient en appuyant simultanément sur Alt Gr et la touche 6 de votre clavier)


Référencer un site

En utilisant le bouton "Référencer un site", vous créez un lien vers un site avec son titre et son descriptif, voire avec l’indication Logo rss 1 si le site possède un fil rss valide.
Ce lien est non seulement présent dans la rubrique où il a été créé mais il remonte dynamiquement en page d’accueil pour s’insérer dans le cartouche droit "Derniers sites référencés" (le plus récent poussant le site le plus ancien).

Bouton "Référencer un site"

Bouton SPIP "Référencer un site"

Fenêtre "Référencer un site"

Fenêtre SPIP "Référencer un site"

Derniers sites référencés

Si les sites référencés "remontent" automatiquement en page d’accueil, il est possible de choisir et de "figer" les 2 premiers de la liste (fonction uniquement accessible aux webmestres).
Pour cela, il suffit d’éditer le widget "Derniers sites référencés", puis d’y saisir dans le champ dédié les numéros (dans l’ordre d’affichage attendu) des sites concernés tout en les séparant par une virgule :

Derniers sites référencés

 Le lien créé (2 au maximum) s’affiche en tête du cartouche "Derniers sites référencés" de la page d’accueil et n’est pas affecté par la création des autres liens référencés du site.

Cartouche "Derniers sites référencés"

Redirection depuis une rubrique

Si vous souhaitez rediriger une rubrique2 vers l’adresse de votre choix, ajoutez simplement (sans espace, sans retour chariot) l’URL de redirection derrière un caractère "=" dans le champ "Texte explicatif" de la rubrique.

Redirection de rubrique

 Pour une redirection vers un article ou une rubrique de son propre site, il suffit d’utiliser un lien relatif derrière le caractère "=" :
=articleXX pour un article ;
=rubriqueXX pour une rubrique.

Redirection depuis un article

Vers la page d’un autre site :

  • Créer l’article dans la rubrique de votre choix en utilisant simplement le titre et le descriptif3 puis enregistrer.
  • Saisir dans l’encadré gauche "REDIRECTION", l’adresse du site vers lequel rediriger cet article.

Boite spip "redirection"

  • En copiant une URL dans ce champ, l’article s’ouvrira sur la fenêtre de destination de cette adresse.

Vers une page de votre site :

Lorsque vous souhaitez par exemple proposer un article dans deux rubriques distinctes sans avoir à réécrire l’article, il suffit de rediriger le 2ème vers le 1er en créant "une redirection".

  • Créer "l’article 2" dans la rubrique de votre choix en utilisant simplement les mêmes titre et descriptif que l’article 1 puis enregistrer.
  • Saisir dans l’encadré gauche "REDIRECTION", le numéro de l’article vers lequel rediriger.
Boîte SPIP "Redirection"

Exemple : si je souhaite proposer une redirection vers l’article 42 de mon site dont l’adresse est :
https://ww2.ac-poitiers.fr/guide/spip.php?article42
J’utiliserai alors simplement 42 ou article42 (sans espace).

  • Cliquer sur le bouton "Changer" pour enregistrer la redirection.
  • Attribuer le mot clé "static" à cet article pour éviter qu’il remonte dans les actualités du site.

Pagination d’un article

Pour paginer un article, il suffit de saisir dans l’article, là où on veut découper la page, 5 tirets de suite. Ce raccourci est alors interprété par spip comme un saut de page et une numérotation automatique apparaît au pied de l’article4.
Veillez à bien laisser un espace au-dessus et au-dessous de votre instruction.
(Remarque : ne pas confondre avec le trait de séparation qui lui comporte 4 tirets successifs)

Pagination d'un article

 Nota bene : paginer un article long, permet de maintenir en permanence l’accès aux éléments connexes de l’article : sommaire, impression, liens complémentaires et articles de la même rubrique.
La pagination ne s’effectue pas de façon arithmétique mais s’appuie au contraire sur des regroupements thématiques. Dans cet esprit, l’utilisation d’intertitres (titres de chapitres) favorisera le découpage et optimisera la navigation (via le cartouche "Sommaire de l’article").

 Conseil : lorsqu’un article est paginé, il peut être intéressant -à la fin de chacune des pages- d’annoncer le thème traité dans la page suivante (c’est une façon de maintenir l’attention et l’intérêt du lecteur). Le problème c’est qu’en consultant l’article en mode non-paginé (ainsi que dans sa version pdf) ces éléments de communication deviennent superflus.
Aussi et pour tenir compte de ce point, la balise nota permet d’encadrer un bloc texte que l’on souhaite supprimer lorsque l’article est visualisé en mode non-paginé.
Exemple : Si je souhaite indiquer "Page suivante : mise en oeuvre du projet" et que ce texte disparaisse lors de l’affichage non-paginé de l’article, j’utiliserai la syntaxe suivante :

Exemple utilisation balise "nota"

 


Ancres

Une ancre est un repère qui sert de cible à un lien dans une même page web.

Comme vu dans l’article "Usages de base", les liens sont automatiquement interprétés par le raccourci "crochet" ([).

En html l’ancre dispose d’un code : "#". Sous spip aussi.

La première étape consiste donc à créer cette ancre cible. Elle sera totalement invisible dans le texte web.
 Syntaxe de l’ancre : [nom_ancre<-]

 Le lien qui pointera vers cette cible dans la même page est classique :
[Lorem ipsum dolor sit amet->#nom_ancre]

 ATTENTION : si l’ancre est placée sur une autre page de votre article, il faut alors insérer l’adresse relative de la page avant le nom de l’ancre :
[Lorem ipsum dolor sit amet->spip.php?article45&debut_page=3#mon_texte]

 


Liens complémentaires de l’article

Il est possible de placer dans le cartouche droit d’un article, une liste de liens complémentaires (cela permet d’enrichir l’expérience du lecteur en lui proposant des sites extérieurs traitant du thème abordé dans l’article).
Pour ce faire, dresser la liste de ces liens au bas de l’article en faisant précéder celle-ci des 5 caractères suivants :
Pour créer le bloc "liens complémentaires"

Ainsi, pour afficher 2 liens dans la boîte "Liens complémentaires" comme le propose l’image ci-dessous, il suffit d’afficher à la toute fin de l’article, la syntaxe suivante :

Pour créer le bloc "liens complémentaires"

[Le BO du 27 avril 2015 qui reprécise les modalités d’attribution de l’indemnité et les missions du RUPN->http://www.education.gouv.fr/pid25535/bulletin_officiel.html?cid_bo=87297]
[Bilan annuel des RUPN de l’académie, année 2017/2018->https://ww2.ac-poitiers.fr/matice/spip.php?article783]
Les liens complémentaires

 

Liens recommandés de la rubrique

Comme pour les articles, il est possible de référencer des sites dans un cartouche dédié, à droite de la page (dans le cas contraire, les sites référencés apparaîtront dans le pied de la rubrique).
Il suffit d’afficher le site référencé concerné dans l’espace privé du site puis de repérer dans la colonne de gauche la boîte intitulée "OPTIONS" :

Lien recommandé dans une rubrique
  1. cocher la case "Site dans le cartouche "Liens recommandés" de la rubrique"
  2. puis cliquer sur le bouton "Valider" pour mettre en œuvre le nouvel affichage.

Lien sur une image

Prenons l’exemple d’images désignées comme suit dans un article : <img255>

Pour créer un lien sur l’image, il suffit :

  • d’insérer la balise image dans le texte ;
  • de la sélectionner ;
  • de cliquer sur le bouton "faire un lien" de la barre d’outils SPIP ;
  • de coller l’URL dans le champ prévu à cet effet.


 Ainsi, pour afficher l’exemple ci-contre (écureuil spip), la syntaxe suivante sera utilisée :
[<img255|right>->http://www.spip.net/]

Remarque : vous pouvez aussi appliquer la syntaxe ci-dessous :
<img255|lien=http://www.spip.net/>

Attention : les liens sur les images sont à utiliser avec parcimonie et uniquement dans des situations "convenues" et explicites (par exemple un lien sur le logo d’une entreprise où le lien conduit au site de l’entreprise). Ils ne devront pas être utilisés pour proposer un "modèle graphique" de navigation.

 


 

Ouvrir une image ou une animation (flash, ggb...) dans une pop-up

Pour illustrer un mot ou un groupe de mots avec une image (de type "vignette") s’ouvrant avec un effet "thickbox" :

  • Télécharger l’image de son choix ;
  • Compléter le titre de l’encadré propre à l’image téléchargée (dans le cas contraire, c’est le nom du fichier qui serait utilisé).
    Ce titre sera le texte cliquable de votre phrase ;
    Insertion du titre de l'image

 

  • Insérer la balise SPIP de l’image dans le paragraphe où l’on souhaite positionner le lien5 ;
    Insérer la balise"img"

 

  • Ajouter "pop" dans cette balise entre "img" et "le numéro de téléchargement" ;
    Insérer la balise "pop"
  • Enregistrer ;
  • Vérifier en ligne.
Cliquer sur le lien...
Ouverture de la popup

Exemple d’image pop-up

cliquer sur le lien proposé dans l’exemple
  • Il faut écrire :
    Voir un <imgpop255> (jpg)
    <imgpop255> est l’image qui a été téléchargée et dont le titre choisi est : "Écureuil SPIP"

 Dans le même esprit, il est possible d’insérer sur un texte cliquable une animation swf (Flash), une construction GeoGebra (.ggb)...

L’extension du fichier proposé en pop-up devra toujours être indiquée derrière le lien (jpg dans l’exemple précédent.)


Cadre, cadre "couleur" et cadre "rouge"

Avertissement :
Spip est un éditeur de sens. Le formatage italique, gras, intertitre, section, permettent de donner du relief au texte au plan sémantique. Ce principe est indispensable et incontournable pour la « visibilité » et « l’accessibilité » des pages sur le web.
En revanche, les cadres "rouge" et "couleur" ci-dessous n’apportent au texte qu’une simple variation graphique. Ce formatage n’aura aucune incidence sur le référencement des pages et ne sera pas visible sur des navigateurs non-graphiques.
Aussi, ils devront être utilisés avec la plus grande prudence ainsi qu’avec PARCIMONIE.

Encadrer un texte

  • Pour isoler un morceau de paragraphe et en faciliter le copier-coller, on peut le placer entre les balises <cadre></cadre> :
  • Ainsi, pour afficher :
  • Il faut écrire :
    <cadre>ceci est mon paragraphe que je souhaite encadrer</cadre>

 Si le paragraphe est plus important que le cadre, un ascenseur se positionnera automatiquement à droite de ce dernier.

 

Le cadre couleur

  • Utilisant un dégradé de la couleur C1, le "cadre couleur" permet de mettre graphiquement en exergue une ligne ou un paragraphe très court.
  • Ainsi, pour afficher :
ceci est mon texte que je veux encadrer avec la balise "couleur"
  • Il faut sélectionner le paragraphe que l’on souhaite encadrer et cliquer sur le bouton "cadre couleur" de la barre typographique de spip.
    Bouton spip "cadre couleur"


    La balise <couleur> encadre alors le texte.

Le cadre rouge

  • Le "cadre rouge" permet de souligner graphiquement un avertissement.
  • Ainsi, pour afficher :
ceci est mon texte que je veux encadrer avec le "cadre rouge"
  • Il faut sélectionner le paragraphe que l’on souhaite encadrer et cliquer sur le bouton "cadre rouge" de la barre typographique de spip.
    Bouton spip "cadre rouge"

    La balise <rouge> encadre alors le texte.


Code informatique

Pour transmettre du code informatique sans qu’il soit interprété par spip, les balises balise spip "code" seront indispensables.

(1) Un flux RSS est un fichier dont le contenu est produit automatiquement en fonction des mises à jour d’un site Web. Les flux RSS sont souvent utilisés [...] pour présenter les titres des dernières informations consultables en ligne. cf. Wikipédia

(2) Pour que cette rubrique soit visible sur la partie publique, celle-ci doit comporter un article publié auquel il faudra appliquer le mot clé static.

(3) Dans le descriptif, vous préciserez toujours le nom du site pointé

(4) L’internaute peut consulter un article paginé sur une seule page en cliquant sur le lien "Sur une seule page" du bandeau de pagination dans le pied de l’article.

(5) les éléments de positionnement dans la balise n’ont pas d’incidence et peuvent être conservés.