Comment créer un thème WordPress avec Bootstrap ?
Dans ce tutoriel, vous allez découvrir comment créer un thème WordPress basé entièrement sur Bootstrap. Nous verrons dans un premier un temps qu’est ce que « Bootstrap », puis nous verrons quel est son intérêt et pourquoi l’utiliser. Dans une deuxième partie, nous verrons comment créer un thème WordPress en utilisant ce framework html et css.
Qu’est ce que Bootstrap ?
Bootstrap est un framework HTML, CSS, JS créé par des développeurs de l’entreprise Twitter. Un framework, (cadre de travail en français) permet de gagner du temps sur le développement de sites web en fournissant des composants pré-conçus et d’autres outils bien utiles.
Concrètement, dans le cadre de la création de site web, un framework comme Bootstrap est un ensemble de fichiers css et js (javascript). Ces fichiers contiennent des règles de style et des fonctions que vous pouvez utiliser pour mettre rapidement un site en place.
Pourquoi utiliser Bootstrap pour créer son thème WordPress ?
Bootstrap est un outil très utile pour construire un site rapidement. Utiliser Bootstrap, c’est éviter de réinventer la roue et de perdre du temps.
Le site de Bootstrap regroupe des exemples. Il existe notamment un modèle de blog dont nous allons nous inspirer fortement !
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://www.tutowp.fr/tutowp
Author: TutoWP
Author URI: https://www.tutowp.fr/tutowp
Description: Thème WordPress basé sur Bootstrap
Version: 1.0
*/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
Templates de base pour notre thème Bootstrap
Reprenez le fichier index.php que nous avons créé puis ajoutez ces lignes de code.
<?php get_header(); ?>
<?php get_template_part('loop'); ?>
<?php get_footer(); ?>Ce morceau de code est la base pour commencer un thème WordPress.
- On charge le template « header.php » via la fonction « get_header »
- On charge le template « loop.php » via la fonction « get_template_part »
- On charge le template « footer.php » via la fonction « get_footer »
Nous allons maintenant créer les templates « header.php », « loop.php » et « footer.php » pour que tout fonctionne.
Dans le fichier « header.php », ajoutez le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body> - On ajoute le squelette de notre fichier HTML
- Nous appelons le titre de la page en cours via la fonction « wp_title »
- Nous appelons la fonction « wp_head » pour charger les éléments nécessaires à WordPress
Dans le fichier loop.php, ajoutez cela :
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="blog-post">
<h2 class="blog-post-title"><?php the_title(); ?></h2>
<p class="blog-post-meta"><?php the_time('d/m/Y'); ?> par <?php the_author(); ?></p>
<?php (is_singular()) ? the_content() : the_excerpt(); ?>
<?php if(!is_singular()) : ?>
<p><a href="<?php the_permalink(); ?>" class="btn btn-primary">Lire la suite</a></p>
<?php endif; ?>
</div>
<?php endwhile; ?>
<div id="pagination">
<?php echo paginate_links(); ?>
</div>
<?php endif; ?>C’est le code de base pour afficher les posts de WordPress. Ce code signifie : s’il y a des posts à afficher, alors, tant qu’il y a des posts à afficher, on charge le post en cours et on affiche l’article.
Petite subtilité, vous pouvez voir dans le code cette ligne :
<?php (is_singular()) ? the_content() : the_excerpt(); ?>Elle permet de différencier le contenu en fonction du contexte. Si WordPress charge une page ou un article, c’est le contenu entier qui s’affichera via la fonction « the_content ». Au contraire, si WordPress affiche les articles dans un autre contexte (sur la page d’accueil par exemple), on affiche seulement l’extrait de l’article via la fonction « the_excerpt ».
Dans le fichier footer.php, mettez ces quelques lignes :
<?php wp_footer(); ?>
</body>
</html>On appelle les éléments du footer nécessaires via la fonction « wp_footer » et on ferme les balises HTML de notre document.
Le template de la page d’accueil
Pour créer notre page d’accueil, nous allons créer un fichier « front-page.php » mais avant, nous allons ajouter quelques fonctionnalités à notre thème et enrichir les templates que nous avons créés précédemment.
Commençons par paramétrer un menu dans WordPress. Ajoutez ces lignes au fichier « functions.php » :
function wpbootstrap_after_setup_theme() {
// On ajoute un menu
register_nav_menu('header_menu', "Menu du header");
}
add_action('after_setup_theme', 'wpbootstrap_after_setup_theme');On pourrait s’arrêter là mais l’affichage des menus sur WordPress n’est pas compatible avec Bootstrap par défaut. Nous devons donc ajouter une classe php qui permet de gérer cela.
Nous avons de la chance, des développeurs ont fait le travail pour nous. Il suffit d’aller télécharger la classe class-wp-bootstrap-navwalker.php sur Github et de placer le fichier dans le dossier de notre thème.
Maintenant, nous pouvons apporter quelques modifications au code que nous venons de mettre :
function wpbootstrap_after_setup_theme() {
// On ajoute un menu
register_nav_menu('header_menu', "Menu du header");
// On ajoute une classe php permettant de gérer les menus Bootstrap
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action('after_setup_theme', 'wpbootstrap_after_setup_theme');Nous pouvons maintenant ajouter le contenu de notre header et menu dans notre template « header.php ».
<div class="container">
<!-- Header -->
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-12 text-center">
<a class="blog-header-logo text-dark" href="<?php bloginfo('url'); ?>"><?php bloginfo('name') ?></a>
</div>
</div>
</header>
<!-- Fin du header -->
<!-- Menu header -->
<nav class="navbar navbar-expand-md navbar-light" role="navigation">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header-menu" aria-controls="#header-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<?php
wp_nav_menu(array(
'theme_location' => 'header_menu',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'header-menu',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
));
?>
</div>
</nav>
<!-- Fin du menu header -->Dans la partie <!– Header –>, nous ajoutons le titre du blog grâce à la fonction « bloginfo » et on mets en forme grâce aux classes css de Bootstrap. Pour voir l’ensemble des règles css de Bootstrap, vous pouvez consulter la documentation.
Dans la partie <!– Menu header –>, nous ajoutons la structure de menu de Bootstrap et nous affichons le menu WordPress que nous avons paramétré auparavant dans le fichier « functions.php ». L’identifiant de notre menu est repris dans le paramètre « theme_location », pour le reste, on applique les classes Bootstrap et on ajoute le paramètre « walker » avec la classe que nous avons téléchargé et qui permet de mettre en forme les menus WordPress pour Bootstrap.
Maintenant, nous allons copier le fichier « index.php » et le renommer en « front-page.php ». Nous allons l’ajuster pour mettre en avant le dernier article.
<?php get_header(); ?>
<?php
$query = new WP_Query(['posts_per_page' => 1]);
if($query->have_posts()) : while($query->have_posts()) : $query->the_post();
?>
<div class="jumbotron p-4 p-md-5 text-white rounded bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 font-italic"><?php the_title(); ?></h1>
<p class="lead my-3"><?php the_excerpt(); ?></p>
<p class="lead mb-0"><a href="<?php the_permalink(); ?>" class="text-white font-weight-bold">Lire la suite</a></p>
</div>
</div>
<?php endwhile; endif; ?>
<?php
query_posts('offset=1');
get_template_part('loop');
?>
<?php get_footer(); ?>Pour cela, nous créons une nouvelle requête WordPress en demandant un seul post (via le paramètre « posts_per_page ») puis nous affichons le résultat de la requête avec le marquage de Bootstrap. La classe « jumbotron » permet de créer un bloc de mise en avant.
Pour que la requête de base affichée par le template « loop » n’affiche pas une deuxième fois le premier article, on ajoute le paramètre « offset=1 » via la fonction « query_posts » (fonction qui modifie la requête principale).
Nous allons maintenant ajouter une sidebar. Pour cela, retournons dans notre fichier « functions.php » puis ajoutons :
// On ajoute une sidebar
function wpbootstrap_sidebar() {
register_sidebar([
'name' => "Sidebar principale",
'id' => 'main-sidebar',
'description' => "La sidebar principale",
'before_widget' => '<div id="%1$s" class="widget %2$s p-4">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widget-title font-italic">',
'after_title' => '</h4>',
]);
}
add_action('widgets_init', 'wpbootstrap_sidebar');Nous utilisons la fonction « register_sidebar » pour créer la sidebar et nous l’encapsulons dans une fonction « wpbootstrap_sidebar » que l’on accroche au hook « widgets_init ».
Nous pouvons alors éditer notre template « front-page.php » pour ajouter cette sidebar.
<div class="container">
<div class="row">
<div class="col-md-8">
<?php
query_posts('offset=1');
get_template_part('loop');
?>
</div>
<div class="col-md-4">
<?php dynamic_sidebar('main-sidebar'); ?>
</div>
</div>
</div>Enfin, nous allons modifier notre template « footer.php ».
</div>
<footer class="blog-footer">
<p>Thème <a href="https://getbootstrap.com/">Bootstrap</a> pour WordPress par <a href="https://www.tutowp.fr/tutowp">TutoWP.fr</a>.</p>
<p>
<a href="#">Retour en haut</a>
</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Nous fermons la div « .container » ouverte dans le fichier « header.php » ajoutons une phrase, un lien pour retourner en haut de page.
Nous avons terminé pour la partie template de la page d’accueil.
Nous avons plus qu’à ajouter quelques styles personnels. Retourner dans le fichier « style.css » et ajouter ces lignes :
.blog-header {
line-height: 1;
border-bottom: 1px solid #e5e5e5;
}
.blog-header-logo {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 2.25rem;
}
.blog-header-logo:hover {
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
.display-4 {
font-size: 2.5rem;
}
@media (min-width: 768px) {
.display-4 {
font-size: 3rem;
}
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-scroller .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
}
.card-img-right {
height: 100%;
border-radius: 0 3px 3px 0;
}
.flex-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.h-250 { height: 250px; }
@media (min-width: 768px) {
.h-md-250 { height: 250px; }
}
/*
* Blog name and description
*/
.blog-title {
margin-bottom: 0;
font-size: 2rem;
font-weight: 400;
}
.blog-description {
font-size: 1.1rem;
color: #999;
}
@media (min-width: 40em) {
.blog-title {
font-size: 3.5rem;
}
}
/* Pagination */
.blog-pagination {
margin-bottom: 4rem;
}
.blog-pagination > .btn {
border-radius: 2rem;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 4rem;
}
.blog-post-title {
margin-bottom: .25rem;
font-size: 2.5rem;
}
.blog-post-meta {
margin-bottom: 1.25rem;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 2.5rem 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: .05rem solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}Le template des pages et articles
Nous allons maintenant ajouter la fonctionnalité de commentaires sur les pages et les articles.
Pour cela, nous n’allons pas créer un nouveau template mais plutôt modifier le template « loop.php ».
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="blog-post">
<h2 class="blog-post-title"><?php the_title(); ?></h2>
<p class="blog-post-meta"><?php the_time('d/m/Y'); ?> par <?php the_author(); ?></p>
<?php (is_singular()) ? the_content() : the_excerpt(); ?>
<?php if(!is_singular()) : ?>
<p><a href="<?php the_permalink(); ?>" class="btn btn-primary">Lire la suite</a></p>
<?php endif; ?>
<?php if(is_singular()) : if(comments_open()) : comments_template(); endif; endif; ?>
</div>
<?php endwhile; ?>
<div id="pagination">
<?php echo paginate_links(); ?>
</div>
<?php endif; ?>Nous venons d’ajouter la ligne suivante :
<?php if(is_singular()) : if(comments_open()) : comments_template(); endif; endif; ?>Si on charge une page ou un article alors, si les commentaires sont ouverts on charge le template des commentaires.
Cette ligne permet d’afficher le template des commentaires par défaut mais nous devons l’adapter pour Bootstrap. Comme tout à l’heure pour les menus, la communauté WordPress nous simplifie la vie. Vous pouvez télécharger la classe php wp-bootstrap-comment-walker.php pour gérer l’affichage des commentaires.
Avant de l’installer, nous allons commencer par ajouter une ligne dans notre fichier « functions.php ».
// On ajoute un menu
function wpbootstrap_header_menu() {
register_nav_menu('header_menu', "Menu du header");
// On ajoute une classe php permettant de gérer les menus Bootstrap
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
// On ajoute le support du html5 pour les listes de commentaires
add_theme_support('html5', array('comment-list'));
}
add_action('after_setup_theme', 'wpbootstrap_header_menu');Cette ligne permet d’activer le support html5 dans les commentaires.
Pour finir, nous allons donc créer un fichier « comments.php » à la racine de notre thème et y ajouter ces lignes :
<?php if(have_comments()) : ?>
<ul class="list-unstyled">
<?php
// Register Custom Comment Walker
require_once('class-wp-bootstrap-comment-walker.php');
wp_list_comments([
'style' => 'ul',
'short_ping' => true,
'avatar_size' => '64',
'walker' => new Bootstrap_Comment_Walker(),
]);
?>
</ul><!-- .comment-list -->
<?php endif; ?>
<?php
// On affiche le formulaire pour commenter en l'adaptant pour Bootstrap
$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$consent = empty( $commenter['comment_author_email'] ) ? '' : ' checked="checked"';
comment_form([
'class_form' => 'form',
'comment_field' => '<div class="comment-form-comment form-group"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" class="form-control" name="comment" cols="45" rows="8" aria-required="true"></textarea></div>',
'class_submit' => 'btn btn-secondary',
'fields' => [
'author' =>
'<div class="comment-form-author form-group"><label for="author">' . _x( 'Name', 'noun') .
( $req ? '<span class="required">*</span>' : '' ) . '</label>' .
'<input id="author" class="form-control" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
'" size="30"' . $aria_req . ' /></div>',
'email' =>
'<div class="comment-form-email form-group"><label for="email">' . _x( 'Email', 'noun') .
( $req ? '<span class="required">*</span>' : '' ) . '</label>' .
'<input id="email" class="form-control" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) .
'" size="30"' . $aria_req . ' /></div>',
'url' =>
'<div class="comment-form-url form-group"><label for="url">' . _x( 'Website', 'noun') . '</label>' .
'<input id="url" class="form-control" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
'" size="30" /></div>'
]
]);
?>La première partie du code permet de charger la classe que nous avons téléchargé et d’afficher les commentaires.
La deuxième partie permet d’afficher le formulaire qui permet de déposer les commentaires.
PS: n'oubliez pas de lire mon tutoriel principal sur comment créer un thème WordPress !