So erstellen Sie ein Portfolio-WordPress-Theme mit Bootstrap

Wenn Sie mit Bootstrap ein Portfolio-WordPress-Theme erstellen möchten, müssen Sie einige Dinge beachten. Zunächst müssen Sie sicherstellen, dass Ihr Design responsiv ist, damit es auf allen Geräten gut aussieht. Zweitens müssen Sie ein Bootstrap-Rastersystem verwenden, damit Ihre Inhalte richtig organisiert sind. Und drittens müssen Sie Bootstrap-Komponenten verwenden, um Ihrem Design zusätzliche Funktionen hinzuzufügen.

Die Entwicklung eines responsiven Bootstrap-WordPress-Themes mit dem beliebten Bootstrap-CSS-Framework ist inbegriffen. Wir werden besprechen, wie man ein Design und einen Blog-Feed mit einer Bootstrap -Starter-Vorlage erstellt. In Teil 1 wird es zukünftige Installationen geben, die ich hier auflisten werde, sobald sie geschrieben und abgeschlossen sind. Nehmen Sie alle notwendigen Änderungen an Ihrem aktuellen leeren Stil in Notepad vor (ich empfehle, es zu verwenden). Bitte fügen Sie einen Kommentar-Header sowie CSS ein. Die Functions.php kann bearbeitet werden. Bitte kopieren Sie den folgenden Code, und ich werde schnell jede Zeile durchgehen.

Wir erreichen dies, indem wir die Dateien in die Warteschlange stellen und dann eine Funktion mit WP_enqueue_scripts verknüpfen. Wenn bootstrapstarter_enqueue_scripts() verwendet wird, wird das Abhängigkeitsarray definiert, das nur aus „jquery“ besteht. Dieses Skript ist von einem Array aller registrierten Skript-Handles abhängig. Da unser Haupt-Stylesheet hauptsächlich aus Bootstrap-CSS-Dateien besteht, verwenden wir nur ein Handle in unserem $dependencies-Array: Bootstrap (das wir in der Zeile davor registriert haben). Die Dateien werden nach dem Extrahieren von Bootstrap aus der Vorlage in vier separate Dateien aufgeteilt. Die endgültige Datei zeigt die neuesten Beiträge in ihrer standardmäßigen chronologischen Reihenfolge an. The Loop ist ein WordPress-Tool, das den Titel, den Inhalt, den Namen des Autors, das Datum usw. anzeigt.

Dies ist ein grundlegendes WordPress-Theme, das auf der Blog-Vorlage basiert, die auf der offiziellen Bootstrap-Website zu finden ist. Es gibt noch statische HTML-Elemente in Navigation, Seitenkopf und -beschreibung, Seitenleiste und Fußzeile, die beispielsweise nicht integriert sind. Wenn Sie Ihren Stil einzigartig machen möchten, stellen Sie sicher, dass der CSS-Code nach dem Kommentarkopf hinzugefügt wird.

Kann ich Bootstrap-Themes mit WordPress verwenden?

Eine mobilfreundliche Front-End-Webentwicklung kann mit Bootstrap, einem Open-Source-Framework, durchgeführt werden. Infolgedessen kann es verwendet werden, um mit seinen CSS- und JavaScript-Vorlagen reaktionsschnelle WordPress-Designs zu erstellen.

Bei der Arbeit mit Bootstrap auf WordPress sind zahlreiche Schritte erforderlich. Sie benötigen ein WordPress-Hosting-Konto, wenn Sie ein Design erstellen und verwenden möchten. Im Fall von Bootstrap, das eine Komponente von WordPress ist, ist das Thema das Ergebnis der Verwendung von Bootstrap als Grundlage. Beide Systeme wurden so konzipiert, dass sie viele technische Informationen verbergen und gleichzeitig benutzerfreundlich sind. Es kann schwierig sein, ein WordPress-Theme von Grund auf zu erstellen. Das Kopieren einiger Dateien aus einem Standard-WordPress-Theme ist der einfachste Weg, ein Bootstrap-basiertes Theme auszuprobieren. Unser Thema wird als WPBootstrap bezeichnet, und das Verzeichnis wird als (in Kleinbuchstaben) bezeichnet.

Wie kann ich Bootstrap zu einem WordPress-Theme hinzufügen? Es gibt mehrere Möglichkeiten, wie Sie dies tun können. Wenn Sie CSS- und JavaScript-Bibliotheken von Bootstrap zu den Dateien header.php und footer.php hinzufügen möchten, stellen Sie sicher, dass Sie diese Bibliotheken einschließen. Indem Sie eine Datei namens screenshot.png erstellen, können Sie dem Design ein Vorschaubild hinzufügen. Es ist eine Menge Arbeit, ein WordPress-Theme zu erstellen, daher empfehle ich, Dateien von einem anderen Theme zu kopieren. Da Bootstrap seine eigenen Regeln und Praktiken hat, ist es wichtig, sich auch mit ihnen vertraut zu machen. Es ist nie zu spät, eine Antwort auf die Frage zu erhalten, da sowohl WordPress als auch Bootstrap starke Communities haben.

Ist Bootstrap besser als WordPress?

Wenn Sie ein Anfänger sind oder nicht viel Erfahrung haben, würde ich die Verwendung von Bootstrap empfehlen, da es einfacher zu erlernen und zu verwenden ist als jede andere Plattform. Wenn Sie Ihre Fähigkeiten im Bereich Website-Design verbessern möchten, ist WordPress eine gute Option.

Beim Erstellen einer Website fällt es Ihnen möglicherweise schwer, sich zwischen Bootstrap und WordPress zu entscheiden. Wenn Sie auf diesen Blog klicken, können Sie die Unterschiede zwischen Bootstrap und WordPress sowie einen kurzen Vergleich kennenlernen. Wenn Sie sich diese Liste ansehen, werden Sie feststellen, dass Sie die beste Plattform für Ihre Website auswählen müssen. Bootstrap-Sites verwenden weniger Speicher als WordPress-Sites. Es ist möglich, Websites mit Bootstrap auf mobilen Geräten zu erstellen. Eine WordPress-Website eignet sich besser für Bildschirme jeder Größe, egal ob auf einem PC, Tablet oder Laptop. Sie müssen ein guter Programmierer sein, um On-Page-SEO für Ihre Website oder Seiten in Bootstrap durchzuführen.

Bootstrap: Ein großartiger Ausgangspunkt für die WordPress-Entwicklung

Das Bootstrap-Framework ist ein fantastischer Ort, um mit der WordPress-Entwicklung zu beginnen, aber es kann an jede spezifische Anforderung angepasst werden. Sie können bei Bedarf auf den Code zugreifen, und er ist frei verfügbar und Open Source. Da diese App außerdem für Menschen aller Erfahrungsstufen entwickelt wurde, können Sie schnell loslegen. Im Gegensatz zu WordPress, das ein Frontend-Framework ist, kann Bootstrap für das Design und die Benutzeroberfläche statischer Websites verwendet werden. Sie müssen jedoch Ihr eigenes Design erstellen, da das vorhandene Design keine Funktionen enthält. Da Bootstrap von professionellen Webentwicklern häufig verwendet wird, können Sie sicher sein, dass es Ihren Anforderungen entspricht.

Erstellen Sie ein WordPress-Theme von Scratch Bootstrap

Das Erstellen eines WordPress-Themes von Grund auf mit Bootstrap ist ein relativ einfacher Prozess. Zuerst musst du einen Ordner für dein Design im Verzeichnis /wp-content/themes/ erstellen. Als nächstes müssen Sie eine index.php-Datei und eine style.css-Datei in Ihrem Designordner erstellen. Sie können dann damit beginnen, diesen Dateien Ihren HTML-, CSS- und PHP-Code hinzuzufügen. Schließlich müssen Sie Ihr Design im WordPress-Adminbereich aktivieren.

NavWalker, eine PHP-Klasse, ermöglicht eine effizientere Funktion des WordPress-Navigationsmenüs. NavWalker wird angezeigt, wenn die Datei inc/bs5-navwalker.php im folgenden Code verwendet wird. Get_search_form() ist eine Funktion, die ein Suchformular für WordPress generiert. Der folgende Code muss der search.php-Datei des WordPress-Themes hinzugefügt werden. Um den speziellen Code anzuzeigen, den Sie in nicht sichtbaren URLs verwenden möchten, erstellen Sie eine neue Datei 404.php. Der Theme-Screenshot (Miniaturansicht) muss in den Theme-Ordner hochgeladen werden.

So fügen Sie Bootstrap in ein untergeordnetes WordPress-Theme ein

Wenn Sie ein untergeordnetes WordPress-Theme erstellen, müssen Sie die Bootstrap-Dateien in den Ordner Ihres Themes aufnehmen. Sie können entweder ein CDN (Content Delivery Network) verwenden, um die Bootstrap-Dateien einzubinden, oder Sie können die Dateien herunterladen und in den Ordner Ihres Designs einfügen. Wenn Sie ein CDN verwenden, müssen Sie die Bootstrap-CSS- und JavaScript-Dateien in die header.php-Datei Ihres untergeordneten Designs aufnehmen. Die CDN-Links für die Bootstrap-Dateien finden Sie auf der Bootstrap-Website. Wenn du die Bootstrap-Dateien in den Ordner deines Themes einfügst, musst du die CSS- und JavaScript-Dateien in die Datei functions.php deines untergeordneten Themes einreihen. Weitere Informationen dazu finden Sie im WordPress Codex.

Sie können Bootstrap auf drei Arten in WordPress-Themes integrieren. Die erste Methode besteht darin, Bootstrap CDN in Ihre Datei functions.html aufzunehmen. Methode 2, bei der die Bootstrap-Dateien direkt in das Theme gebündelt werden, ist ebenfalls möglich. Weitere Informationen zum Einbinden von CSS- und Javascript-Dateien in WordPress-Themes finden Sie in der WordPress-Dokumentation.