Erstellen der WordPress-Schleife und Anpassen des CSS

Angenommen, Sie haben Teil 1 abgeschlossen, werden wir in diesem Abschnitt die WordPress-Schleife erstellen und das CSS anpassen. Die WordPress-Schleife ist PHP-Code, der von WordPress verwendet wird, um Inhalte auf Ihrer Website anzuzeigen. Um die Schleife zu bearbeiten, müssen Sie mit PHP vertraut sein. Wenn Sie es nicht sind, gibt es online viele Ressourcen, die Ihnen helfen, die Grundlagen zu lernen. Wenn Sie ein grundlegendes Verständnis von PHP haben, öffnen Sie Ihren Texteditor und erstellen Sie eine neue Datei namens loop.php. In dieser Datei erstellen wir die WordPress-Schleife. Das erste, was Sie tun müssen, ist, WordPress anzuweisen, die Datei header.php zu laden, die wir in Teil 1 erstellt haben. Fügen Sie den folgenden Code zu loop.php hinzu: Als Nächstes müssen wir die WordPress-Schleife erstellen. Die Schleife ist für die Anzeige aller Inhalte auf Ihrer Website verantwortlich. Dazu werden alle Beiträge in Ihrer WordPress-Datenbank durchlaufen und auf der Seite angezeigt. Um die Schleife zu erstellen, fügen Sie loop.php den folgenden Code hinzu: Dieser Code prüft, ob es Beiträge in der WordPress-Datenbank gibt. Wenn es Beiträge gibt, wird jeder einzelne durchlaufen und auf der Seite angezeigt. Nachdem wir die Schleife eingerichtet haben, müssen wir einige Inhalte darin hinzufügen. In diesem Beispiel zeigen wir nur den Titel und Inhalt jedes Beitrags an. Fügen Sie den folgenden Code in die Schleife ein: Dieser Code zeigt den Titel und Inhalt jedes Posts an. Nachdem wir die Schleife eingerichtet haben, müssen wir etwas CSS hinzufügen, um sie zu gestalten. Erstellen Sie in Ihrem Texteditor eine neue Datei namens style.css. Fügen Sie style.css den folgenden Code hinzu: .post { margin-bottom: 40px; } Dieser Code fügt am Ende jedes Beitrags einen Rand hinzu. Dies hilft dabei, die Beiträge auf der Seite zu verteilen. Nachdem wir die Schleife und das CSS eingerichtet haben, müssen wir unserem Design noch ein paar weitere Dateien hinzufügen. Erstellen Sie in Ihrem Texteditor eine neue Datei namens footer.php. Fügen Sie den folgenden Code zu foote hinzu

(Teil 2) Was Bootstrap für ein WordPress-Theme macht und warum es so beliebt ist. Dieses Tutorial ist der zweite Teil einer Reihe von Tutorials, die Sie durch den Prozess der Erstellung eines WordPress-Themes von Grund auf mit dem Bootstrap-CSS-Framework führen. Dies ist der dritte und letzte Abschnitt unserer Diskussion über das Erstellen des Kopfbereichs , der Navigation, der Seitenleiste und der Fußzeilenbereiche. Um den Blog als aktiv zu markieren, werden nun oben auf der Seite die Tagline und der Name des Blogs angezeigt. Im Footer-Bereich wird es ein Widget namens Footer – Copyright Text geben. Im Folgenden finden Sie einige Optionen zum Einbinden dieses Abschnitts in WordPress. Ein WordPress-Theme wird durch Hinzufügen zusätzlicher Widgets und Widget-Bereiche Widgets erstellt.

Um die Funktion bootstrapstarter_widgets_init() zu starten, fügen Sie der Datei footer.php die folgenden Zeilen hinzu: footer-copyright-text und sidebar-module-inset. Hier gibt es zwei Seitenleisten: eine mit grauem Hintergrund und die andere mit schwarzem Hintergrund. Wenn Sie sich das Starter-Template zum ersten Mal ansehen, erscheint ein orangefarbener Hintergrund für das oberste Widget des Widgets (About), und wenn Sie einen Titel eingeben, wird dieser automatisch in h4-Tags eingeschlossen. Mit dynamic_sidebar() können wir Widgets anzeigen, die dem Bereich Footer – Copyright Text zugeordnet sind. Erstellen Sie mithilfe der Schritt-für-Schritt-Anleitung in diesem Schritt-für-Schritt-Tutorial eine voll funktionsfähige Blog-Seitenleiste. Die finale index.php-Datei enthält die Ergebnisse: Results-Funktion, die direkt nach dem Blog-Bereich zu finden ist. Dies ist die endgültige Version des Papiers, die hier heruntergeladen werden kann.

Es ist auch mit CSS-Korrekturen und Anpassungen für die Navigationsleiste und die Seitenleisten ausgestattet. Auf dieser Seite können Sie auf externe Affiliate-Links stoßen, die zu einer Provisionszahlung an LyraThemes.com führen können, wenn Sie sie verwenden. Wir machen keine Zusicherungen oder Behauptungen über unsere schriftlichen Meinungen oder Rezensionen auf dieser Seite.

Können wir das Bootstrap-Theme in WordPress verwenden?

Der einfachste Weg, Bootstrap in WordPress zu verwenden, besteht darin, ein responsives Theme zu aktivieren, das es bereits unterstützt. Mit Bootstrap können Sie es verwenden, ohne es herunterladen oder vom Designentwickler installieren zu müssen, da das Framework in vielen seiner Designs enthalten ist.

Eine Theme- oder Plugin-Installation ist nicht so einfach wie das Erstellen einer Bootstrap-Website mit WordPress. Um ein WordPress-Theme zu erstellen, müssen Sie über ein WordPress-Hosting-Konto verfügen. Durch die Verwendung von Bootstrap als Grundlage können WordPress und Bootstrap zusammenarbeiten. Unter der benutzerfreundlichen Oberfläche beider Systeme verbergen sich viele technische Details. Sie werden nicht sehr oft in der Lage sein, ein WordPress-Theme von Grund auf neu zu erstellen. Um ein Gefühl für ein Bootstrap-basiertes WordPress-Theme zu bekommen, kopieren Sie einige der erforderlichen Dateien aus einer früheren Version. Das Design heißt WPBootstrap und das Verzeichnis erhält denselben Namen (in Kleinbuchstaben).

Wie kann ich Bootstrap zu einem WordPress-Theme hinzufügen? Es gibt mehrere Möglichkeiten. Im Folgenden sind die CSS- und JavaScript-Bibliotheken von Bootstrap aufgeführt, die Sie in die Dateien header.php und footer.php integrieren können. Ein Vorschaubild kann dem Design hinzugefügt werden, indem Sie es in das Designverzeichnis hochladen und dann die Datei screenshot.png verwenden. 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, muss auch das Verfahren zum Erlernen dieser Regeln befolgt werden. Tatsächlich haben sowohl WordPress als auch Bootstrap leidenschaftliche Communities, sodass Sie nie wissen, was als nächstes kommt.

Ist Bootstrap besser als WordPress?

Wenn Sie gerade erst anfangen und nicht viel über Webdesign wissen, ist die Verwendung von Bootstrap eine gute Idee, da es einfach zu erlernen und zu verwenden ist. Wenn Sie Ihre Fähigkeiten im Bereich Website-Design verbessern möchten, ist WordPress möglicherweise die bessere Option.

Bei der Entwicklung einer Website ist es schwierig, sich zwischen Bootstrap und WordPress zu entscheiden. Hier gehen wir einen schnellen Vergleich von Bootstrap und WordPress durch, sowie eine vollständige Aufschlüsselung von jedem. Mit dieser Methode können Sie sich für die am besten geeignete Plattform für Ihre Website entscheiden. Bootstrap-Sites sind günstiger zu laden als WordPress-Sites. Mit Bootstrap erstellte Websites können von jedem Gerät aus aufgerufen werden. Die besten WordPress-Websites funktionieren am besten auf großen Bildschirmen, egal ob auf PCs, Tablets oder Laptops. Sie müssen ein Programmierer sein, um On-Page-SEO für Ihre Website oder Seiten in Bootstrap durchführen zu können.

React-Bootstrap ist eine Bibliothek, die die Leistungsfähigkeit von React und die Flexibilität von Bootstrap kombiniert. Bootstrap 4 ist eine robuste Plattform mit ansprechendem Design , konsistentem Design und allen Funktionen, die ihr fehlen. Sie werden keine Probleme haben, loszulegen, da es sehr einfach zu bedienen und leicht zu erlernen ist. React-Bootstrap ist eine fantastische Bibliothek zum Erstellen hochwertiger, reaktionsschneller Webanwendungen.