L'ajout d'éléments CSS tels que des infobulles, 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 colorés et des tableaux dans WordPress. Dans cet article, nous vous montrerons comment utiliser Twitter Bootstrap CSS dans WordPress à l'aide de shortcodes.
Twitter Bootstrap est un framework CSS et JavaScript qui aide à améliorer rapidement la conception et la fonctionnalité de votre site. Il a été développé par Mark Otto et Jacob Thornton chez Twitter en tant que framework 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 à faire est d'installer et d'activer le plugin WordPress Twitter Bootstrap CSS. Après l'activation, le plugin ajoutera un élément de menu Twitter Bootstrap dans votre administration WordPress. Cliquer dessus vous mènera au tableau de bord du plugin.
Sur le tableau de bord, vous verrez beaucoup de publicités ajoutées par l'auteur du plugin. Faites défiler la page pour les dépasser, et vous verrez les shortcodes que vous pouvez ajouter dans vos articles. 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 administration, il y a un lien pour configurer les paramètres CSS de Bootstrap. Cliquer dessus vous mènera à la page de configuration où vous pourrez modifier les paramètres selon vos besoins. Vous avez la possibilité de choisir la version CSS de Bootstrap que vous souhaitez utiliser. Vous trouverez ci-dessous des options plus adaptées aux utilisateurs avancés.
Maintenant que nous avons examiné la configuration, ajoutons quelques éléments CSS Bootstrap à un article de blog. Copiez simplement les shortcodes comme ceci 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 articles. Tooltips, menus accordéon, boîtes pop-up, 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 des icônes, vous pouvez consulter le site officiel de Twitter Bootstrap pour l'ensemble complet d'icônes que vous pouvez utiliser.
Nous savons que les frameworks de thèmes comme Genesis et d'autres sont livrés avec leurs propres options. Utilisez-vous des éléments CSS dans vos articles ? Faites-le nous savoir en laissant un commentaire ci-dessous.
kezzy
Merci pour cet article. J'utilise un thème basé sur un framework bootstrap et le processus est simple plutôt que de saisir des shortcodes ici et là. Quoi qu'il en soit, ne serait-il pas plus facile d'enqueuer le script et le style bootstrap dans l'en-tête d'un thème et d'obtenir le même résultat ?
Thiago
Merci beaucoup ! Cela peut m'aider énormément.
Deprito
J'utilise Genesis, mais quand j'essaie ce plugin.. Mon CSS devient fou..
Comment le réparer ? Un peu confus..
Support WPBeginner
Deprito, Genesis est lui-même un framework de thème et faire fonctionner Twitter Bootstrap sur Genesis nécessiterait des étapes supplémentaires. Essayez les forums de support de Genesis, quelqu'un a dû le faire.
Admin
James Matthews
Tutoriel incroyable. Cela a clarifié beaucoup de confusion que j'avais concernant Twitter Bootstrap. Certaines parties de Bootstrap me sont encore difficiles à comprendre, mais cela sera certainement très utile à mesure que je me familiariserai avec.
Steven Blake mba
Merci pour ce qui doit certainement être un bon article. Je trouve assez frustrant la quantité d'articles qui pourraient vraiment m'intéresser et qui oublient ou ne réalisent pas que l'utilisation de mots à la mode que vous utilisez tous les jours peut ne pas être comprise par quiconque n'y a jamais été confronté auparavant. J'essaie de ne pas faire cela dans mon propre travail en tant que coach de vie, où si je me faisais connaître comme praticien en PNL, j'éloignerais 90% des gens qui ne savent pas ce que c'est.
Malheureusement, tant que je ne comprendrai pas ce qu'est un Twitter Bootstrap, je n'aurai pas vraiment besoin des détails sur son installation. Il se peut que je passe à côté de quelque chose, mais je n'ai pas le temps de faire plus de recherches que ce que je fais déjà, et je suis arrivé à votre article, je ne veux juste pas avoir à en chercher plusieurs autres avant de revenir !
Une seule ligne expliquant ce qu'est un Twitter Bootstrap et ses avantages ferait la différence entre me faire continuer à lire et me faire passer à autre chose.
Ceci est une critique constructive, soit dit en passant. Ajoutez la description dans ceci et dans tous les futurs articles de blog et regardez vos résultats s'améliorer. Meilleurs vœux, Steven
Noumaan Yaqoob
@Steven Twitter Bootstrap est un ensemble d'outils de conception prédéfinis qui aide d'autres concepteurs et développeurs à utiliser ces éléments dans leurs propres projets.
Le but de cet article et du plugin est d'aider les utilisateurs comme vous à utiliser Twitter Bootstrap sans apprendre le code ou le CSS.
Richie
Super tutoriel.
craig grella
excellent article, merci. J'ai utilisé Bootstrap et je l'ai porté pour des thèses et quelques autres thèmes, mais celui-ci sera utile pour les sites qui n'ont pas besoin du framework – juste des boutons et des icônes.
belle trouvaille !