Comment ajouter Twitter Bootstrap CSS dans WordPress à l'aide de codes courts
L'ajout d'éléments CSS tels que des info-bulles, des boutons colorés et des effets de survol peuvent aider votre contenu à se démarquer. Le problème est que la plupart des gens ne savent pas comment utiliser CSS pour ajouter des boutons colorés, des tableaux, des étiquettes, etc. Nous vous avons montré comment ajouter des widgets et des tableaux colorés dans WordPress. Dans cet article, nous allons vous montrer comment utiliser Twitter Bootstrap CSS dans WordPress à l'aide de shortcodes.
Twitter Bootstrap est un framework CSS et JavaScript qui permet d'améliorer rapidement la conception et les fonctionnalités de votre site. Il a été développé par Mark Otto et Jacob Thornton de Twitter comme cadre visant à encourager la cohérence entre leurs outils internes. Plus tard, il a été publié en tant qu'outil open source. C'est beau, simple et compatible sur tous les navigateurs.
La première chose que vous devez faire est d’installer et d’activer le plugin CSS WordPress Twitter Bootstrap. Lors de l'activation, le plugin ajoutera un élément de menu Twitter Bootstrap dans votre administrateur WordPress. En cliquant dessus, vous accéderez au tableau de bord du plugin.
Sur le tableau de bord, vous verrez énormément de publicités ajoutées par l'auteur du plugin. Faites défiler vers le bas et vous verrez les codes courts que vous pouvez ajouter dans vos publications. Chaque shortcode est lié à la page d’assistance du plugin où vous pouvez voir plus d’exemples d’utilisation de ces shortcodes.
Sous l'élément de menu Twitter Bootstrap de votre administrateur, vous trouverez un lien pour configurer les paramètres CSS Bootstrap. En cliquant dessus, vous accéderez à la page de configuration où vous pourrez modifier les paramètres en fonction de vos besoins. Vous avez la possibilité de choisir la version CSS de Bootstrap que vous souhaitez utiliser. Ci-dessous, vous trouverez des options plus adaptées aux utilisateurs de niveau avancé.
Maintenant que nous avons examiné la configuration, ajoutons quelques éléments CSS bootstrap à un article de blog. Collez simplement les shortcodes comme celui-ci dans le contenu de votre article ou de votre page :
<!--Shortcodes-> [TBS_BUTTON id="mySpecialButton" color="primary" class="btn-large" link="http://example.com"]Download[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="danger" link="http://example.com"]Cancel[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="success" link="http://example.com"]Learn more[/TBS_BUTTON] Icons: [TBS_ICON class="icon-globe"] [TBS_ICON class="icon-globe"] [TBS_ICON class="icon-chevron-right"] [TBS_ICON class="icon-music"] [TBS_ICON class="icon-film"] [TBS_ICON class="icon-user"] [TBS_ICON class="icon-wrench"] [TBS_LABEL class="warning"]Warning: Label[/TBS_LABEL] [TBS_LABEL class="danger"]Danger: Label[/TBS_LABEL] [TBS_LABEL class="success"]Green: Label[/TBS_LABEL] [TBS_ALERT class="success"]Settings saved[/TBS_ALERT]
Voici à quoi ressembleront ces shortcodes dans l’article de blog :
Il existe de nombreux autres éléments CSS que vous pouvez ajouter à vos publications. Info-bulles, menus accordéons, boîtes contextuelles, barres de progression, etc. Le site Web de ce plugin contient plus de documentation sur la façon d'utiliser ces fonctionnalités. Si vous êtes curieux de connaître les icônes, vous pouvez consulter le site officiel de Twitter Bootstrap pour connaître l'ensemble complet des icônes que vous pouvez utiliser.
Nous savons que les frameworks thématiques comme Genesis et d’autres proposent leurs propres options. Utilisez-vous des éléments CSS dans vos publications ? Faites-le-nous savoir en laissant un commentaire ci-dessous.