/ Electricité / Tarif d’un électricien pour la pose de luminaires
Créer un thème WordPress avec Bootstrap
Pour créer ce thème WordPress, nous allons partir d’une feuille blanche. Si vous ne connaissez pas du tout WordPress, j’ai écrit un autre tutoriel où vous pouvez apprendre à créer un thème WordPress facilement.
Voici les étapes qui vont mener à la création de notre thème :
- Dans un 1er temps, nous allons créer un dossier et une feuille de styles pour créer notre thème
- Nous ajouterons ensuite les éléments du framework Bootstrap dans le système Worpress
- Enfin, nous créerons les différents templates et mettrons en place les fonctionnalités pour créer notre thème de blog basé sur Bootstrap
C’est parti !
Créons l’ossature de notre thème WordPress basé sur Bootstrap
Comme pour un thème classique, nous allons créer un dossier dans lequel nous allons créer un fichier « style.css ».
- Se rendre dans le dossier « wp-content > themes » de WordPress
- Créer le dossier de notre thème, appelons le « wpbootstrap »
- Créer le fichier « style.css »
Ouvrons le fichier style.css et ajoutons les lignes suivantes :
/*
Theme Name: WP Bootstrap
Theme URI: https/quazerty.com/wp-content/themes/wpbootstrap
Author: QuazertY
Author URI: https://www.quazerty.com/
Description: Thème WordPress basé sur Bootstrap Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sydney
*/
Vous pouvez même ajouter cette image dans le dossier pour que votre thème s’affiche plus joliment dans WordPress.
Le fichier doit être nommé « screenshot.png ».
Vous pouvez maintenant vous rendre sur l’interface d’administration de WordPress et activer votre thème. Si vous vous rendez sur votre site, vous devez avoir une belle page blanche. Normal ! Nous n’avons encore rien fait
Ajoutons les éléments du framework Bootstrap à notre thème WordPress
Pour ajouter les fichiers du framework Bootstrap, nous allons créer un fichier « functions.php » à la racine de notre thème.
Comme vu précédemment, Bootstrap est constitué d’un ensemble de fichiers :
- Un fichier « bootstrap.css » qui regroupe l’ensemble des styles du framework
- La librairie javascript très connue : jQuery
- La libraire Popper.js qui permet de gérer des petites popins sur son site web
- Et enfin, le fichier « bootstrap.js » qui contient tous les composants javascript de Bootstrap
Installons ces fichiers sur notre thème WordPress.
<?php
// Chargement des styles et des scripts Bootstrap sur WordPress
function wpbootstrap_styles_scripts(){
wp_enqueue_style(‘style’, get_stylesheet_uri());
wp_enqueue_style(‘bootstrap’, ‘https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css’);
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘popper’, ‘https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js’, array(‘jquery’), 1, true);
wp_enqueue_script(‘boostrap’, ‘https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js’, array(‘jquery’, ‘popper’), 1, true);
}
add_action(‘wp_enqueue_scripts’, ‘wpbootstrap_styles_scripts’);
?>
Nous utilisons une fonction « wpbootstrap_styles_scripts » que nous accrochons au hook « wp_enqueue_scripts ». Ce hook permet de charger les styles et scripts sur un thème WordPress.
Dans la fonction « wpbootstrap_styles_scripts », voici ce que nous faisons :
Nous ajoutons le style de base de notre thème, le fichier « style.css » avec la fonction « wp_enqueue_style » qui prends deux paramètres : le nom du style et l’url du fichier.
Nous ajoutons le fichier css de Bootstrap de la même manière.
Nous chargeons la libraire jQuery grâce à la fonction « wp_enqueue_script ». Il suffit d’indiquer « jquery » comme paramètre pour la charger car la librairie est présente par défaut dans WordPress.
Nous chargeons les deux autres fichiers « popper.js » et « bootstrap.js » toujours grâce à la fonction « wp_enqueue_script » mais là, nous ajoutons des paramètres : le premier est le nom du script, le deuxième est l’url des scripts, le troisième permet de déterminer les dépendances nécessaires pour charger ces scripts. Pour le premier fichier, nous indiquons que « jquery » doit être chargé, pour le deuxième nous indiquons que « jquery » et « popper » doivent être chargés. Le quatrième paramètre désigne la version du script (nous mettons 1 par défaut) et le cinquième détermine si oui ou non le script doit être chargé dans le footer. Pour ces deux fichiers, c’est bien le cas. Pourquoi ? Parce que les scripts chargés dans le footer ne bloque pas le chargement de la page
Maintenant que nous avons ajouté Bootstrap à WordPress, nous allons pouvoir passer à la création du thème à proprement parler.
Créons les fichiers de template de notre thème Bootstrap
Nous allons maintenant passer à du plus concret. Pour construire ce thème, nous allons créer plusieurs fichiers de template.
- Les templates de base index.php, header.php et footer.php
- Un template pour la page d’accueil