. WebdeZign
web design, intégration web et WordPress

construction d’un starter thème avec Underscores & Zurb Foundation

Bon, maintenant que je vous ai en gros expliqué les différences entre frameworks purs, starter thèmes et WP thèmes frameworks, je vais vous raconter comment je m’y suis prise pour créer ma base faite d’Underscores & Zurb Foundation, c’est-à-dire comment j’ai mis ensemble un starter theme propre à WordPress et un framework qui est en réalité une bibliothèque CSS sur laquelle le web designer s’appuie pour construire la mise en page (le layout) de son site. Nous ne parlons donc plus du tout de thème-enfant, mais de thème créé ‘from scratch’ (à partir de rien, ou presque…).

Franchement, depuis que je me confronte au thème ‘from scratch’, une conclusion s’impose à moi : il n’y a rien de mieux pour commencer à feuilleter le Codex, entrer dans la loop de WordPress et le fonctionnement du PHP propre à WP. J’ai passé bien trop de temps à essayer, par le biais des thèmes-enfants, de modifier des thèmes existants : étant encore très débutante dans le PHP, je me perdais dans les pages de code sans comprendre où je pouvais/devais intervenir.

Allez, assez de bavardage, entrons dans le vif du sujet !

Pour réussir ce challenge, j’ai bien sûr fait appel aux ressources de la communauté. Je retiens et remercie tout particulièrement mon ami JB de notre groupe FB ainsi qu’un article (tuto) de Justin Friebel (en) qui m’y ont beaucoup aidée. Ce billet s’en inspire naturellement, tout particulièrement pour l’accrochage de Foundation à Underscores (le hook ?).

 

Générer et installer Underscores

La partie facile !!!

Rendez-vous sur la page Underscores.me sur laquelle il vous suffit d’entrer le nom de votre thème : pour l’exercice, il s’appellera Processum.

underscores-webdezign-illustration

L’option (case à cocher) _sassify! génère un thème compatible SASS. Pour le moment, laissons cela de côté. En cliquant sur ‘Generate’, vous pourrez télécharger le fichier ‘processum.zip’ que vous installez comme vous installeriez n’importe quel thème sur WordPress. Activez-le et admirez le travail !!! C’est ce qui s’appelle un thème tout nu, c’est-à-dire un vrai starter theme.

Dans le résultat illustré ci-dessous, j’avais au préalable installé du dummy content proposé par wordpress.org, ce qui me permet d’avoir un exemple de chaque modèle de types de format (Post Types) ainsi que tous les éléments du CSS de base. Je fais toujours bien attention d’attribuer ce dummy content à un utilisateur dont je sais qu’il est aussi dummy et que je supprimerai en fin de développement, de manière à ce que tout ce matériel soit totalement absent du site en production.

theme-vide-illustration

 

Installer Zurb Foundation dans mon starter theme

Ça se complique un tantinet, mais pas tant que ça !!

 

1ère étape : se procurer Zurb Foundation

  • Pour commencer, téléchargez le fichier ZIP de la dernière version de Zurb Foundation et décompressez-le.
  • Renommez le dossier parent en ne laissant que ‘foundation’ et en supprimant les indications de version.
  • Déplacez l’intégralité du dossier ‘foundation’ dans l’arborescence de notre thème Processum > ../wp-content/themes/processum/inc/

foundation-emplacement-illustration

 

2e étape : accrocher Zurb à Underscores (wp_enqueue)

Il ne nous reste plus qu’à *enqueuer* (du verbe to enqueue) tout ça dans le fichier ‘functions.php’ de notre thème Processum.

Pour moi, ce fut ma première incursion vraiment sérieuse dans ce fichier fondamental pour un thème et l’analyse de ce fichier ‘functions.php’ généré par Underscores est très instructive pour qui débute avec le PHP et WordPress.

Si vous avez déjà créé des thèmes-enfants, vous avez certainement appris que, pour fonctionner, un thème a besoin de deux fichiers : ‘functions.php’ ET ‘style.css’. Si l’un de ces deux fichiers est corrompu, vous risquez le White Screen of the Death (l’écran blanc de la mort qui tue ^^!). Nous allons donc toucher maintenant à l’un des deux.

Ouvrez avec votre éditeur de code préféré le fichier ‘functions.php’ de votre thème, c’est-à-dire celui qui se trouve sous > ../wp-content/themes/processum/functions.php.

Notre thème s’appelle Processum et vous constatez que ce nom apparaît non seulement dans l’en-tête du fichier, mais également en minuscules un peu partout dans les lignes de code. C’est très important. Si vous vous référez à l’article en anglais dont j’ai parlé en introduction, le thème de l’exemple qui y figure s’appelle wordpress-dealership, un terme que j’ai recherché/remplacé dans le code que je vous propose ci-dessous.

Dans le fichier ‘functions.php’ de notre thème d’exemple, c’est à partir des lignes 99-100 que commence la fonction qui vise à *enqueuer* les scripts et les styles. Ligne 102, on détermine une fonction PHP processum_scripts()

Voici donc – si vous faites l’exemple Processum – le code que vous devez ajouter à partir de la ligne 108.

ATTENTION

Remarquez au passage que c’est le caractère _ (underscore) qui sépare les deux termes dans le nom de la fonction, alors que c’est toujours un – (tiret) qui doit figurer dans le nom d’un thème !

Code déjà présent (lignes 99 à 107)

/**Enqueue scripts and styles.*/

function processum_scripts() {
wp_enqueue_style( 'processum-style', get_stylesheet_uri() );
wp_enqueue_script( 'processum-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
wp_enqueue_script( 'processum-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

Code à ajouter/insérer (ligne 108)

/* Add Foundation CSS */
wp_enqueue_style( 'foundation-normalize', get_stylesheet_directory_uri() . '/inc/foundation/css/normalize.css' );
wp_enqueue_style( 'foundation', get_stylesheet_directory_uri() . '/inc/foundation/css/foundation.css' );
/* Add Custom CSS */
wp_enqueue_style( 'foundation-icons', get_stylesheet_directory_uri() . '/inc/foundation/foundation-icons.css', array(), '1' );
/* Add Custom CSS */
wp_enqueue_style( 'processum-custom-style', get_stylesheet_directory_uri() . '/custom.css', array(), '1' );
/* Add Foundation JS */
wp_enqueue_script( 'foundation-js', get_template_directory_uri() . '/inc/foundation/js/foundation.min.js', array( 'jquery' ), '1', true );
wp_enqueue_script( 'foundation-modernizr-js', get_template_directory_uri() . '/inc/foundation/js/vendor/modernizr.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'foundation-fastclick-js', get_template_directory_uri() . '/inc/foundation/js/vendor/fastclick.js', false, '1', true );
/* Foundation Init JS */
wp_enqueue_script( 'foundation-init-js', get_template_directory_uri() . '/foundation.js', array( 'jquery' ), '1', true );

 

Vérifiez bien ce que vous avez fait, commentez le bloc que vous venez d’ajouter (pour vous souvenir de cette manipulation quand vous reviendrez sur votre fichier ‘functions.php’), veillez à la mise en forme de votre code grâce à l’indentation (ça facilite la lecture) et enregistrez.

 

3e étape : faire le nœud et bien serrer ^^

C’est la dernière étape, la création, toujours avec votre éditeur de code préféré, de deux fichiers.

  • un fichier ‘foundation.js’ à placer dans le dossier > ../themes/processum/js/
/*jslint browser: true*/
/*global $, jQuery*/jQuery(document).ready(function ($) {
‘use strict’;
$(document).foundation();
});
  •  un fichier ‘custom.css’ dans lequel vous entrerez progressivement TOUTES vos règles CSS que vous créerez ou modifierez
    à placer à la racine du thème, en compagnie de son frère aîné le fichier ‘style.css’ qui lui nous vient d’Underscores
/*
Theme Name: Processum
Custom CSS file
*/

 

Pour ma part, j’insère désormais le reset d’Eric Meyer au début de ce fichier CSS perso après avoir eu quelques soucis d’alignement des marges. Miraculeusement ce copier/coller a résolu le problème !

Et voilà, le tour est joué ! Zurb Foundation est désormais actif dans votre thème. A quelques petits détails près, cependant… Si vous activez votre thème Processum, vous verrez qu’il n’a pas changé depuis tout à l’heure, il est toujours aussi nu ! Mais dorénavant vous avez en arrière-plan une très puissante feuille de style (en fait elles sont plusieurs à se partager le travail).

L’intégralité des fichiers du thème Processum sont en ligne sur mon compte GitHub. Il évoluera au fil de mes explications ici sur le blog si je m’amuse à poursuivre l’aventure des tutos ^^ !

Vous avez également la possibilité, sur mon compte GitHub, de télécharger prototype-1 qui contient Zurb Foundation seul avec un fichier ‘index.html’ dans lequel j’ai commencé à prendre en main la bête.

Arrivée à la fin de ce tuto, j’ai encore un conseil à vous donner : avant de démarrer tout azimut, prenez la mesure des deux éléments que vous avez désormais à apprivoiser :

  • d’un côté, un starter theme qui mérite qu’on s’attarde sur sa structure interne, autant du point de vue PHP que du point de vue HTML/CSS > tout est dans le Codex !
  • de l’autre, un puissant framework dont vous n’avez jusqu’ici vu aucune ligne et qu’il s’agira de manier avec précaution dans les fichiers .php de votre thème > rendez-vous sur Foundation Docs !

Mais ça, ce sera pour le prochain épisode !!

Des questions ? des commentaires ? je me suis loupée quelque part ? N’hésitez pas à me le dire !!

PS – avec les dernières infos reçues concernant la fonction wp_enqueue_style(), j’ai écrit un nouveau billet dans lequel je tente la récapitulation et qui vous donnera les dernières indications concernant l’ordre de priorité des feuilles de style.

Tita

Conceptrice & CEO chez Tita Créations
Passionnée de chevaux, de nature, d'écriture... et d'informatique, j'ai découvert cette dernière avec un tout premier modèle d'ordinateur portable : un SHARP écran cristaux liquides d'au moins 10kg ! ... 1988
Aujourd'hui, je donne libre cours à ma créativité dans les domaines du web design, de la gestion de projet et de la gestion de contenu.


Commentaires

  1. Par Tita Crea

    Répondre

Commenter