Comment faire un squelette facile à installer...

Avec la version 1.8.2 de SPIP il devient plus simple de faire des squelettes facile à installer (et à diffuser surtout!) si on a en tête un schéma d’organisation clair.

Préambule

Cet article ne prétend pas fournir un schéma parfait. Vos commentaires nous aideront à l’améliorer, il va donc évoluer grâce à vous, tenez-en compte à la lecture ;-)

la balise #DOSSIER_SQUELETTE

La balise #DOSSIER_SQUELETTE est une nouveauté de spip 1.8.2 (cf. «SPIP 1.8.2» sur spip.net).

Dans les squelettes spip, les liens vers la feuille de style ou les images doivent être définis depuis la racine du site, ce qui obligeait jusqu’a présent à mettre le nom du répertoire du squelette “en dur” dans le code html, par exemple un appel à la feuille de style mes_styles.css placée dans le répertoire mon_squelette/css se faisait de la façon suivante :
<link href="mon_squelette/css/mes_style.css"... />

La balise #DOSSIER_SQUELETTE sert à remplacer cette écriture du nom de dossier afin de rendre les squelettes faciles à diffuser, ainsi on écrira maintenant :
<link href="#DOSSIER_SQUELETTE/css/mes_style.css"... />

et le résultat sera le même (voir plus loin comment définir le dossier des squelettes).

Pour continuer sur la feuille de style, n’oubliez pas d’indiquer dedans le chemin vers les images éventuellement utilisées (fond de page, puces...) de façon “relative”.

Dans un dossier squelettes ainsi structuré :

mon_squelette
        css
          mes styles.css
        images
          fond.png
        article.html
        rubrique.html
        [...autres fichiers...]

On n’aura qu’à écrire dans le fichier mes-styles.css l’appel à l’image de fond de cette façon :

body {
 background-image: url(../images/fond.png);
}

Ainsi, peu importe le nom du dossier squelette, si un fichier squelette peut retrouver le chemin de sa feuille de style (via #DOSSIER_SQUELETTE), la feuille de style, elle, retrouvera toujours son image.

le fichier page.php3

Le fichier «page.php3», à la racine du site, est un appel de squelette, dont le $fond n’est pas défini; ce fond peut donc être passé en URL d’appel. Ainsi on peut utiliser ce fichier pour tous les squelettes qui n’ont pas de fichier d’appel en propre (comme “article.php3” pour les articles, etc.).

Par exemple, au lieu de créer un fichier galerie.php3 à la racine du site spip, on placera le lien suivant dans les fichiers html : page.php3?fond=galerie et on aura le fichier galerie.html bien rangé dans le dossier mon_squelette.

Le système marche également pour tous les fichiers inclus, ainsi <INCLURE(galerie.php3){id_article}> devient <INCLURE(page.php3){fond=galerie}{id_article}> et permet au webmaster de ne pas créer le fichier galerie.php3.

Notez que l’on ne peut pas appeler un $fond qui se trouverait dans un sous-répertoire du dossier de squelettes.

le dossier squelettes

Spip va chercher les squelettes dans le dossier nommé squelettes (attention au s final), s’il ne trouve rien il cherche à la racine du site, puis dans le répertoire dist

On peut également nommer son répertoire de squelettes comme on veut si on le signale à spip dans le fichier mes_fonctions.php3 :

$GLOBALS[ 'dossier_squelettes' ] = "mon_squelette" ;

(cf. l’article de spip.net à ce propos).

Attention!

Comme on peut placer le fichier mes_fonctions.php3 dans le dossier de son squelette, nous vous conseillons plutôt de définir évidement $dossier_squelettes dans ecrire/mes_options.php3. Ainsi, on peut fournir un squelette avec une architecture plate (i.e. un seul niveau de répertoire).

(cf. «Les variables de personnalisation»).

Notre objectif est de mettre tous les fichiers nécessaires au fonctionnement du site dans un même répertoire. Ainsi il sera très facile de partager vos squelettes avec d’autres personnes et d’autres sites.

On y met donc :

  • tous les fichiers html des squelettes;
  • les formulaires modifiés;
  • le ou les feuilles de styles;
  • le ou les fichiers javascripts;
  • les images des squelettes;
  • le ou les fichiers de langues persos (cf. «Internationaliser ses squelettes, méthode des fichiers de langues).

Remarque sur les fichiers inclus
Les fichiers inclus dans les squelettes peuvent aussi être dans ce répertoire, ainsi que leur fichier php3 correspondant. La «norme» adopté par de nombreux contributeurs est de nommer leurs fichiers inclus inc-truc, on a ainsi dans le dossier des squelettes les couples inc-truc.php3 et inc-truc.html et ces fichiers sont appelés dans les squelettes via le code : <INCLURE(inc-truc.php3){parametre}>.

On peut également les mettre dans des sous répertoire si on précise le chemin d’accès dans le fichier d’appel php3 (ça complique un peu, mais pour les fanas du rangement autant le préciser) .
Exemple :
Tous mes fichiers inclus sont dans un sous-dossier inclusions, mes php3 sont dans le même dossier et de la forme:

<?php
$fond = "inclusions/nom_du_fichier";
$delais = 24 * 3600;
include ("inc-public.php3");
?>

On peut aussi utiliser le fichier page.php3 évoqué plus haut.

les fichiers fond_fonctions.php3

Il est possible de gérer mes_fonctions.php3 via des squelettes nommés fond_fonctions.php3, ou fond correspond au nom du squelette. Ce fichier contient des filtres spip, comme le fichier mes_options.php3, mais ils ne peuvent être utilisés que par un seul squelette. Par exemple si article_fonctions.php3 existe et se trouve dans le dossier des squelettes, alors il sera appelé pour le squelette article.html.

Cette possibilité peut s’avérer pratique parfois pour des filtres n’étant pas communs à tous les squelettes, et peut, par conséquent, permettre de «distribuer» son squelette sans manipulation du fichier mes_fonctions.php3 par l’utilisateur.

Pensez aux utilisateurs étrangers

Même si on ne développe pas un squelette multilingue, il se peut très bien que des utilisateurs étrangers veuillent installer votre squelette pour un site dans leur langue.

Vous n’avez pas à être expert des langues pour fournir des squelettes pouvant être utilisés dans une autre langue. SPIP fournit une bonne collection de chaînes localisées que vous pouvez utiliser dans votre squelette. Vous en trouverez une liste sur la page ecrire/lang_raccourcis.php3 de votre site.

Ainsi, par exemple, au lieu de mettre «Envoyer un message» en dur dans
votre squelette, vous utiliserez la « chaîne » <:envoyer_message:> et SPIP se chargera de faire la traduction dans la langue du site.

Il faut aussi penser à bien utiliser les filtres de date de SPIP qui garantissent que la date est écrite avec les bonnes conventions selon la langue.

Bilan

Il ne nous reste plus à la racine du site que le fichier mes_fonctions.php3 - si nécessaire - fichier qui contient les filtres et fonctions liées au squelette (ainsi que le nom du dossier contenant les squelettes si besoin).

L’installation se résume alors, pour l’utilisateur :
-  à déposer le répertoire du squelette sur son site via ftp;
-  et mettre à jour le fichier mes_fonctions.php3 si besoin.

Pour aller plus loin : Des variables dans la feuille de style

Le système des squelettes spip ne se limite pas aux fichiers html. On peut créer des squelettes de feuille de style ou de fichiers javascript, pour y utiliser des informations de la base de données. Voyons un exemple avec une feuille de style qui utiliserait des boucles spip :

1. Créer un fichier stylecss.php3 un peu spécial

<?php
$fond = "stylescss";
$delais = 2 * 24 * 3600;
$flag_preserver = true;
@header("Content-type: text/css");
include ("inc-public.php3");
?>

-  Pour une feuille de style on a la ligne : @header("Content-type: text/css");, selon le type de fichier généré vous devez changer cette ligne.

2. Créer un fichier stylecss.html contenant votre feuille de style, on peut maintenant y ajouter des boucles si besoin.

3. Et comme ce fichier se trouve dans le dossier des squelettes, l’appel à cette feuille de style est alors : <link href="#DOSSIER_SQUELETTE/stylecss.php3"... />

N’oubliez pas de commenter vos fichiers !

Et enfin, pour finir une dernière balise peu documentée car toute nouvelle, la balise #REM qui permet de mettre des commentaires dans le squelette, ces commentaires n’apparaissant pas en ligne. Utilisation :

[(#REM) ici mon commentaire expliquant ce que fait ma boucle]

En abuser permet d’aérer son code et aidera les débutants qui voudront personnaliser à leur sauce votre squelette.

updated on 4 September 2009

Discussion

16 discussions

  • Notez que [avec page.php3] l’on ne peut pas appeler un $fond qui se trouverait dans un sous-répertoire du dossier de squelettes.

    [...]

    On peut également les mettre [les fichiers inclus] dans des sous répertoire si on précise le chemin d’accès dans le fichier d’appel php3 [...].

    On peut aussi utiliser le fichier page.php3 évoqué plus haut.

    Peut-être ai-je mal lu, mais j’ai l’impression qu’il y a une contradiction ici...

    Alors, est-ce qu’on peut ou pas appeler des $fond qui se trouvent dans un sous-répertoire du dossier de squelettes? Uniquement pour les fichiers inclus??

    Exemple avec cette architecture:

    squelettes/inc/menu.html
    squelettes/article.html
    page.php3

    Peut-on écrire dans article.html: <INCLURE(page.php3){fond=inc/menu}> ?

    Reply to this message

  • 4

    On peut placer le fichier mes_fonctions.php3 dans le dossier de son squelette. Autrement dit, on peut fournir un squelettes avec une architecture plate (ie un seul niveau de répertoire). On définira évidement $dossier_squelettes dans ecrire/mes_options.php3, c’est finalement là où cette option à sa meileure place...

    • Je debute avec spip et je ne trouve pas le fichier mes_fonctions.php3, j’ai fait une recherche dans mon site et il est introuvable...
      merci d’avance pour vos reponses.

    • C’est le piège classique :)

      Il n’existe pas. Il faut le créer soit-même.

      Bon amusement,

    • Il est écrit dans l’article que l’emplacement du squelette (la ligne « $GLOBALS[ ’dossier_squelettes’ ] = “mon_squelette” ») doit être indiqué dans /mes_fonctions.php3.

      Or tu dis que mes_fonctions.php3 peut être placé dans le dossier du squelette. Ca se mord la queue, non?

      S’il est possible de spécifier l’emplacement des squelettes dans /ecrire/mes_options.php3 (ce qui me paraîtrait beaucoup plus logique), alors c’est cela qu’il faudrait documenter partout. Le fait que ces deux fichiers de configuration soit séparés et dans deux dossiers différents m’a fait (presque) m’arracher les cheveux il y a quelques semaines alors que je débutais. Après avoir créé mes_fonctions.php3 pour que SPIP utilise mon squelette, j’avais créé mes_options.php3 au même endroit.

    • On peut placer le fichier mes_fonctions.php3 dans le dossier de son squelette. (...) On définira évidement $dossier_squelettes dans ecrire/mes_options.php3 (...)

      Lorsqu’on n’utilise pas de dossier personnalisé pour ses squelettes, mais bien le dossier squelettes/ “classique”, on n’est pas sensé préciser $dossier_squelettes dans mes_fonctions, spip le trouve automatiquement.

      Dès lors qu’on veut placer mes_fonctions dans squelettes/, faut-il néanmoins définir $dossier_squelettes dans mes_options?

    Reply to this message

  • Merci pour cette contrib !

    Reply to this message

  • 1
    Baptiste D

    Bonjour, je débute avec Spip et j’avoue que je ne comprend pas bien comment faire un squelette pour faire la mise en page de mon site. Si quelqu’un peut m’indiquer un tutorial simple à comprendre... Merci d’avance et bravo pour cet outil qui semble excellent (il suffit de savoir s’en servir).

    Baptiste

    Reply to this message

  • Très intéressant !

    Merci

    @lexandre

    Reply to this message

  • 2

    Epatant ce principe de fichier “fond.fonctions.php3”, je ne l’avais pas vu passer !

    Par contre, attention à ce que vous écrivez, la syntaxe [(#REM)...] a été il me semble indiquée comme temporaire, en attendant une meilleure solution...

    • Ce n’est pas vraiment clair:

      «On a validé l’idée de réserver #REM à cet usage. C’est que de la doc, pas besoin de faire du code.»
      Fil

      Je pense que ça veut dire que même si c’est pas officielle (comme cette histoire de fond.mes_fonctions), REM ne sera pas utilisé plus tard.

    • Mortimer : ce sera officiel quand tu l’auras ajouté dans la doc :)

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom