Bootstrap est un cadre de conception puissant utilisé sur des milliers de sites Web WordPress (WP). Avec autant de nouvelles technologies frontales qui apparaissent presque quotidiennement, Bootstrap est-il toujours une option valable pour créer des thèmes WP ? En fait, vous pouvez l’utiliser pour étendre les fonctionnalités d’un site WordPress existant. Et normalement, vous ne trouverez pas cela dans une installation par défaut. Ce guide vous guidera à travers les différentes façons d’utiliser Bootstrap pour un site Web WordPress.
Pourquoi intégrer un framework dans WordPress ?
Avant de créer un site Web, la plupart des gens choisissent une des méthodes courantes pour gérer cette tâche :
L’approche à partir de zéro : cela nécessite l’embauche de développeurs front-end et back-end connaissant bien le processus de développement Web. De plus, ils doivent être à l’aise aux technologies Web de base (HTML, CSS, JavaScript et PHP). Ainsi, ils créent une solution entièrement personnalisée qui répond à tous les besoins de votre entreprise. Cependant, cette méthode entraîne une facture assez conséquente au final.
Cliquez ici, cliquez là, modifiez quelques paramètres et c’est parti ! Très pratique. Il y a cependant un sérieux inconvénient. En fait, votre site aura une interface similaire à des milliers d’autres. Et il n’aura pas l’air assez professionnel pour attirer votre public cible.
Comme vous pouvez le voir, cette méthode a ses forces et ses faiblesses. Existe-t-il un meilleur moyen ? Oui il y en a. De nos jours, de nombreuses entreprises choisissent WordPress comme base pour leurs sites Web. D’autre part, ils personnalisent le thème WordPress en tirant parti de la puissance de Bootstrap.
Alors, discutons si le développement de thèmes WordPress avec Bootstrap donne vraiment aux entreprises la valeur qu’elles recherchent.
Découvrez Bootstrap : un framework CSS puissant
Pour ceux d’entre vous qui n’ont peut-être pas entendu parler de Bootstrap, disons qu’il s’agit d’un framework CSS. En bref, il permet de créer des interfaces utilisateur réactives. En fait, Twitter l’a introduit pour faciliter le travail des propres ingénieurs back-end de l’entreprise. Il y a environ 11 ans, le code source de Bootstrap a été rendu public.
Actuellement, Bootstrap fait partie des frameworks CSS les plus populaires sur l’ensemble d’Internet. L’utilisation de ce framework puissant dans WordPress peut vous offrir de nombreuses opportunités pour :
- créer des pages, des publications ou même un thème avec des fonctionnalités très distinctives.
Bootstrap vous permettra également de créer des sites Web réactifs qui fonctionnent avec une variété d’appareils et de tailles d’écran. D’ailleurs, le mot clé dans la description de Bootstrap est “réactif”. En effet, il contient essentiellement un ensemble de fichiers HTML, CSS et JavaScript. Ceux-ci facilitent la création d’un site en utilisant des classes CSS prédéfinies (Bootstrap est basé sur le CSS orienté objet).
Comment installer Bootstrap pour WordPress ?
Bootstrap n’est pas fourni avec l’installation WordPress par défaut. En revanche, il doit être mis en file d’attente ou référencé pour être utilisé dans WordPress. Vous pouvez également trouver des solutions d’hébergement qui incluent déjà Bootstrap. Si vous avez l’intention de faire référence à Bootstrap, vous pouvez trouver le lien vers la dernière version sur leur site Web. Voici le lien actuel qu’ils fournissent :
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css” integrity=”sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2″ crossorigin=”anonymous”>
Ce code doit aller dans le fichier header.php du thème que vous utilisez dans WordPress. Par la suite, le nom du fichier d’en-tête peut être décrit comme “en-tête du thème” dans l’éditeur.
Avertissement : Notez que vous apportez des modifications à votre fichier de thème. Si le thème est mis à jour, il est possible que votre code ajouté soit supprimé par la mise à jour. Nous vous recommandons d’utiliser un thème enfant dans WordPress pour éviter que cela ne se produise.
Vous devez également faire une sauvegarde de votre site WordPress avant d’apporter des modifications. Ainsi, vous pouvez récupérer votre site au cas où quelque chose se passerait.
8 étapes pour mettre le lien Bootstrap sur l’en-tête du thème de WP
Suivez les étapes ci-dessous pour modifier l’en-tête du thème à l’aide de l’éditeur intégré dans WordPress :
- Étape 1 : Connectez-vous au tableau de bord de votre site WordPress.
- Étape 2 : Cliquez sur Apparence.
- Étape 3 : Cliquez sur Éditeur de thème. Dans certains cas, il peut s’agir simplement d’Éditeur. Et si vous ne voyez pas d’option d’éditeur pour une raison quelconque ? Donc, vous devez regarder vos fichiers d’installation WordPress. Puis, trouvez le dossier du thème. Ensuite, recherchez le fichier header.php, puis ouvrez-le dans un éditeur de texte.
- Étape 4 : Lorsque vous modifiez le header.php, recherchez <head> dans le code.
- Étape 5 : Copiez le code avec le lien ci-dessus (ou directement depuis le site Bootstrap).
- Étape 6 : Collez le code immédiatement après la balise head. N’écrasez aucun code existant. Vous pouvez créer de l’espace en plaçant le curseur après la balise head et en appuyant sur la touche Entrée.
- Étape 7 : Cliquez sur Mettre à jour le fichier pour enregistrer vos modifications.
- Étape 8 : Videz le cache de votre navigateur. Enfin, vous devez simplement recharger votre site WordPress pour commencer à utiliser Bootstrap.
Création de thème avec Bootstrap dans WP
Une référence à la version actuelle charge Bootstrap à partir d’un CDN. Actuellement, ils en utilisent un appelé JSdelivr. Avez-vous l’intention de commencer à créer un thème avec Bootstrap ? Donc, vous devez le mettre en file d’attente dans votre thème WordPress. Le code utilisé pour mettre en file d’attente Bootstrap devra être ajouté au functions.php du thème WordPress que vous développez :
function wpbootstrap_enqueue_styles() {wp_enqueue_style( ‘bootstrap’, https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css’ );} add_action(‘wp_enqueue_scripts’, ‘wpbootstrap_enqueue_styles’);\
Pour en savoir plus sur la mise en file d’attente et le développement de thèmes pour WordPress, veuillez consulter le Codex WordPress. Si tout cela vous semble compliqué, vous pouvez le confier à une équipe de développeurs web professionnels.
Comment utiliser maintenant Bootstrap dans WordPress ?
Une fois que vous avez installé Bootstrap, vous pouvez commencer à l’utiliser sur votre site WordPress. La façon la plus simple de démontrer son utilisation est de vous montrer un exemple du code.
Lorsque vous utilisez Bootstrap, il est préférable de simplement l’ajouter directement dans le code de votre page ou publication. Maintenant, nous énumérerons quelques exemples pour vous montrer comment ils fonctionnent.
Alertes
Vous pouvez utiliser le code pour les alertes dans une balise DIV ou P. Il ressemblera à ceci:
<p class=”alert alert-info”>Ce message utilise Bootstrap “info” et est coloré en bleu</p>
Voici différents types d’alertes que vous pouvez utiliser et les couleurs qu’ils affichent :
- Primaire – bleu
- Secondaire – gris
- Succès – vert
- Danger – rouge
- Avertissement – jaune
- Infos – bleu aqua
- Lumière – blanc
- Foncé – gris foncé
En fait, les options que vous pouvez utiliser dans Bootstrap dépendent de la version que vous utilisez. Les options décrites ici sont à partir de la version 4.5.3.
Badges
Les badges prendront du texte et le mettront en évidence dans une couleur. En effet, ils s’adapteront à la taille de l’élément parent à côté. Vous pouvez également utiliser les mêmes attributions de couleurs système que celles que vous avez vues dans les alertes. Voici un exemple:
<h3>Ceci est un exemple de badge <span class=”badge badge-success”>BADGE</span></h3>
Vous pouvez également modifier la forme du badge pour qu’il ressemble à une pilule :
<h3>Ceci est un exemple de badge <span class=”badge badge-pill badge-success”>BADGE</span></h3>
Vous pouvez également créer des liens avec des badges qui pointent vers un lieu comme celui-ci :
<a href=”#” class=”badge badge-info”>Exemple</a>
Le bouton ci-dessus est lié à une URL. Dans cet exemple, il se lie simplement à lui-même.
Ces exemples ne sont que la pointe de l’iceberg pour les nombreuses fonctionnalités que vous pouvez utiliser dans votre site WordPress.
Derniers mots sur l’intégration de Bootstrap dans WordPress
En fin de compte, Bootstrap est un excellent outil pour améliorer votre site WordPress avec de nombreuses fonctionnalités. Vous ne trouverez pas toujours ces améliorations dans le nouvel éditeur visuel WordPress. Il fournit des fonctionnalités sans nécessiter de plug-in et contribue à améliorer les performances et l’apparence de votre site Web.
Vous pouvez également créer des thèmes avec Bootstrap, bien que cela nécessite beaucoup plus de travail initial. De plus, vous pouvez disposer du cadre pour les thèmes que vous souhaitez créer avec Bootstrap. Ainsi, vous découvrirez une grande partie de la flexibilité et des fonctionnalités offertes par la création d’un thème réactif. Pour voir des exemples de thèmes basés sur Bootstrap, consultez la page du thème Bootstrap.
Tout comme les autres technologies, le framework Bootstrap convient à des scénarios commerciaux spécifiques. Outre d’autres applications, Bootstrap peut également être utilisé pour le développement de thèmes WordPress. La connexion au CMS est très simple. De plus, les classes prédéfinies permettent aux développeurs de créer très rapidement du contenu WordPress responsive en économisant du temps et de l’argent.
Contactez Siteweb Army
Vous pouvez choisir un constructeur de site qui fournit une conception prête à l’emploi en ligne sur Internet en quelques heures. Souhaitez-vous développer un thème WordPress avec Bootstrap à partir de zéro. Ou vous voulez personnaliser un thème existant ou créer un thème en utilisant uniquement HTML, CSS et JavaScript sans aucun framework ? L’équipe de Siteweb Army a tout ce qu’il faut pour convertir vos idées dans un thème WordPress beau et fonctionnel. Nous sommes experts dans l’utilisation de la dernière version de Bootstrap, ainsi que d’autres technologies Web essentielles.
