Share
Effectuez une recherche Google pour 'Thème WordPress avec Bootstrap' et vous obtiendrez des centaines de résultats. Ces guides incluent des guides vous expliquant comment utiliser Bootstrap pour créer votre thème, ainsi que des thèmes disponibles dans le commerce et librement disponibles à l'aide du framework Bootstrap..
Recherchez 'Bootstrap' dans le référentiel de thèmes WordPress et vous obtiendrez 199 résultats. Ça fait beaucoup de choix.
Il semble que le développement de thèmes WordPress à l’aide de Bootstrap fait fureur. Mais est-ce toujours la meilleure approche pour votre flux de travail de développement de thèmes??
Ici, je vais examiner les avantages et les inconvénients de l’utilisation de Bootstrap pour les thèmes WordPress et vous aider à identifier quand utiliser Bootstrap aidera votre flux de travail et quand ce ne sera pas le cas..
Le site web Bootstrap décrit Bootstrap comme:
les frameworks HTML, CSS et JS les plus populaires pour le développement de premiers projets réactifs et mobiles sur le Web.
Cela vous dit quelques choses:
Si vous y prêtez attention, vous remarquerez que cela n'inclut pas PHP. Bien que Bootstrap soit un cadre d’application, il ne ressemble pas à un cadre de thème: il ne vous donne aucun des fichiers de modèle de thème que vous devez créer si vous souhaitez en tirer parti dans un thème. Au lieu de cela, cela vous donne un cadre de styles et de scripts qui facilitera la mise en place d’un site réactif et l’ajout d’interactions et d’événements nécessitant JavaScript..
Bootstrap a été conçu à l'origine comme un framework pour aider les développeurs de Twitter à travailler de manière plus efficace et cohérente. Son nom initial s'appelait Twitter Blueprint, qui a été changé pour Bootstrap après que d'autres développeurs se sont impliqués et que le projet a commencé à prendre de l'ampleur..
Il a été publié en tant que framework open source en 2011 et a depuis été utilisé pour alimenter diverses applications, notamment les thèmes WordPress..
Lorsque je suis arrivé pour la première fois à Bootstrap, son principal argument de vente était sa réactivité à un moment où de nombreux développements Web (y compris le développement WordPress) devaient encore rattraper leur retard sur la conception de sites Web réactifs. À l'origine, ce n'était pas réactif: cela a été ajouté en 2012 et le framework est devenu mobile-first en 2013.
Si vous téléchargez Bootstrap, vous verrez qu'il se compose d'un ensemble de feuilles de style (y compris les versions minifiées), de fichiers JavaScript et de glyphicons, qui sont inclus dans les fichiers de polices. Ceux-ci ne remplacent pas vos fichiers de thème: vous les appelez à la place dans votre feuille de style et votre fichier de fonctions.
Je ne vais pas donner une explication détaillée de la façon dont vous utilisez Bootstrap avec votre thème WordPress ici: c'est traité en détail dans ce tutoriel. Au lieu de cela, je vais voir comment Bootstrap pourrait aider ou entraver votre flux de travail de développement de thème WordPress et les situations dans lesquelles vous pourriez l'utiliser ou pas..
La popularité même de Bootstrap en tant que framework pour les thèmes WordPress indique qu’il a définitivement sa place. Voyons donc quelques-uns des avantages de l’utilisation de Bootstrap.
Bootstrap vous donne automatiquement un style réactif, d’abord mobile, pour votre thème. Si vous avez du mal à vous familiariser avec le développement de thèmes réactifs, cela vous évitera le travail difficile nécessaire pour apprendre à rendre vos propres feuilles de style réactives et à ajouter des requêtes multimédia..
Bootstrap utilise une disposition basée sur une grille de 12 colonnes avec des classes de grille que vous pouvez utiliser avec les éléments de vos fichiers de modèle pour adapter votre contenu à la grille..
Les avantages de cette approche incluent:
À mon avis, la mise en page et la typographie que vous obtenez avec Bootstrap sont très agréables. Il ne remportera aucun prix de design, mais vous aidera à créer un thème moderne, facile à utiliser et lisible. Il y a certaines caractéristiques de style que j'aime particulièrement:
Accentsconagua
En plus d'introduire ses propres classes pour le style, Bootstrap inclut également le style pour la gamme complète d'éléments HTML5 que vous pouvez vous attendre à utiliser dans votre thème. Styliser tout cela à partir de zéro peut être un vrai casse-tête, cela vous épargne beaucoup de travail et vous facilite l'utilisation du balisage sémantique dans votre thème..
Au lieu d’avoir à utiliser des plugins ou des scripts sources d’ailleurs, Bootstrap vous fournit une belle gamme de scripts qui vous aideront à ajouter les animations et les interactions les plus couramment utilisées à votre site. Ceux-ci inclus:
… et plus. Cela peut accélérer votre développement et garantir également que tous vos scripts fonctionnent bien les uns avec les autres. Si vous comptez utiliser plus d'un ou deux d'entre eux, Bootstrap peut grandement faciliter le développement de votre thème. Cependant, si vous n'en utilisez qu'un ou peut-être deux, il pourrait y avoir une approche plus efficace avec moins de code ajouté..
Cependant, je ne crois pas que Bootstrap soit le bon outil pour tous les développeurs de thèmes WordPress. Voici quelques inconvénients à l’utilisation de Bootstrap lors du développement de vos thèmes..
J'ai déjà fait référence au système de grille réactif utilisé dans les feuilles de style de Bootstrap et à la multitude de classes que vous pouvez utiliser pour en tirer parti dans votre thème. C’est formidable si vous êtes prêt à vous familiariser avec ces cours et à comprendre comment les utiliser dans votre thème. Toutefois, si vous n'avez pas besoin d'une mise en page aussi complexe et n'utilisez que quelques-uns des styles, vous constaterez peut-être que vous passez beaucoup de temps à parcourir toutes les classes et à choisir celles à utiliser..
La feuille de style comprend 155 lignes de code correspondant à la disposition de la grille dans la plus petite largeur d'écran. C'est une chose à maîtriser si vous souhaitez en tirer le meilleur parti, et bien plus que la plupart des thèmes dont vous aurez besoin..
En plus de cela, il y a des classes pour les glyphicons, pour les boutons, etc..
Si votre thème utilise une proportion importante de ce style (ou si vous allez utiliser Bootstrap pour prendre en charge plusieurs thèmes), il est intéressant de prendre le temps de comprendre le fonctionnement des styles Bootstrap. Mais si vous n'avez besoin que de quelques colonnes et d'une conception réactive, alors cela risque d'être excessif..
Les requêtes de média utilisées par Bootstrap sont basées sur une hypothèse sur la largeur de l'écran et du périphérique qui devient obsolète.
Ce sont les requêtes des médias:
/ * Très petits périphériques (téléphones, moins de 768px) * / / * Aucune requête de média car il s'agit de la valeur par défaut dans Bootstrap * / / * Petits périphériques (tablettes, 768px et plus) * / @media (min-width: @screen -sm-min) … / * Appareils de taille moyenne (ordinateurs de bureau, 992px et plus) * / @media (largeur-min: @ screen-md-min) … / * Gros appareils (ordinateurs de bureau volumineux, 1200px et plus) * / @media (min-width: @ screen-lg-min) …
Depuis un an environ, le développement réactif s'éloigne des points d'arrêt prédéfinis pour les requêtes de support et se concentre sur les points d'arrêt basés sur la conception. Bien que ces requêtes multimédias soient basées sur et fonctionneront certainement avec la conception de Bootstrap (il ne devrait donc pas y avoir de problèmes sur les périphériques ni les navigateurs pris en charge, qui sont nombreux), mais cela ne donne pas la flexibilité dont vous disposiez si vous ' recoder le vôtre.
Si vous décidiez d'ajouter une requête multimédia intermédiaire à votre feuille de style, vous deviez alors prendre les 155 lignes de style de mise en page du système de grille et l'adapter à votre nouveau point d'arrêt - ce n'est pas une tâche que j'enverrais!
Oui, j'imagine que vous attendiez cette réponse, qui était la réponse de tout développeur Web sceptique à un nouveau framework ou outil..
Bootstrap vous offre indéniablement beaucoup de fonctionnalités et de styles que vous pouvez utiliser dans votre thème, et c'est une excellente chose. Cependant, si vous n'utilisez qu'une fraction de ce qui est fourni, cela signifie que vous ajoutez tout ce code supplémentaire pour rien..
Les fichiers sont minifiés, ce qui aide, mais malgré tout, avez-vous vraiment besoin de tout le code inutilisé de votre thème?
Ajoutez Bootstrap à votre thème, appelez la feuille de style à partir de la feuille de style de votre thème et bam! Vous avez une mise en page prête à l'emploi et sensible qui a l'air bien. La plupart d’entre nous seraient tentés d’en rester là, ajoutant peut-être quelques ajustements de couleur mais pas beaucoup plus..
Cela signifie que votre conception sera basée sur ce que Bootstrap fournit et non sur ce qui est requis pour votre site. Je travaille avec beaucoup de clients et avant même de commencer à discuter de la conception de leur site, je leur pose des questions sur les objectifs, le public, etc. de leur site. Tout cela guidera la conception du site, à la fois en termes de visuels et en termes d’interface utilisateur..
Le danger de beaucoup de thèmes utilisant Bootstrap est que nous finirons avec autant de thèmes qui se ressemblent. Les développeurs de thèmes WordPress ont réussi ces dernières années à rejeter les accusations selon lesquelles leurs thèmes «ressemblent à WordPress». Nous voulons donc que tous nos thèmes «ressemblent à Bootstrap».?
En fin de compte, je pense que le facteur le plus important qui pourrait vous décourager d’utiliser Bootstrap est le fait qu’il n’a jamais été conçu pour fonctionner avec WordPress, et que cela fonctionne de manière très différente..
Un framework de thème WordPress vous donnera souvent tout ce que vous obtenez de Bootstrap, et d’une manière beaucoup plus proche du travail des développeurs WordPress. Celles-ci ne doivent pas forcément être chères ou avoir d’énormes bases de code: le thème Wonderflux, par exemple, est gratuit et à source ouverte, et inclut un système de grille réactif (comme Bootstrap mais moins lourd) et une bibliothèque de fonctions et de hooks que vous n’aurez pas t obtenir avec Bootstrap.
Un exemple de la compatibilité de Bootstrap et de WordPress est la conception des menus de navigation. Votre menu WordPress ne fonctionnera pas immédiatement avec Bootstrap activé: vous devrez plutôt créer un navigateur de navigation personnalisé. Ce n'est pas difficile à faire si vous êtes à l'aise avec le code, mais ajoute une autre étape au développement de votre thème..
Bootstrap a définitivement ses avantages. Si vous avez besoin d'une présentation attrayante, propre et réactive pour votre site et d'un accès à une gamme d'effets JavaScript, vous pouvez ainsi accélérer le processus de développement de vos thèmes..
Cependant, si vous voulez tirer le meilleur parti de Bootstrap, vous devrez passer un peu de temps à l’apprendre. Il y a beaucoup à apprendre avec Bootstrap, et si vous n'utilisez pas tout, ça ne vaut peut-être pas la peine.
Pour conclure, je recommanderais d’utiliser Bootstrap dans diverses circonstances:
Et je conseillerais de ne pas l'utiliser dans ces circonstances:
En fin de compte, la décision vous appartient!
