Bootstrap in Themen verwenden

Twitter hat gerade ein neues Web-Framework namens Bootstrap herausgebracht . Was ist der richtige Weg, um es in einem Thema zu verwenden?

Update : Die Einbindung des Stylesheets ist in der Tat einfach. Ich möchte wissen, welche Vorbehalte oder Kompatibilitätsprobleme ich erwarten sollte.

Solutions Collecting From Web of "Bootstrap in Themen verwenden"

Ein paar Dinge zu beachten:

  1. Ordnen Sie Stylesheets ordnungsgemäß mit wp_enqueue_style() und wp_enqueue_scripts wp_print_styles entweder in wp_enqueue_scripts oder wp_print_styles
  2. Enqueue Skripte richtig, mit wp_enqueue_script() , und hooked in `wp_enqueue_scripts ()
  3. Stellen Sie sicher, dass eingereihte Stylesheets und Skripts nur im Frontend und nicht im Admin-Back-End in die Warteschlange eingereiht werden. Bootstrap und ähnliche Frameworks sollten nur im Frontend verwendet werden und sollten niemals dazu verwendet werden, die corebenutzeroberfläche im Admin-Backend zu überschreiben oder zu umgehen.
  4. Verwenden Sie, wo immer möglich, eingebaute WordPress-Skripte, um Konflikte mit Plugins usw. zu vermeiden, die möglicherweise auf dem core-gebündelten Skript basieren.
  5. Berücksichtigen Sie die corebildgrößen (Miniaturansicht, mittel, groß) in Bezug auf das Bootstrap-Medienraster
  6. Stellen Sie sicher, dass UI-Elemente wie Menüs ( wp_nav_menu() / wp_list_pages() / etc.), wp_nav_menu() ( wp_nav_menu() / wp_list_pages() paginate_comments_links() / wp_link_pages() ) usw. in die corefunktionen von WordPress integriert sind

nur ein Thema Ordner mit dem Bootstrap-Ordner und dann mache ich eine style.css mit

 /* Theme Name: Your theme Theme URI: http://... Description: Theme based on bootstrap Author: You Version: 0.5 */ @import url("bootstrap/css/bootstrap.css"); ...etc 

meine $ 0,02

Abhängig vom verwendeten Design können Sie das CSS-Stylesheet möglicherweise nicht mehr in die Warteschlange einreihen.

Sie müssen es als absolutes erstes CSS in Ihre Site aufnehmen, oder Sie können unerwartete Design-Macken haben. Wir benutzen Thesis Framework sehr und es hat uns sogar daran gehindert.

Also haben wir ein Plugin geschrieben, um dieses Problem zu lösen. Unabhängig davon, welches Thema Sie verwenden, können Sie das neueste Twitter-Bootstrap-CSS als ersten CSS-Link auf Ihrer Website verwenden. Es ist der erste Eintrag nach dem Eröffnungsdokument HEAD-Element.

Das Plugin hat auch Twitter-Bootstrap-Javascript-Unterstützung und hat jetzt einen LESS-Compiler, so dass Sie Ihr Bootstrap-Styling vollständig anpassen können. Es gibt auch Shortcodes, damit Sie einige der Twitter Bootstrap Elemente auch schnell verwenden können.

Dies funktioniert mit jedem Thema, das Sie verwenden.

Holen Sie es aus dem WordPress.org-Repository hier .

Lass mich wissen, was du denkst … Prost, Paul.

WordPress Theme hat nahezu absolute Kontrolle über die Ausgabe. Es gibt möglicherweise kleinere Probleme (wie WP-functionen generieren einige classn in der Ausgabe, die Framework verwendet), aber einfach gesagt, es wird nichts sein, dass Sie nicht mit mäßigem Aufwand umgehen können (Thema Entwicklung selbst ist mehr als mäßiger Aufwand).