{"id":817016,"date":"2022-09-28T12:00:00","date_gmt":"2022-09-28T12:00:00","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/how-to-use-bootstrap-in-wordpress-a-beginners-guide\/"},"modified":"2022-12-10T12:44:44","modified_gmt":"2022-12-10T12:44:44","slug":"how-to-use-bootstrap-in-wordpress-a-beginners-guide","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-utiliser-bootstrap-dans-wordpress-guide-du-debutant\/","title":{"rendered":"Comment utiliser Bootstrap dans WordPress : Guide du d\u00e9butant"},"content":{"rendered":"
WordPress et Bootstrap sont deux plateformes populaires de conception de sites Web qui ne sont pas souvent consid\u00e9r\u00e9es comme compatibles. Bootstrap est devenu la plateforme CSS pr\u00e9f\u00e9r\u00e9e des d\u00e9veloppeurs, car il permet de cr\u00e9er facilement des sites Web r\u00e9actifs. En fait, plus de 70 % des sites Web sur Internet sont con\u00e7us avec cette plateforme. Vous pouvez coder tout ce que vous voulez dans son cadre r\u00e9actif pour cr\u00e9er un site Web unique et adapt\u00e9 aux mobiles, d\u00e8s sa sortie de la bo\u00eete. Plus de la moiti\u00e9 des utilisateurs acc\u00e9dant \u00e0 l’internet via un appareil mobile, il est essentiel de disposer d’un site r\u00e9actif.<\/p>\n
Et si nous vous disions que vous pouvez utiliser Bootstrap et WordPress ensemble ? Eh bien, c’est possible. Il existe plusieurs fa\u00e7ons d’utiliser Bootstrap dans WordPress, notamment les plugins WordPress Bootstrap qui peuvent ajouter des blocs Bootstrap \u00e0 l’\u00e9diteur WordPress. Nous allons couvrir toutes les fa\u00e7ons d’utiliser Bootstrap dans WordPress et vous montrer comment.<\/p>\n
Bootstrap<\/a> a \u00e9t\u00e9 cr\u00e9\u00e9 par deux experts de Twitter, Marc Otto et Jacob Thornton. \u00c9tant donn\u00e9 que de nombreuses personnes acc\u00e8dent \u00e0 l’Internet par t\u00e9l\u00e9phone, ils ont voulu concevoir un cadre qui donnerait la priorit\u00e9 aux utilisateurs mobiles. C’est pourquoi Bootstrap est tr\u00e8s populaire aupr\u00e8s des d\u00e9veloppeurs Web. Pour r\u00e9aliser une conception mobile, Bootstrap utilise un syst\u00e8me de grille, ou structure en colonnes, qui adapte la conception des pages \u00e0 certains points de rupture ou \u00e0 certaines r\u00e9solutions d’\u00e9cran. Bootstrap est compos\u00e9 de HTML, CSS et Javascript. Il s’agit d’un cadre gratuit et open source, qui permet aux utilisateurs d’ajouter tout composant HTML ou Javascript qu’ils souhaitent. En fait, il existe de nombreux d\u00e9veloppeurs Bootstrap qui cr\u00e9ent des composants et les vendent sur plusieurs places de march\u00e9 pour aider les d\u00e9butants \u00e0 d\u00e9velopper leurs propres sites Web. \u00c0 l’instar de WordPress, Bootstrap est tr\u00e8s populaire et permet de r\u00e9aliser de magnifiques designs.<\/p>\n En plus d’\u00eatre orient\u00e9 vers les appareils mobiles, Bootstrap est rapide. Il s’agit d’un cadre CSS, ce qui est diff\u00e9rent d’un CMS. Il n’y a donc pas d’\u00e9l\u00e9ments superflus comme ceux que l’on trouve dans certains CMS et qui ralentissent votre site. Un autre avantage est la compatibilit\u00e9 avec les navigateurs. Il fonctionne d\u00e8s le d\u00e9part avec Chrome, Safari, Firefox et d’autres. Il n’est pas n\u00e9cessaire d’utiliser les r\u00e8gles CSS de webkit pour que Bootstrap fonctionne, ce qui en fait un excellent choix pour la compatibilit\u00e9 entre navigateurs. En outre, le cadre est facile \u00e0 utiliser. Toute personne ayant des connaissances en CSS et en HTML peut travailler avec Bootstrap. Enfin, Bootstrap est entour\u00e9 d’une grande communaut\u00e9. Les utilisateurs sont prompts \u00e0 partager leurs connaissances sur les fonctionnalit\u00e9s, le codage ou tout autre probl\u00e8me connexe pour lequel un nouveau d\u00e9veloppeur pourrait avoir besoin d’aide.<\/p>\n Il existe quelques options si vous souhaitez utiliser Bootstrap sur votre site WordPress. Vous pouvez installer le script manuellement, mais vous devrez effectuer la majeure partie du codage par vous-m\u00eame pour lui donner vie. Deuxi\u00e8mement, vous pouvez utiliser un th\u00e8me Bootstrap pr\u00e9\u00e9tabli pour WordPress. Il en existe plusieurs, mais en choisissant cette option, votre site devra ressembler exactement au th\u00e8me. Il n’y aura pas beaucoup d’options pour le rendre moins \u00ab\u00a0cookie-cutter\u00a0\u00bb, \u00e0 moins que vous ne codiez vos propres mod\u00e8les de page pour changer les choses. Enfin, vous pouvez utiliser un plugin WordPress pour cr\u00e9er votre site \u00e0 l’aide de Boostrap.<\/p>\n Ces derni\u00e8res ann\u00e9es, les d\u00e9veloppeurs de WordPress ont commenc\u00e9 \u00e0 publier des plugins Bootstrap qui peuvent \u00eatre utilis\u00e9s dans WordPress. Ces plugins commencent \u00e0 s’imposer, notamment depuis la sortie des blocs Gutenberg. En utilisant un plugin WordPress Bootstrap, vous pouvez apporter le meilleur des deux plateformes ensemble. Avant de nous plonger plus profond\u00e9ment dans ce que vous pouvez faire avec ces plugins, d\u00e9veloppons un peu l’autre option qui s’offre \u00e0 vous pour donner vie \u00e0 votre projet Bootstrap dans WordPress.<\/p>\n Si vous ne voulez pas utiliser de plugin, vous pouvez toujours construire votre site avec Boostrap manuellement. Pour ce faire, vous devrez ajouter un lien de r\u00e9f\u00e9rence \u00e0 Bootstrap dans l’en-t\u00eate de votre site WordPress. Vous devrez peut-\u00eatre ajouter un plugin de code snippets pour le faire, selon le th\u00e8me que vous utilisez.<\/p>\n Un lien CDN vers la feuille de style externe de Bootstrap dans l’en-t\u00eate de votre site ressemblera \u00e0 quelque chose comme ceci <\/strong><\/p>\n Veillez \u00e0 consulter le site Web de Bootstrap<\/a> pour vous assurer que vous utilisez le dernier script afin de b\u00e9n\u00e9ficier de la derni\u00e8re version disponible. Gardez \u00e0 l’esprit que vous pouvez cr\u00e9er votre propre th\u00e8me WordPress qui int\u00e8gre Bootstrap, mais cela demandera un certain travail de votre part. Cela impliquerait de modifier les pages principales – index.php, wp-admin.php, et autres. Pour ce tutoriel, nous allons utiliser un plugin Bootstrap car il s’agit d’une approche beaucoup plus facile pour la plupart des gens.<\/p>\n Il existe un grand nombre de th\u00e8mes WordPress Bootstrap gratuits disponibles dans le d\u00e9p\u00f4t de WordPress. Chacun d’entre eux est enti\u00e8rement responsive, et construit enti\u00e8rement en utilisant Bootstrap. Jetons un coup d’\u0153il \u00e0 quelques-uns des choix les plus populaires.<\/p>\n Shapely<\/a> est le th\u00e8me WordPress Boostrap le plus populaire disponible. C’est un design \u00e0 une page qui est livr\u00e9 avec Bootsrap enti\u00e8rement int\u00e9gr\u00e9. Il y a plusieurs widgets de page d’accueil, et le support des principaux plugins WordPress tels que WooCommerce, Jetpack, Gravity Forms, Yoast SEO, et bien d’autres. Gr\u00e2ce \u00e0 l’int\u00e9gration de Boostrap, Shapely est 100% responsive.<\/p>\n Illdy<\/a> est un th\u00e8me WordPress Bootstrap polyvalent qui utilise un \u00e9diteur visuel frontal. Comme tous les th\u00e8mes bas\u00e9s sur Bootstrap, Illdy est enti\u00e8rement responsive. Il est adapt\u00e9 aux entreprises cr\u00e9atives en raison de sa fonctionnalit\u00e9 de portefeuille int\u00e9gr\u00e9e.<\/p>\n Activello<\/a> dispose d’un slider plein \u00e9cran sur la page d’accueil, ce qui donne un aspect \u00e9tonnant lorsque vous cliquez sur la page pour la premi\u00e8re fois. Il est bien adapt\u00e9 aux blogueurs et prend en charge les plugins WordPress les plus populaires. En outre, Activello est compatible avec Schema, ce qui rend ce th\u00e8me tr\u00e8s convivial pour le r\u00e9f\u00e9rencement.<\/p>\n Dans le cadre de ce tutoriel, nous utiliserons un plugin pour cr\u00e9er notre page Bootstrap sur WordPress. Les deux plugins dont nous allons parler permettent d’utiliser Bootstrap avec les blocs Gutenberg, mais l’un d’eux offre un chemin plus facile que l’autre.<\/p>\n Bootstrap Blocks<\/a> est un plugin WordPress qui ajoute des blocs Boostrap Gutenberg \u00e0 l’\u00e9diteur WordPress. Le plugin n\u00e9cessite un certain nombre de personnalisations pour s’int\u00e9grer pleinement \u00e0 WordPress. Il n’inclut pas la biblioth\u00e8que Bootstrap dans le plugin. Si vous voulez avoir cette fonctionnalit\u00e9, vous devrez ajouter manuellement du code \u00e0 votre fichier functions.php. Ce plugin est plus adapt\u00e9 au d\u00e9veloppeur WordPress avec une bonne quantit\u00e9 de connaissances en programmation. Si vous \u00eates d\u00e9j\u00e0 familier avec le fonctionnement des fichiers de base de WordPress, et que vous avez une bonne notion de Bootstrap, cela pourrait \u00eatre la voie \u00e0 suivre. Cependant, il y a une chose que vous devez garder \u00e0 l’esprit \u00e0 propos de ce plugin. Vous n’aurez acc\u00e8s qu’\u00e0 quelques composants – conteneurs, lignes, colonnes et boutons. Si vous voulez une option plus robuste sans beaucoup de tracas, vous voudrez probablement envisager une approche diff\u00e9rente.<\/p>\n
\n<\/p>\n
Les avantages de Bootstrap<\/h2>\n
Fa\u00e7ons d’utiliser Bootstrap dans WordPress<\/h2>\n
Installation manuelle de Bootstrap<\/h3>\n
<\/pre>\n
Utiliser un th\u00e8me WordPress Bootstrap<\/h3>\n
Shapely<\/h4>\n
<\/p>\n
Illdy<\/h4>\n
<\/p>\n
Activello<\/h4>\n
<\/p>\n
Utilisation d’un plugin WordPress Bootstrap<\/h3>\n
Blocs Bootstrap<\/h4>\n
<\/p>\n
Tous les blocs Bootstrap<\/h4>\n
<\/p>\n