Soixante millions de sites web seraient bâtis en Wordpress [1] soit un site sur six. Le nombre de thèmes disponibles est donc considérable, d’autant plus qu’il existe un marché de thèmes "premiums", c’est à dire payants, qui peuvent être une source de revenu pour des designers [2].

Mais Wordpress étant un logiciel libre, on trouve aussi des thèmes dont la licence autorise leur adaptation. François Daniel Giezendanner en recensait l’an dernier une douzaine [3] sans compter les thèmes de Zpip.

Voici quelques retours d’expériences et observations sur une telle démarche d’adaptation. Notez qu’elle implique de connaître un peu HTML, CSS, et le méta-langage de SPIP pour s’en sortir.

Vérifier la licence

Les thèmes Wordpress, même gratuits, ne sont pas nécessairement diffusés sous licence libre. Il ne vous est donc pas toujours possible de les modifier pour les utiliser sur votre site, encore moins de les redistribuer sur contrib.spip.net. Certaines licences sont plus permissives que d’autre. La Licence publique générale GNU notamment vous autorise à avancer dans votre projet.

Malheureusement de nombreux thèmes ne proposent pas d’information sur la licence. Dans le doute je ne peux que vous inciter à contacter leur auteur.

Autre vérification à faire : que le thème ne comporte pas de pièges comme des liens publicitaires cachés par exemple [4].

Thème ou squelettes ?

Un "thème" au sens SPIP est un simple habillage graphique d’un jeu de squelettes existant. Il est parfaitement envisageable de se contenter de reprendre le "look and feel", comme on dit en agence, du thème Wordpress, c’est à dire ses styles et ses images, pour les adapter à un squelette existant.

Zpip à l’aide du plugin Zen Garden propose un mécanisme pour gérer des thèmes dans l’espace privé. S’engager dans la mise en place d’un thème pour Zpip implique le respect d’un certain nombre de conventions afin de permettre leur compatibilité et leur partage [5].

Vous pouvez aussi tout simplement ajouter votre propre feuille de style à celles des squelettes livrés avec SPIP.

La correspondance entre les classes CSS d’un thème Wordpress et celles de squelette-dist sont assez simple à identifier. Il faut toutefois reprendre les styles un à un pour obtenir quelque chose qui commence à être satisfaisant.

On rencontre à ce stade deux difficultés :

• la construction de certains éléments SPIP est complètement différente de celle que l’on peut trouver dans le Wordpress, par exemple pour les paginations où le code généré par #PAGINATION est assez particulier.
• les styles livrés avec la dist peuvent interférer avec ceux du thème et on peut passer pas mal de temps à régler des marges et à jouer avec Firebug. Il est peut être plus simple au final de tous les retirer (en surchargeant inclure/head.html dans votre dossier squelettes) quitte à reprendre ensuite les classes indispensables (notamment la série des spip_document).

Une astuce : créer un article de test à l’aide des sources, téléchargeables, de l’article Les raccourcis typographiques en standard avec SPIP. Créez aussi un peu de contenus si vous ne partez pas d’un site existant [6].

Ainsi en prenant comme base de travail le très élégant thème The Erudite, voici le résultat, après 2-3 heures de travail, encore incomplet mais utilisable.

Le squelette par défaut de SPIP 3.0

Le squelette par défaut de SPIP avec un thème adapté de The Erudite pour Wordpress

Notons que j’ai dû surcharger les squelettes article, rubrique et sommaire, uniquement pour permettre l’insertion de la navigation dans le header (ils sont distincts dans squelettes-dist).

Nous restons toutefois assez éloignés de la présentation du thème Wordpress d’origine, notamment pour la page d’accueil. Pour obtenir un site similaire, il va falloir créer un jeu de squelettes complets.

Créer un jeu de squelettes complet

David Taté, il y a deux ans, décrivait sa méthode [7] consistant à prendre pour point de départ le code généré du site Wordpress de démo. On procède alors comme on le ferait à partir de la "découpe" d’une maquette graphique en incorporant progressivement les balises et boucles SPIP dans le html.

J’ai tendance pour ma part à prendre pour point de départ directement les fichiers php du thème Wordpress. En effet ceux-ci sont essentiellement des fichiers HTML qui comportent des inclusions d’autres fichiers ou de données issues de la base.

Ainsi, le fichier single.php, qui correspond à article.html dans SPIP, appelle header.php lequel correspond à inclure/head.html et inclure/header.html.

header.php va afficher à son tour <?php bloginfo('name') ?>, c’est à dire #NOM_SITE_SPIP et <?php bloginfo('description') ?>, c’est à dire #DESCRIPTIF_SITE_SPIP.

Compter une journée de travail pour avoir un site qui tourne (avec les squelettes de base article / sommaire / rubrique), une de plus pour tout compléter (adapter plan du site, page de login, formulaires, forum, etc.). Pour que tout soit parfait ça peut être naturellement nettement plus long : à vous de juger de ce dont vous avez besoin.

Je n’aborde pas ici les effets javascript, domaine que je connais peu. Souvent les thèmes font appel à jQuery, tout comme SPIP, mais pas nécessairement la même version ce qui peut à l’occasion poser problème. Si vous avez besoin de scripts distribués avec le thème pensez à les appeler dans inclure/head.html, à l’aide de la balise #CHEMIN, et après #INCLURE_HEAD (qui appelle jQuery).

Enfin, quand tout est prêt, et que vous avez pu faire tourner le squelette sur votre site de manière satisfaisante, n’hésitez pas à le partager sur contrib.spip.net.