En ce moment je fais du wordpress, mise en place du serveur, installation de WordPress et intégration du/des thèmes. Dernièrement, enfin avant la pause Indienne on m’a demandé de faire un thème maintenance pour un site. Le but étant de faire patienter les visiteurs éventuels pendant la mise en place, et accessoirement de mettre son site online avant qu’il soit terminé à 100% et donc “d’habituer” Google a votre présence sur le web :)

Photo sous CC by @Chris


Dans ce cas deux choix s’offre à vous, soit vous prenez un thème tout fait sur le web, soit vous décidez d’en faire un avec votre charte graphique et votre contenu. Vu la facilité de la deuxième options je vous la conseille fortement, d’autant que je vais en expliquer la marche à suivre ici.

  • Donc premièrement un thème WordPress c’est quoi ?

C’est très simple le minimum syndical est constitué de :

  • Un dossier parent du nom de votre thème
  • un fichier index.php
  • un fichier CSS
  • et un fichier image nommé screenshot.png

Regardons le détail de ces fichiers un par un pour comprendre comment le moteur de WordPress les utilisent et ce qu’il lui faut pour les “comprendre”.

  • Le fichier index.php :

Bonne nouvelle un fichier index.php wordpress est un fichier HTML tout simple. Deux petites choses à noter cependant. Il faut que votre feuille CSS soit externalisée dans un fichier style.css, c’est plus propre et nous verrons après que ce fichier est primordial pour le bon fonctionnement de votre thème.

Et deuxième petite chose, les liens absolus doivent être écrit en langage WP pour être compris par le moteur. Etant donnée le fonctionnement de WP et sa gestion des URLs vous ne pouvez pas utiliser la technique des “../” pour faire des liens relatifs. Il va falloir utiliser <?php bloginfo(‘template_url’);?>/style.css au lieu de ./style.css.

  • Le fichier style.css :

La seule chose qui change pour un thème wordpress par rapport à un fichier css classique c’est l’entête faite en commentaires. En effet WP va chercher dans ce fichier le nom du thème, son url mais aussi la description du thème ainsi que le nom de l’auteur et l’url associée.

Cela donne quelque chose du genre :

/*
>Theme Name: Maintenance
Author: AngeZanetti
Author URI: http://angezanetti.com
Description: A simple maintenance Theme for WordPress
*/

NB : vous pouvez rajouter les champs versions, tags, licence et licence URL si vous le désirez

Avec ces 4 lignes vous verrez dans votre interface admin que vous avez maintenant le choix d’un nouveau thème. Reste à mettre une jolie vignette et hop on a fini :)

  • Le fichier snapshot.png :

Simple comme bonjour, il suffit de faire une capture d’écran de votre thème et de la placer dans le dossier de votre thème. Pas besoin d’avoir un fichier énorme, 300x200px suffisent largement.

Et voilà c’est fait vous avez votre thème wordpress tout beau tout neuf ! Il suffit de l’uploader sur votre serveur avec votre client FTP préféré et il sera disponible dans votre interface d’administration (il faut uploader le dossier dans /wp-content/themes/)

Je vous ai détaillé la mise en place d’un thème de maintenance, c’est beaucoup plus rapide à mettre en place qu’un thème complet mais le principe est le même.

Si vous voulez creuser plus en profondeur la création de thèmes WP je vous conseille d’aller faire un tour sur la page du Codex : http://codex.wordpress.org/Theme_Development