Sur cette page: [cacher]
La plupart des didacticiels Bootstrap-in-WordPress vous demandent toujours de coller un lien de feuille de style dans header.php et de charger jQuery à côté.. Les deux mouvements sont faux dans 2026. Amorcer 5 abandonné jQuery en tant que dépendance, et la modification de header.php sera directement effacée la prochaine fois que votre thème sera mis à jour. Ce guide montre la façon actuelle de le faire, avec du code qui fonctionne toujours après une mise à jour.
Réponse rapide: Pour la plupart des sites, enqueue Amorcer 5.3.8 via un CDN dans le fichier function.php de votre thème (une dizaine de lignes, pas de jQuery). Créer un thème entièrement personnalisé? Commencez plutôt par un démarreur basé sur Bootstrap comme Understrap. Je veux juste des composants Bootstrap dans l'éditeur de blocs? Installez un plugin de blocs Bootstrap et ignorez complètement le code.
Dernière révision: juin 2026. Version d'amorçage (5.3.8) et des échantillons de code vérifiés par rapport aux documents officiels.
Ce que fait réellement Bootstrap (et ce que WordPress gère déjà)
Bootstrap est gratuit, Open source cadre CSS frontal. Il livre une grille réactive, composants prêts à l'emploi (barres de navigation, cartes, modaux, boutons), et classes utilitaires pour l'espacement et la disposition. Vous obtenez tout cela sans écrire beaucoup de CSS à la main. C'est la conception et la mise en page, rien de plus.
WordPress est le système de gestion de contenu: des postes, pages, utilisateurs, la base de données, le tableau de bord d'administration. Il décide quel contenu existe et où il se trouve. Bootstrap décide de l'apparence de ce contenu à l'écran. Ils ne se chevauchent pas, c'est exactement pourquoi ils se marient bien, et aussi pourquoi WordPress ne propose jamais Bootstrap pour vous. Vous devez l'apporter vous-même.
Voici ce qui manque aux gens: c'est une décision du développeur ou du concepteur, pas une fonctionnalité de clic sur un bouton. Si vous codez manuellement un thème, Bootstrap vous fait gagner des semaines. Si vous préférez faire glisser des blocs, vous n'aurez peut-être pas du tout besoin d'un framework. Notre Guide WordPress vs créateurs de sites Web est le meilleur point de départ dans ce cas.
Encore un fait qui mérite d'être corrigé immédiatement. Amorcer 5 jQuery supprimé. Le JavaScript est désormais clair (vanille) JS. Si un tutoriel vous demande de charger jQuery pour que Bootstrap fonctionne, ce tutoriel décrit Bootstrap 4 ou plus. Sautez-le.
Méthode 1: Ajouter Bootstrap via CDN dans Functions.php (conseillé)
C'est la bonne valeur par défaut pour presque tout le monde. Un CDN (réseau de diffusion de contenu, un ensemble de serveurs qui héberge des fichiers proches de vos visiteurs) sert Bootstrap, donc tu ne stockes rien toi-même. Et vous le chargez à la manière de WordPress, à travers mise en file d'attente. Cela signifie enregistrer un fichier pour que WordPress l'imprime au bon endroit, sans aucune modification de header.php.
Ajoutez ceci à votre fonctions.php du thème enfant. Un thème enfant compte: modifiez le parent et vos modifications disparaîtront lors de la prochaine mise à jour.
fonction htg_enqueue_bootstrap() {
wp_enqueue_style(
'amorçage',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
tableau(),
'5.3.8'
);
wp_enqueue_script(
'amorçage',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',
tableau(),
'5.3.8',
vrai
);
}
add_action( 'wp_enqueue_scripts', 'htg_enqueue_bootstrap' );
Cinq éléments de cet extrait méritent leur place:
- tableau(), pas de tableau('jquery'). Amorcer 5 n'a pas de dépendance jQuery. Ajouter un code de chargement dont vous n'avez pas besoin.
- le .bundle.min.js le fichier inclut Popper, la petite bibliothèque qui positionne les listes déroulantes, info-bulles, et popovers. Utilisez le fichier non groupé uniquement si vous ignorez ces composants.
- vrai à la fin charge le script dans le pied de page, afin que cela n'empêche pas le rendu de votre page.
- le '5.3.8’ chaîne de version indique à WordPress de supprimer correctement le cache lorsque vous effectuez une mise à niveau ultérieure.
- wp_enqueue_scripts est le crochet frontal. Cela ne touchera pas votre zone d'administration.
Enregistrez le fichier, rechargez votre site, et voir la source. Vous devriez voir la feuille de style et le script Bootstrap imprimés automatiquement. Pour confirmer les exécutions de JavaScript, déposez un accordéon ou un modal Bootstrap sur une page et cliquez dessus. S'il anime, tu as fini.
La route CDN signifie également que Bootstrap arrive depuis des serveurs proches de votre visiteur et est souvent déjà mis en cache dans son navigateur depuis un autre site.. Si la vitesse des pages est votre priorité, cet avantage mérite d'être compris, et notre analyse de la façon dont L'hébergement CDN affecte les temps de chargement explique les compromis en termes simples.
Méthode 2: Héberger Bootstrap localement (Pour le contrôle et la confidentialité)
Les CDN sont pratiques, mais ils remettent à un tiers un enregistrement de vos visiteurs’ Adresses IP. Pour les sites sensibles au RGPD dans l'UE, ou toute personne souhaitant zéro demande externe, héberger les fichiers vous-même est plus propre. Vous arrêtez également de dépendre de la disponibilité de quelqu'un d'autre.
Les étapes:
- Téléchargez le Bootstrap compilé 5.3.8 paquet de getbootstrap.com (le “CSS et JS compilés” Télécharger, pas les fichiers sources).
- Déposez bootstrap.min.css dans votre thème à l'adresse /actifs/css/ et bootstrap.bundle.min.js dans /actifs/js/.
- Remplacez les deux URL CDN dans l'extrait ci-dessus par des chemins locaux à l'aide de get_template_directory_uri(), par exemple get_template_directory_uri() . '/assets/css/bootstrap.min.css'. Utilisez get_stylesheet_directory_uri() à la place, si les fichiers résident dans un thème enfant.
Tout le reste reste identique. La seule chose que vous perdez est l'avantage du cache partagé. Ce que vous gagnez, c'est la pleine propriété: pas de mise en page cassée si un CDN passe une mauvaise journée, et rien ne divulgue les données des visiteurs hors site.
Méthode 3: Commencer à partir d'un thème de démarrage Bootstrap
Méthodes 1 et 2 boulonner Bootstrap sur un thème existant. Si vous créez un thème à partir de zéro, ne boulonne rien. Commencez à partir d’une base qui connecte déjà Bootstrap à la structure des modèles de WordPress pour vous.
Sangle est le choix de longue date. Il soude le démarreur classique Underscores (le thème simple que les développeurs WordPress utilisent depuis des années) pour amorcer, avec Sass déjà configuré pour que vous puissiez recompiler une version personnalisée. Démarreur WP Bootstrap est le plus léger, option plus conviviale pour un premier thème personnalisé. sauge par Roots se situe à l’extrémité avancée: il utilise des modèles Blade et un pipeline de construction moderne, et c'est indépendant du framework, afin que vous puissiez exécuter Bootstrap ou l'échanger.
La récompense est réelle. Un thème de démarrage vous offre une barre de navigation fonctionnelle, un modèle de commentaire, pagination, et les hooks WooCommerce qui parlent déjà le balisage de Bootstrap. Vous évitez la plomberie fastidieuse et écrivez uniquement les parties qui font de votre conception la vôtre.. Le coût est une courbe d’apprentissage: tu devras être à l'aise avec Sass, une borne, et recompilation des actifs.
Une mise en garde honnête. Avant de vous engager dans une démarche de démarrage, vérifiez sa date de dernière mise à jour sur GitHub. Un démarreur qui n’a pas publié de version depuis deux ans peut toujours cibler Bootstrap 4 et ses habitudes jQuery. Cela vous ramène directement dans le camp obsolète dont ce guide essaie de vous sortir.
Méthode 4: Utiliser un plugin Bootstrap Blocks (Aucun code)
Pas un développeur? Vous pouvez toujours obtenir la grille et les composants de Bootstrap dans l’éditeur de blocs WordPress standard.. Plugins tels que Blocs d'amorçage de l'éditeur de blocs ajouter des lignes alimentées par Bootstrap, Colonnes, boutons, et conteneurs en tant que blocs natifs. Vous créez des mises en page réactives en faisant glisser des blocs, et le plugin met Bootstrap en file d'attente dans les coulisses.
C'est la voie à suivre pour les éditeurs de contenu et les propriétaires de petites entreprises qui aiment le look de Bootstrap mais ne veulent jamais ouvrir Functions.php.. C’est aussi la seule méthode qui joue naturellement avec l’éditeur de blocs, puisque les trois autres supposent que vous stylisez les modèles à la main.
Soyez réaliste concernant le plafond, bien que. Un plugin de blocs vous donne les composants de Bootstrap, pas la pleine liberté de framework qu'un développeur obtient grâce aux méthodes 1 à travers 3. Si votre objectif est une conception personnalisée au pixel près, tu vas le dépasser. Si vous voulez simplement nettoyer, sections réactives sans code, ça fait le travail. Et si “pas de code” c'est vraiment ce que tu cherches, comparez-le à un Constructeur WordPress IA. Cet itinéraire peut atteindre une mise en page terminée plus rapidement que l'apprentissage des classes Bootstrap.
Maintenant, écrivez le balisage Bootstrap: La grille en pratique
Charger Bootstrap représente la moitié du travail. L'autre moitié écrit ses cours dans vos pages, et la plupart des tutoriels s'arrêtent avant de vous montrer. Si vous avez utilisé les méthodes 1 à travers 3, vous ajoutez du balisage dans les fichiers de modèle de votre thème ou dans un bloc HTML personnalisé sur n'importe quelle page ou publication. (Le plugin de la méthode 4 crée le balisage pour vous, vous pouvez donc sauter cette partie.)
Bootstrap est construit sur un 12-grille de colonnes. Trois classes imbriquées le pilotent: un .container pour l'emballage extérieur, un .row à l'intérieur, et éléments .col pour chaque colonne. Voici une mise en page qui s'empile sur les téléphones et se divise en 8 et 4 colonnes sur les tablettes et versions ultérieures:
<classe div ="récipient">
<classe div ="rangée">
<classe div ="col-md-8">Contenu principal</div>
<classe div ="col-md-4">Barre latérale</div>
</div>
</div>
le col-md- préfixe est le déclencheur réactif. En dessous du point d'arrêt moyen (768px), les deux colonnes occupent toute la largeur et s'empilent. À 768px et plus large, ils sont assis côte à côte. Remplacer md par sm, LG, ou xl pour se déplacer là où ce changement se produit. Une ligne de noms de classe remplace les requêtes multimédias que vous auriez autrement écrites à la main.
Les composants fonctionnent de la même manière. Copiez le balisage d'une carte, barre de navigation, ou modal directement à partir de la documentation de Bootstrap, collez-le dans votre modèle, et les styles que vous avez mis en file d'attente s'appliquent immédiatement. Aucune configuration supplémentaire par composant.
Le conflit dont personne ne vous met en garde
Voici où la plupart des projets Bootstrap-in-WordPress vont de travers. Votre thème actif possède déjà son propre CSS. Quand Bootstrap se charge par dessus, les deux se battent pour les mêmes noms de classe et styles de base. Les boutons semblent éteints. Pauses d'espacement. Une mise en page qui allait bien hier s'effondre.
Trois collisions sont à l'origine de la quasi-totalité de tout cela:
- La classe .container. De nombreux thèmes définissent leur propre .container avec une largeur maximale différente. Bootstrap le redéfinit, et celui qui charge en dernier gagne. En conséquence, les mises en page sautent.
- Réinitialisation de la base. Le redémarrage de Bootstrap relooke les éléments bruts comme le corps, rubriques, et des listes. Cela peut discrètement remplacer la typographie de votre thème.
- Doubles grilles. Si votre thème utilise déjà une grille (Flexbox ou grille CSS), La grille de Bootstrap s'empile en haut, et les éléments finissent par être imbriqués dans deux systèmes concurrents.
Vous avez deux correctifs propres. La première est de portéeAmorçage: enveloppez les sections que vous souhaitez styliser dans une classe parent (un modèle courant le nomme bootstrap-iso). Compilez ensuite Bootstrap pour que ses règles ne s'appliquent qu'à l'intérieur de ce wrapper. Cela ne touche plus le reste de votre thème. Le deuxième correctif, souvent le plus intelligent, est de créer un bundle Bootstrap personnalisé. Il importe uniquement les pièces que vous utilisez, la grille et quelques composants, et laisse le redémarrage de côté. Moins de CSS, moins de collisions, pages plus rapides. C'est aussi pourquoi un thème de démarrage (Méthode 3) évite le problème dès le départ: il est construit autour de Bootstrap, donc rien n'entre en collision.
Quelle méthode devriez-vous choisir?
Faites correspondre la méthode à ce que vous construisez réellement. Trois cas courants:
- Vous exécutez un site terminé sur un thème tiers et souhaitez quelques composants Bootstrap. Utiliser la méthode 1 (Mise en file d'attente CDN) dans un thème enfant. Ne cherchez pas un thème de départ; reconstruire l'intégralité de votre site pour ajouter un modal est excessif. Si des conflits apparaissent, portée Bootstrap comme décrit ci-dessus.
- Vous êtes un développeur qui crée un thème personnalisé à partir de zéro. Utiliser la méthode 3 (Understrap ou Sauge). Mettre Bootstrap en file d'attente sur un thème _s vierge à la main recrée simplement ce qu'Understrap vous donne déjà, moins les modèles WooCommerce et navbar testés.
- Vous êtes un éditeur de contenu ou un propriétaire de magasin qui souhaite des mises en page réactives sans code. Utiliser la méthode 4 (un plugin de blocs). L'édition de Functions.php ne vaut pas le risque pour votre cas d'utilisation. Si vous exploitez une boutique, associez-le à un hébergement adapté au travail. Nos notes sur Hébergement de commerce électronique WordPress expliquer pourquoi un front-end Bootstrap a toujours besoin d'un back-end rapide.
Une exigence de confidentialité ou de conformité prévaut sur les trois. Si vous ne pouvez pas envoyer les données des visiteurs vers un CDN externe, passez la méthode que vous avez choisie à l'hébergement local de la méthode 2.
Questions fréquemment posées
Ai-je encore besoin de jQuery pour utiliser Bootstrap 5 dans WordPress?
Non. Amorcer 5 abandonné jQuery et fonctionne sur JavaScript Vanilla. Lorsque vous mettez le script en file d'attente, laissez le tableau de dépendances vide (tableau()), pas de tableau('jquery'). L'ajout de jQuery charge du code supplémentaire que vos composants Bootstrap n'appellent jamais. Uniquement Bootstrap 4 et plus tôt j'en avais besoin.
Bootstrap est-il bon pour WordPress dans 2026?
Oui, si vous codez un thème ou souhaitez des composants réactifs cohérents. La grille et les utilitaires de Bootstrap réduisent le temps de développement et fonctionnent sur tous les navigateurs modernes sans correctifs supplémentaires.. C'est moins utile si vous construisez avec l'éditeur de blocs ou un constructeur de pages, puisque ces outils gèrent déjà la mise en page réactive. Adaptez-le à votre façon de travailler réellement.
L'ajout de Bootstrap ralentit-il un site WordPress?
Ça peut, si vous chargez l'intégralité du framework pour deux composants. Les CSS et JS entièrement minifiés ajoutent un réel poids. Les charger depuis un CDN, reporter le script au pied de page, et la création d'un ensemble personnalisé avec uniquement les pièces que vous utilisez permet de limiter le succès.. Vous pouvez également charger Bootstrap uniquement là où cela est nécessaire: envelopper la mise en file d'attente dans un conditionnel comme is_page() donc il n'est pas livré sur chaque URL. Un thème gonflé empilé sur Bootstrap complet est le véritable problème de vitesse, pas Bootstrap tout seul.
Puis-je utiliser Bootstrap avec l'éditeur de blocs WordPress?
Oui, via un plugin comme Block Editor Bootstrap Blocks, qui ajoute des lignes Bootstrap, Colonnes, et les boutons en tant que blocs natifs. Bootstrap de mise en file d'attente manuelle (Méthode 1) n'expose pas ses composants dans l'éditeur, vous écririez donc les noms de classe manuellement dans des blocs HTML personnalisés. Pour les flux de travail axés sur l'éditeur, la voie du plugin est la plus pratique.
Dois-je utiliser un CDN Bootstrap ou héberger les fichiers localement?
Utilisez le CDN pour plus de commodité et pour tenter la mise en cache du navigateur partagé. Hébergez localement si vous avez des exigences RGPD ou de confidentialité, je ne veux aucune demande externe, ou vous ne voulez pas dépendre de la disponibilité d'un autre réseau. Le code est presque identique; vous échangez simplement les URL CDN pour get_template_directory_uri() chemins d'accès aux fichiers dans votre thème.
Obtenez la bonne méthode, Pas seulement le code
Bootstrap et WordPress s'emboîtent parfaitement une fois que vous arrêtez de suivre les didacticiels de l'ère 2018. Version mise en file d'attente 5.3.8 dans un thème enfant, supprimez la dépendance jQuery, et définissez vos styles afin qu'ils ne combattent pas votre thème. Cela couvre la grande majorité des projets réels. Choisissez un thème de démarrage uniquement lorsque vous construisez à partir de zéro, et un plugin de blocage uniquement lorsque vous restez en dehors du code.
Si cela fait partie d'une construction plus grande, quelques guides connexes approfondissent. Comparer hébergement WordPress géré aux États-Unis pour savoir où exécuter un thème personnalisé. Et vérifiez si vous avez même besoin de coder dans notre analyse des créateurs de sites Web par rapport à WordPress.. Un framework n'est rentable que lorsque le reste de la pile, hébergement inclus, je peux suivre.