Hinzufügen von Twitter-Bootstrap-CSS in WordPress mithilfe von Shortcodes

Durch das Hinzufügen von CSS-Elementen wie QuickInfos, farbige Schaltflächen und Rollover-Effekte können Ihre Inhalte hervorgehoben werden. Das Problem ist, dass die meisten Leute nicht wissen, wie man mit CSS farbige Schaltflächen, Tabellen, Beschriftungen usw. hinzufügt. Wir haben Ihnen gezeigt, wie Sie farbige Widgets und Tabellen in WordPress einfügen. In diesem Artikel zeigen wir Ihnen, wie Sie Twitter Bootstrap-CSS in WordPress mithilfe von Shortcodes verwenden.

Twitter Bootstrap ist ein CSS- und JavaScript-Framework, mit dem Sie das Design und die Funktionalität Ihrer Website schnell verbessern können. Es wurde von Mark Otto und Jacob Thornton bei Twitter als Rahmen für die Konsistenz der internen Tools entwickelt. Später wurde es als Open Source-Tool veröffentlicht. Es ist schön, einfach und für alle Browser kompatibel.

Zuerst müssen Sie das WordPress Twitter Bootstrap CSS-Plugin installieren und aktivieren. Nach der Aktivierung fügt das Plugin Ihrem WordPress-Administrator ein Twitter-Bootstrap-Menüelement hinzu. Wenn Sie darauf klicken, gelangen Sie zum Dashboard des Plugins.

Auf dem Dashboard sehen Sie eine ganze Reihe von Anzeigen, die vom Autor des Plugins hinzugefügt wurden. Scrollen Sie nach unten, und Sie sehen die Kurzwahlen, die Sie in Ihren Posts hinzufügen können. Jeder Shortcode ist mit der Support-Seite des Plugins verbunden, auf der Sie weitere Verwendungsbeispiele für diese Shortcodes sehen können.

Unter dem Menüpunkt Twitter Bootstrap in Ihrem Admin befindet sich ein Link zum Konfigurieren der Bootstrap-CSS-Einstellungen. Wenn Sie darauf klicken, gelangen Sie zur Konfigurationsseite, auf der Sie die Einstellungen an Ihre Bedürfnisse anpassen können. Sie können wählen, welche Bootstrap-CSS-Version Sie verwenden möchten. Darunter finden Sie Optionen, die für fortgeschrittene Benutzer geeignet sind.

Nun, da wir uns die Konfiguration angesehen haben, wollen wir einem Blog-Post einige Bootstrap-Elemente hinzufügen. Fügen Sie einfach die Kurzcodes wie folgt in Ihren Beitrag oder Seiteninhalt ein:

  [TBS_BUTTON color = "primary" link = "http://example.com"] Herunterladen [/ TBS_BUTTON] [TBS_BUTTON color = "danger" link = "http://example.com"]] Abbrechen [/ TBS_BUTTON] [TBS_BUTTON color = "success" link = "http://example.com"] Weitere Informationen [/ TBS_BUTTON] Symbole: [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_LABEL] Warnung : Label [/ TBS_LABEL] [TBS_LABEL] Gefahr: Label [/ TBS_LABEL] [TBS_LABEL] Grün: Label [/ TBS_LABEL] [TBS_ALERT] Einstellungen gespeichert [/ TBS_ALERT] 

So sehen diese Kurzcodes im Blogbeitrag aus:

Es gibt viele weitere CSS-Elemente, die Sie Ihren Beiträgen hinzufügen können. QuickInfos, entsprechende Menüs, Popup-Felder, Fortschrittsbalken usw. Auf dieser Website des Plugins finden Sie weitere Informationen zur Verwendung dieser Funktionen. Wenn Sie sich für Symbole interessieren, können Sie auf der offiziellen Website von Twitter Bootstrap nach dem vollständigen Satz von Symbolen suchen, den Sie verwenden können.

Wir wissen, dass Themen-Frameworks wie Genesis und andere ihre eigenen Optionen haben. Verwenden Sie CSS-Elemente in Ihren Beiträgen? Lassen Sie uns wissen, indem Sie unten einen Kommentar hinterlassen.