Comment créer un thème WordPress responsive basé sur Bootstrap

Avec autant d'appareils avec des résolutions, des tailles d'écran et des systèmes d'exploitation différents, les sites Web et les applications réactifs sont devenus une exigence essentielle pour la présence en ligne d'une marque.

Plus de 52% de tout le trafic Web provient d'appareils mobiles et ce nombre est en augmentation. Les développeurs Web, les spécialistes du marketing et les concepteurs comprennent l'énorme potentiel si le site Web est réactif et peut être consulté, parcouru et parcouru facilement sur n'importe quel appareil, quels que soient la résolution et le rapport hauteur/largeur.

Les thèmes réactifs sont une approche de la conception Web dans laquelle les éléments d'un site Web s'ajustent automatiquement en fonction de la taille de l'écran et des navigateurs pour une meilleure lisibilité, une meilleure expérience utilisateur et un meilleur temps de chargement. Les développeurs et les concepteurs de thèmes profitent du concept de sites Web réactifs. De nombreuses marques embauchent également de plus en plus de développeurs WordPress pour rendre leurs sites Web réactifs et adaptés aux mobiles.

En novembre 2013, Matt Cutts, le chef de l'équipe de spam Web de Google, a publié une vidéo expliquant que la conception réactive ne vous affectera pas négativement dans les SERP. En outre, Google a également publié ses directives sur les sites Web adaptés aux mobiles qui contiennent des détails sur la façon dont Google traite les sites Web réactifs.

Avec l'essor des smartphones et autres appareils similaires, l'utilisation des ordinateurs de bureau et portables est en (lent) déclin. Cela signifie que les gens utilisent leur smartphone pour rechercher à peu près n'importe quoi : des actualités aux magasins locaux, des demandes de vols aux derniers films. Cette tendance à la hausse présente une grande opportunité commerciale pour la communauté en ligne.

WordPress et Web réactif

WordPress est le CMS le plus populaire qui alimente une partie importante d'Internet. Il bénéficie du soutien d'une forte communauté de développeurs et de concepteurs open source. Avec l'essor de la conception Web réactive, de nombreux développeurs de thèmes renommés sont passés à la conception réactive et ont introduit des frameworks faciles à comprendre, tels que Redux Framework, Carrington Core et Bootstrap , qui sont idéaux pour créer un thème WordPress réactif à partir de zéro.

Qu'est-ce que Bootstrap ?

Bootstrap est un framework open source utilisé pour le développement Web frontal convivial pour les mobiles. Cela signifie qu'il peut être utilisé pour créer des thèmes WordPress réactifs via ses modèles de conception basés sur CSS et Java Script.

Bootstrap est une boîte à outils qui simplifie le processus de développement pour les applications Web complexes. Il est le fruit de l'équipe de développement de Twitter et a été mis à la disposition de la communauté open source. Le framework est devenu populaire en raison de sa structure légère car il est codé en LessCSS.

En ajoutant Bootstrap à votre site Web, vous pouvez appeler ses classes pour ajouter des éléments prédéfinis tels que des boutons, des grilles, des tableaux, des menus, etc. De même, vous pouvez rendre les éléments existants réactifs, sans ajouter de requêtes multimédia complexes.

Créer un thème WordPress Bootstrap

La création d'un thème d'amorçage WordPress est en fait un processus en 8 étapes. La bonne nouvelle – il est facile de créer un thème alimenté par Bootstrap.

Étape 1 : Déballez Bootstrap

1. Tout d'abord, installez WordPress sur votre domaine.
2. Téléchargez et décompressez Bootstrap.
3. Une fois cela fait, connectez-vous à l'aide d'un client FTP comme FileZilla.
4. Accédez à wp-content > thèmes .
5. Créez un nouveau dossier dans le dossier Thèmes et nommez-le BootSTeme . Téléchargez le contenu de Bootstrap décompressé dans ce dossier.
6. Presque chaque installation WordPress contient les fichiers suivants :

• pied de page.php
• en-tête.php
• index.php
• style.css

Maintenant, créez quatre fichiers vides avec les noms ci-dessus dans le dossier BootSTheme .

Étape 2 : Configuration de Bootstrap

Dans le dossier BootSTheme, ouvrez le fichier style.css et collez le code suivant.

 /*
Nom du thème : MyTheme
URI du thème : https://cloudways.com
Description: Mytheme Construit sur bootstrap
Version : 1.1
Auteur : Ahsan Parwez
URI de l'auteur : https://cloudways.com
*/

Ce sont essentiellement des commentaires qui fournissent des descriptions et des détails sur le thème. Je vous recommande fortement de modifier ces commentaires pour refléter les détails de votre thème.

Étape 3 : Copier le code

Pour ce tutoriel, je n'utiliserai pas tous les fichiers CSS et JS fournis dans le package Bootstrap. Pour démarrer le processus de développement, copiez le code dans le fichier bootstrap.min.css et collez-le dans le fichier style.css . À ce stade, le fichier style.css devrait ressembler à ceci.

Remarque : vous pouvez obtenir le code CSS minifié complet sur le site Web de Bootstrap.

Étape 4 : Configuration du modèle HTML

J'ai besoin d'un modèle HTML de base avec lequel travailler. Pour faciliter les choses, j'utiliserai ce thème HTML . Je vous recommande de télécharger pour continuer le tutoriel.

WordPress a des fonctions intégrées get_header() et get_footer() qui par défaut appellent respectivement les fichiers header.php et footer.php .

Commencez par couper le code HTML de haut en bas jusqu'au premier div de conteneur et collez-le dans le fichier header.php . Le fichier ressemblerait à :

Le fichier footer.php contiendra le reste du code :

À ce stade, si vous téléchargez le thème WordPress Bootstrap et l'activez, vous ne verrez rien car le fichier index.php ne contient rien.

Pour charger l'en-tête et le pied de page, j'utiliserai la fonction intégrée de WordPress pour appeler ces éléments. Pour cela, collez le code suivant dans le fichier index.php :

 <?php get_header(); ?>

<?php get_footer(); ?>

Maintenant, les éléments d'en-tête et de pied de page se chargeront sur notre site Web, mais nous obtiendrons une page de base sans aucun style.

Étape 5 : Définition de l'en-tête et du pied de page

Dans le fichier header.php , je vais importer la feuille de style Bootstrap en utilisant la fonction WordPress echo get_stylesheet_uri() (en savoir plus la fonction dans le Codex WordPress ). Cela importera le style.css sur le site Web et vous verrez maintenant une barre de menu supérieure.

Vous pouvez également ajouter le style.css en ajoutant le code suivant en haut du fichier header.php .

 <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(). '/style.css' ?>"> 

Mais ce n'est pas tout, les fonctionnalités JavaScript de notre page ne fonctionneront toujours pas, et nous ne verrons aucun menu déroulant. Pour permettre cela, nous allons importer nos fichiers js en important directement le fichier par URL dans le footer.php . Collez le code suivant avant la balise body de fermeture.

 <script src="../wp-content/themes/MyBSTheme/js/bootstrap.min.js"></script>

WordPress est connu pour sa personnalisation et ses plugins. Pour indiquer à WordPress où placer les hooks des plugins, nous allons coller <?php wp_head(); ?> et <?php wp_footer(); ?> dans les fichiers header.php et footer.php . De plus, pour définir des titres dynamiques du site Web, nous allons utiliser wp_title(); dans le fichier header.php entre les balises <title> .

 <title><?php wp_title(' | ',true,'right'); ></titre>

Le code ci-dessus appellera le titre du message séparé par '|' que le nom du site. Le booléen true affichera le titre. Si vous le définissez sur false , il renverra simplement la valeur et ne l'affichera pas. 'right' définit l'emplacement du titre du message à droite du séparateur.

Étape 6 : Affichage des articles en vedette

Ensuite, j'appellerai les publications de manière dynamique dans la page d'accueil (telles qu'elles sont affichées par le ) et les afficherai en haut (similaire aux publications en vedette que nous voyons sur de nombreux sites WordPress).

Écrivez le code suivant dans votre index.php :

 <?php

query_posts('posts_per_page=1');

while(have_posts()) : the_post(); ?>
<div>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php l'extrait(); ?>&lt;/p>
</div>

<?php endwhile; wp_reset_query(); ?>

Comme vous pouvez le voir, je me sers d' une boucle while et définir le nombre de messages à l'aide d' un post_per_page. Cette ligne n'affichera que le dernier article de blog en haut de la page, et après la fermeture de la boucle, le query_posts se réinitialise.

La classe jumbotron est définie dans le fichier bootstrap.min.css . Je vais l'utiliser pour styliser les articles en vedette en utilisant les balises <h2> et the_permalink(); fonction. Le lien hypertexte est créé sur le titre du message, et the_permalink(); liens de fonction vers l'URL de l'intégralité du message. Pour montrer un extrait de l'article, j'ai utilisé une autre fonction WordPress intégrée, the_excerpt();.

Étape 7 : Lister vos catégories

Je vais maintenant lister les catégories sur la gauche de la page d'accueil. Je vais créer plusieurs instances d'un div stylisé avec les classes Bootstrap et la fonction WordPress wp_list_categories(); .

Collez le code suivant dans le fichier index.php :

 <div class="panel panel-default panel-body">
<div>
<div>

<ul>
<?php wp_list_categories('orderby=name&title_li='); ?>
</ul>

</div>
</div>
</div>

Cela listera les catégories par nom avec un bel effet de survol.

Étape 8 : afficher les derniers articles et auteurs

Enfin, nous allons afficher les derniers articles du blog sur la page d'accueil. Nous allons commencer une autre balise div et sous cette div , nous utiliserons une technique de boucle while similaire à celle que nous avons utilisée dans le post présenté, mais nous n'allons pas la limiter avec query_posts(); .

 <div>

<?php while(have_posts()) : the_post(); ?>

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p><?php l'extrait(); ?></p>
<p> publié par <?php the_author(); ?>

<?php endwhile; wp_reset_query(); ?>

</div>

Fonctions WordPress the_author() ; et récupérez le nom d'utilisateur de l'auteur du message. Nous pouvons l'utiliser pour afficher dynamiquement le nom de l'auteur à chaque publication.

Une fois que vous avez tout terminé avec succès, vous aurez une page comme celle que vous voyez dans l'image ci-dessus.

Ajout de Bootstrap dans un thème WordPress existant

Si vous utilisez un thème WordPress qui n'est pas réactif, vous pouvez ajouter Bootstrap pour le rendre compatible avec les mobiles. Vous pouvez utiliser WordPress et Bootstrap de deux manières différentes.

Ajouter Bootstrap à l'aide d'un CDN

Vous pouvez commencer à utiliser les éléments Bootstrap en ajoutant simplement son CDN à votre fichier header.php.

Remarque : cette méthode peut entraîner des problèmes de compatibilité, par conséquent, assurez-vous d'effectuer une sauvegarde complète avant d'ajouter le code suivant.

 <!-- Dernier CSS compilé et minifié -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- Dernier JavaScript compilé et minifié -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Vous pouvez accéder au fichier header.php soit en utilisant FTP soit en utilisant un plugin. Le code ci-dessus contient les versions réduites des fichiers CSS et JS qui offrent de meilleures performances.

Ajout de Bootstrap dans functions.php

Dans cette méthode, vous devez télécharger la bibliothèque Bootstrap. Téléchargez le fichier Bootstrap.min.css et le fichier Bootstrap-theme.min.css dans votre dossier CSS de thème et téléchargez le fichier Bootstrap.js dans le dossier de thème appelé « js » de votre thème WordPress.

Maintenant, accédez à votre fichier functions.php pour mettre ces scripts en file d'attente.

Ajoutez le code suivant dans votre fichier functions.php.

 fonction reg_scripts() {
    wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrapthemestyle', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
    wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true );
}
add_action('wp_enqueue_scripts', 'reg_scripts');

Vous pouvez également ignorer la partie de téléchargement et mettre directement en file d'attente le CDN d'amorçage comme cela.

 function my_scripts_enqueue() {
    wp_register_script( 'bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery'), NULL, true );
    wp_register_style( 'bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', false, NULL, 'all' );

    wp_enqueue_script( 'bootstrap-js' );
    wp_enqueue_style( 'bootstrap-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

Enregistrez le fichier et téléchargez-le à nouveau sur le serveur.

Et après?

Ce tutoriel est principalement axé sur la création d'un thème WordPress de base à partir d'un modèle HTML et le rend réactif en utilisant Bootstrap 3.x. Dans les prochains articles, je créerai plus de pages comme single.php, front-page.php et functions.php. Je vais également expliquer comment importer des feuilles de style et des JavaScripts depuis le fichier functions.php.

Si vous avez besoin d'aide, postez simplement un commentaire ci-dessous et je vous répondrai.