L’ajout d’éléments CSS tels que des info-bulles, des boutons colorés et des effets de survol peut 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 en utilisant des 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 en tant que cadre pour encourager la cohérence entre leurs outils internes. Plus tard, il a été publié en tant qu’outil open source. Il est beau, simple et compatible sur tous les navigateurs.
La première chose que vous devez faire est d’installer et d’activer le WordPress Twitter Bootstrap CSS brancher. 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 abrégés que vous pouvez ajouter dans vos publications. Chaque shortcode est lié à la page de support du plugin où vous pouvez voir plus d’exemples d’utilisation de ces shortcodes.
Sous l’élément de menu Twitter Bootstrap dans votre administrateur, il y a 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 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 message 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 le billet de blog :
Il existe de nombreux autres éléments CSS que vous pouvez ajouter à vos publications. Info-bulles, menus accordéon, boîtes contextuelles, barres de progression, etc. Le site Web de ce plugin a plus Documentation sur la façon d’utiliser ces fonctionnalités. Si vous êtes curieux au sujet des icônes, vous pouvez consulter le site officiel de Twitter Bootstrap pour le ensemble complet d’icônes que vous pouvez utiliser.
Nous savons que les frameworks thématiques comme Genesis et d’autres viennent avec leurs propres options. Utilisez-vous des éléments CSS dans vos publications ? Faites-le nous savoir en laissant un commentaire ci-dessous.
