Share
Wollten Sie schon immer den Prozess der Themenentwicklung beschleunigen? Ich gehe davon aus, dass die Antwort "Ja" ist und Sie bereits über Bootstrap Bescheid wissen und es in Mock-ups für die Entwicklung verwenden. Dies wirft die Frage auf: "Wie können Bootstrap-Komponenten in ein WordPress-Design integriert werden?"
Diese Serie von Tutorials behandelt die Integration der gängigsten Bootstrap-Komponenten in ein WordPress-Design. Beginnen wir mit der Navbar-Komponente, die die einfache Erstellung einer responsiven Navigationsleiste ermöglicht. Damit dieses Tutorial leicht verständlich bleibt, nehme ich eine Navigationsleiste, die nur aus einem Logo und einem Menü besteht.
Wenn Sie dies schnell und zuverlässig erledigen müssen, finden Sie in Envato Studio zahlreiche Experten für Bootstrap und WordPress, die Ihnen helfen können.
Bootstrap-Experten für Envato Studio Hier ist der Quellcode von der Bootstrap-Dokumentationsseite:
Schauen wir uns den Code genauer an und klären Sie die Dinge, um den nächsten Teil des Tutorials besser zu verstehen.
Verpackung - ein Das Tag mit der Klasse "Navbar" und der Rolle "Navigation" umfasst den gesamten Inhalt der Navigationsleiste.
…
Header - ein Umschaltknopf - ein Marke - ein Link mit dem Logo; Es ist optional, Sie können es hier weglassen und an anderer Stelle einfügen. Faltbarer Inhalt - ein Speisekarte - ein Dieser Schritt setzt voraus, dass Sie bereits WordPress installiert haben und das von Ihnen entwickelte Design aktiviert wurde. Öffne dein Functions.php Datei und registrieren Sie Ihre Navigation, wenn Sie noch nicht. Registrieren Sie Bootstrap-Dateien und jQuery: Laden Sie Edward McIntyre's herunter Navigieren Sie zu Ihrem Wordpress-Site-Backend Darstellung-> Menü. Erstellen Sie ein neues Menü mit dem Namen "Primär" und fügen Sie Elemente hinzu. Gehe zur Registerkarte Standorte verwalten und für den Themenbereich "Primär" das Menü "Primär" zuweisen. Änderungen speichern. Öffne dein header.php Kopieren Sie die Navigationsleiste an die Stelle, an der sie erscheinen soll, und fügen Sie sie ein. Jetzt ersetzen wir Teile des Modells durch die Vorlagenfunktionen von WordPress. Platzieren Sie zuerst den richtigen Link für das Logo. Ändern Sie diese Zeile: zu: Der nächste Schritt ist das Ausgeben des Menüs vom hinteren Ende des Mock-Up-Menüs. Für diese Zeilen: Mit: Jetzt haben Sie die Bootstrap Navbar-Komponente in Ihr Design integriert. In diesem Tutorial haben wir untersucht, wie Sie eine mit dem Bootstrap-CSS-Framework erstellte Navigationsleiste in ein WordPress-Design integrieren. Um die Entwicklung von Designs zu beschleunigen, können Sie die Quelldateien einfach herunterladen und in Ihr Design einfügen. Auf Envato Market finden Sie außerdem einige großartige Bootstrap-Designs und -Vorlagen, wie die Neon Bootstrap Admin-Vorlage oder die eCommerce-Boostrap-Vorlage von Selphy Electronics. welche verkürzten Inhalt auf kleinen Bildschirmen darstellt; Diese Schaltfläche ist ein Muss, aber Sie können den Inhalt darin ändern.Marke
…
2. Integrieren Sie das Mock-Up in eine Vorlage
2.1. Bereiten Sie Ihr Thema für das Menü vor
Funktion wpt_register_js () wp_register_script ('jquery.bootstrap.min', get_template_directory_uri (). '/js/bootstrap.min.js', 'jquery'); wp_enqueue_script ('jquery.bootstrap.min'); add_action ('init', 'wpt_register_js'); Funktion wpt_register_css () wp_register_style ('bootstrap.min', get_template_directory_uri (). '/css/bootstrap.min.css'); wp_enqueue_style ('bootstrap.min'); add_action ('wp_enqueue_scripts', 'wpt_register_css'); wp-bootstrap-navwalker Klasse von GitHub. Legen Sie die Datei im Hauptordner des Designs ab. Geh zurück zu deinem Functions.php und füge folgenden Code ein:2.2. Erstellen Sie ein Menü im Backend
Wordpress-Menüverwaltungsseite 2.3. Integrieren Sie das Navigationsleisten-Mockup in eine Vorlage
Marke
">
'top_menu', 'depth' => 2, 'container' => false, 'menu_class' => 'nav', // Bearbeiten Sie das nav-Menü mit unserem benutzerdefinierten nav-Walker 'walker' => new wp_bootstrap_navwalker ())); ?>
Fazit
Neon Bootstrap Admin-Vorlage
Accentsconagua