Das Hinzufügen von CSS-Elementen wie QuickInfos, farbigen Schaltflächen und Rollover-Effekten kann dazu beitragen, dass sich Ihre Inhalte hervorheben. Das Problem ist, dass die meisten Leute nicht wissen, wie man CSS verwendet, um bunte Schaltflächen, Tabellen, Beschriftungen usw. hinzuzufügen. Wir haben Ihnen gezeigt, wie man bunte Widgets und Tabellen in WordPress hinzufügt. 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 Framework entwickelt, um die Konsistenz ihrer internen Tools zu fördern. Später wurde es als Open-Source-Tool veröffentlicht. Es ist schön, einfach und mit allen Browsern kompatibel.
Als erstes müssen Sie die installieren und aktivieren WordPress-Twitter-Bootstrap-CSS Plugin. Nach der Aktivierung fügt das Plugin einen Twitter Bootstrap-Menüpunkt in Ihrem WordPress-Adminbereich hinzu. Wenn Sie darauf klicken, gelangen Sie zum Dashboard des Plugins.
Auf dem Dashboard sehen Sie eine Menge Werbung, die vom Plugin-Autor hinzugefügt wurde. Scrollen Sie an ihnen vorbei nach unten und Sie sehen die Shortcodes, die Sie in Ihren Posts hinzufügen können. Jeder Shortcode ist mit der Support-Seite des Plugins verlinkt, wo Sie weitere Anwendungsbeispiele dieser Shortcodes sehen können.
Unter dem Twitter Bootstrap-Menüpunkt in Ihrem Adminbereich 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 haben die Möglichkeit zu wählen, welche Bootstrap-CSS-Version Sie verwenden möchten. Darunter finden Sie Optionen, die eher für fortgeschrittene Benutzer geeignet sind.
Nachdem wir uns nun die Konfiguration angesehen haben, fügen wir einem Blogbeitrag einige Bootstrap-CSS-Elemente hinzu. Fügen Sie die Shortcodes einfach so in Ihren Beitrag oder Seiteninhalt ein:
<!--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]
So werden diese Shortcodes im Blogbeitrag aussehen:
Es gibt viele weitere CSS-Elemente, die Sie Ihren Beiträgen hinzufügen können. Tooltips, Akkordeon-Menüs, Popup-Boxen, Fortschrittsbalken usw. Die Website dieses Plugins hat mehr Dokumentation wie Sie diese Funktionen verwenden. Wenn Sie neugierig auf Symbole sind, können Sie sich die offizielle Website von Twitter Bootstrap ansehen kompletter Satz von Symbolen die Sie verwenden können.
Wir wissen, dass Theme-Frameworks wie Genesis und andere ihre eigenen Optionen haben. Verwenden Sie CSS-Elemente in Ihren Beiträgen? Lassen Sie es uns wissen, indem Sie unten einen Kommentar hinterlassen.