Comment ajouter Twitter Bootstrap CSS dans WordPress à l'aide de Shortcodes

L'ajout d'éléments CSS, tels que les info-bulles, les boutons colorés et les 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 codes courts..

Twitter Bootstrap est un framework CSS et JavaScript qui aide à dynamiser rapidement la conception et les fonctionnalités de votre site. Il a été développé par Mark Otto et Jacob Thornton sur Twitter en tant que cadre destiné à encourager la cohérence de 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 à 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-les défiler et vous verrez les codes abrégés que vous pouvez ajouter dans vos messages. 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 de votre administrateur, vous trouverez un lien pour configurer les paramètres CSS Bootstrap. En cliquant dessus, vous accédez à la page de configuration où vous pouvez modifier les paramètres pour répondre à vos besoins. Vous avez la possibilité de choisir quelle version de Bootstrap CSS 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 des éléments css bootstrap à un article de blog. Collez simplement les codes abrégés comme celui-ci dans le contenu de votre message ou de votre page:

  [TBS_BUTTON color = "primary" link = "http://example.com"] Télécharger [/ TBS_BUTTON] [TBS_BUTTON color = "danger" link = "http://example.com"] Annuler [/ TBS_BUTTON] [TBS_BUTTON color = "success" link = "http://example.com"] En savoir plus Icônes: [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_LABEL] Avertissement : Label [/ TBS_LABEL] [TBS_LABEL] Danger: Label [/ TBS_LABEL] [TBS_LABEL] Vert: Label [/ TBS_LABEL] [TBS_ALERT] Paramètres enregistrés [/ TBS_ALERT] 

Voici à quoi ressembleront ces codes courts dans l'article de blog:

Il existe de nombreux autres éléments CSS que vous pouvez ajouter à vos messages. Les infobulles, les menus d'accordéon, les boîtes de dialogue, les barres de progression, etc. Le site Web de ce plugin contient plus de documentation sur l'utilisation de ces fonctionnalités. Si vous êtes intéressé par les icônes, vous pouvez consulter le site officiel de Twitter Bootstrap pour la liste complète des icônes que vous pouvez utiliser..

Nous savons que les cadres de thèmes comme Genesis et d’autres ont leurs propres options. Utilisez-vous des éléments CSS dans vos messages? Faites-nous savoir en laissant un commentaire ci-dessous.