Introduction

Comme décrit dans l’article La structure des noisettes de Sarka-SPIP, les pipelines permettent d’injecter des affichages spécifiques à des endroits prédéfinis du squelette. On distingue principalement trois types de pipelines :

• ceux qui insèrent du code dans le bandeau et le pied
• ceux qui ajoutent des noisettes aux colonnes
• celui qui permet d’ajouter des boutons au menu des pages spéciales.

Cet article donne un aperçu de la mise en œuvre de chacun de ces types de pipelines.

Personnaliser le pied de page

Le but de cet exemple est de rajouter une ou plusieurs lignes au début du pied de page, avant les lignes copyright et outils du squelette. On utilise donc le pipeline _PERSO_PIED_DEBUT, dans lequel on va injecter le fichier de code perso/inc_maxime.html.

La première étape consiste à rajouter le code suivant dans le fichier config/mes_options.php :

define('_PERSO_PIED_DEBUT', 'perso/inc_maxime');

La deuxième étape consiste ensuite à créer le fichier inc_maxime.html dans le dossier squelettes/perso/. La dernière version du plugin Skeleditor permet de réaliser cette opération directement via l’interface privée du site. Sinon, un éditeur de code et un client FTP font toujours l’affaire.

On choisit une petite maxime de Victor Hugo pour agrémenter le pied de page :

[(#REM) <!-- Noisette perso du pied --> ]
<div id="maxime" style="margin-bottom: 5px;">Les mots sont les passants de l'&acirc;me</div>

On obtient alors un pied de page personnalisé comme illustré ci-dessous :

Ajouter une noisette en haut de la colonne « Extra »

Cette fois, le but de cet exemple est de rajouter une noisette standard en haut de la colonne « Extra ». On utilise donc le pipeline _PERSO_COLONNE_EXTRA_DEBUT, dans lequel on va injecter le fichier de code perso/inc_traduction.html.

La première étape consiste toujours à rajouter le code suivant dans le fichier config/mes_options.php :

define('_PERSO_COLONNE_EXTRA_DEBUT', 'perso/inc_traduction');

La deuxième étape consiste encore à créer le fichier inc_traduction.html dans le dossier squelettes/perso/.

Cette fois on va utiliser la structure standard des noisettes de Sarka-SPIP décrite dans l’article La structure des noisettes de Sarka-SPIP pour créer un bloc de traduction issu d’un script de Google :

[(#REM) <!-- Noisette perso de traduction Google --> ]
<div id="noisette_traduction" class="noisette">
	<h1 class="intitule"><:sarkaspip:titre_traduction:></h1>
	<div class="contenu">
		<div class="texte">
			<div id="google_translate_element"></div>
		</div>
	</div>
</div>

[(#REM) <!-- Scripts Google --> ]
<script type="text/javascript">
//<![CDATA[ 
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'fr'
  }, 'google_translate_element');
}
//]]>
</script>
<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
//<![CDATA[ 
//]]>
</script>

[(#REM) <!-- Ajustement de la taille de la police du select --> ]
<script type='text/javascript'>
//<![CDATA[ 
	jQuery(document).ready(function() {
		jQuery('select.goog-te-combo').css('font-size', '1.1em');
	});
//]]>
</script>

Pour parfaire l’affichage, il est nécessaire de créer un item de langue <:sarkaspip:titre_traduction:> dans le fichier lang/local_fr.php. On obtient alors une colonne personnalisée comme illustrée ci-dessous dans une configuration de site en layout 18 :

Ajouter une entrée au menu des pages spéciales

Ce dernier exemple a pour but de rajouter une entrée en fin du menu des pages spéciales. C’est aujourd’hui le seul menu qui autorise ce type d’opération. On utilise donc le pipeline _PERSO_MENU_PAGES_SPECIALES_FIN, dans lequel on va injecter le fichier de code perso/inc_menu.html.

La première étape consiste à rajouter le code suivant dans le fichier config/mes_options.php :

define('_PERSO_MENU_PAGES_SPECIALES_FIN', 'perso/inc_menu');

La deuxième étape consiste bien entendu à créer le fichier inc_menu.html dans le dossier squelettes/perso/.

On va donc ajouter une entrée de menu nommée « Documentation SPIP » permettant de nous renvoyer vers le site de SPIP.net. Le plus important dans ce cas est de suivre la logique de construction de menu qui est assez compliquée car elle nécessite d’utiliser les bons CSS mais aussi les paramètres d’environnement du pipeline :

[(#REM) <!-- Nouvelle entree dans le menu des pages speciales --> ]
<li[ class="(#ENV{classe_li})"]>
	<a[(#ENV{position}|=={bandeau_bas}|oui)[ id="mh_n(#ENV{no_menu})"]] href="http://www.sarka-spip.net/"><:sarkaspip:doc_spip:></a>
</li>

[(#REM) <!-- On incremente le numero de l'entree. Necessaire apres chaque entree supplementaire --> ]
#SET{no_menu, #GET{no_menu}|plus{1}}

Pour parfaire l’affichage, il est nécessaire de créer un item de langue <:sarkaspip:doc_spip:> dans le fichier lang/local_fr.php. On obtient alors un menu des pages spéciales avec une entrée supplémentaire comme illustré ci-dessous qui peut aussi s’afficher dans le bandeau de façon parfaite :

Diagnostiquer et corriger les erreurs

Ce type de personnalisation n’est pas anodine. Elle demande de connaître un minimum de rudiments de codage HTML/CSS ainsi que la structure d’un fichier PHP pour créer config/mes_options.php.

Certaines erreurs de syntaxe pourront être diagnostiquées par SPIP lors de la compilation. Par contre, si vous vous trompez dans la référence du fichier injecté, le squelette vous affichera un message d’erreur avertissant que le fichier est introuvable [1].