Theme développeur WordPress : Boostrap Sass Blank Theme

Le web avance et cet article date de mars 2017, son contenu peut ne plus être pertinent ou d'actualité.

Utiliser Bootstrap Sass Blank Theme

Avant de commencer à utiliser Bootstrap Sass Blank Theme

A chaque fois que vous travaillez sur votre thème, il est recommandé d’exécuter la commande Gulp par défaut pour profiter automatiquement des fonctionnalités Gulp décrites dans ce précédent article sur Bootstrap Sass Blank Theme :

$ gulp

Les tâches Gulp, dont certaines seront implicitement citées par la suite, seront actives.

Modification & ajout de styles

Bootstrap-sass

Bootstrap-sass incorpore par défaut de nombreux mixins pour vous aider à personnaliser votre thème. La liste est disponible sur le GitHub du projet. Les variables de Bootstrap-sass sont présentes dans le thème à leurs valeurs par défaut :

assets/scss/base/_variables.scss

Ajout d’une librairie CSS externe

Pour l’ajout d’une librairie CSS externe, deux solutions s’offrent à vous :

  1. la charger depuis un CDN et utiliser la fonction wp_enqueue_style() de WordPress, dans l’action adéquate au sein du fichier “inc/enqueues.php”
  2. L’incorporer aux styles du thème en la plaçant dans le dossier “assets/scss/vendors”, en modifiant son extension en “.scss” si elle n’est pas au format Sass et l’importer dans le fichier “assets/scss/style.scss”. Ainsi elle sera compilée avec le pré-processeur Sass et incorporée dans le style.css du thème

Ajout de CSS au style.css du thème

Pour l’ajout de CSS au style.css, vous pouvez selon la nature des modifications :

  • si c’est un élément par défaut de WordPress, le module existe  : modifier/ajouter vos règles dans le fichier correspondant
  • si cela est un nouvel élément (nouveau type de contenu, template de page, etc.) : créer un nouveau fichier .scss et l’importer dans le fichier principal :
assets/scss/style.scss

Cela est à vous de voir où placer vos règles de style pour garder au maximum une arborescence logique et claire.

A noter que toute référence à une image, sprite ou police d’écriture locale devra se référer à son occurrence dans le répertoire “dist/”.

Ajout de librairies Javascript et modification du fichier main.js

Vous pouvez ajouter vos libraires Javascript, pour peu qu’elles ne soient pas disponibles sur un CDN ou que vous ne souhaitez pas l’utiliser depuis un CDN dans le dossier :

assets/js/libs

Le fichier sera alors automatiquement minifié et concaténé avec toutes les librairies Javascript ajoutées dans ce dossier. Le fichier des librairies se trouve ensuite dans le dossier

dist/js/libs.js

Dans ce cas, il vous faudra décommenter l’inclusion de ce fichier Javascript par WordPress afin qu’il soit correctement chargé dans le fichier :

inc/enqueues.php

Si vous utilisez les librairies externes depuis un CDN il vous faudra également les inclures via la fonction wp_enqueue_script() dans ce même fichier.

Ajout de polices d’écriture

Pour peu que la police d’écriture ne soit pas disponible via un CDN (Google Fonts ou autre), les polices doivent être placées dans le dossier :

assets/fonts

Elles seront ensuite automatiquement placées dans le dossier correspondant du répertoire “dist/”.

Ajout d’images

De même que les polices d’écritures, les images doivent être placées dans le dossier correspondant du répertoire “assets” :

assets/img

Elles seront ensuite automatiquement copiées dans le répertoire “dist/” et optimisées (au sein du répertoire “dist/” uniquement)

dist/img

Ajout de templates WordPress

L’ajout de templates WordPress se fait comme au sein de tout thème. L’idéal est bien entendu d’externaliser les blocs “loop” dans des fichiers externes au sein du répertoire “template-parts” afin de pouvoir les réutiliser entre les différentes pages et templates.

 

Publié le par Edouard dans Développement , Wordpress