Theme-Entwicklung für WordPress 5 mit Bootstrap v4

1. Einführung: Willkommen bei der WordPress Theme Development Academy mit Bootstrap. Dies ist ein vollständig aktualisierter WordPress-Theme Entwicklung Kurs mit WordPress Version 5 und dem Bootstrap 4 Framework. Wenn Sie möchten, nehmen Sie Ihre WordPress-Fähigkeiten auf die nächste Ebene, Lernen Thema Entwicklung ist perfekt für diese. Es ermöglicht Ihnen, benutzerdefinierte WordPress-Websites zu bauen , die genau aussehen und fühlen, wie Sie sie wollen. Es wird Ihnen auch einen Vorteil gegenüber anderen WordPress-Entwicklern mit den vorgefertigten Themen und versuchen, sie basierend genau das, was sie zu bauen versuchen, anpassen. Dies ist es, was Sie bis zum Ende dieses Kurses erstellen können. Am Ende dieser, werden Sie in der Lage, fast jede Art von neuen Website, die Sie wollen mit WordPress bauen fast jede Art von neuen Website, die Sie wollen mit oder nehmen Sie eine bestehende Website und konvertieren Sie es zu einem WordPress-Theme. Was genau ist ein WordPress-Theme? Um zu sehen, was WordPress tun kann, werfen wir einen Blick auf einige Beispiele. Dies ist die Blog-Seite für das Thema, das wir zusammen bauen werden. Wir haben die Kopfzeile oben; Verknüpfungen zu den Home- und Blog-Seiten, einen Untertitel, ein Header-Bild und ein Text-Overlay. Dann unter uns haben wir den Blogbeitrag auf der linken Seite und dann die Seitenleiste auf der rechten Seite aufgelistet. Als nächstes, mit der exakt gleichen Version von Wordpress und den exakt gleichen Inhalt, alles, was ich hier getan habe, ist auf einen Klick auf eine Schaltfläche zu einem anderen Thema wechseln. Dies hat den gleichen Blog-Beitrag und wir können auch sehen, die Seitenlinks sind die gleichen, aber ein völlig anderes Aussehen und Gefühl. Wiederum das Thema erneut zu wechseln, so werden wir mit einem anderen vorgefertigten Thema aussehen. Dies ändert unsere Blog-Seite und alle anderen Seiten auf unserer Website vollständig. Auch das gleiche für dieses Beispiel zwei, komplett das Feld unserer Wordpress-Websites zu ändern. In diesem Kurs werden wir nicht nur das bloße Minimum WordPress-Theme tun, werden wir mit der Erstellung einer statischen HTML- und CSS-Version dieses Themes mit Bootstrap 4. Learning Bootstrap ist auch eine wertvolle Fähigkeit an sich, aber dann gehen wir auf die Einrichtung WordPress und Blick auf genau das, was benötigt wird, um diese Website zu einem Thema zu konvertieren. Wir decken alle Schritte ab, einschließlich einiger der fortgeschritteneren und anspruchsvolleren Konzepte wie benutzerdefinierte Felder, Themenübersetzung, benutzerdefinierte Suchformulare, Verwendung von Hooks und auch einige benutzerdefinierte Funktionen, um die genaue Funktionalität zu erhalten, die wir wollen. Wenn Sie ernsthaft über WordPress-Theme-Entwicklung bekommen möchten, melden Sie sich in diesem Kurs und ich werde Sie in der Klasse sehen. 2. Was ist ein WordPress-Theme?: Wir wissen, für diesen Kurs werden wir in einem WordPress-Theme zu bauen. Aber was genau ist ein WordPress-Theme? Nun, nur offizielle WordPress-Dokumentation. In dem, was ist ein Thema Abschnitt, können wir sehen, dass ein Word-Press-Theme und ändert ein Design der Websites, und oft ändern das Layout, die dann ändern, wie der Endbenutzer sieht unsere Sehenswürdigkeiten auf dem Front-End, dh, was ein besuchen Krankheit. Grundsätzlich kann ein Thema verschiedene Layouts haben, es kann statisches oder ansprechendes Layout verwenden. Wird Bootstrap verwenden, um ein ansprechendes Layouts mit verschiedenen Spaltenbreiten zu erstellen. Das nimmt in der Regel alle anderen Inhalte von WordPress, na ja, wenn das die Seite ist, die wir erstellt haben, werden wir, wenn, dass jeder Blog-Post, alle Medien wie Bilder von Videos und zeigt sie in irgendeiner Weise, die wir in unserer -Thema. Gehen weiter unten, Themen bestehen aus einigen erforderlichen Dateien, wie die index.php, und auch die style.css, und wir werden diese in unserem Thema bald hinzufügen. Wir werden auch viel mehr PHP-Vorlagendateien hinzufügen, wir werden auch Dateien für die Lokalisierung erstellen, was unser Thema übersetzt. Wird in mehreren CSS-Dateien und JavaScript verwendet werden, um Bootstrap und in der Regel alle anderen Inhalte, die wir brauchen, um unser Thema zu konstruieren. Wenn wir einen Blick auf die fertige Seite hier werfen, ist das die Haut des Themas, das wir für diesen ganzen Kurs aufbauen werden. Es wird viele Bootstrap-Spalten, Zeilen, Bilder und Text enthalten , um die endgültige Version zu erstellen, die Sie hier sehen. Wenn wir zum Blog-Abschnitt gehen, wird es alle Blog-Posts, die wir in WordPress erstellen werden, und es wird durch sie Schleife und zeigen sie alle auf dieser Seite, zusammen mit unserer Seitenleiste auf der rechten Seite, , die es uns ermöglicht, durch diese Beiträge zu suchen. Und filtern Sie auch nach den Archiven, den Kategorien oder irgendwelchen Tags, die hinzugefügt werden. Wenn wir zum Armaturenbrett gehen, und dann im Themenbereich, ist dies das Tranquil Spa-Thema, das wir aktiviert haben. Bei der Installation von WordPress haben wir auch Standard-Themes, die mit ihm kommen. Ich werde ein anderes Thema namens 2019 aktivieren. Dann, wenn wir zurück zu unserer Website und aktualisieren, sehen wir die gleichen beiden Seiten von Zuhause und Blog. Da es die gleichen Informationen verwendet, die derzeit in WordPress ist, werden wir nur in einem anderen Layout erstellen. Wir haben auch unsere gleichen Blog-Beiträge. Obwohl ein anderer Stil und das Layout angewendet wurde, ist dies genau der gleiche Inhalt, aber auf die andere Art und Weise dargestellt. Wir haben auch unsere Sidebar unten ganz unten. Dies sind die gleichen Blöcke von Inhalten, die wir in unserem Thema erstellt haben, aber nur auf eine andere Art und Weise angelegt. Zurück zum Thema Abschnitt, wir einen Blick auf eine weitere. Dies ist das 2017-Thema. Werfen wir einen Blick auf das, beginnend mit dem Haus. Das sieht wieder ganz anders aus. Obwohl wir immer noch unsere gleichen Seiten haben, hat es ein völlig anderes Gefühl als unsere ursprüngliche Website, und das ist, was ein Thema tun wird, indem Sie auf den Blog klicken. Wir sehen immer noch den gleichen Inhalt, wie die Blogbeiträge, die alle aufgelistet sind. Sie sehen die gleichen Featured Bilder, die hinzugefügt wurden, und auch diese Seitenleiste auf der rechten Seite hat alle die gleichen Blöcke von Inhalten nur auf eine andere Art und Weise neu angeordnet. Dies ist die Macht, die wir als Theme-Entwickler haben. Wir können jede Art von Website, die wir wollen mit WordPress erstellen, und dies wird uns erlauben, unsere Tranquil Spa-Website zu erstellen, während wir durch den Kurs gehen, zusammen mit Ihnen diese Fähigkeiten und Kenntnisse, um jede Art von WordPress-Website zu bauen die Sie möchten, sei es für sich selbst, oder für ein Projekt, für das Unternehmen oder für die Kunden. 3. Bootstrap 4 einrichten: Willkommen im Bootstrap-Bereich dieses Kurses. Dies ist, wo wir die Dinge mit der Erstellung unseres benutzerdefinierten Themas beginnen. In diesem Abschnitt geht es darum, eine statische HTML- und CSS-Websites zu erstellen. Hamel erstellt genau, wie wir wollen, dass unser Wordpress-Theme aussehen. Aber machen Sie sich keine Sorgen über WordPress im Moment, die dies in Rechnung gestellt wird, wie wir mit allen normalen HTML-Websites tun würden. Dann behandeln wir die Konvertierung zu WordPress in einem späteren Abschnitt. Das erste, was wir tun müssen, ist die Bootstrap-Core-, CSS- und JavaScript-Dateien zu greifen . Um dies zu tun, müssen wir den Kopf rüber, um bootstrap.com zu bekommen. Dies führt uns zur Version vier von Bootstrap. Ich benutze Version 4.3, und ich würde empfehlen, dass Sie das gleiche, wenn möglich, verwenden. Um mit Bootstrap zu beginnen, gehe ich zur Dokumentation im Einführungsabschnitt. Hier haben wir einige Quickstart-Links, wir haben einen CDN-Link für das CSS und auch das JavaScript. Dann unten haben wir eine Starter-Vorlage für unsere Index-Seite, und wir werden zurückkommen und uns diese bald holen. Obwohl ich auf den Download-Button aus dem Menü klicke und dann auf den kompilierten CSS- und JavaScript-Link klicke, und startet dann den Download mit dieser Schaltfläche hier. Offensichtlich in diesem kompilierten CSS- und JavaScript-Download , den wir wirklich schnell loslegen werden. Sobald dies erledigt ist, können wir auf das Paket klicken und entpacken. Sobald das entpackt ist, werde ich das auf den Desktop verschieben. Ziehen wir das rüber, und dann werde ich das umbenennen. Der Name, den ich nennen werde, ist ruhig. Dies ist für die ruhige Boost-up-Version unseres Projekts. Später wird eine ruhig-wp erstellen, die für unsere Wordpress-Konvertierung ist. Das nächste, was wir tun wollen, ist, die Bilder zu greifen. Die Bilder sind in diesem Kurs enthalten. Gehen Sie weiter und greifen Sie diese, wenn Sie das noch nicht getan haben, und ziehen Sie es dann in unseren Ordner. Ich würde Visual Studio Code hier öffnen, und Sie können jeden Texteditor verwenden, den Sie für diesen Kurs mögen. Um in VS Code zu beginnen, müssen wir nur über unseren Projektordner ziehen, und dann öffnet sich dies mit dem Inhalt in Cyber. Es ist kompilierte Version verwendet verschiedene CSS- und JavaScript-Dateien. Ich werde nur die bootstrap.min.css für diesen Kurs verwenden. Dies ist eine verkleinerte Version des Haupt-CSS, die die verfügbaren Bootstrap-Layouts und Komponenten enthält, die wir benötigen. Es gibt auch verschiedene Versionen, wenn Sie das CSS-Raster oder Bootstrap-Neustarts verwenden möchten, und Sie können mehr darüber erfahren, was in diesen Dateien enthalten ist , in der Bootstrap-Dokumentation, wenn Sie möchten. Als nächstes haben wir den JavaScript-Ordner , der hier direkt am Knopfdruck steht. Das gleiche gilt für das JavaScript, ich werde nur die Haupt-bootstrap.min.js-Datei verwenden. Dann haben wir natürlich die Bilder, die für diesen Kurs geliefert werden. Sie werden auch wissen, dass es sich nicht um index.html handelt. Das ist nicht vorgesehen, also müssen wir selbst in den Wurzeln dieses Projekts einen erschaffen . In der Hauptroute, lassen Sie uns auf neue Datei klicken und lassen Sie uns unsere index.html erstellen. Wenn wir zurück zum Browser und dann zurück in den Einführungsbereich gehen. Wir können nun die Starter-Vorlagen kopieren, die wir zuvor nachgeschlagen haben, Sie können jedoch alle auswählen und kopieren, oder Sie können einfach auf den Kopier-Button in der oberen Ecke klicken. Kopieren Sie dies und dann über in unsere index.html. Wir können das jetzt einfügen. Zuallererst haben wir das Bootstrap CSS, das sich im Kopfbereich befindet. Dieses grundlegende Starterkit verweist auf die CSS- und JavaScript-Dateien, die wir von Bootstrap und diese auf CDN gehostet benötigen. Sie können über diese Links hier sehen. Lassen Sie uns dies ändern, um auf unsere lokalen Dateien zu verweisen, die wir in unser Projekt hinzugefügt haben, beginnend mit dem Bootstrap CSS. In der href können wir dies entfernen und dann können wir dies auf unseren CSS-Ordner verweisen , css/bootstrap.min.css. Unten unten können wir uns dann unsere JavaScripts ansehen, in den Skriptabschnitten bis ganz unten scrollen, wir haben drei verschiedene Skripte hier. Zunächst einmal haben wir jQuery, die wir es für jetzt verlassen können, da wir dies nicht in unserem Projekt installiert haben. Wir können auch die Popper.js entfernen, die das mittlere Skript gerade hier ist. Dies wird für unsere Projekte nicht benötigt, und dies ist nur für bestimmte Bootstrap-Komponenten erforderlich, z. B. wenn Tooltips und Drop-Down-Links verwendet werden. Wenn Sie jedoch beabsichtigen, die Vorlage anzupassen, neu zu erstellen, diese zu verwenden, können Sie natürlich, lassen Sie dies in, dann müssen wir die Kern-Bootstrap JS-Datei ändern , um auf unsere lokale Datei zu verweisen. Wenn wir die Quelle hier auf diesem CDN-Link entfernen, dann ändert sich unser JavaScript-Ordner und die Datei, die wir wollen, ist bootstrap.min.js. Zusammen mit dem Core-Bootstrap-CSS, das wir zur Verfügung gestellt haben, möchten wir auch unser eigenes benutzerdefiniertes Styling hinzufügen. Um einen der Standard-Bootstrap-Stile zu überschreiben, die wir mit einer benutzerdefinierten CSS-Datei umgehen können. Zurück in der Seitenleiste, im CSS-Ordner und erstellen Sie eine neue Datei, und es heißt Custom.css. Würde dazu führen, dies dann in der index.html zu verknüpfen, um auf diese neue Datei zu verweisen. Öffnen Sie oben, wir werden dies direkt nach dem Kern Bootstrap CSS hinzufügen. Lassen Sie uns einen Kommentar von Custom CSS hinzufügen. Wir können dann unseren Link hinzufügen. Dieses Stylesheet ist ein Stylesheets und href verweist auf unseren CSS-Ordner, und der Name war custom.css. Wie bei jedem über Website-Projekt sollten wir unsere eigenen benutzerdefinierten Stylesheets zuletzt einschließen. Sie werden dann zuletzt geladen und überschreiben jedes der oben genannten Stylesheets, falls erforderlich. In unserem Fall ist das benutzerdefinierte Bootstrap CSS. Das letzte, was zu tun ist, diesen Seitentitel zu ändern, um ein ruhiges Spa zu sein. Wir können diese Datei speichern, ich gehe zur index.html, kopiere den Pfad und füge diesen dann in eine neue Browser-Tab ein, um dies zu öffnen. Sie können auch in Ihren Projektordner gehen und auf die Indexseite doppelklicken, um zu diesem weiterzuleiten, und jetzt sehen wir den Hello World Text, aus unserem Beispielcode stammt, der hier h1 ist. Das ist es jetzt für unser Projektsetup. Ich werde Sie jetzt im nächsten Video sehen, wo wir beginnen unser Thema anzupassen, indem Sie Google Fonts hinzufügen. 4. Benutzerdefinierte Google-Schriftarten hinzufügen: Da wir unser eigenes benutzerdefiniertes Thema erstellen, sind wir frei, jede Art von Schriftart zu verwenden, die wir möchten. Ich werde eine Nachricht von einer Google-Schriftart in seinem Thema zu machen, und Sie können natürlich jede von denen wählen, die Sie bevorzugen. Sie können eine Suche nach Google-Schriftarten haben, oder Sie können über die Fonts dot google.com. Werfen Sie einen Blick durch diese und wählen Sie eine, die Sie für das Thema bevorzugen, oder Sie können zusammen mit dem gleichen folgen wie ich, das wird Merriweather genannt werden, also lassen Sie uns eine Suche nach Merriweather machen und das ist eine, die wir wollen nur hier. Aus der Dropdown-Liste hier können wir wählen, welche Version wir wollen. Ich werde eine leichte Version verwenden, die Licht 300 ist, also wählen Sie dies, und dann, um dies hinzuzufügen, können wir auf das Plus-Symbol klicken nur hier. Dies fügen Sie es dann unten unten hinzu und dann können wir dies erweitern, um einige der Informationen zu erhalten, die wir brauchen, um es in unsere Projekte aufzunehmen. Das ist alles, was wir in diesem Stylesheets in unser Projekt aufnehmen können , indem wir den Link nur hier kopieren und dann zu unserer Indexseite gehen. Schließen Sie diese, so dass die index.html, und dann schließen wir dies direkt über unsere benutzerdefinierte CSS, so benutzerdefinierte Schriftarten. Dann können wir es gleich danach einfügen. Wir können jetzt zurück zu den Google Fonts Websites gehen, und Sie können sehen, wie Sie dies als CSS-Regel in unseren benutzerdefinierten Stylesheets festlegen. Unten unten können wir diese Zeile hier kopieren, was für die Schriftfamilie ist, und dann drüben in unserem benutzerdefinierten CSS, das ist an diesem Ende. Lassen Sie uns zuerst den Body-Selektor greifen und dann in die Schriftfamilie einfügen, die nach einem Merriweather sucht, wenn es gefunden werden kann, wenn nicht, wird es standardmäßig auf eine Standardserif zurückgesetzt. Geben Sie dies ein Speichern, und dann zurück zum Browser, laden Sie unsere Indexseite neu, dann müssen Faktoren speichern. Die index.html gibt, dass eine speichern, und dann neu laden. Sehen Sie nun, dass die benutzerdefinierten Schriftarten im Browser wirksam geworden sind, und das ist alles, was wir tun müssen, um benutzerdefinierte Google-Schriftarten in unserem Projekt aufzunehmen. Als nächstes werden wir mit der Erstellung eines Header-Abschnitts fortfahren. 5. Navigation der Kopfzeile: Derzeit haben wir nur ein einfaches Hello World Beispiel aus den Bootstrap Starter Templates. Wenn Organe dies ändern, indem sie die obere Navigation hinzufügen, wird es hier zur fertigen Version gehen. Dies wird die obere Navigationsleiste sein, die hier ist. Auf der linken Seite haben wir einen Home-Link mit einem Website-Titel. Und dann auf der rechten Seite haben wir unsere Links. Wenn wir den Browser nach unten verkleinern, wird dies voll reaktionsschnell sein, und dies wird auch auf eine Schaltfläche fallen gelassen, die, wenn Sie darauf klicken, um unsere Menü-Links auf kleineren Geräten zu erhalten. Beginnen wir von vorn in der index.html. Das erste, was ich tun werde, habe keine Probleme im Bootstrap-CSS, ich möchte wissen, ob diese beiden Attribute der Integrität und auch das letzte von Cross-Origin, dann bringen Sie dies wieder auf die gleiche Zeile. Auch das gleiche für das JavaScript am unteren Rand. Die eine Art und Weise, wie wir unsere verkleinerte Version verknüpft haben, können wir den Kreuzursprung auf die Integrität entfernen und dann ein Speichern geben. Der nächste Schritt besteht darin, unsere HelloWorld zu entfernen. Der Beispielcode. Ich werde das nicht mehr brauchen. Stattdessen werden wir mit einem Header beginnen. Öffnen Sie den Header und dann verschachtelt innerhalb haben wir die nav Elemente. In nav Element wird zwei Dinge enthalten. Zunächst einmal, auf der linken Seite, werden wir den Website-Titel haben, für den Sie scheinen, und dann das Menü links über auf der rechten Seite. Diese Menü-Links werden auf kleineren Geräten in die Dropdown-Schaltfläche eingeblendet. Lassen Sie uns beginnen, indem Sie diese jetzt hinzufügen. Beginnen wir mit unserem Link, der für den Website-Titel des ruhigen Spa sein wird. Dies wird einige Bootstrap-Klassen haben, wenn wir dies speichern und dann überprüfen. Wir können sehen, dass es im Moment nur ziemlich Standardtexte sind. Lassen Sie uns in den nav Elemente beginnen, indem Sie einige Bootstrap Klassen hinzufügen. Die erste ist die einfache Navigationsleiste. Wenn wir dies eine speichern und dann neu laden, können wir sehen, dass dies jetzt von der oberen Kante verschoben wird. Wir können sehen, welche Stile angewendet wurden, indem wir in die Entwickler-Tools mit Rechtsklick und Inspect gehen. Wenn wir dann auf den Selektor klicken und dann über unsere navbar haben. Stellen Sie sicher, dass diese Navline hervorgehoben ist, und dann auf der rechten Seite können wir sehen welche Stile von Bootstrap aus dieser navbar-Klasse angewendet wurden. Wir können sehen, dass es die CSS-Flex-Box als Anzeigetyp verwendet. Wir verwenden auch ein paar Polsterungen, die von der oberen Ecke eingezogen sind, was wir zuvor gesehen haben. Wir können auch zusätzliche Klassen hinzufügen, so dass direkt nach der navbar, aber fügen Sie navbar, expand-md hinzu, geben Sie dies ein Speichern und diese Stile werden über die mittelgroßen Geräte gelten. Wenn wir dies neu laden, können wir in der Medienabfrage sehen, diese Stile gelten, wenn die minimale Bildschirmbreite 768 Pixel beträgt. Wenn wir dies unter 768 schrumpfen. Nur ein bisschen weiter, laden wir. Wir können sehen, wir haben gerade jetzt die navbar Anwendung von vorher. Wir haben nicht mehr die zweite Klasse beantragt. Diese navbar Expande-Klasse wird das CSS mit der Zeile ohne Rap flexed setzen, wie wir hier sehen können, und rechtfertigen den Inhalt gebeugt werden Start, die auf der linken Seite vorbei ist. Dann lassen Sie uns einige Hintergrundfarben hinzufügen, um ein bisschen mehr hervorzuheben. Kurz danach können wir das navbar Licht und auch bg-light hinzufügen. Wir können eine beliebige Kombination dieser Farben hier verwenden. Ich verwende das navbar-Licht, das früher mit hellen Hintergrundfarben verwendet wurde, und dann bg-light, um die tatsächliche helle Hintergrundfarbe des Navigationsgeräts anzugeben. Wenn wir neu laden, können wir jetzt diesen Unterschied im Hintergrund sehen. Jetzt lassen Sie uns mit unserer Verbindung der ruhigen Spa arbeiten. Dies wird eine Klasse haben, eine Bootstrap-Klasse von Navbar-Marke und dann können wir einfach einen leeren [unhörbaren], den Link zu unserer Homepage hinzufügen . Wenn wir nun diese speichern und den Browser neu laden, sehen wir nun, dass dies einen Stil, Farbe und Abstandseigenschaften auf unseren Link anwendet . Als nächstes werde ich die Schaltfläche erstellen, die für unser Dropdown-Menü ist. Nur ein normaler HTML-Button. Also hier drinnen können wir einige Bootstrap-Klassen hinzufügen. Der erste wird navbar-toggle sein, und dann die Typattribute von button. Wir werden hier keinen Text hinzufügen, denn bald werden wir ein Symbol hinzufügen und dieses Symbol sind die freien Zeilen, die Sie auf der fertigen Version von in der Ecke sehen. So werden die nächsten beiden Attribute, die wir die Schaltfläche hinzufügen, mit dem kleinen Bildschirm und dem Dropdown-Inhalt, den es steuert, verwandt . Zunächst einmal fügen wir die Datenumschaltung gleich zu kollabieren, und dann können wir auch das Datenziel hinzufügen, und wir werden dies so einstellen, dass es gleich zu Hilfe ist. Fügen wir also den Hash hinzu und rufen Sie dies das Navbar nav auf. Hier sehen wir einen schönen Daten-Toggle und wir erklärten, dass der Inhalt zusammenbricht, wenn auf diese Schaltfläche geklickt wurde. Aber welche Inhalte wollen wir zusammenbrechen? Nun, wenn wir uns die fertige Version ansehen, wird dies zusammenbrechen und dieses Navigationsmenü erweitern. Wir haben das noch nicht geschaffen, aber sobald wir es tun, geben wir diese Hilfe von Navbar-nav. Dieses Datenziel kann jeder CSS-Selektor sein, den wir wollen. Also werden wir es einfach wie normales JavaScript verwenden. Wenn Sie Klasse Ziel wollen, können wir den Punkt verwenden oder den Hash für eine ID verwenden. Kurz bevor wir das div erstellen wollen wir über die Schaltfläche steuern. Ich werde eine Spanne hinzufügen, die in den Symbolen hinzugefügt wird, die wir gerade gesehen haben. Die Spanne wird die Klasse haben, um diese Symbole in der Navigationsleiste Toggle-Icon hinzuzufügen. Schauen wir uns dies im Browser an, und unten, bis auf den kleinsten Bildschirm und wir haben jetzt die Schaltfläche mit den kostenlosen Icons von unserem gesponnen. Wenn wir den Browser erweitern, sollten wir auch sehen, dass diese Schaltfläche verschwindet, weil wir diese Erweiterung auf mittleren Geräten hinzugefügt haben . Lassen Sie uns nun unsere div folgen Links erstellen. Dies wird der Container für unser Zuhause und unseren Blog-Navigationslink sein und es wird der Container sein , der Knopf öffnet und schließt. Lassen Sie uns direkt unter unserem Button arbeiten. Lassen Sie uns unser div hinzufügen, das unser Container ist. Die erste Klasse wird gleich dem Zusammenbruch sein. Dies wird verwendet, um den Inhalt zu verstecken, wenn wir müssen. Als nächstes haben wir navbar Zusammenbruch. Die zweite Bootstrap-Klasse gruppiert alle Inhalte zusammen, und es wird auch in Verbindung mit der navbar expand md verwendet werden. Es weiß, diesen Container unter diesen Haltepunkten zu verstecken , und der dritte ist für die CSS-Flex-Box, dies ist Rechtfertigung Inhalt Ende und dies wird unsere Links auf die rechte Seite der Navigation schieben. Innerhalb dieser Tabelle können wir fortfahren und unsere Links erstellen, die eine ungeordnete Liste sein wird. Ungeordnete Liste nimmt auch in einigen Klassen sind das Styling und Layout und die erste wird navbar-nav sein. Wir fügen dann unsere Listenelemente hinzu. Die Listenelemente Klassen werden nav Element sein, und dann innerhalb verschachtelt wir einen Link haben, indem wir ein Element mit den Texten von zu Hause verwenden. Dieser Link wird eine Klasse von nav Link haben und dann können wir den Hassentwurf so einstellen, dass er auf unseren Index Punkt HTML zeigt. Gut, lassen Sie uns das kopieren und fügen Sie noch einmal für unseren Blog hinzu. Dieses erste Listenelement, fügen Sie es in. Dies wird für den Blog sein und Sie können auch die href zu unserem Blog dot HTML zu ändern . Natürlich haben wir das nicht erstellt, aber wir werden in einem späteren Video darauf zugreifen. Geben Sie dieser Datei also ein Speichern und dann zum Browser. Lassen Sie uns das neu laden und erweitern. Wir sehen auf den größeren Bildschirmen haben wir unsere Home-und Blog-Links, und findet dann auf die Schaltfläche ist versteckt den Inhalt auf diesen kleinen Geräten. Aber wenn wir auf diese Schaltfläche in der oberen Ecke klicken, sehen wir nicht, dass die Links herunterfallen. Dies liegt daran, wenn wir zu unserer Schaltfläche gehen, setzen wir das Datenziel von navbar-nav. Beide haben dies nicht zu unserem Container hinzugefügt. In diesem div fügen wir die ID von navbar-nav hinzu. Geben Sie dies ein Speichern, laden Sie den Browser neu und jetzt erhalten wir eine Arbeit im Dropdown-Menü. Erweitern Sie dies und dies geht nun zurück in die Vollbildansicht. Gut, also ist dies jetzt für das Menü, und wir werden mit der Kopfzeile als nächstes fortfahren, wenn wir das vorgestellte Hintergrundbild hinzufügen. 6. Ausgewählte Bilder: Die nächste Stufe unseres Headers ist es, dieses vorgestellte Bild hinzuzufügen, das ist der Hintergrund, den wir hier sehen. Später im Kurs, ermöglicht es uns auch, im WordPress-Dashboard über ein Steuerelement durch den Benutzer geändert werden . Zuerst gehen wir voran und fügen Sie einen neuen Abschnitt und immer noch innerhalb dieses Header-Element. Lassen Sie uns das schließende Header-Tag suchen. Dann können wir einen neuen Abschnitt erstellen. Der Abschnitt wird eine Bootstrap-Klasse von Containerflüssigkeit haben. Um eine Seite in Bootstrap zu erstellen, verwenden wir eine Reihe von Containern, Zeilen und Spalten, die die CSS-Flex-Box unter der Haube verwendet. Es gibt eine Container-Klasse, die den Inhalt in einem Container mit reaktionsschneller Pixelbreite gruppiert , was eine Lücke auf der rechten und linken Seite der Seite hinterlässt. Wir werden uns diese Alternative bald ansehen. Es gibt diese Behälterflüssigkeit, wie wir gerade hier verwendet haben, die einen Flüssigkeitsbehälter liefert, der bis zu 100 Prozent der verfügbaren Bildschirmbreite dehnt . Mit wenn Typ kann es als Referenz verwendet werden, um unseren Inhalt zu zentrieren und zu teilen. In diesem Container verschachtelt, fügen wir eine Klasse von Zeilen hinzu. Zeilen ermöglichen es uns, NES Inhalt innerhalb und seufzt den Inhalt durch die Verwendung von Spalten, und wir werden uns das sehr bald ansehen. Aber jetzt werden wir gehen und unsere Reihe hinzufügen. Dies wird eine Klasse auf einem div Wrapper sein. Hier drinnen können wir unser Bild hinzufügen, welches das Hintergrundbild sein wird, das wir vorher gesehen haben. Die Bildquelle wird aus dem Bilderordner stammen , der mit diesem Kurs zur Verfügung gestellt wurde. Drinnen gibt es ein Bild namens Lake.JPEG. Wir können auch den alten Text der See-Hintergründe dann eine Klasse hinzufügen, die eine benutzerdefinierte Klasse ist, werden wir bald von Header_IMG bekommen. Kurz nach diesem Bild werden wir auch ein div hinzufügen. Dieses div wird für den Text sein, der über das Bild gelegt wird. Dann können wir im Inneren die p Elemente hinzufügen, um etwas Text hinzuzufügen. Ich werde voll ansprechende Prämien Pfad-Theme für WordPress hinzufügen. Sie können hier jeden Text hinzufügen, den Sie mögen, und dann lassen Sie uns einige Break-Tags hinzufügen, nur um dies auf zwei verschiedene Zeilen aufzuteilen. Dies nach Responsive und auch nach dem Thema. Wir können diese Texte im CSS steuern. Wir müssen auch eine Klasse hinzufügen. Dies ist wiederum eine benutzerdefinierte Klasse von Feature-Text. Feature-Text ist eine unserer eigenen benutzerdefinierten Klassen und nichts mit Bootstrap zu tun. Wir werden einfach unsere eigenen Klassen zu nutzen, damit wir diese Texte im CSS oder im Browser steuern können . Dann neu laden, da ist unser Bild und auch unser Text. Unser Text befindet sich nun unter dem Bild. Dies ist nicht das Ergebnis, das wir für unser abschließendes Projekt wollen. Wir werden weitermachen und einige benutzerdefinierte CSS-Klassen und auch einige Bootstrap-Klassen hinzufügen , damit dieser Text das Bild überlagert. Zuerst lassen Sie uns die Bootstrap-Klassen einrichten. Wir können die umgebende Zeile, um eine Position von relativ zu sein. Gehen wir zu unserer umgebenden Zeile, die nur hier ist, können wir die Bootstrap-Position relativ hinzufügen, und das ist genau das gleiche wie in unser CSS gehen und in eine relative Position setzen, aber auf diese Weise ist es nur eine Bootstrap-Klasse, und dann kümmert sich Bootstrap um das Hinzufügen aller CSS, die wir brauchen. Wenn wir dies speichern und dann neu laden, öffnen Sie die Entwickler-Tools, sehen Sie die Position relative Klasse hat den CSS-Positionswert von relativ hinzugefügt , und dann Bootstrap wird auch am Ende Bedeutung hinzugefügt. Stellen Sie einfach sicher, dass nichts dies außer Kraft setzt. Als nächstes müssen wir den Text so einstellen, dass er eine absolute Position ist. In dem div, das unsere p Elemente umgibt, eine Klasse, unsere Position absolut. Sie sollten nun den Text verschieben. Wenn wir den Browser über den oberen Rand des Bildes neu laden und den Text so einstellen, dass er eine absolute Position hat, nehmen wir den Text aus dem normalen Fluss der Webseite heraus. Es positioniert sich dann auf den nächsten relativen Container, unsere Zeile ist, die nächste Stufe, ist, diesen Text in der Mitte des Bildes zu zentrieren. Lassen Sie uns das tun, indem wir zu unserer Reihe gehen, die gerade hier ist. Wir können den Anzeigetyp auf Flexbox mit dem Bindestrich Fluss einstellen. Wir können auch den Flexbox-Wert des Begründungsinhaltszentrums festlegen, das den Inhalt in der Mitte der Hauptachse ausrichtet. Speichern und neu laden. Dies lässt uns auf halbem Weg dorthin, wir haben jetzt den Inhalt in der Mitte horizontal. Jetzt brauchen wir nur noch die vertikale Ausrichtung. Ich möchte dies tun, indem ich unserer Reihe eine weitere Klasse hinzufüge. Diese Klasse ist ausrichten Elemente, Mitte des Browsers und da gehen wir. Positionierung wie diese war vor Flexbox viel schwieriger. Sowohl die align Items Center Eigenschaft, wird unseren Inhalt jetzt auf dem Kreuz oder der gegenüberliegenden Achse ausrichten, was uns eine perfekte horizontale und vertikale Ausrichtung gibt. Eine kleine Optimierung, die wir machen können, ist, den Text auch zentriert zu setzen. Im Moment ist alles auf der linken Seite des Containers ausgerichtet. Auch hier können wir dies auf unsere Zeile direkt nach dem Zentrum der Ausrichtungselemente anwenden. Wir können Textcenter hinzufügen und da gehen wir. Wir können diesen Abschnitt jetzt mit einem kleinen benutzerdefinierten CSS beenden. Wir haben bereits eine benutzerdefinierte Klasse von Header-Bild, die jetzt verwenden wird. Nun lassen Sie uns einen zu unserem umgebenden Text div zwei hinzufügen. Hier ist unser Text und im umgebenden Container, nach Position absolut. Lassen Sie uns Feature-Strich BG hinzufügen, dies wird verwendet, um die umgebende Box hinzuzufügen. Wenn wir auf die fertige Version gehen, die die Texte umgibt, so können wir ein wenig leichter über das Bild schreiben. Dieser Hintergrund würde auch 60 Prozent des Containers auf größeren Bildschirmen sein und dann auf kleineren Bildschirmen die volle Breite erreichen. Lassen Sie uns in der Custom CSS arbeiten. erste Schritt besteht darin, das Bild auf eine maximale Breite von 100 Prozent festzulegen. Wir können dann die Funktion BG-Klasse verwenden, um zu beginnen, unseren Hintergrund zu erstellen. Der Hintergrund wird mit einer RGBA-Farbe erstellt. So geben wir ihm diese schöne Transparenz, die wir hier sehen können. Die vier Werte werden 255, 255, 255, und dann die vierte ist für die Deckkraft. Ich werde dies auf 30 Prozent setzen, was ein Wert von 0,3 ist. Stellen Sie sicher, dass dies ein Bindestrich ist. Jetzt auf die Breite wird die Breite 100 vw für die größeren Bildschirme sein, die die volle Breite des Browsers oder des View-Ports überspannen wird. Der Grenzradius von 10 Pixeln, gibt uns ein Speichern. Öffnen Sie die Registerkarte und laden Sie sie neu. Dort hat sich nicht viel geändert, ich denke, wir müssen nur den Index für die benutzerdefinierte Klasse speichern. Probieren Sie das mal aus. Jetzt lass uns das ein bisschen größer machen. Wir haben ein umgebendes div von Feature-Text. Lasst uns das schnappen. Die Schriftgröße wird zwei REMS sein. Auch die Zeilenhöhe, die zu vier REMS erhöht werden, neu laden. Der nächste Schritt besteht darin, unserem Header-Bild eine minimale Höhe hinzuzufügen. Scrollen wir nach unten zum Kopfzeilenunterstrich IMG, Alles, was wir hier tun werden, ist die minimale Höhe der Bildgeschwindigkeit 25 VH. Das bedeutet, dass das Bild immer mindestens 25 Prozent der Höhe der Ansichtsleiste beträgt. Das letzte, was in unserem CSS zu tun ist, ist eine Medienabfrage zu erstellen. Wenn wir uns die fertige Version ansehen, machen Sie die Breite dieses Hintergrunds 60 Prozent auf den größten Bildschirmen. Als Medien wollen wir die Bildschirme anvisieren. Wir können unsere Haltepunkte auch mit den Bootstrap-Breakpoints abgleichen. Die minimale Breite von 768 Pixeln. Gehen, um die Funktion BG greifen und stellen Sie die Breite auf 60 vw. Auf größeren Bildschirmen beträgt der Hintergrund 60 Prozent, dann auf kleineren Bildschirmen beträgt der Hintergrund 100 Prozent. Speichern Sie diese Datei, über im Browser. Wenn wir es verkleinern und die Entwicklungstools schließen, um mehr Platz zu erhalten, der Hintergrund und die Texte für unseren kleinen Bildschirm die volle Breite. Wenn wir den verfügbaren Bildschirmplatz vergrößern, sinkt dieser jetzt auf 60 Prozent, was genau das ist, was wir wollten. Das ist es jetzt für unseren Header. Kurz bevor wir gehen, möchte ich Ihnen den Unterschied zwischen dem Behälter und der Behälterflüssigkeit zeigen. Derzeit haben wir den Abschnitt als Containerflüssigkeit eingestellt. Wenn wir dies nur auf den Container setzen und dann neu laden, der Container zu einer festen pixelbasierten Breite, was bedeutet, dass es einen Leerraum auf der linken und rechten Seite gibt. Wo als Containerflüssigkeit, die wir vorher hatten, wird auf die volle Breite des Browsers dehnen, und wir werden mehr Gebrauch von diesen Containern machen, wie wir durch den Rest des Kurses gehen. 7. Startseite: Im letzten Video haben wir den Header-Abschnitt beendet. Wenn Sie einen Blick auf die fertige Version werfen, werden wir jetzt zu diesem „Willkommen Abschnitt“, den wir hier sehen. Dies wird uns die Chance geben, mit Spalten zu arbeiten, um Inhalte in gleichen Teilen oder drei Teile in unserem Fall auszulegen . Wenn wir den Browser verkleinern, sehen wir diesen Abschnitt, zusammen mit all den kleinen Abschnitten, ist voll reaktionsschnell. Dann werden wir in einer kleinsten Bildschirmansicht vorrätig. Im Index Punkt HTML. Dieser Inhalt wird direkt unter den Header gehen, den wir beendet haben. Gehen wir und machen das jetzt. Wir lokalisieren das schließende Header-Tag. Das erste, was zu tun ist, ist ein div zu erstellen. Dies wird eine Klasse von Containerflüssigkeiten haben, genau wie der Header-Abschnitt, auch. Dann auch eine Klasse von Tech Center, um unsere Text-Positionierung hinzuzufügen. Dann werden wir etwas Polsterung hinzufügen. Wir werden das mit py-5 benutzen. Jetzt mag das ein wenig verwirrend aussehen. Gehen wir zur Bootstrap-Dokumentation in der Seitenleiste. Wenn wir zu Dienstprogrammen gehen und dann runter zum Abstand. Dies erklärt, wie wir Marge und Padding als Klassennamen verwenden können. Wir müssen diese mit einem P für Polsterung oder einem M für Marge aufbauen. In unserem Fall haben wir py-5 verwendet. P für Polsterung und dann können wir verwenden, die oberen, unteren, linken und rechten Werte. Oder wir können die x und y setzen, um sie oben und unten oder links und rechts anzuwenden, gefolgt von einer Größe von null bis fünf. In unserem Fall ist der Py sicherlich Polsterwert oben und unten. Es kann auch ein Spiel mit diesen verschiedenen Werten zu haben, um Ihr Projekt zu sehen. Das nächste, was ich tun möchte, ist eine Zeile zu erstellen, die Wrapper für unsere Texte und auch dieses Symbol in der Mitte sein wird. Innerhalb unseres Containers fügen wir ein zweites div mit der Klasse der Zeile hinzu. Dann verschachteln Sie es hier können wir unsere Spalten hinzufügen, Bootstrap verwendet ein 12-Säulen-Raster. Wenn wir ein div so einstellen, dass es sechs Spalten breit ist, wird es die Hälfte der Breite des Bildschirms in Anspruch nehmen. Im Moment hat jede von ihnen vier Säulen, also vier, vier und vier. Wir können unseren Welcome to Tranquil Spa-Text auch auf die Größe von sechs Spalten setzen. Dann versetzen Sie es um einen Wert von drei, was dies in die Mitte schiebt. Geben Sie drei Spalten auf der linken Seite und dann drei Spalten auf der rechten Seite. Innerhalb unserer Zeile können Sie das div hinzufügen. Die Klasse, um unsere Spalten zu setzen, wird -md, -six genannt, was bedeutet, dass dies die Breite von sechs Spalten auf mittleren Geräten und höher sein wird, die ganze Breite auf kleineren Geräten. Wie bereits erwähnt, können wir dies auch bei mittleren Geräten um drei Spalten kompensieren. Wenn ich jetzt speichere und dann neu lade, sehen Sie nichts, weil wir noch keine Inhalte hinzugefügt haben. Wenn wir hier unsere dritte Überschrift mit einem Text von „Willkommen im Tranquil Spa“ hinzufügen . Wir sollten jetzt in der Lage sein, zu speichern und dann etwas auf dem Bildschirm zu sehen. Die Überschrift der Ebene 3 nimmt sechs Spalten oder die Hälfte des 12-Säulen-Rasters ein. Die restlichen sechs Spalten wurden auf beiden Seiten geteilt , da wir dies um einen Wert von drei versetzen. Als nächstes müssen wir unser Symbol oder unser Bild direkt unten hinzufügen. Die Quelle, diese befindet sich im Ordner Bilder. Das Bild, das dafür vorgesehen ist, ist Divider lila, der alte Text der Trennwand zwei. Dann eine Klasse von W25. Wieder, wenn wir zurück zu den Bootstrap-Dienstprogrammen gehen, können wir einen Blick auf die Dimensionierung werfen. W25 legt die Breite auf 25 Prozent fest. W50 setzt die Breite auf 50 Prozent und so weiter. Speichern Sie dies und dann können wir dies in unserem Projekt neu laden. Okay, gut. Die nächste Stufe besteht darin, nach unten zu gehen und diese Bilder hinzuzufügen. Diese Bilder werden auch einen Wrapper haben, der ein div sein wird. Das wird auch eine separate Zeile sein, weil wir auf einer neuen Linie sind. Dann werden wir innerhalb dieser Zeile drei neue divs erstellen. Jede mit einer Breite von vier Spalten. Gleich nach dieser Reihe hier, aber immer noch in unserem Container. Das ist nur ein Rechtschreibfehler. Okay, kurz nach diesem div hier, werden wir etwas Platz machen und dann eine neue Zeile hinzufügen. Das div mit der Klasse der Zeile, wird auch einige zusätzliche Klassen zu diesem div hinzufügen. Wir werden auch etwas Rand an der Spitze hinzufügen. Fügen Sie einige Abstände hinzu, die ein Wert von vier ist. Setzen Sie den Anzeigetyp mit d flex auf flex und fügen Sie dann einige Flexbox-Abstände mit Ausrichtungsinhalt hinzu. Hier können wir einen besseren Blick darauf werfen, wie Spalten funktionieren. Wir können dann eine Klasse von col sm vier hinzufügen. Das heißt, das ist auf kleinen Bildschirmen und über dieser Tabelle, die Hälfte der Breite von vier Spalten. Wenn wir dies in zwei weiteren Malen einfügen, sagen wir a, b und c. Schauen Sie sich dies im Browser an. Jedes dieser drei divs nimmt einen gleichen Raum ein. Anstelle von a, b und c möchten wir ein Bild und dann einige Texturen unten hinzufügen. Lassen Sie uns einfach diese beiden divs für jetzt entfernen. Anstelle eines, können wir ein Bild hinzufügen. Die Bildquelle wird der Bilderordner sein. Dann die makeup.jpeg, bilden Bild als die alt. Dann können wir hier einige Bootstrap-Klassen hinzufügen. Ich werde das als Bootstrap-Karte konstruieren. Wird zur Dokumentation gehen. Wir sehen, wie Karte aussehen wird. Wenn wir zu den Komponenten gehen, dann runter zu einer Karte. Es gibt viele verschiedene Variationen, die wir verwenden können. Ich möchte ein sehr einfaches verwenden, um ein Layout zu erhalten, das diesem sehr ähnlich ist. Wir werden die Karte auf dem Bild der Karte verwenden, Bild oben. Kartenkörper für den Bombenabschnitt. Dann Karten Text für den tatsächlichen Inhalt, die uns einige schöne Layout und Styling geben wird. Zuallererst, im Bild, können wir die Klasse der Karten img top hinzufügen. Dann ein div für den tatsächlichen Inhalt direkt darunter. Dieses div wird eine Klasse von Kartenkörper haben. Dann in unserem Text verschachtelt. Hier ein Make-up. Anstelle des kaufmännischen Unds werde ich eine HTML-Entität von AMP verwenden. Dieser Text benötigt eine Klasse von Kartentext. Okay, also speichern Sie das und sehen, wie das aussieht. Wir haben nur ein div in der Minute, also ist dies in der Mitte zentriert, aber dies wird zur Seite geschoben, sobald wir unser zweites und drittes div hinzufügen. Wenn wir einen Blick auf die fertige Version werfen, können wir auf dem Bild sehen, dass es diese abgerundeten Ecken hat. Dies ist eine neuartige Bootstrap-Dienstprogrammklasse, die zur Verfügung gestellt wird. Wir können dies als eine Klasse auf Bild der Karte Bild oben hinzufügen. Dies ist ein abgerundeter Kreis. Das ist alles, was wir hinzufügen müssen, um jetzt unser Bild zu transformieren. Anstatt alle diese Klassen erneut auszugeben, kopiere ich dieses div und füge es dann in zwei weiteren Malen ein. Die mittlere, wenn wir uns das endgültige Projekt anschauen, wird dieses das Kerzenbild sein und dann Texte von Spa-Einrichtungen benötigen, dies wahrscheinlich Make-up, das ist candles.jpeg, der alte Text von Kerzen Bild dann Spa-Einrichtungen. Der Rest der Klassen bleibt gleich. Der dritte wird für den Rückzug sein, retreat.jpeg. Das Make-up-Bild ist jetzt Rückzug Bild. Dann wird der Text am Ende, ich werde eine Tour machen. Okay, mal sehen, wie das im Browser zurückblickt. Aktualisieren Sie es gibt alle drei Bilder. Alles gut. Okay, jetzt gibt es nur noch ein oder zwei weitere Dinge, die wir tun müssen, nur um das zu beenden. Wenn wir uns die fertige Version ansehen, können wir sehen, dass die Bilder etwas kleiner sind und der Text etwas größer ist. Das liegt daran, wenn wir uns unsere Version ansehen, haben wir alle verfügbaren 12 Spalten aufgebraucht. Also vier, vier und vier. Ich werde das ein bisschen kleiner machen, indem ich alle drei auf einen Wert von drei ändere. Speichern, aktualisieren. Jetzt habe ich ein bisschen mehr Abstand um die Bilder. Diese alle sind immer noch zentriert, weil wir den Inhalt um gerechtfertigt haben, dann haben wir gleich Platz auf allen Seiten. Als Nächstes können wir den Text unten etwas größer machen , indem wir die Bootstrap-Stile überschreiben. Die Bootstrap-Klasse von Kartentext wurde auf den Text angewendet. Lassen Sie uns zu unserem benutzerdefinierten CSS gehen, direkt über der Medienabfrage. Wir können den Text von „Willkommen Abschnitt“ hinzufügen. Der einzige Stil, den wir hinzufügen müssen, ist Kartentext. Ich brauche dies, um eine Schriftgröße von 1,2 Rems zu haben. Öffnen Sie Chrome, laden Sie. Nun, das sieht viel besser und mehr wie die endgültige Version. Lassen Sie uns gerade jetzt mit dem Willkommensabschnitt fertig und werfen Sie einen Blick darauf wie wir Spalten zusammen mit verschiedenen Bootstrap-Dienstprogrammen verwenden können. Danke und wir sehen uns nächstes Mal. 8. Aktuelle Angebote – HTML: Wir machen gute Fortschritte mit unserem Bootstrap-Thema und jetzt ist es an der Zeit, mit dem neuesten Abschnitt fortzufahren. Der Abschnitt wird direkt unter diesem Willkommensabschnitt, den wir im letzten Video erstellt haben , und wenn Sie zur endgültigen Version hier gehen, ist dies ein Abschnitt, den wir jetzt erstellen werden. Es wird uns mehr Übung geben, Karten und auch Spalten für das Layout zu verwenden, zusammen mit dem Blick auf kleine Bootstrap-Klassen, die verfügbar sind. In diesem Video werden wir alle HTML für den Abschnitt zusammen mit den notwendigen Bootstrap-Klassen hinzufügen . Allerdings werden kleine Dinge wie der Preis über der Spitze hier benutzerdefinierte CSS sein, und wir werden im nächsten Video mit dem Styling fortfahren. Auf Stationen mit dem HTML in unserer Indexseite. Gehen wir nach unten unter den schließenden divs. Direkt über dem JavaScript können wir ein neues div erstellen. Dieses neue div wird eine Klasse von Containerflüssigkeit haben. Wir möchten, dass der Text in der Mitte ausgerichtet wird, damit wir Bootstrap-Klassen haben können. Wir werden einen dunklen Hintergrund haben, den Sie gerade hier sehen können. Wir können dies mit einer Bootstrap-Klasse von bg-dark und dann schließlich etwas Polsterung oben und unten tun, die wir mit PY für die y-Achse und den Wert von fünf hinzufügen können, um es konsistent zu halten. Drinnen fügen wir unsere vertraute Zeile hinzu. Fügen Sie also ein neues div mit der Klasse der Zeile hinzu. Das ist alles, was wir für diesen hier brauchen. Dann im Inneren werden wir den Titel zu erstellen, der die „Neueste Spa Angebote“ ist. Wir werden das in ähnlicher Weise tun wie dieses oben oben. Wir werden ein div oder einen Abschnitt mit einer Spanne oder Breite von sechs Spalten erstellen und dann werden wir es drei Spalten versetzen, um dies in der Mitte zu platzieren. Öffnen Sie also das div, die Klasse, col-md, also sind dies sechs Spalten auf mittleren Geräten und beidem, was bedeutet, dass alles unterhalb der mittelgroßen Geräte Standardbreite sein wird. Wir können auch die Offsets auf mittleren Geräten bereitstellen, um drei Spalten zu sein, schieben Sie in die Mitte der Seite. Unser Titel in der h3, wird dies die Klasse der Textfolien haben. Da verwenden wir schöne dunkle Hintergrundfarben und den Text von „Neueste Spa Angebote“. Okay, gut. Darunter brauchen wir unser Image. Dieses Bild wird ein ähnliches wie das obige sein, das nur dieses hier ist. Es wird eine etwas andere Farbe haben, da wir einen anderen Hintergrund haben , der mit dem Bild identisch ist. Also imj, die Quelle, das ist im Image-Ordner, und dieser ist die divider-silver.png Der alt-Text, einfach Teiler und dann eine Bootstrap-Klasse. Also werden wir nur einige Polsterung am unteren Rand hinzufügen, beginnt im Abstand, so dass unten wir unten unten oder pb und den Wert von vier auffüllen. Außerdem können wir die Breite festlegen, um benutzerdefinierte Breite w-25, die bereits betrachtet hat, ist eine Breite von 25 Prozent. Dann können wir einen Blick werfen, neu laden und unter unseren Willkommensbereich gehen und da ist unser Titel. Jetzt müssen wir eine neue Zeile direkt unten für diese drei Karten auf hier erstellen. Jede Karte wird in einer Breite von vier Spalten in ihrem eigenen separaten div sein. Beginnen wir also mit dem Erstellen des ersten Abschnitts. Wir müssen ein neues div direkt unter dieser Zeile erstellen. Div mit der Klasse der Zeile. Schließen Sie dies ab und stellen Sie sicher, dass sich dieser noch im umgebenden Container befindet. Wir können jetzt unser div mit der Klasse von col-sm-4 konstruieren. Dies ist ein Drittel der Seitenbreite auf kleineren Geräten unter beiden. Jeder von ihnen wird eine Karte sein, fügen Sie ein div mit der Klasse der Karten hinzu, und dies wird uns eine Chance geben, eine ähnliche Sache zu tun, die wir im letzten Video gemacht haben, wo wir eine Karte Header, einen Kartenkörper hinzufügen können , und dies fügt alle schönen Bootstrap-Styling-Fotos hinzu. Lassen Sie uns zunächst einen Kartenkopf hinzufügen. Fügen wir dies in einer Überschrift der Ebene vier hinzu. Wir müssen diesem eine Klasse von Kartenkopf geben. Da es sich um eine Kopfzeile oben handelt, werden wir etwas Polsterung hinzufügen, um es ein wenig Abstand von oben zu geben. Wir können das mit py-5 tun, und dies gilt für den oberen und unteren Rand der Kopfzeile. Im Inneren hier werden wir den Text der Familie Swim Paket hinzufügen. Geben Sie hier natürlich einen beliebigen Text ein, den Sie bevorzugen, gefolgt von einer Spanne mit dem Preis. Ich werde 60 dafür hinzufügen, und das wird der Preis sein, der hier oben sitzt und wir werden dies mit CSS im nächsten Video positionieren. Aber jetzt, da wir nur das HTML hinzufügen, so werde ich eine Klasse zu dieser Spanne hinzufügen. Die Kosten werden gleich fond-weight-bold sein. Dies wird es nur ein wenig kühner machen, so dass es mehr abhebt. Unter unserem h4 können wir dann den Kartenkörper hinzufügen. Wir haben diese Klasse schon mal benutzt, das ist Karosserie. Bevor wir weiter gehen, schauen wir uns dies im Browser an. Erfrischen Sie sich, und da ist unser Kartenkopf und der Körper unserer Karte direkt darunter. Dieser Kartenkörper wird den Text erhalten, der gerade hier ist, und dann eine weitere Liste mit drei Listenelementen. Okay, lassen Sie uns arbeiten in unserem Kartenkörper. Das erste, was wir hier tun werden, ist ein Blockquote Text hinzuzufügen. Dieses Blockquote bedeutet auch eine Bootstrap-Klasse von Blockquotes. Also eine Klasse von Blockquotes, und das ist am Rand am unteren Rand zu einem Wert von Null. Wir können unseren Text innerhalb der P-Elemente hinzufügen. Dieser Text wird unser beliebtestes Schwimmpaket sein, tolles Preis-Leistungs-Verhältnis für Familien oder Gruppen von 12 Personen. Jetzt müssen wir unter das Blockquote und unter dieses div für den Kartenkörper gehen. Dann im Inneren hier werden wir eine weitere Liste hinzufügen, die eine Klasse von Listengruppe haben wird. Dies wird unsere kostenlosen Listenartikel sein. Der erste wird also eine Klasse haben. Dieser wird list-group-item sein, gefolgt von font-kursiv. Der Text ist bis zu 12 Personen. Sie können den nächsten austippen, also werde ich zwei weitere Male kopieren und einfügen, da es die gleichen Klassen hat. Der Text auf diesem ist private Sitzungen, und dann wird der dritte Schwimmunterricht auch verfügbar sein. Dort gehen wir zum Browser. Jetzt gehen wir zum ersten Tab, laden Sie neu, und es sieht nicht gut aus. Wir müssen das jetzt noch zwei Mal für unseren zweiten und dritten Abschnitt replizieren. Um dies zu tun, werde ich das kopieren, um eine Menge Wiederholungen zu vermeiden. Wenn Sie kleine Übung wollen, können Sie voran gehen und dies selbst eingeben. Ich werde voran gehen und das schließende div finden. In der Tat brauchen wir nur die col-sm-4, also kopieren wir dieses div hier und den col-sm-4-Abschnitt. Stellen Sie sicher, dass Sie immer noch zwei schließende div-Tags am Ende sind, was für die Zeile und den äußeren Container gilt. Fügen Sie dies in knapp unten ein. Dieser wird für die Braut sein, und dann wird der Preis für diesen 40 sein. Der Text, dieser wird sein „Unsere Hochzeitspakete sind perfekt für Ihren großen Tag“. Dann können wir für Gruppen, groß oder klein, gerecht werden. Dann müssen wir nur noch die kostenlosen Listenelemente tun. Die erste wird ihr Make-up sein und dies wird mit der HTML-Entität von Amp, fügen Sie das Make-up. Der nächste wird für Gruppen jeder Größe sein. Dieser wird Champagner und Cocktails zur Verfügung stehen. Wir haben jetzt nur noch einen. Also unten unten, stellen Sie wieder sicher, diese beiden div-Tags am Ende zu verwenden und fügen Sie diese dann in und für das dritte und letzte Mal und es wird Wochenendpass für $60 sein. Ich möchte den Text für diesen hier nur greifen und dasselbe zwischen den P-Elementen hinzufügen. Dieser wird Pool und Sauna sein. Dann nutzen Sie unser Fitnessstudio und das Semikolon am Ende dort. Die dritte wird sein, umfasst zwei Behandlungen pro Person. Okay, gut. Ich denke, das ist es jetzt, nach unten, wenn wir nach unten gehen und einfach einen schnellen Kommentar hinzufügen, sagen Sie einfach, dies ist ein schließender Container und das gleiche für die Zeile. Gut. Also über zu Chrome, wir können dies überprüfen und können die Registerkarte für das Projekt auswählen, neu laden und das ist unsere drei Abschnitte jetzt. Wenn wir dies auch verkleinern, können wir sehen, dass dies standardmäßig aufgrund der Bootstrap-Klassen, die wir hinzugefügt haben, vollständig reagiert . Wir werden mit diesem ein wenig im nächsten Video spielen, wenn wir einige benutzerdefinierte CSS hinzufügen. aber für jetzt, obwohl die Mehrheit an Ort und Stelle ist. Also sehen wir uns als Nächstes. 9. Aktuelle Angebote – CSS: Um diesen Abschnitt „neuestes Angebot“ abzurunden, müssen wir nur ein benutzerdefiniertes CSS anwenden. Dies wird viele für den Abschnitt „Preisgestaltung“ sein , der hier oben oben steht. Ich werde es wie die endgültige Version hier aussehen lassen, was oben auf der Karte positioniert ist. Der Code, den wir schreiben werden, der Standard-CSS sein wird, das nicht von Bootstrap zur Verfügung gestellt wird. Dies ist jedoch kein Problem, da ein WordPress-Theme kann aus jedem HTML und CSS bestehen. Unabhängig davon, ob es Bootstrap, normales HTML oder ein anderes Framework für diese Angelegenheit verwendet, unser Preis, den wir im letzten Video erstellt haben, ist in einem Span-Element umgeben. Gehen wir hoch, und das ist die, die wir gerade hier sehen können. Wir können dies in unserem CSS überschreiben. Wir werden dies in unserer benutzerdefinierten CSS-Datei tun, und wir werden unten in der Medienabfrage beginnen. Dies gilt also für die größeren Bildschirme, dass unser Feature Hintergrund. Lassen Sie uns die Span-Elemente markieren, und zuerst können wir den normalen Fluss der Dokumente entfernen, indem Sie eine Position von absolut hinzufügen, und ich werde den Hintergrund erstellen , der für den Kreis sein wird, der ihn umgibt. Wir können etwas Transparenz hinzufügen, dies wird ein rgba-Wert von 175, 169, 169 und der Alpha-Wert von 0,6 sein, was 60 Prozent ist, wir werden dies auch zu einem Kreis machen. Wir können damit beginnen, eine Höhe von 80 Pixeln und auch eine feste Breite von 80 Pixeln hinzuzufügen. So ist unser Preis in der Mitte positioniert. Wir werden auch die Zeilenhöhe hinzufügen, und dies wird auch übereinstimmen, das wird 80 Pixel sein. Dann, um unseren Kreis zu erstellen, werden wir den Grenzradius hinzufügen, und wir können dies tun, indem wir dies als einen Wert von 100 Prozent hinzufügen. Bevor wir noch weiter gehen, lassen Sie uns sehen, wo wir mit diesem sind, also unser Projekt und neu laden. Da ist unser Kreis mit dem Hintergrund mit einem 100-prozentigen Rahmenradius, um ihn rund zu machen und eine feste Breite und Höhe von 80 Pixeln. Die nächste Stufe besteht darin, diese in der Mitte und über der Oberseite der Karte zu positionieren. Nun, um dies in die Mitte zu schieben, weil dies absolute Referenzen vom nächstgelegenen relativen Container sind , der dieses div gerade hier ist. Also werden wir dies auf einen Wert von negativ 40 oben links setzen dies daher in der Mitte der Cordova positionieren. Lets fügen Sie einen Spitzenwert von negativen 40 Pixel, und das gleiche für die linke, negative 40 Pixel, und lassen Sie uns sehen, wie dies uns verlässt. Nun schiebt dies dies in die obere Ecke. Da es sich um eine Breite von 80 handelt, haben wir den Wert um 40 Pixel versetzt. Wir haben die vertikale Ausrichtung benötigen, und jetzt müssen wir es nur um 50 Prozent schieben und wir können dies mit etwas Marge links von 50 Prozent erreichen , und da gehen.Der letzte Schritt ist nur, um die Schriftgröße zu erhöhen 1,8 rems und dann sind wir gut zu gehen, 1.8 rems, sowohl der Browser und da gehen wir. Wenn wir den Browser verkleinern, können wir sehen, wie diese Abschnitte auf den kleineren Geräten aussehen. Lassen Sie uns auf die mobile Größe gehen, diese Abschnitte sehen oben und unten ein bisschen dicht beieinander, so dass wir einen gewissen Rand an der Unterseite jeder Karte außerhalb der Medienabfrage hinzufügen können. Scrollen wir nach oben. Lassen Sie uns dies nur über den „Willkommensbereich“ tun. So gilt es für alle Karten, einschließlich dieser, Punkt-Karte, fügen Sie einige Rand auf der Unterseite von 20 Pixel, neu laden. Wir können nun den Abstand zwischen den einzelnen sehen. Das letzte, was wir tun müssen, ist, den Rand zurück auf 0 für diese größere Ansicht zurückzusetzen, wir müssen dies zurück innerhalb der Medienabfrage unter unserer Spanne tun, wieder, markieren Sie die Karten. Alles, was wir dafür tun müssen, ist, den Rand am unteren Rand auf einen Wert von 0 zu setzen. Gute Arbeit. Die Bootstrap-Vorlage beginnt Form anzunehmen, also machen Sie weiter. Als nächstes werden wir mit dem Abschnitt „Über uns“ arbeiten. 10. Über uns: In dieser fertigen Version hier können wir sehen, wenn wir vom letzten Teil des Abschnitts nach unten scrollen, haben wir einen kleinen Abschnitt über uns direkt unten. Dieser Abschnitt über uns ist ziemlich einfach und wahrscheinlich etwas, das Sie auf eigene Faust abschließen könnten, wenn Sie sich sicher fühlen, dies zu tun. Es enthält einfach unseren Header von About Us, ein Bild, das wir zuvor verwendet haben, zusammen mit einer Reihe von Lorem Ipsum Text. Dies wird auf unserer Index-Seite platziert, direkt unter dem aktuellen Angebotsbereich, den wir gerade erstellt haben. Lassen Sie uns zu unserer index.html gehen. Lassen Sie uns Befehle erstellen. Dies ist der Abschnitt „Über uns“. Wir werden auch das Gleiche tun, gleich oben, im letzten Abschnitt. Dies ist für die neuesten Angebote. Dies wird uns später beim Scrollen nach oben und unten helfen. Auf dem Abschnitt „Über uns“ wird das jetzt ziemlich vertraut werden. Wir haben ein umgebendes div mit der Klasse. Ich möchte die Containerflüssigkeit wieder verwenden, damit sie die volle Breite der Seite überspannt. Ich werde auch einen Wert von Polsterung oben und unten von fünf hinzufügen, Texte in der Mitte positionieren und auch eine Hintergrundfarbe von Licht hinzufügen. Dadurch wird der Wert von der Dunkelheit versetzt, die knapp darüber liegt. In diesem div werden wir eine vertraute Zeile hinzufügen. Um die Dinge konsistent zu halten, werden wir den Titel auf die gleiche Weise wie die letzten beiden Abschnitte strukturieren. Wir tun dies mit einem div. Dies wird einen Wert von col-sm-6 haben, also ist es die Hälfte der Breite der Seite, und dann versetzen Sie dies mit einem Wert von 3, um dies in die Mitte zu drücken. Ein Titel der Ebene 3 , der über uns sein wird, das Bild, so dass die Quelle im Ordner Bilder sein wird. Und denken Sie daran, diese beiden verschiedenen [unhörbar] hier, da wir die hellere Hintergrundfarbe verwenden, werden wir den Teiler von lila verwenden, alt-Text der Teiler ist in Ordnung, und dann die gleiche Klasse, die wir zuvor verwendet haben, um geben Sie ihm ein Gewicht von 25 Prozent. Schauen wir uns das an. Geben Sie dem ein Speichern, und da ist unser Titel und das Bild. Als nächstes müssen wir nur eine neue Zeile direkt unterhalb für den Beispieltext erstellen. Also zurück über, wir haben die schließende Zeile, also die schließenden Spalten, und die schließende Zeile. Lassen Sie uns wieder etwas Leerzeichen hinzufügen, stellen Sie sicher, dass dies innerhalb des umgebenden Containers ist, div mit der Klasse der Zeile, platzieren Sie dies auf eine neue Zeile. Wir werden auch etwas Rand oben hinzufügen. Trennen Sie dies vom Titel mit mt und dem Wert von zwei. Jede Zeile muss ein div verschachtelt haben. Ich werde diesmal etwas etwas anderes machen und das einfach auf Col setzen. Wenn wir dies nur auf col anstatt auf einen Wert setzen, jedes Mal, wenn wir eine neue Col hinzufügen, wird jedes Mal, wenn wir eine neue Col hinzufügen, eine gleiche Menge an Platz in Anspruch nehmen. Also, wenn wir dieses eine div haben wollen, werden es die vollen 12 Spalten sein. Wenn wir drei divs nebeneinander hatten, alle die gleiche Klasse von col, wird jeder ein gleiches Drittel der Seite einnehmen. Lassen Sie uns unseren Beispieltext innerhalb mit den P-Elementen und der Klasse des Textzentrums hinzufügen. Es gibt also ein paar verschiedene Möglichkeiten, dies zu tun. Wenn Sie Visual Studio Code verwenden, können Sie die Lorem-Kurzwahlnummern eingeben, Tab drücken, und dann erhalten wir einige Beispieltext in Fotos platziert. Wenn nicht, können Sie zum Browser gehen und zu lipsum.com gehen, und dies wird uns einige Beispieltext geben, den wir unten generieren können, und dann kopieren und in das Projekt einfügen. Sobald dies getan ist, und geben Sie, dass eine speichern, und wir können dies im Browser überprüfen, und wir werden unseren Text sehen. In der Tat werde ich noch ein paar mehr generieren. Anstatt dies zu tun, können wir mehr hinzufügen, indem wir lorem und dann einen Stern eingeben, fünf Absätze generieren, Tab drücken, und das ist alles, was wir tun müssen. Dies ist der Abschnitt „Über uns“ jetzt abgeschlossen. Es war ziemlich unkompliziert, aber es gibt uns ein wenig zusätzliche Übung mit Bootstrap. 11. Preisliste: Alles fertig mit dem Abschnitt About To, den wir im letzten Video gemacht haben, wenn Sie nach unten auf das endgültige Projekt scrollen, wird dieser Preislistenabschnitt ein wenig detaillierter sein als der, den wir gerade erstellt haben. Wir haben einige unterschiedlich große Spalten für Layout, die die Bilder auf der einen Seite und auch die Preise für jede Art von Behandlung auf der anderen Seite haben . Dies ist der Abschnitt, den wir jetzt in der index.html erstellen werden. Wir werden damit beginnen, einen vertrauten Titel und ein Bild zu erstellen, und wir werden dies in Sideshow Container und erste Zeile tun. Kurz nachdem der Abschnitt About To erstellt wird, scrollen wir nach unten und fügen Kommentare hinzu. Dies wird für unsere Preisliste Abschnitt sein. Direkt darunter können wir unser div hinzufügen, das der gleichen Struktur wie zuvor folgt, dies wird eine Klasse für den Wrapper von Containerflüssigkeit haben. Einige Polsterung auf der Y-Achse den Wert von fünf. Ich werde diesmal den Hintergrund dunkel einstellen. Drinnen brauchen wir eine Zeile, also wird dies zu der Hälfte der Zeile hier drinnen gehen, und diese Zeile muss dann einige verschachtelte Spalten haben. Zuallererst können wir unseren Titel hinzufügen, wie der Rest der Seite wird dies eine Spaltenbreite von sechs haben. So col md -six, können wir den Offset hinzufügen, der der Wert von free ist. Es ist schiebt in die Mitte und auch die Klasse des Textzentrums zu. Als Nächstes hier können wir unsere Level-3-Überschrift hinzufügen. Ebene drei Überschrift ist für unsere Preisliste Text, und dies braucht auch eine Klasse, da wir einen dunklen Hintergrund verwenden, können wir die Klasse der Texte Licht hinzufügen. Da ist unser Titel, der nächste Schritt ist für unser Bild. Bildquelle befindet sich im Ordner Bilder, und dieses Mal ist es der Teiler, silver.png die Bildklassen. Zuallererst brauchen wir vorher etwas Polsterung auf dem unteren Wert und sagten auch, dass dies bei W 25 eine Breite von 25 Prozent sein soll. Das gleiche lässt sich das überprüfen. Innerhalb der rechten Registerkarte unterhalb des oben genannten Textes, sollten wir jetzt unsere Preislisten haben, und wir fehlen nur das Bild davon, und überprüfen Sie die Bilder Ordner. Um ein Silber zu teilen, gibt es? Vielleicht muss man das einfach retten. Wir wollen es nur nach dem Bild speichern und das ist in Ordnung. Die nächste Stufe besteht darin, eine neue Zeile zu erstellen. Dies wird für unsere Massagen Behandlungen Abschnitt sein, die diese erste Reihe hier ist. Dies wird das richtige Bild und dann eine ungeordnete Liste auf der rechten Seite haben. Direkt unter dieser Zeile, aber wir werden einen Kommentar hinzufügen, nur damit klar ist, was wir hier tun, dies ist der schließende Container. Gerade oben brauchen wir unser div, Klasse oder Zeile und dann weiter in unseren Spalten. Das Bild wird größer als die ungeordnete Liste sein, also werde ich dies mit Aufruf sm-8 auf eine Spaltenbreite setzen, und in der Tat werden wir für die Zeile auch einen Rand oben und unten hinzufügen, einige Abstände hinzufügen. Dann innerhalb unserer Spalten können wir unser Bild hinzufügen. Das dafür vorgesehene Bild wird als Massage bezeichnet. JPEG und den alten Text. Nach dem Wrapper für die Bilder, lassen Sie uns nach unten gehen und ein zweites div innerhalb dieser Zeile erstellen, und diese Tabelle wird für die ungeordnete Liste sein. Wir haben acht Spalten oder Zeilen verwendet, so dass wir die restlichen vier aufbrauchen können. Wir rufen sm-4 an. Dies wird in einer ungeordneten Liste zu nehmen, aber vor allem, wir brauchen einen Titel in einer Ebene vier Überschrift, die diese Massagen Text ist hier. Fügen Sie unsere h-4 Massagen als Überschrift hinzu. Jetzt können wir unsere Bootstrap-Klassen hinzufügen. Der erste wird Titel sein, Titel ist keine Bootstrap-Klasse, dies ist eine benutzerdefinierte Klasse, die ich hinzugefügt habe, und wir werden dies bald im CSS verwenden. Gefolgt von einer Bootstrap-Klasse von Tech-Center schiebt in die Mitte. Danach können wir eine ungeordnete Liste hinzufügen, die auch einige Klassen zum Styling enthält. Die erste ist die Listengruppe, und danach diese Gruppe flush, und wir werden einen Blick darauf werfen, was dies in nur einem Moment tut, und dann schließlich, Textlicht. Ich werde nur einige Beispiellistenelemente hinzufügen. Der erste wird nur Massage sein, warnen. Die Bootstrap-Klassen für das Listenelement ist List Group Item. Danach können wir die Span-Tags direkt nach dem Namen hinzufügen, und wir können eine Preisgestaltung hinzufügen. Wir möchten diese zwischen den M-Tags hinzufügen, also ist es betont oder Kursiv und ein Bindestrich, und fügen Sie dann einen Preis hier hinzu. Innerhalb modellieren Sie diese Alben können Sie einfügen und vor und gehen Sie hier nach unten und ändern Sie einfach die Namen. Es könnte fantasievoller sein, wenn Sie wollen, also werde ich nur 1, 2, 3, 4, 5 gehen und dann einen Blick auf das im Browser werfen. Rüber zu unserem Projekt, und dann aktualisieren. Wir haben unser Bild auf der linken Seite, es hat acht Teile genommen und dann vier Teile aufgenommen, auf der rechten Seite ist unsere ungeordnete Liste. Der Text ist ein wenig schwer zu sehen, aber wenn wir dies hervorheben, können wir sehen, ist da, und wir werden dies in CSS in nur einer Weile tun. Lassen Sie uns nach unten gehen und erstellen Sie die nächsten zwei Abschnitte, die dieser Gesichtsbereich hier ist, und dann die Haare und Make-up. In diesen nächsten zwei Abschnitten folgen wir einem ähnlichen Muster wie dieses. Lassen Sie uns direkt über unseren Container gehen, und wir werden einen ähnlichen Abschnitt wie dieser erstellen. Lassen Sie uns gehen und erstellen Sie unser div mit der Klasse der Zeile. Dies wird auch eine Marge auf der Y-Achse von vier haben. Dann machen wir das Gegenteil von dem, was wir hier getan haben, anstatt acht Spalten auf der linken Seite des Bildes und dann vier Spalten auf der rechten Seite zu haben. Wir machen die vier kommt zuerst, so können wir die ungeordnete Liste hinzufügen. Also div Klasse des Kerns sm-4, und dann unterhalb dieser in der Zeile, werden wir ein zweites div hinzufügen. Dieser wird für die acht Spalten sein, also rufen Sie sm-8 an und schließen Sie das dann ab. Für den ersten Abschnitt, der vier Spalten hat, wird eine ungeordnete Liste haben, genau wie wir hier hatten, und auch eine Ebene vier Überschrift, lassen Sie diese ausschneiden und einfügen. Das hier ist Gesichtsbehandlungen, jetzt können wir diesen Text unten ändern. Lassen Sie uns das kopieren und fügen Sie es in jedes ein. Genau so können Sie die Preise ändern, wenn Sie möchten, aber ich möchte es so behalten. Dann innerhalb unseres 8-spaltigen Abschnitts nimmt dies unser Bild auf. Dieses Bild wird sich im Ordner Images befinden, und dieses wird facial.jpeg genannt. Sagen Sie dies, und laden Sie dann zum Browser die Projekte neu. Geh runter und da gehen wir. Auch hier sind die Bilder da, aber der Text ist ein wenig schwer zu sehen, und wir werden dies später mit ein wenig CSS beheben. Der dritte nach unten wird die ähnliche Struktur unserer ersten Reihe folgen , mit dem Bild auf der linken Seite und den Links auf der rechten Seite, gehen wir zu unserer Massage Abschnitt, und ich werde diese vollständige Zeile kopieren und dann fügen Sie es in nur oberhalb unseres Containers. Zunächst einmal der 8-Spalten-Abschnitt oben, das Bild für diesen ist cosmetics.jpeg. Wir können den alten Text ändern. Der Text für die Überschrift ist Haar und Make-up, und dann bei jedem Text, den Sie in diese Links mögen, fügen Sie diese einfach ein, und das sollte es sein, gibt eine fehlersichere, und bis zum Browser neu laden. Da gehen wir, da sind unsere drei Abschnitte, und jetzt können wir zum CSS gehen und etwas Styling dafür machen. Gehen wir zu einer custom.css braucht außerhalb der Medienabfrage zu gehen. Das ist Kommentare hinzugefügt, dies ist die Preisliste Abschnitt im Inneren hier. Als wir die benutzerdefinierte Klasse des Titels hatten, werde ich seinen Titel auf eine Farbe der goldenen Last setzen, und danach können wir das Listengruppen-Element hinzufügen. Dieses Gruppenelement, wenn wir auf die Index-Seite gehen, ist dies die Klasse, die zu jedem Listenelement hinzugefügt wurde, und was wir hier tun werden, ist dieses weiße Hintergrundbild zu entfernen , so dass wir den Text sehen können. Um dies zu tun, müssen wir tun, ist der Hintergrund, um bekannt zu sein, und wir könnten auch die Schriftgröße zu 1.1mz ändern. Speichern Sie das, und schauen wir mal, wie das aussieht. Das ist der Hintergrund, der jetzt für jedes Listenelement entfernt wurde. damit wir unseren Text sehen können. Über diese Extraklasse haben wir noch nicht erwähnt. Wenn wir nach oben gehen, was List-Group-Flush ist. Wenn wir das also von den Kosmetika entfernen und dann unten nachladen, werden wir den Unterschied sehen. Dies hat die volle Grenze rundum, während der Rest nur die Linien dazwischen haben. Lets fügen Sie dieses Backend hinzu und setzen Sie dann unser Projekt wieder ein. Dies es jetzt für den Abschnitt werden wir die Homepage im nächsten Video beenden , indem wir die Fußzeile ausfüllen und auch in unserer Font Awesome Symbole hinzufügen. 12. Fußzeile und Fontawesome 5 hinzufügen: Der letzte Teil dieser Homepage ist es, den Fußbereich zu erstellen. Wenn Sie auf die fertige Version gehen, ist dies der Bereich unten hier , der in drei Abschnitte aufgeteilt wird. Wir haben eine formelle linke Seite, um sich per E-Mail anzumelden, wir werden das Setting Center über den Standort haben, und wir werden auch einige Navigationslinks über Rechte haben. Sie haben vielleicht auch bemerkt, dass wir einige Symbole zu unten für Social-Media-Links haben. Diese werden alle mit einer Bibliothek namens Font Awesome zur Verfügung gestellt werden. Lassen Sie uns damit beginnen, dies in unsere Projekte zu installieren. Ich gehe rüber zu fontawesome.com. Dies hat eine kostenlose Version. Also lasst uns auf diesen Button klicken nur hier. Dies ist eine kostenlose unterbezahlte Pro-Version. Wir brauchen nur diese kostenlose Version für unsere Bedürfnisse, die wir von diesem Button einfach hier herunterladen können. Es ist verschiedene Möglichkeiten, es zu benutzen. Wir können einfach auf den „Download“ klicken und das starten. Es gibt verschiedene Möglichkeiten, für Bibliotheken wie View, React zu installieren , und Sie können es auch mit Tools wie Skizze herunterladen. Als nächstes stellen Sie sicher, dass wir hier im Webbereich sind und klicken Sie auf die „Download“, die den Installer starten wird. Websites wie diese haben oft die Gewohnheit, Designs und Layouts zu ändern. Wenn es also ein wenig anders aussieht, werfen Sie einfach einen Blick auf den Download. Es gibt auch einen CDN-Link, aber ich möchte diese herunterladen und direkt in unser Projekt einfügen. Sie können auch fühlen sich frei, um die Symbole mit diesem Link hier zu überprüfen, und Sie können alle verfügbaren Symbole sehen, die gerade heruntergeladen werden. Einige davon werden wir während des gesamten Projekts verwenden. Beginnen wir mit dem Öffnen des Ordners. Der Name des Ordners enthält die Versionsnummer und ich werde dies nur auf Font Awesome verkürzen, damit es einfach ist, mit zu arbeiten. Dann überweisen Sie das zu unseren Projekten. Wenn wir uns öffnen, wird der Stamm als Ordner in das CSS sein. Sie können dann über den vollständigen font-awesome Ordner ziehen und ihn dort platzieren. Wenn Sie nun die Seitenleiste und dann in das CSS öffnen, stellen Sie sicher, dass dieser Ordner enthalten ist. Innerhalb des Font Awesome Ordners werde ich auf die verkleinerte Version aller Schriftarten verlinken. Dies ist in CSS, und dann ist dies all.min.css. Wir können den Dateipfad in der Indexseite hinzufügen. Wenn wir zu unseren CSS-Links in der Kopfzeile gehen, werde ich den Link direkt über unserem benutzerdefinierten CSS hinzufügen. Lassen Sie uns einen Kommentar von Font Awesome hinzufügen, der Link. Dieser befindet sich wieder in unserem CSS-Ordner. Es befindet sich danach im Font Awesome Ordner, dann css/all.min.css. Das ist alles, was wir jetzt tun müssen, um Font Awesome mit unserem Projekt zu verbinden. Wir werden testen, dass alles bald funktioniert, wenn wir sie in der Fußzeile hinzufügen. Moment wollen wir jedoch mit dem Hinzufügen der Fußzeile arbeiten, die Sie hier sehen können. Wir können unten einen Behälter hinzufügen, um dies zu halten. Also unten unten es knapp über unserem JavaScript. Lassen Sie uns einen Kommentar oder Fußzeilenabschnitt hinzufügen. Ich werde das HTML-Fußzeilenelement dafür verwenden. Sie können immer noch die gleichen Klassen von Containerflüssigkeit und auch py-5 hinzufügen. Drinnen nimmt dies ein div mit der Klasse der Zeile ein, so dass wir dann in unseren Spalten nisten können. Die erste wird für die Social-Media-Sektion bleiben auf der Seite verbunden, die wird ein Titel, ein Anmeldeformular sein, und dann fügen wir später unsere Social-Media-Symbole hinzu. Da es drei verschiedene Abschnitte gibt, können wir dies in vier Spalten mit jeweils einer Klasse von col-sm-4 aufteilen. Der Text in einer Ebene 5 Überschrift bleiben verbunden. Danach lassen Sie uns in unserem Formular platzieren, wir brauchen keine Aktion, da Sie gerade HTML-Struktur für jetzt erstellen. Im Inneren hier werden wir ein div hinzufügen, das unsere Formularelemente umgeben oder gruppiert wird. Es wird in einigen Bootstrap-Klassen nehmen. Der erste wird eine Formularzeile sein, um ein Inline-Formular zu erstellen, dann das zweite der Formulargruppe, um unsere Eingaben zu gruppieren. Dieses Formular enthält nur die Eingaben der E-Mail-Adresse und dann die Schaltfläche. Die Eingabe auf der linken Seite wird acht Spalten breit sein, und dann können wir die restlichen vier für den Anmelde-Button verwenden. Lassen Sie uns unsere Abschnitte für diese erstellen. Die erste ist für die Eingabe. Das wird also sm-8 genannt. Dann die für unseren Button und knapp darunter, für die restlichen vier Abschnitte. Beginnen wir mit der Formulareingabe. Dies wird eine Eingabe mit dem Typ der E-Mail, den Bootstrap-Klassen des Formularsteuerelements und einigen Platzhaltertext der E-Mail-Adresse sein, dann bis zum unteren Abschnitt. Der Button wird also den Text der Anmeldung haben. Es braucht auch einen Typ. Die Art der Übermittlungen innen hier und dann die Bootstrap-Klasse. Der erste von btn, btn-primär , um ihm die blaue Farbe zu geben. Wir werden auch ein kleines Font Awesome Symbol auf der rechten Seite des Textes hinzufügen. Wir kommen in nur ein bisschen darauf zurück. Lassen Sie uns speichern und sehen, wie das aussieht, neu laden, und es ist unser Formular unten und wir werden die Social Media Symbole sehr bald hinzufügen, die Sie hier sehen. Für jetzt kurz nach dem Formular werden wir einen Kommentar hinzufügen. So Social-Media-Symbole, und wir werden auf diese sehr bald zurückkommen. Nach diesem schließenden div haben wir zwei weitere Abschnitte, die jeweils vier Spalten. Der nächste wird für den Text und dann die Navigation auf der rechten Seite sein. Also div mit der Klasse von col-sm-4. Dieser wird eine Ebene 5 Überschrift haben und diesmal ist der Text unsere Einstellung, und ein Komma. Danach werden wir nur das p-Element mit einem Beispieltext hinzufügen. Auch wenn Sie Visual Studio Code verwenden, können Sie Lorem eingeben und dann „Tab“ drücken. Das ist alles, was wir für unseren Mittelteil tun müssen. Also jetzt nach unserem col-sm-4, können wir noch eine hinzufügen, die für unsere Listenelemente auf der richtigen Klasse col-sm-4 ist. Dieser wird auch eine Navigationsüberschrift der Ebene 5 haben, gefolgt von einer ungeordneten Liste, die unsere Navigationslinks enthält. Die Bootstrap-Klasse für die ungeordnete Liste ist eine Listengruppe und Listenelemente, die in der Klasse von list-group-item nimmt. Dies werden Links sein, also lassen Sie uns das a Element hier hinzufügen, die href, den Link. Dieser wird für den Blog zu HTML sein. Wir haben diese Seite noch nicht erstellt, aber wir werden den Text des Blogs fragen, kopieren und einfügen. Dieser ist für die Kontaktseite. Dies wird Kontakt für HTML, dann der Text der Schütze und UML-Link für die Datenschutzerklärung. Eigentlich haben wir href gibt uns zum Browser gehen. Das sind alle Inhalte, die wir jetzt brauchen. Wir werden jetzt ein wenig CSS anwenden, nur um diese Seite zu beenden. Beginnend mit diesen blauen Links gerade hier, gehen wir zu unserer style.CSS oder Custom.CSS, und außerhalb der Medienabfrage, wollen wir die Fußzeile, beginnend mit den Links, also sind dies die a -Elemente. Wir können die Farbe auf einen Wert von 212529 zurücksetzen. Sehen Sie, wie das viel besser aussieht. Nun, wenn wir zurück über Infarkt gehen wir können den Browser jetzt zuerst schrumpfen, wir sehen, die Dinge brauchen ein wenig mehr Abstand, Dinge wie wenn wir scrollen den goldenen Titel, der hier ist, ist ein wenig Abstand oben und unten, bis die Fußzeile. Auch diese Eingänge und Tasten benötigen einige Abstände zu. Um dies in der Custom.CSS zu beheben, werde ich eine neue Medienabfrage erstellen, die eine maximale Breite von 768 Pixeln abzielt. Die Stile funktionieren nur auf den kleinen Bildschirmen. Nach dieser Medienabfrage können Sie weitere neue hinzufügen bei Medien will Ziel diese Bildschirme, und auch die maximale Breite von 768 Pixel. Fügen Sie die Calli-Klammern hinzu. Lassen Sie uns beginnen, indem Sie den Rand oben oder den Titel hinzufügen, dies ist der goldene Titel, den wir zuvor gesehen haben. Ein em ist in Ordnung dafür. Wir können einige Abstände auf unsere Schaltfläche hinzufügen, indem Sie Fußzeilentaste eingeben. Dies wird nur auf Schaltflächen innerhalb der Fußzeile wirksam. Ränder müssen auch ein Wert von 1em sein, speichern und dann neu laden. Wir werden noch mehr Platz haben. Um das herum haben wir auch unsere Abstände über den Titeln. Schließlich möchte ich jedem dieser Abschnitte etwas Polsterung und auch einen Rand unten hinzufügen . Die Abschnitte auch aus der Fußzeile, können jedes div mit der Klasse von col-sm greifen - 4 für einen Rand unten ausgerichtet zu beginnen, um jedes von einem Pixel zu trennen. Eine durchgezogene Linie und eine Farbe von ddd. Dann einige Polsterung innerhalb von 20 Pixeln oben und unten und dann 10 Pixel auf der linken und rechten. Öffnen Sie das, aktualisieren Sie es. Sieht so aus, als hätten wir hier eine zusätzliche Linie, also schauen wir uns mal an. Bis zur Fußzeile, das ist direkt neben der Schaltfläche, um eine direkt darunter zu haben. Dies ist die eigentliche 1.5 hier, und diese sollen für mittlere Geräte sein. Lassen Sie uns dies ändern, um MD zu sein. Diese sind auf den eigenen Linien auf diesen mobilen Geräten. Wir werden auf die Straße neben jedem davon auf mittleren Geräten und höher brechen , speichern und aktualisieren. Das sieht jetzt auf den kleineren und auch auf den größeren Bildschirmen viel besser aus. Alles, was jetzt für diese Fußzeile noch zu tun ist, ist die Social-Media-Symbole hinzuzufügen. Zurück in die Fußzeile. Wir haben einen Kommentar erstellt, und wir werden diese auch der Schaltfläche Anmelden hinzufügen. Die kostenlose Version ermöglicht es uns, auf zwei verschiedene Stile der Ikone zuzugreifen, die Marken und solide genannt wird. Solide Symbole, wie sie klingen oder ein solides schwarzes Symbol, und wird für Dinge wie ein Unternehmen oder Kreditkarten-Symbol verwendet. Wir verwenden die CSS-Klasse FAB für Marken und FAAS für solide. Auch die unregelmäßigen und leichten Versionen, aber diese sind nur in der Pro-Version erhältlich. Beginnen wir mit der Schaltfläche „Registrieren“. Wir können ein Font Awesome Symbol hinzufügen, indem Sie die I-Elemente verwenden. Ich werde diese in zwei separaten Zeilen hinzufügen, damit es klarer ist. Öffnen Sie die I-Elemente, und dann braucht es eine Klasse. Im Inneren geben wir zuerst an, welche Art von Schaltfläche wir wollen. Wenn wir die Feststoffe oder die braune Version wollen, werde ich für die solide Version gehen. Also geben wir in FAS, die gebildet Awesome Volumenkörper, und dann geben wir den Namen des Symbols. Wir folgen ihm rund um die Font Awesome Website. Sie können den Namen jedes Symbols direkt darunter erhalten. Wir fügen diese hinzu, indem Sie einen Klassennamen FFA hinzufügen. Dann wird der Name des Winkels doppelt rechts. Geben Sie dieser Option ein Speichern und laden Sie die Projekte dann im Fußzeilenbereich neu. Wir haben jetzt das Doppelwinkel-Rechte-Symbol, in dem wir begonnen haben. Ich gehe zurück zu unseren Projekten Icons direkt darunter für unsere Social-Media-Abschnitt, also gerade unter Social Media Icons, werden wir genau das gleiche tun, indem wir die I-Elemente hinzufügen. Die Klasse dieses Mal wird mit FAB beginnen, so dass es die Marken-Icons, der Name der FA, die für unser Facebook-Symbol sein wird. Also Facebook-square, und dann eine dritte Klasse, die optional ist. Dies, um die Schriftarten doppelt so groß zu machen. Wir können dies mit FA tun, und dann 2X. Ich werde das in drei weiteren Malen kopieren und einfügen. Der zweite wird Facebook durch Twitter ersetzen. Die dritte, die dies für Instagram sein wird. Der letzte ist Pinterest. Der ganze Rest wird gleich bleiben. Schauen Sie sich dies im Browser an. Wir vermissen ein Instagram, und das muss am Ende nicht quadriert werden, tut mir leid. Dann über Chrome, neu laden, und jetzt haben wir unsere vier Symbole. Das ist es jetzt für unsere Homepage, für unsere Bootstrap Templates. Ich hoffe, Sie haben diesen Abschnitt genossen und haben viel über die Verwendung eines Bootstrap gelernt. Im nächsten Abschnitt werden wir dieses Projekt beenden, indem wir die zusätzlichen Seiten wie den Blog und die Kontaktseite hinzufügen. Danke und ich werde Sie dort sehen. 13. Blog-Beiträge und Paginierung: Wir machen gute Fortschritte mit unseren Bootstrap-Vorlagen, und jetzt haben wir uns um die Homepage gekümmert. Jetzt gehen wir nun zu den zusätzlichen Seiten, beginnend mit dem Blog. Im letzten Abschnitt haben wir einen Link zu einer Blog-Seite erstellt, wir haben noch keine Inhalte erstellt. Wenn wir einen Blick auf die fertige Seite werfen, die gerade hier war, und wenn wir zu einem der Blog-Links gehen, so wird der Blog aussehen. Wir werden einen Header-Abschnitt haben, der mit der Indexseite identisch sein wird. Auch die Fußzeile, die auch das gleiche sein wird, um das Thema konsistenter zu halten. Dann wird der Blog aus unseren Beiträgen auf der linken Seite in einem gerufenen Container bestehen. Wir werden auch einige Links zur vorherigen und nächsten Seite haben, und auch eine vierspaltige Seitenleiste auf der rechten Seite. Der einzige Inhalt, den wir im Moment auf dieser Seite hinzufügen, ist nur zu zeigen, es ist im Grunde eine Vorlage, die wir bis zu WordPress mit später verbinden könnten. Oben in Visual Studio Code, können wir den Blog zu einer HTML-Seite erstellen. Lassen Sie uns das schließen, und wir könnten dies in der Wurzel des Projekts neben dem Index tun. Dies wird als Blog zu einem HTML bezeichnet werden. Ziehen Sie das in die Wurzel des Projekts, da gehen wir. Stellen Sie sicher, dass dies neben dem Index ist und das erste, was ich tun werde , ist, den gesamten Inhalt von der Homepage zu kopieren. Wählen Sie alle aus, kopieren Sie sie und fügen Sie sie dann in den Blog ein. Dies ermöglicht es uns, die gleichen Fuß- und Kopfzeilenabschnitte zu behalten und wir können einfach alle Inhalte von innen löschen. Ich werde direkt über der Fußzeile löschen, ich würde diesen Container auswählen und ich muss den ganzen Weg bis zum schließenden Header-Tag gehen. Es ist ziemlich viel Inhalt, um hier zu entfernen. Es gibt den Header, genug, und alles direkt unter diesem Header-Tag hier, wir können dies entfernen, geben, dass ein Speichern, und dann können wir sehen, ob das im Browser in Ordnung ist, und gehen Sie zu unserem Blog und stellen Sie sicher, dass wir nur die -Header und der Fußzeilenbereich wie folgt aussehen. Wenn es immer so aussieht, sind wir gut zu gehen und wir können anfangen, unsere Blog-Seite anzupassen. Beginnen wir mit dem Titel, das wird ruhigen Ort Blog sein. Danach können wir auch den Feature-Text ändern. Anstelle eines voll reaktionsfähigen Premium-Spa-Thema ändern wir es in Tranquil Spa offiziellen Blog zu brauchen. Kurz nach dem Break-Tag, können wir offiziellen Blog hinzufügen. Speichern Sie dies und mit dem CSS, das wir bereits bereitgestellt haben sollte es immer noch in der Mitte sein, so dass wir keine zusätzliche Arbeit damit machen müssen. Das nächste, was zu tun ist, ist, nach unten zu gehen und einen Blog-Container zu erstellen. Lassen Sie uns dies tun, direkt nach der Kopfzeile, können wir einen Kommentar hinzufügen. Dies wird der Blog-Bereich sein. Dann wird dieser Blog-Abschnitt wird ein flüssiger Behälter sein , der eine Klasse auf dem Hauptelement sein wird, wird nur der Hauptinhalt sein. Lassen Sie uns unsere Bootstrap-Klassen von Container, Armaturenbrett-Flüssigkeit und auch einige Polsterung y konstruieren , die oben und unten ist. Wie immer haben wir auch ein div, das mit der Klasse der Zeile verschachtelt ist. Jetzt wird diese Zeile zwei Abschnitte haben. Wie bereits erwähnt, wird die linke Seite, wenn wir uns die endgültige Version ansehen, ein achtsäuliger Abschnitt sein. Dann erstellen wir später auch eine Seitenleiste, um die restlichen vier Spalten zu füllen. Unser div mit der Klasse von col sm-8 innen hier können wir eine ziemlich einfache Blog-Vorlage konstruieren. Denken Sie daran, dies ist nur einige grundlegende HTML , die wir später im Kurs an WordPress anpassen können. Ein umgebendes div für den Blogbeitrag, eine Überschrift der Ebene zwei. Lassen Sie uns einige Beispieldaten hinzufügen, so neue Funktion, öffnen Sie dann die p-Elemente und wir werden ein Datum hinzufügen, das der Blog-Post erstellt wurde. Wir können hier ein beliebiges Datum hinzufügen. Wir müssen auch das Angebot hinzufügen, so können wir sagen, dass dies durch ist und wir können den Namen eines Autors innerhalb eines Links hinzufügen. Ich werde meinen Namen hier hinzufügen, und der Link kann gerade eine leere h-ref im Moment haben. Wieder werden wir dies später in WordPress beheben. Dann können wir noch ein p Elemente direkt unten hinzufügen. Nur mit einem Beispieldatum hier, ich nur Lauren und Datum des Beispieltextes aus VS-Code. Lassen Sie uns dies im Browser neu laden und wir haben unseren ersten Blog-Beitrag. Auch hier spielt der Inhalt im Moment keine Rolle. Wir werden alle diese in der Verwendung des WordPress-Dashboards hinzufügen. Das nächste, was kurz nach diesem Datum zu tun ist, ist, dass ich einen kleinen Abschnitt hinzufügen werde, um alle Tags anzuzeigen, die mit dem Blogbeitrag verknüpft sind, und stellen Sie sicher, dass das A-Element geschlossen ist. Da gehen wir. Lassen Sie uns einen Abschnitt direkt darunter erstellen. Dies wird ein div sein. Wir können etwas Padding auf der Unterseite hinzufügen, und fügen Sie eine Klasse von pb und den Wert von zwei. Dies wird nur einige Abstände vom Text geben. Im Inneren können wir Font Awesome mit den i-Elementen verwenden. Dies würde ein Tag-Symbol fahren. Dies sollte der solide Typ mit FAS sein, und dann FA, ein Symbol heißt Tags. Kurz danach können wir ein p Elemente hinzufügen und es wird den Text von getaggt haben. W\ e fügt hier nur einige Beispiel-Tags hinzu. Diese wiederum wird später von WordPress generiert. Dieses kleine Symbol in der Mitte ist die Tilde. Möglicherweise müssen Sie sich auf Ihrer Tastatur umsehen, aber Sie können hier ein beliebiges Symbol hinzufügen. Sagen wir das. Zuallererst können wir eine Klasse hinzufügen. Die Inline macht die p-Elemente in Zeile statt der Standard- oder Blockebene. Dadurch bleiben die Tags, die wir hier hinzufügen, in der gleichen Zeile wie unser Symbol oben. Überprüfen Sie dies aus, laden Sie den Browser neu. Es gibt ein kleines Font Awesome Symbol, und dann können wir unsere Tags kurz danach in der Schlange haben. Das sieht sehr gut aus. Um weitere Inhalte hinzuzufügen, werde ich in diesem Blogbeitrag kopieren und einfügen. Wenn wir zu unserem div gehen, das den gesamten Inhalt hier umgibt, kopieren Sie dies in, stellen Sie sicher, dass wir immer noch zwischen dem col sm-8-Element sind, und fügen Sie dies dann in zwei weiteren Malen ein. Um die Dinge für dieses Video abzurunden, einige Schaltflächen am unteren Rand der Beiträge. Sie schließen nur die älteren und neueren Seiten ab, genau wie wir es in der fertigen Version hier haben. Über zu unserem Blog, zu unserem HTML, und kurz nach unserem letzten Blog-Beitrag, den wir hinzugefügt haben , wird die vorherige und nächste Seite innerhalb eines nav Elemente sein. Dieses nav Element wird eine ungeordnete Liste mit der Bootstrap-Klasse von nav sein. Die ungeordnete Liste enthält unsere Artikel aus zwei Listen. Der erste wird für die nächste Seite sein, und kopieren und einfügen Sie dies in, und dieser wird für unsere vorherige sein. Dann zum Browser neu laden. Es gibt unsere Links jetzt, wir können einfach ein Leerzeichen dazwischen mit HTML-Entität hinzufügen. Kaufmännisches Und-Zeichen, geschützter Raum, und da gehen wir. Unser Blog fängt an, Gestalt anzunehmen. Beachten Sie, wie wir den Blogbeitrag in acht Spalten breit enthalten haben. Dies gibt uns vier Spalten, mit denen wir für die Sidebar arbeiten können, im nächsten Video. 14. Seitenleiste der Blog-Seite: Wir lassen diesen vierspaltigen Raum auf der rechten Seite aus. Hier werden wir eine Sidebar für unseren Blog hinzufügen. Genau wie die fertige Version, die Sie hier sehen, wird es einige Abschnitte mit einigen Informationen über diese Leiste haben. Auch können wir nach Kategorien oder nach dem Monat filtern, in dem es erstellt wurde. Lassen Sie ein wenig Social-Media-Abschnitt an der Unterseite zu jedem Blog, HTML. Wir können etwas Leerzeichen direkt über dieser schließenden Zeile schaffen. Wenn es hilft, können Sie hier einen Kommentar hinzufügen. Sagen Sie, das ist die letzte Zeile. Auch können wir sagen, dass dies der Container ist, nur damit es klarer ist, dass wir Recht haben. Dann erstellen wir unser div. In der Tat fügen wir dies als beiseite. Da es eine Sidebar ist. Diese Sidebar wird eine Klasse haben, machen sie vier Spalten breit auf kleineren Geräten und höher, so genannte sm-4. Die Sidebar wird die vier Blöcke enthalten, wie wir uns gerade angesehen haben. Die erste ist nur ein bisschen über diese Bar. Ein umgebendes div für diesen Block wird immer noch eine Klasse von py-3 haben. Nur um einige Abstände oben und unten hinzuzufügen. Ein Titel für diesen Block „font-kursiv“, und der Titel von über. Dann der Text in den p-Elementen. Die p-Elemente werden eine Klasse haben, um Rand und Boden von Null hinzuzufügen. Dann möchten wir den Text für diesen einzufügen. Wir werden das nur von der fertigen Seite packen. Fügen Sie das gleiche ein, gefolgt von einer horizontalen Regel mit den hr-Elementen direkt darunter. Lassen Sie uns dies in Chrome überprüfen. Laden Sie unsere Blog-Seite neu. Als nächstes haben wir den Archiv-Bereich. Auf der fertigen Version wird dies eine geordnete Liste sein, die jedes Listenelement als Datum haben wird. Wir können mit einem umgebenden div als Container noch innerhalb des col-sm-4 beginnen. Mein neuer Surround in div. Genau wie oben wird dies eine Klasse von py-3 hinzufügen, also fügen Sie unseren Abstand hinzu. Wir gehen dann, um eine Überschrift der Ebene vier hinzuzufügen. Dies wird auch kursiv sein, wäre Schriftart kursiv Klasse. Dann der Titel der Archive. Unsere Artikel werden in einer bestellten Liste sein. Diese geordnete Liste wird einige Bootstrap-Klassen haben. Der erste wird list-unstylt sein. List-Unstyled entfernt den Standardlistenstil und den linken Rand unserer Listenelemente. Dann setzen wir den unteren Rand auf Null. Diese Listenelemente haben einen Link innerhalb verschachtelt. Wir können hier ein paar Termine hinzufügen. Dann ein href für die a-Elemente. Wir können das einfach leer lassen. Alles, was Sie jetzt tun müssen, ist das Kopieren und Einfügen in ein paar Male. Fügen Sie hier einige zufällige Daten hinzu. Dies würde später von WordPress generiert werden, speichern und dann innerhalb von Chrome aktualisieren. Das ist alles, was wir jetzt für die Archive tun müssen. Als nächstes gehen wir zu einem ähnlichen Abschnitt, und dies wird für die Kategorien sein. Ein neues div kurz vor unserem Seitenabschnitt. Nach dem gleichen Muster. Die Klasse von py-3, ein Titel, der Ebene vier sein wird, Klasse der Schriftart kursiv, und der Text der Kategorien. Dies wird auch in einer geordneten Liste mit den gleichen Klassen wie oben aufgenommen. Dieser wird list-unstylt werden, um jedes Listen-Styling zu entfernen und auch den unteren Rand auf Null zu setzen. Die Listenelemente, die auch mit einem Link innerhalb verschachtelt sind, eine leere href. Wir können in den Nachrichten hinzufügen. Wir können auch in den Angeboten hinzufügen. Der letzte Abschnitt ist für unsere Follower-Abschnitt, die einige Social-Media-Links mit der Schriftart awesome Symbole sein wird . Wir werden unsere div, Klasse von py-3 erstellen. Hier drinnen werde ich noch einmal eine vier Überschrift haben, die wieder kursiv sein wird, mit dem Text der Anhänger. Dies wird einige i Elemente für unsere Icons haben. Erste Klasse von fab und dann Fa-Facebook.Es wird quadratisch sein und dann fa mal 2 x, um sie doppelt so groß zu machen. Fügen wir hier noch drei hinzu. Dieser nächste will Twitter sein und dann in Surround, der das Quadrat nicht benötigt. Dann endlich Pinterest. Speichern Sie diese und laden Sie sie neu. Dies ist unsere Sidebar jetzt komplett. In der Tat ist dies unsere Blog-Seite auch komplett. Wir haben jetzt eine Blog-Vorlage, die wir WordPress in einem späteren Abschnitt konvertieren können. Als Nächstes beenden wir unsere Bootstrap-Vorlagen, indem wir eine Kontaktseite hinzufügen. 15. Kontaktseite: Mit unserem Blog, jetzt fertig, werden wir gehen weiter und erstellen unsere letzte Seite, die wird die Kontaktieren Sie uns sein. Wenn wir nach unten scrollen, haben wir hier einen Link zur Kontaktseite. Wir haben auch einen Link zur Datenschutzrichtlinie. Aber wir werden diese Seite nicht erstellen, da dies etwas spezifisches für Ihr Unternehmen oder Ihre Bedürfnisse sein würde. Sie können voran gehen, und erstellen Sie dies, wenn Sie möchten. Ich werde jetzt diese Kontaktieren Sie uns innerhalb der Wurzeln unseres Projekts erstellen, neben einer Blog- und Indexseite. Lassen Sie uns diese Datei erstellen, die contact.html sein kann. Auch hier werden wir die gleiche Kopf- und Fußzeile wiederverwenden, um das Layout konsistent zu halten, und dann einen neuen Abschnitt in der Mitte erstellen. Um die Dinge zu beschleunigen, können wir in den Blog gehen, kopieren Sie den gesamten Inhalt, und fügen Sie ihn dann ein. Genau wie wir es zuvor über dem Fußzeilenabschnitt getan haben, lassen Sie uns den ganzen Weg aus dem Hauptcontainer auswählen. Wir möchten dies direkt über dem Blockabschnitt auswählen und dann alle diese entfernen. Sie können den Kopfbereich und auch die Fußzeile ersetzen. Wir können dies sagen und überprüfen, ob es in Ordnung ist, indem wir die Kontaktseite neu laden, was in Ordnung ist, damit wir den Titel oben ändern können. Wir können den Seitentitel ändern, um Kontaktieren Sie uns zu sein. Dann der Feature-Text, lassen Sie uns zu diesem Abschnitt gehen hier. Wir können wieder den index.html Text verwenden, der FULL RESONSY PREMIUM SPA TH Kopieren Sie diese und ersetzen Sie unseren Blog-Bereich. Als nächstes werden wir zwischen dem Kopf- und Fußzeilenabschnitt arbeiten , indem wir unseren Abschnitt Kontaktieren Sie uns an erstellen. Beginnen wir mit einem Kommentar, Helfen Sie uns beim Scrollen nach oben und unten. Dies wird ein div haben, und dieses div wird der flüssige Behälter für alle Seiten sein. Dann ist auch etwas Polsterung oben und unten ein Wert von fünf in Ordnung. Drinnen hier div mit der Klasse der Zeile. Dies wird die erste Reihe innerhalb unseres Containers sein. Auf der fertigen Version, wenn Sie zu unserer Kontaktseite gehen, wird dies nur eine Zeile sein, die den Titel „Kontaktieren Sie uns“ und dann das Bild haben wird. Danach erstellen wir ein Formular in einer zweiten Zeile direkt darunter. Dieses erste Formular, werden wir das gleiche tun, wie wir in der Index-Seite getan haben. Dies wird ein sechsspaltiger Container mit einer freien Spalte Offsets sein, also col-sm-6, und dann die Offsets zur Verfügung stellen, um dies zu einem Medium Geräte namens Md zu machen. Dann wird der Offset-Wert von drei, Ebene drei Überschrift, die Kontaktieren Sie uns sein wird. Das Bild für unsere Teiler, die die Bilder Ordner und wir wollen den Teiler lila wählen, den alten Text, und dann eine Klasse von w-25 so ist es 25 Prozent der Breite. Auch wenn es hilft, können Sie einen Kommentar hinzufügen und dies wird für die schließende Zeile sein. Dann rüber zu unserem Projekt im Browser, und da ist etwas nicht ganz richtig. Wir haben unsere Image-Kontakte, wir müssen nur eine neue Klasse von Tech-Center hinzufügen. Das sollte den Trick tun, neu laden, und das war's. Einfach sprengen, wir werden eine neue Zeile für unser Formular hinzufügen. Haben Sie nur diesen Kommentar hier. Dies wäre eine Klasse von Zeile, und dann innen hier verschachtelt, können wir unsere Zeile zu einem 12-Spalten-Container machen, um unsere Form eine volle Breite für die Seite zu machen. Öffne unser div, es wird col-sm-12 sein, was der Wrapper für unsere Formularelemente wäre. Wir brauchen keine Aktionen, da WordPress damit umgehen wird, aber wir brauchen eine Klasse. Ich werde eine Klasse von Text links hinzufügen, und wie es klingt, wird dies alle Texte an der linken Seite des Formulars ausrichten. Jede Eingabe wird in einem Formulargruppen-Wrapper aufnehmen , damit Bootstrap die Positionierung und das Layout steuern kann. Ein umgebendes div für jede Eingabe, eine Klasse von Form-Gruppe. Jede Eingabe wird auch eine Beschriftung haben. Dies wird eine Textbeschriftung sein. Der erste wird Dein Name sein. Wir fügen dann das for-Attribut hinzu, das Name sein wird, und dies wird es mit dieser Eingabe verknüpfen, die wir jetzt erstellen werden. Die Eingabe wird eine Art von Text sein, da es sich um ein Namensfeld, eine Bootstrap-Klasse des Formularsteuerelements, die ID und diese ID hier für Attribut entsprechen müssen , damit der Browser weiß, dass diese Beschriftung mit dieser Eingabe verknüpft ist. Ein weiterer Vorteil dieser Verknüpfungen ist der Benutzer auch auf dieses Label oder den Text klicken kann, und es wird auch die Eingabe hervorheben, damit der Benutzer mit der Eingabe beginnen kann. Ein Platzhalter für die Texte von Geben Sie Ihren Namen ein. Bevor wir weiter gehen, lassen Sie uns sehen, wie das aussieht. Wie bereits gesagt, wenn wir auf dieses Label klicken, wird es auch die Eingabe in den Fokus bringen, so dass wir sofort eingeben können. Lasst uns noch ein paar machen. Da die nächste sehr ähnlich sein wird, können wir die Formulargruppe kopieren, fügen Sie diese ein, da wir die gleichen Klassen verwenden. Dieser wird ein Etikett für E-Mail sein. Der Text Ihrer E-Mail-Eingaben, E-Mail und die ID auch. Wir müssen auch den Platzhalter ändern, um Ihre E-Mail einzugeben, und schauen wir uns dies im Browser an. Das sieht gut aus. Oben in der endgültigen Version, werden wir auch einen Textbereich am unteren Rand hinzufügen, und dann eine Schaltfläche, um dies zu senden. Die Nachrichteneingabe wird ein Textbereich sein. Lassen Sie uns unsere Formulargruppe noch einmal hinzufügen. Das Etikett wird eine Nachricht sein, der Text Ihrer Nachricht. Wir können den Eingabetyp von Text entfernen, und an Ort und Stelle können wir unseren Textbereich hinzufügen. Ich werde den Namen entfernen, die ID auf die Nachricht setzen, damit ich beschriftet werden kann. Spalten, werde ich entfernen, aber ich werde die Zeilen so einstellen, dass sie frei sind , gefolgt von einer Bootstrap-Klasse der Formularsteuerung. Das letzte, was nur für das schließende Formular-Tag zu tun ist, ist, eine Schaltfläche hinzuzufügen damit der Benutzer dies mit dem Text der Nachricht senden kann... Einige Attribute, das öffnende Tag, dies ist eine Art von senden. Auch einige Bootstrap-Klassen von btn, dann btn-primär, um ihm die blaue Farbe und auch die Dimensionierung zu geben. Werfen wir einen Blick auf das. Dies ist alles, was wir wissen müssen, um Kontakt Abschnitt zu folgen. Das letzte, was ich tun werde, ist, zu überprüfen, dass alle Links in Ordnung sind. Die Homepage geht zurück zum Index. Wir haben die Blog-Seite. Am unteren Rand der Index-Seite können wir überprüfen, dass der Blog funktioniert und es tut, Kontaktieren Sie uns, Ich mag dies auch hier, so dass alles gut funktioniert. Dies lässt uns jetzt mit einem großartig aussehenden Bootstrap für die Vorlage für unser Thema zu arbeiten. Ich hoffe, Sie sind jetzt aufgeregt, um diese Vorlage zu WordPress zu konvertieren. 16. WordPress mit Flywheel installieren: In diesem Video und auch im nächsten, werden wir uns zwei Möglichkeiten ansehen, um mit WordPress auf unserem Computer zu öffnen. Wir können damit beginnen, Themen zu erstellen und sie zu testen. Alternativ, wenn Sie einen Live-Hosting-Provider haben und diesen lieber nutzen möchten, fühlen Sie sich frei, das zu tun. Dieses Video wird das Setup mit einem Service namens Local per Schwungrad abdecken, das ist unser lokales von flywheel.com. Im nächsten Video, das optional ist, werden wir die Installation und Einrichtung von MUMP als Alternative behandeln. Ich würde empfehlen, mit diesem Video zu folgen anstatt die nächste vor allem, wenn Sie ein Anfänger sind, da MUMP kann Probleme für viele Leute verursachen, setzen Sie dies liegt an Ihnen. Beginnen wir, indem wir auf die Homepage gehen, die unbefestigten Versionen für Teams und Agenturen. Aber wir brauchen nur die kostenlose Community-Edition, die für Mac und Windows verfügbar ist. Schwungrad ermöglicht es uns, schnell WordPress-Projekte auf unserem Computer wirklich einfach einzurichten, und kümmert sich auch um die Einstellung der Server- und Datenbankfotos. Es hat nicht zu große Funktionen. Wir können unsere Website und auch den Admin-Bereich mit einem Klick auf eine Schaltfläche anzeigen. Wir können auch einen Live-Link erstellen, um unser Projekt überall online zu sehen und auch mit anderen zu teilen. Zusammen mit vielen erweiterten Funktionen, wie die Möglichkeit, WordPress Multi-Site und so vieles mehr einzurichten. Um loszulegen, klicken wir auf den Download-Link , den Sie hier oben oben oben hier. Wählen Sie dann die Plattform aus, die Sie möchten, geben Sie Ihre Daten ein und klicken Sie dann auf „Jetzt abrufen“. Dieser Download kann einige Minuten dauern, daher werde ich zurückkehren, sobald dies abgeschlossen ist. Sobald lokale Download abgeschlossen ist und Sie durch die Installation für Ihren Computer kommen , sollte es zu einem ähnlich aussehenden Startbildschirm nehmen, dass wir hier haben. Dies ist nur mit einer Beispiel-Testseite, die mit dem Download kommt. Aber wenn es auf dieses Plus-Symbol unten unten geht, erstellen wir unsere neuen Websites. erste Schritt ist, einen Namen zu erstellen und es wird die Tranquil Spa genannt werden , gehen Sie auf Weiter. Danach erhalten wir eine Umgebung, die Sie wählen möchten. Ich werde bei den bevorzugten Versionen von PHP und MySQL bleiben, aber es sind auch benutzerdefinierte Versionen. Wenn Sie die Notwendigkeit haben, eine dieser Versionen zu ändern, fahren Sie fort. Als nächstes müssen wir einen Benutzernamen und ein Passwort hinzufügen, um sich anzumelden. Ich werde meinen Benutzernamen Tranquil underscore admin anrufen, das Passwort liegt an Ihnen und möchte meins hier hinzufügen. Dann die E-Mail, die eine E-Mail Ihrer Wahl ist. Dann fügen Sie unsere Website zu lokalen, indem Sie auf diese Schaltfläche klicken, geben Sie uns ein paar Momente, um unsere Website zu generieren. Sobald Ihre Website eingerichtet wurde, werden Sie zu dieser Seite weitergeleitet und Sie haben das grüne Licht neben dem Namen des Schildes gesehen , Sie sind gut zu gehen. Die beiden wichtigsten Dinge, die Sie hier auf dem Bildschirm beachten müssen, sind die Schaltflächen in der oberen Ecke. Die erste ist die Ansicht von Websites, dies öffnet eine neue Wortpresse Registerkarte im Browser, so dass wir darauf klicken. Dies ist unsere eigentliche WordPress-Installation, die wir mit dem Standard-Theme betrachten. Dies ist, wie einfach es ist, Setup mit WordPress auf Local zu bekommen. Wenn wir nun zurück zum Admin gehen, ist auch ein Admin-Button gerade hier. Dies führt uns dann zur Anmeldeseite für das WordPress-Dashboard und dies ist der Benutzername und das Passwort, die wir bei der Einrichtung unserer Websites angegeben haben. Meine Details waren ruhig admin, und auf das Passwort. Ich klicke auf Erinnern und dann auf Anmelden. Dies ist das WordPress-Dashboard, mit dem wir viel mehr vertraut werden, wenn wir durch den Kurs gehen. Es hat Links, wo wir unsere Beiträge auswählen können, verschiedene Medien-Assets, die wir hinzufügen möchten. Wir können neue Seiten erstellen, können wir erstellen oder unsere Kommentare anzeigen, zusammen mit der Änderung jedes Erscheinungsbild und Einstellungen unserer WordPress-Websites. Aber wir werden all das behandeln, während wir den ganzen Kurs gehen. Sie können auch auf diesen Link klicken, uns auch auf die gleiche Seite führt, die hier sehen. Ein weiteres tolles Feature über die Verwendung von Schwungrad ist es auch eine Live-Verbindung bietet. Wenn wir unten auf Aktivieren klicken, wird diese Aktivierung einen Link erzeugen, der in den Browser auf jedem Gerät gehen würde. Wenn Sie darauf klicken, können Sie es dann auf Ihrem mobilen Gerät in einem anderen Browser öffnen oder Sie können diesen Link auch mit Familie und Freunden teilen, um Ihren Fortschritt zu zeigen. Wenn Sie in diesem Stadium sind, wir jetzt gut mit der Erstellung unserer WordPress-Website zu gehen, beginnend unser Thema Konvertierung von Bootstrap. Wir sehen uns jetzt im nächsten Abschnitt, wo wir diesen Prozess beginnen werden. 17. OPTIONAL: WordPress mit MAMP installieren: Dies ist ein optionales Video, wenn Sie einen Dienst namens MAMP verwenden möchten. Richten Sie Wordpress auf Ihrem eigenen Computer ein. Wenn Sie gefolgt erfolgreich im letzten Video und Setup WordPress mit Schwungrad, dann können Sie gehen und überspringen Sie dieses Video und gehen Sie zum nächsten Abschnitt. Wenn Sie MAMP bevorzugen und es noch nicht installiert haben, müssen Sie zu mamp.info gehen und dann auf „Kostenloser Download“ klicken. MAMP ist eine lokale Entwicklungsumgebung, die unter Mac und Windows verwendet werden kann , und es bietet uns eine Umgebung, die PHP und auch MySQL Database laufen wird , die eine Voraussetzung für die Verwendung von WordPress ist. Der nächste Schritt besteht darin, WordPress von wordpress.org herunterzuladen. Klicken Sie auf „Get WordPress“ und dann können wir die neueste Version herunterladen, die derzeit bei 5.2 ist. Das Herunterladen ist ihre Voraussetzung, wenn wir selbst Hosting WordPress auf unserem Computer mit MAMP. Der nächste Schritt, sobald MAMP heruntergeladen wurde, besteht darin, den MAMP Ordner zu gehen und auch die Downloads zu öffnen. MAMP hier drin wird eine Elefanten-Symbol haben. Wir können darauf doppelklicken und die Startseite des MAMP öffnen. Dies wird uns erlauben, die Server zu starten, und Sie sehen die beiden grünen Lichter oben für den Server und die Datenbank, dann läuft alles in Ordnung. Als nächstes im MAMP Verzeichnis haben wir diesen htdocs Ordner, und es ist hier drin, wo wir alle unsere Projekte hinzufügen. Ich werde unser WordPress-Projekt in hier in den Downloads hinzufügen. Ich werde den WordPress-Ordner entpacken und dann umbenennen, tranquilwp, drücken Sie „Enter“ und jetzt kann ich dies zu den htdocs ziehen. Wenn Sie einen Mac verwenden, müssen Sie möglicherweise in diesem Stadium ein Passwort hinzufügen und dann können wir beide Fenster schließen. Der nächste Schritt besteht darin, eine Datenbank für unsere WordPress-Projekte zu erstellen. Wir können dies mit MAMP von der Web-Startseite aus tun. Wenn wir auf dieses Symbol klicken, gehen Sie zu Tools und dann phpMyAdmin. Von hier aus können wir eine neue Datenbank aus der Registerkarte der Datenbank erstellen. Ich werde meine Datenbank Tranquil-Spa mit einem Bindestrich anrufen. Klicken Sie auf „Erstellen“ und das ist alles erledigt. Der nächste Schritt ist, zu MAMP zu gehen, überprüfen Sie, auf welchem Teil Sie laufen, indem Sie auf „Einstellungen“ klicken. Ich laufe auf Port 8888. Alles, was wir jetzt tun müssen, ist zu localhost 8888 zu gehen. Es „Enter“ und dann sind wir auf den Inhalt der htdocs gebracht. Dies wird uns einen Link für das eine und einzige Projekt, das ich habe, geben, die Ruhe. Wenn wir diese auswählen, wir dann zu den WordPress-Installationsskripten gebracht. Wo wir beginnen können, indem wir unsere Sprache wählen. Klicken Sie auf „Weiter“. In dieser Phase erfahren Sie, welche Anforderungen wir benötigen wie z.B. einen Datenbank-Benutzernamen und ein Passwort. Wir haben bereits das alles Setup. Wir können auf „Let's Go“ klicken. Der Datenbankname genau wie in phpMyAdmin war tranquil-spa, mit dem Bindestrich. Wir haben keine zusätzlichen Benutzer hinzufügen eingerichtet. Wenn wir dies getan haben, müssen Sie einen Benutzernamen und ein Passwort zu Ihrer Datenbank hinzufügen. Andernfalls können wir einfach root und root für das Passwort zwei eingeben. Wir verwenden einen lokalen Host, und wir können optional auch das Tabellen-Präfix ändern und lassen Sie uns meins zu tranquil_db ändern. Dann reichen Sie das ein. Wenn Sie diese Nachricht sehen, bedeutet das, dass alles jetzt mit unserer Datenbank verbunden ist, und wir sind bereit, die WordPress-Installation auszuführen. Das dauert nicht allzu lange. Die WordPress-Installation muss den Site-Titel kennen. Ich möchte das „Tranquil Spa“ nennen. Dies ist der Benutzername und das Passwort, mit dem wir uns beim WordPress-Back-End oder dem WordPress-Dashboard anmelden. Ich möchte meins anrufen, tranquil_admin. Das Passwort können Sie es als das generierte behalten, oder Sie können ein Passwort Ihrer Wahl hinzufügen. Die E-Mail-Adresse, und schließen Sie die Installation ab, indem Sie auf diese Schaltfläche klicken. Gut, wir sind jetzt bereit, sich mit dem Benutzernamen und Passwort, die wir gerade erstellt haben, anzumelden. Klicken Sie auf „Login“ und wir können diese Details in WordPress eingeben. Also tranquil_admin, das Passwort Merken Sie mich und dann Login. Sobald wir angemeldet sind, wird das WordPress-Dashboard, das ist der Admin-Bereich für unsere Website genommen werden. Es wird uns erlauben, Dinge wie die Seiten, die Beiträge zu kontrollieren. Wir können alle Medien hochladen. Wir können Kommentare und die Einstellungen und das Aussehen unserer Website steuern. Wir werden diese näher durchlaufen, während wir den Kurs durchlaufen. Wir können unsere Website auch sehen, indem wir den Mauszeiger über Tranquil Spa zeigen und auf „Website besuchen“ klicken. Dies führt uns dann zum Standardthema. Sie werden etwas sehen, das so aussieht, sobald Sie diese Phase erreicht haben. Wenn Sie zum Dashboard zurückkehren müssen, klicken Sie einfach auf diesen Website-Titel oder gehen zum Dashboard-Link und dies führt uns zurück zum Dashboard. Wenn Sie nun diese Stufe erreichen, ist dies WordPress alle jetzt auf Ihrem Computer eingerichtet und Sie können jetzt zum nächsten Abschnitt, wo wir beginnen, unsere WordPress-Website zu bauen. 18. Unser WordPress-Theme-Ordner: Willkommen zurück. Jetzt haben wir eine Version von WordPress läuft auf unserem Computer. Wir werden jetzt den Prozess der Übertragung unserer Bootstrap-Vorlage über zu einem WordPress-Theme beginnen . Innerhalb der lokalen durch Schwungrad, können wir die neue Theme-Ordner, indem Sie zu unserem Verzeichnis navigieren. In diesem kleinen Symbol nur hier können wir darauf klicken und dann werden wir dorthin gebracht, wo unser Projekt gespeichert ist, innerhalb des Projektnamens können wir nach oben gehen, dann nach unten zu „WP-Inhalt“ und dann zu „Themes“ und dann innen hier können wir finden Sie die kostenlosen Standard-Themes, die standardmäßig mit WordPress installiert werden. Wenn Sie sich entschieden haben, diesen Kurs zu folgen, verwenden Sie MAMP, müssen Sie zum MAMP Verzeichnis navigieren, es öffnen, dann zu den HT-Dokumenten gehen, das Projekt öffnen, dann zum Inhalt gehen und dann Themen und dann kannst du genau so weitermachen, wie wir es tun werden. Also hier drinnen ist, wo wir unser neues Thema platzieren werden. Um dies zu tun, werde ich unsere Bootstrap-Vorlage duplizieren und dann, sobald dies erledigt ist, werde ich diese, ruhige WP umbenennen. Sobald wir es getan haben, können wir dies in unsere Themes ziehen, so WordPress hat Zugriff auf unsere Theme-Ordner. Der nächste Schritt besteht darin, dies in Ihren Texteditor zu ziehen. Dies öffnet sich anstelle der Bootstrap-Version. Jetzt, da WordPress PHP verwendet, der erste Schritt darin, die Indexseite von index.html umzubenennen. Wir werden die Erweiterung am Ende zu index.php ändern. Dies ist eine der erforderlichen Dateien in einem WordPress-Theme und dann innen hier müssen wir einen Kommentar am Anfang der Datei hinzufügen. Dieser Kommentar wird innerhalb der PHP-Tags sein, dann in PHP-Code abgestimmt, dann können wir dies mit einem anderen Fragezeichen und dem schließenden Pfeil abschließen. Dann können wir unseren PHP-Kommentar im Inneren hinzufügen. Ein PHP-Befehl ist ein Vorwärt/ und dann ein Stern und endet dann mit einem Stern und dann vorwärts/. Dann können wir jeden Inhalt eingeben, den Sie hier drinnen wollen. Ich werde nur den Text der Hauptvorlagendatei hinzufügen und dann speichern. Die andere erforderliche Datei in unserem Theme ist die style.css. Wir haben eine benutzerdefinierte CSS-Datei innerhalb des CSS-Ordners, also werde ich das benutzerdefinierte CSS greifen und dies in das Stammverzeichnis des Projekts ziehen. Stellen Sie sicher, dass dies entlang der restlichen Seiten ist, die wir hier haben werden. Diese Datei für WordPress muss in style.css umbenannt werden. So wird es von WordPress erkannt. Die style.css benötigt auch einen Kommentar am Anfang der Datei. Dieser Kommentar unterscheidet sich jedoch ein wenig von dem, den wir auf der Indexseite hinzufügen. Wenn wir zum Browser gehen, dann öffnen Sie eine Suchmaschine, dann öffnen Sie eine Suchmaschine, wenn wir nach dem Codex-Theme Stylesheets suchen, sollte der erste Link, den wir bekommen, für den WordPress-Codex sein. Wir haben in diesem Kurs viele Male auf den Codex verwiesen , um die Informationen über die WordPress-Funktionen zu sehen, die wir verwenden können. Wir können auch auf diesen Link klicken, um zu den Theme-Stylesheets zu springen und dies ist der genaue Abschnitt, den wir brauchen. Dies ist der Kommentar, den wir an der Spitze unseres Stylesheets hinzufügen müssen und dieser Kommentar bietet verschiedene Informationen über unser Thema, wie der Autor, der Theme-Name, können wir eine Beschreibung hinzufügen, jede Lizenzierung Informationen zusammen mit allen Tags, die relativ zu unserem Thema sind, Typen wie das Farbthema, die Anzahl der Spalten, ob dies reagiert und übersetzt bereit ist. Wir können einfach alle Tags hier hinzufügen, die wir mögen, müssen wir auf die verfügbaren WordPress-Tags in der Theme Review Handbuch beziehen und Sie können dies überprüfen, wenn Sie möchten. Bei [unhörbar] werde ich diesen Kommentar als Starter kopieren und dann über dem Körperabschnitt können wir dies einfügen und es ist nur ein Fall der Bearbeitung der Inhalte an unser Thema anzupassen. Das wird ein ruhiges WP sein. Wir haben hier keinen Link, also werde ich nur einen erfinden, tranquilspantheme.com, den Autor, Sie können Ihren Namen hier hinzufügen. Sie können Ihre Website hinzufügen, wenn Sie möchten, auch eine Beschreibung. Ich werde nur tranquilspantheme für unsere WordPress hinzufügen. Ich werde die Version verlassen, die Lizenzierung und für die Tags werde ich die Farben entfernen, geben Sie mir einfach alle Farben Ihrer Wahl, also werde ich dies auslassen und dann den Rest bearbeiten. Ich wollte übersetzungsbereit sein. Wir werden dies in einem späteren Abschnitt hinzufügen. Wir können die rechte Seitenleiste hinzufügen. Wir werden auch benutzerdefinierte Kopfzeilen, wir haben vorgestellte Bilder und auch ein benutzerdefiniertes Menü. Sie können natürlich, nach diesem später, sobald wir weitere Funktionen hinzufügen, aber nur um zu beenden, Ich werde die Text-Domain hinzufügen, die unsere Themes Ordnernamen der ruhigen WP übereinstimmen und dann können wir den Text rechts löschen unten, und speichern Sie diese Datei. Die nächste Stufe besteht darin, die Screenshots zu verschieben, die Sie im Bilderordner zur Verfügung gestellt haben. Wenn Sie die screenshots.png packen und dann können wir diese neben unseren Stylesheets und auch allen Seiten in die Wurzel unseres Projekts ziehen . Dies wird das Bild sein, das neben unserem Thema im Dashboard angezeigt wird. Wenn wir diese Datei speichern, ist das genau das, was wir jetzt tun werden. Wir müssen zum lokalen Host im Browser gehen oder wenn Sie Schwungrad verwenden, können wir den Admin-Button auswählen, melden Sie sich bei Bedarf an und der nächste Schritt ist es, zum Erscheinungsbild und dann zu Themen zu gehen. Dieses Thema Abschnitt wird eine Liste aller Themen , die wir zuvor innerhalb der Themes Ordner gesehen haben, wie die Standard-diejenigen von WordPress zur Verfügung gestellt und jetzt sollten wir auch das Thema, das wir von ruhigen WP zur Verfügung gestellt haben. Dies ist auch der Screenshot im Hintergrund, den Sie hier sehen können. Wir können unsere Live-Vorschau überprüfen, die ich einfach dieses Thema aktivieren werde. Wir können überprüfen, dass dies funktioniert, indem Sie auf Besuchs-Website klicken. Dies ist der gesamte HTML-Inhalt für unsere Website. Sie können sehen, die Website braucht etwas Arbeit, das ist die grundlegende HTML-Inhalt, aber dies ist nicht unter der Kontrolle von WordPress nur noch, wir sind einfach setzen einige grundlegende HTML. Um den Konvertierungsprozess zu beginnen, werde ich vier neue Dateien erstellen, damit wir anfangen können, daran zu arbeiten. In den Wurzeln des Projekts wird die erste header.php genannt. Die zweite wird die footer.php genannt. Die dritte wird für die Sidebar mit a.php Erweiterung sein und die vierte wird für unsere functions.php sein und der Zweck dieser vier Dateien ist es, die Abschnitte unseres HTML aufzuschlüsseln, dann legen Sie sie in ihre eigene benutzerdefinierte PHP-Datei und dann können wir sie nach Bedarf in unser Theme importieren und wir werden mit diesem Prozess im nächsten Video beginnen. 19. Erste Schritte und unsere Indexseite: Eine der ersten Phasen der Erstellung eines WordPress-Theme ist es, unsere Abschnitte unserer Websites in ihre eigenen WordPress-Ordner aufzuteilen . Momentan haben wir die Dateiordner im letzten Video erstellt, das die Kopfzeile, die Fußzeile, die Seitenleiste enthält. Wir erstellen auch eine für die Funktionen, aber wir haben auch die index.php, die im Moment nur unseren Inhalt aus Bootstrap-Vorlage enthält. Lassen Sie uns damit arbeiten, unsere Inhalte in ihre eigenen separaten Dateien zu nehmen. Wir beginnen mit der Kopfzeile Wenn wir also zum schließenden Header-Tag scrollen, das hier ist, wählen Sie den ganzen Weg bis zum DOCTYPE aus. Um dies zu löschen, fügen Sie dann seinen Inhalt in die header.php ein, indem wir unseren Code in kleine Dateien wie diese aufteilen , ist eine wirklich bequeme Möglichkeit, Dinge zu tun, anstatt diesen Header hartcodiert in jede einzelne Seite zu haben. WordPress wird es nur in einer einzigen Datei haben und dann auf jede Seite nach Bedarf injizieren. Wir können auch zu unserem Index zurückkehren und dasselbe für die Fußzeile tun, unten unten unten. Scrollen Sie nach unten zu unserem Fußzeilenbereich, legen Sie den Abschnitt bis zum Ende einschließlich des HTML heraus. Fügen Sie dies in unsere footer.php ein, wenn wir dies speichern und den Browser auf unserem Index neu laden, sehen wir, dass wir nur den Inhalt haben, der dazwischen platziert wird. Wir haben nicht mehr die Kopf- und Fußzeile. Um diese wieder in unser Thema zu setzen, müssen wir in die Index-Seite gehen, wo sie einmal in. Hop ganz oben, anstelle des Header-Inhalts, können wir die PHP-Tags öffnen, die die linke Winkelklammer, Fragezeichen, PHP ist. Dann können wir eine WordPress-Funktion verwenden, diesen Header ziehen. Es ist WordPress-Funktion heißt „get_header“ mit den Klammern danach gefüllt. Da wir nun wieder zu PHP und dann in normales HTML kommen, müssen wir unsere PHP-Tags mit einem Fragezeichen und den eckigen Klammern abschließen , genau so. Dann machen wir eine sehr ähnliche Sache am unteren Rand anstelle unserer Fußzeile, wo unsere Fußzeile war, als in PHP. Wir verwenden dieses Mal eine WordPress-Funktion namens get_footer, und dann schließen unsere PHP, speichern Sie diese und laden Sie den Browser neu. Sieht immer noch nicht so aus, dass unser Inhalt wieder an Ort und Stelle ist, wir haben den Header-Abschnitt, unten unten unten, wir haben unsere Fußzeile, und das ist alles in Ordnung für jetzt. Von jeder Funktion von PHP können wir damit beginnen, indem wir oben einen Kommentar hinzufügen. Dies wird ein PHP-Kommando sein, also lassen Sie uns die PHP-Klammern öffnen und schließen. Wir beginnen einen Kommentar mit Schrägstrich und Stern, dann schließen wir dies mit der Rückseite mit einem Stern und einem Schrägstrich und dann einem Stern für jede neue Zeile ab . Dies wird eine Beschreibung der Datei sein und ich werde nur Funktionsdefinitionen für Tranquil Spa Thema hinzufügen , da diese Datei wird alle Funktionen enthalten, die für unser Thema erforderlich sind. Diese Datei wird verwendet, um das Standardverhalten zu ändern. Es kann verwendet werden, um Funktionalität und auch neue Funktionen hinzuzufügen. Diese Funktionen können entweder native WordPress-Funktionen zur Verfügung gestellt Knollen, oder wir können auch unsere eigenen benutzerdefinierten Funktionen hinzufügen. In diesem Kurs werden wir uns beide Typen ansehen. Das erste, was zu tun ist, ist eine Setup-Funktion zu erstellen. Dies wird ausgeführt, sobald unser Thema geladen wird. Dann innerhalb dieser Funktion können wir alle notwendigen Funktionen hinzufügen , die wir sofort geladen werden müssen, wie unsere Navigationsmenüs. Unter den Kommentaren werde ich das PHP öffnen, dann eine PHP-Funktion erstellen, dieser Name der Funktion wird Tranquil wp_setup sein, die Klammern kurz danach. Dann ist unser Funktionskörper, das erste, was wir tun möchten, fügen Sie Theme-Unterstützung. Dies wird unsere Theme-Unterstützung für eine bestimmte Funktion registrieren. Der erste wird automatische Feed-Links sein, getrennt durch die Bindestriche. Automatische Feed-Links aktiviert Beiträge und Kommentare RSS-Feeds standardmäßig. Diese Feeds werden automatisch im Kopfbereich angezeigt. Ich werde dies duplizieren und auch Theme-Unterstützung für das Titel-Tag, Titel-Tag und die Semikolons am Ende hinzufügen . Auf diese Weise können WordPress unseren Dokumenttitel anstelle des Titel-Tags verwalten . Dies ist im Grunde gesagt, wir werden nicht WordPress, um den Titel der Seite zu steuern. Anstatt unser hartcodiertes zu verwenden. Außerhalb unserer Funktion fügen wir dann eine Aktion hinzu. Dies wird zwei Argumente annehmen, das erste ist after_setup_theme, und dann das zweite ist der Name unserer Funktion, die tranquilwp_setup ist, ein Semikolon am Ende, und ich kann das PHP schließen. After_Setup_Theme, die wir als erstes Argument übergeben, ist ein WordPress-Hook , der als Warteschlange Seite laden aufgerufen wird, sobald das Thema initialisiert wird, wird es in der Regel verwendet, um eine grundlegende Einrichtung zu bilden, Registrierung, und auch jede Notwendigkeit Aktionen für unser Thema. Wir gehen dann weiter und übergeben unsere eigenen benutzerdefinierten Funktionsumfang. Führen Sie außerdem unsere eigenen benutzerdefinierten Startfunktionen aus, die Sie hier hinzugefügt haben. Als nächstes können Sie die Breite des Inhalts hinzufügen. Zuerst müssen Sie überprüfen, ob die Inhaltsbreite bereits festgelegt wurde. Diese Funktion ermöglicht es uns, die maximal zulässige Breite oder alle Inhalte hinzugefügt 12 Thema, wie ein Bild in einem Beitrag. Unser Design sieht nicht fehl am Platz aus. Wenn wir ein verwenden, war voran zu gehen und laden Sie ein größeres als erwartet Bild. Das erste, was wir tun müssen, ist eine PHP-if-Anweisung zu erstellen. Um zu überprüfen, ob der Inhalt, der bereits gesetzt ist, können wir mit der Variablen content_width auf den Inhalt zugreifen. Denken Sie daran, PHP verwendet ein $ Symbol, um eine Variable zu deklarieren. Wir wollen jedoch das Gegenteil tun und prüfen, ob die Inhaltsbreite nicht festgelegt wurde. Wir tun dies mit einem Ausrufezeichen. Wenn die Inhaltsbreite nicht festgelegt wurde, wollen wir voran gehen und sie selbst einstellen. Wir können diese Variable der Inhaltsbreite greifen und sie auf einen Pixelwert von 660 setzen. Die Inhaltsbreite kann auch über Plug-Ins zugegriffen werden, damit unsere Themes mit jedem der installierten Plug-Ins integriert werden können. Wenn wir diese Datei speichern, sollten wir nach dem Neuladen nichts anderes im Browser sehen, da wir nichts anderes als eine Unterbrechung dieses Inhalts in separate Dateien gemacht haben. Dies ist jedoch ein wichtiger erster Schritt in die Erstellung unserer WordPress-Theme. Jetzt gehen wir weiter auf die Arbeit mit den Kopf- und Fußzeilendateien. 20. Kopf- und Fußzeile dynamisch gestalten: Jetzt auf die Kopf- und Fußzeile. Im Moment haben wir unseren HTML-Code aus den Bootstrap-Vorlagen. Dies ist in Ordnung für statische Websites, aber wir wollen die Kontrolle an WordPress übergeben. Ich werde beginnen, indem ich zu unserem HTML übergehe und dann die Kontrolle an WordPress übergebe , indem ich einige PHP-Tags hinzufüge, um die integrierten WordPress-Funktionen zu nutzen, beginnend mit der header.php. Öffnen wir diese Datei und gehen dann ganz nach oben. Wir können einen PHP-Kommentar hinzufügen. Öffne das PHP, schließe das ab, was genau so ist. Ihr Kommentar wird einfach die Kopfzeile unseres Themas sein. Da WordPress in der Programmiersprache PHP gebaut ist, müssen wir jede unserer integrierten WordPress-Funktionen hinzufügen. Auch zwischen diesen PHP-Tags können wir diese Tags überall in unserem HTML öffnen und schließen. Zum Beispiel werden wir das Sprachattribut ersetzen. Lassen Sie uns dies aus dem öffnenden HTML-Tag löschen, öffnen Sie das PHP, schließen Sie es aus, und dann können wir eine WordPress-Funktion namens Sprachattribute hinzufügen, gefolgt von den Klammern und dann dem Semikolon. Diese PHP-Klammern, wenn sie innerhalb des HTML-Codes verwendet werden, signalisieren den Start von HTML-Code. Dann schließen wir dies ab, und dann kehrt die Datei zu normalem HTML zurück. Sprachattribute ist eine WordPress-Funktion, die verwendet wird, um die Sprache der Seite festzulegen. Aber woher weiß WordPress, welche Sprache Sie verwenden möchten? Gehen wir zum Browser und werfen einen Blick. Lassen Sie uns dies neu laden, klicken Sie mit der rechten Maustaste und dann „Seitenquelle anzeigen“. Wenn wir oben für die sich öffnenden HTML-Elemente suchen, sehen wir, dass wir das Sprachattribut auf Englisch, US gesetzt haben. Ihre Installation kann unterschiedlich sein, aber wir können sehen, dass dies nicht das ist, was wir in unserer Datei festgelegt haben. Wir sehen keinen dieser PHP-Code, der in hinzugefügt wurde. Stattdessen sehen wir die tatsächliche Sprache, die wir verwenden. Dies liegt daran, dass PHP auf dem Server gerendert wird. Wenn wir diese Seite zurückbekommen und den Browser öffnen, sehen wir den PHP-Code nicht. Wir sehen tatsächlich das HTML, das an seiner Stelle regeneriert. Diese Sprache wird im WordPress-Dashboard festgelegt. Wenn wir Schwungrad öffnen, klicken Sie auf „Admin“, dann gehen Sie zu „Einstellungen“ und „Allgemein“, wir haben die Website-Sprache, die wir gerade hier eingestellt haben. Wenn Sie mehr über eine der WordPress-Funktionen wissen möchten, die wir abdecken werden, können Sie die codex.wordpress.org besuchen und nach dem Funktionsnamen suchen, um weitere Informationen zu erhalten. Als nächstes werden wir die Zeichensätze setzen. Zurück in unsere Kopfzeile. Für den Meta-Zeichensatz können wir unsere hartcodierte Version von UTF8 entfernen, dann innerhalb dieser Zitate können wir die PHP-Tags öffnen, diese schließen und dann innerhalb einer WordPress-Funktion namens Blog-Info hinzufügen. Die Blog-Info, die wir setzen möchten, ist der Zeichensatz , der genau so eingestellt ist. Die Standardcodierung in WordPress ist UTF8. Dies wird angezeigt. Wir können auch die Browserquelle neu laden, nur um dies zu überprüfen. Da gehen wir. Dies ist auf den Standard UTF8 festgelegt. Als nächstes haben wir den Website-Titel, den ich entfernen werde. Scrollen Sie nach unten, wir haben den Titel hier verwendet. Wir können dies komplett entfernen oder auskommentieren. Dies liegt daran, dass in der functions.php, die wir kürzlich hinzugefügt haben, die die Theme-Unterstützung für das Titel-Tag festlegt. Dabei ermöglicht dieses Thema Unterstützung WordPress sicher zu verwalten die Seite Titelfotos und erklärt auch, dass wir nicht mit einem hartcodierten Titel für unser Thema. Zurück zu unserer header.php. Wir können eine PHP-Funktion namens WP_Head verwenden. Dies wird WordPress genau sagen, wo wir die automatisch generierten Informationen hinzufügen möchten. Der Speicherort ist wichtig, da dies verwendet wird, um alle ziehenden Dinge wie unsere CSS-Dateien, alle Skripte zu injizieren und sie werden hier genau dort eingefügt werden, wo wir dies hinzugefügt haben. Wir werden auch einen Blick darauf werfen, wie WordPress unser CSS und unsere Skripte in nur einem Moment behandelt , aber zuerst werden wir nach unten in die Körperklasse gehen. Lassen Sie uns dies innerhalb des öffnenden Body-Tags hinzufügen, was PHP bedeutet. Schließ das ab. fügen Sie dann andere WordPress-Funktion namens body_class hinzu; Auf diesem auch. Achten Sie immer noch darauf, das HTML-Tag ganz am Ende zu schließen. Durch das Hinzufügen dieser Körperklasse zum Körperabschnitt ermöglicht es WordPress, beliebige CSS-Klassen hinzuzufügen, die erforderlich sind, genauso wie in normalem HTML, indem die Klassenattribute hinzugefügt werden. Aber jetzt stattdessen ist dies unter der Kontrolle von WordPress. Wenn wir diese speichern und dann unsere Seitenquelle neu laden, und wenn wir die öffnenden Körperelemente finden, die gerade hier ist, sehen wir jetzt alle diese Klassen, die WordPress hinzugefügt hat. Diese Klassen ändern sich je nach Seite, die wir betrachten, unsere angemeldeten Zustände, wenn es irgendwelche Fehler gibt, und so weiter, aber das alles wird von WordPress hinter den Kulissen behandelt. Wir können sogar unsere eigenen Klassen zu jeder Seite hinzufügen, indem wir sie einfach als String innerhalb der Body-Klasse hinzufügen. Lasst uns nach Brauch gehen. Geben Sie dies ein Speichern, neu laden, und wir sollten auch unsere benutzerdefinierte Klasse am Ende hinzugefügt sehen. Dies wird als String hinzugefügt. Wenn wir mehrere Klassen hätten, könnten wir dies als Array hinzufügen. Ich werde Array eingeben. Innerhalb der Klammern können wir unseren ersten Wert durch ein Komma getrennt hinzufügen. Wir können einen zweiten Wert hinzufügen, sagen wir benutzerdefinierte 2, „Speichern“ und „Reload“. Dies fügt unserem Körper mehrere Klassen hinzu. Wir brauchen diese für dieses Projekt nicht, also werde ich diese entfernen und einfach die leere Körperklasse verlassen. Wenn Sie die Seitenquelle ansehen, haben Sie möglicherweise auch bemerkt, dass wir jetzt einige zusätzliche Inhalte im Kopfbereich haben. Wenn wir nach oben scrollen, haben wir all diesen Code, der hier ist und auch alle Links unten. Diese alle werden automatisch von WordPress hinzugefügt. Dies sind alle Stile und Skripte, die WordPress hinzugefügt hat , seit wir die WP_Head Funktion enthalten. Dies ist direkt unter unserem benutzerdefinierten CSS. Wenn wir hier nach unserem benutzerdefinierten CSS suchen, ist dies der gesamte WP_Head Inhalt, der direkt unten hinzugefügt wurde. Wir haben auch unseren Website-Titel, der automatisch hinzugefügt wird, obwohl wir den hartcodierten Seitentitel entfernt haben. Die letzte Änderung an der Kopfzeile, die ich in diesem Video machen möchte , ist der Seitentitel ganz oben. Wenn wir zu unserem Projekt gehen, ist dies der Website-Titel, den wir in dem Link haben. Derzeit ist dies hartcodiert und WordPress hat keine Kontrolle darüber. Gehen wir weiter und ändern es jetzt. Handle über Kontrolle zu WordPress, wir verwenden get_bloginfo Übergabe in den Namen. Wenn wir nach unten zu unserem nav scrollen, haben wir den Site-Titel innerhalb des A-Elements. Wir können das entfernen. Öffnen wir die PHP-Elemente und schließen Sie sie dann ab. Im Inneren können wir den Blognamen von get_bloginfo Echo. Hier drinnen werden wir die Informationen weitergeben, die wir zurückerhalten möchten. Dies ist der Name der Website. Wenn wir diese speichern, und noch einmal, wenn wir die Seitenquelle sehen und dann nach unten zu unserem Kopfzeilenabschnitt scrollen, ist meins auf Zeile 62, und hier sehen wir den Website-Titel von Tranquil Spa. Zurück zu unserer Seite und neu laden. Wir sehen es auch nur hier. Um zu sehen, wo dies eingestellt ist, können wir wieder zu den allgemeinen Einstellungen gehen und dann zum Website-Titel gehen. Wenn wir etwas direkt nach hier hinzufügen, drücken Sie „Speichern“, „Reload the site“; wir sehen, dass die Änderungen im Browser widergespiegelt werden. Ändern wir es zurück in Tranquil Spa und speichern Sie dann. Das letzte, was ich jetzt in der Kopfzeile tun möchte, ist, den Seitentitel Link zurück zur Homepage zu haben , wenn wir darauf klicken. Derzeit, wenn wir es jetzt klicken, verwenden wir nur eine leere href, die hier eingestellt ist. Dies funktioniert vorerst, aber wir wollen sicherstellen, dass WordPress auch vollständig die Kontrolle über das PHP-Element hat. Schließen Sie diese aus und dann werden wir Escape-URL Echo, Übergabe in der home_url als Funktion. So die home_url ruft die Homepage von WordPress, und wir übergeben es in Escape-URL zu entfernen oder bereinigen alle unnötigen Zeichen wie alle kaufmännischen Unds, Prozentsymbole, oder in der Regel jedes Zeichen, das nicht benötigt wird. Speichern Sie das und überprüfen Sie jetzt einfach, dass alles noch funktioniert, indem Sie auf Tranquil Spa klicken und zurück zur Homepage gehen. Es gibt auch eine kleine Änderung an der Fußzeile. Wenn wir die footer.php öffnen, scrollen Sie nach unten bis zum Ende der Datei. Direkt über dem schließenden Körper-Tag, müssen wir eine WordPress-Funktion namens wp_footer hinzufügen. Wir setzen die Klammern, das Semikolon. Dies ist ein bisschen wie der wp_head , den wir im Header-Abschnitt gerade hier gemacht haben. Es wird von WordPress verwendet werden, um alle Skripte zu injizieren, die Sie hinzufügen können. Fügen Sie in der wp_footer hinzu, sagt daher WordPress, wo diese Skripte abgelegt werden sollen. Wir brauchen auch einen PHP-Kommentar oben in der Datei. Folgen Sie einfach der Fußzeile, öffnen und schließen Sie das PHP. Dies wird die Vorlage für die Anzeige unserer Fußzeile sein. Geben Sie dieser Datei ein Speichern. Wir werden zu einem späteren Zeitpunkt auf die Fußzeile zurückkommen, wenn wir Dinge wie benutzerdefinierte Menüs hinzufügen. Aber für jetzt ist dies die Kopf- und Fußzeile jetzt geändert, um dynamischer zu sein und auch tiefer in WordPress verknüpft werden. 21. So fügt man Stylesheets und Skripte ein: Im Moment haben wir unsere Skripte und unsere Stile direkt zu unserem Kopf- und Fußzeilenbereich hinzugefügt. Dies ist von früher, als wir die Bootstrap-Vorlage erstellt haben. Wir haben das CSS in der Kopfzeile. Dann in der Fußzeile unten, haben wir unser JavaScript. Wenn wir das Wort präzise besuchen, sehen wir kein Styling und auch Dinge wie die Bilder und Symbole. Was wir jetzt tun werden, ist, diese hartcodierten Links zu entfernen und sie dann in die functions.php zu verschieben. Wir können sie dann in WordPress mit Funktionen namens wp_enqueue_style, Zeile Stylesheets, und für unser Skript wp_enqueue_script zu gehorchen. Aber warum müssen wir das überhaupt tun? Nun, es gibt ein paar Gründe. Aber stellen Sie sich vor, unser WordPress-Theme erforderte eine jQuery für es zu funktionieren, und dann stellen Sie sich vor, wenn wir zwei Plugins hatten und beide diese Plugins erfordern auch eine jQuerry. Wenn jQuery im Civil Theme und auch in die Plugins fest codiert wurde. Dies würde bedeuten, WordPress müsste jQuery drei verschiedene Male herunterladen. Dies würde unsere Seiten verlangsamen. Danach könnten es sich auch um verschiedene Versionen desselben Skripts handeln, was zu Versionskonflikten führen kann. Außerdem kann ein bestimmtes Skript auch mit WordPress gebündelt werden, daher müssen wir es möglicherweise nicht herunterladen. Mit diesen Funktionen ermöglicht dies WordPress zu übernehmen und nur genau das zu laden, was benötigt wird. Es kann sich auch um alle zusätzlichen Skripte kümmern, die Abhängigkeiten von sind. Lassen Sie uns in der header.php beginnen, indem Sie die Stylesheets von hier entfernen. Wir haben alle vier davon, und dann können wir auch alle diese Skripte vom unteren Rand der Fußzeile entfernen. Wir haben zwei hier, wir können auch diese Befehle entfernen, speichern Sie die Datei, und ich kann über die functions.php gehen. Wir können diese Back-in hinzufügen, indem wir eine PHP-Funktion erstellen. Unten unten, immer noch in unserem PHP-Abschnitt, werden wir eine PHP-Funktion namens tranquil_scripts als Klammern kurz danach hinzufügen . Zuallererst werde ich die Stile ohne Kommentare über die Spitze hinzufügen , also fügen Sie die Stile hinzu. Dann im Inneren hier können wir mit der WordPress-Funktion namens wp_enqueue_style beginnen, Semikolon am Ende. WP_EnQueue_style kann bis zu fünf Parameter verwenden. Der erste ist der Name der Stylesheets, die wir als eine Zeichenfolge des Bootstrap-Aufrufs hinzufügen werden. Dieser Name muss ebenfalls eindeutig sein. Der zweite Parameter, den wir brauchen, ist die Quelle. Hier können wir eine WordPress-Funktion namens get_template_directory_uri verwenden, die die Wurzeln oder das Home-Verzeichnis unseres Projekts ernennt. Lassen Sie uns das jetzt hinzufügen. Also [unhörbar], und es ist Ihr Punkt zu unserem Home-Verzeichnis, das alle unsere Dateien und Ordner auf der linken Seite hier ist. Wir verwenden dann einen Punkt, und dann können wir in einem Dateipfad zu unserem CSS hinzufügen. Dies wird unsere verkleinerte Bootstrap-Version sein, die sich im CSS-Ordner befindet. Als Zeichenfolge können wir /CSS hinzufügen, und dann ist die Datei die bootstrap.min.css. Wenn wir dies geben, um jetzt zu speichern, schließen Sie die Seitenleiste, über den Browser, und drücken Sie dann „Reload“. Wir sehen momentan keine Änderungen an unserem Projekt. Um die Funktion tatsächlich auszuführen, müssen wir eine Aktion hinzufügen, und diese Aktion wird dafür verantwortlich sein, unsere Funktion zu starten. Direkt unten können wir add_action. Dies ist genau so, wie wir oben für unser Setup hinzugefügt haben. Dieses Mal wird das jetzt unsere Skripte sein. Das erste Argument ist wp_enqueue_scripts, und dann das zweite ist unser benutzerdefinierter Funktionsname von tranquil_scripts. Diese Aktion wird unsere benutzerdefinierte Funktion von tranquil_scripts ausführen, die dieser Abschnitt hier ist. Jedes Mal, wenn die WordPress ist wp_enqueue_scripts Funktion aufgerufen wird. Jetzt können wir das speichern und dann den Browser aktualisieren. Nun, wie Bootstrap-Stile wurden angewendet? Die sind auch kleine Stylesheets, die wir zu dieser Funktion hinzufügen müssen, wie Font Awesome, unsere Google Fonts, und auch unsere Custom CSS. Machen wir genau das Gleiche wie zuvor. Ich werde diesen Stil kopieren und einfügen. Dieses Mal werde ich dieses Fontawesome als den Namen nennen. Der Link muss diesmal angepasst werden, um auf die Font Awesome Datei zu verweisen. Also das ist /cssfontawesome/css, und dann brauchen wir die all.min.css. Lassen Sie uns überprüfen, ob diese Symbole funktionieren, drücken Sie „Speichern“, „Neu laden“, und das sind unsere Symbole unten in der Fußzeile. Es ist auch unsere Custom CSS Datei 2. Denken Sie daran, als eine Anforderung von WordPress, mussten wir dies in eine style.css Datei verschieben, und dies ist in der Wurzel unseres Projekts. Darunter lassen Sie uns eine neue Zeile kopieren und einfügen. Dies wird zu B für unsere benutzerdefinierte Datei. Wir müssen auch das Home-Verzeichnis greifen, das get_template_directory_uri ist. Diesmal müssen wir keinen Dateipfad hinzufügen, da dieser sich im Stammverzeichnis befindet. Alles, was wir tun müssen, ist den Dateinamen von style.css hinzuzufügen, zu speichern und neu zu laden. Wir können sehen, einige benutzerdefinierte Stile wurden jetzt angewendet. Wir haben die Bilder noch nicht vorgestellt, aber wir werden sehr bald darauf zurückkommen. Das letzte, was hinzuzufügen ist, sind unsere Skripte für jQuery und Bootstrap. Wir können unsere Bootstrap-js-Datei in ähnlicher Weise wie die Stile hinzufügen. Aber dieses Mal führen wir anstelle von wp_enqueue_style wp_enqueue_script aus, so dass es gleich ist, kurz nach unserem dritten Stil. Der Funktionsname wp_enqueue, und dieses Mal ist dies Skript innerhalb. Hier fügen wir zuerst unseren Namen hinzu, also wird dies bootstrap-js sein. Auch dies ist der Name unserer Wahl, und er muss eindeutig sein. Zweitens werden wir den Dateipfad von hier kopieren. Gleichzeitig müssen wir dies auch verwenden, um auf das Home-Verzeichnis zu verweisen, und dann soll der Dateipfad, den wir verwenden, /js sein, und dann Schrägstrich den Namen unserer Datei, die bootstrap.min.js ist. Wir können auch etwas hinzufügen, ein Array von Abhängigkeiten. Ich werde eine Abhängigkeit von jQuery hinzufügen. Wir können hier mehrere Skripte hinzufügen, und jQuery ist standardmäßig mit WordPress gebündelt, so dass wir dies nicht als ein durch ein Komma getrenntes Skript hinzufügen müssen. Kurz danach können wir auch ein viertes Argument hinzufügen, das heißt, wenn Sie eine bestimmte Versionsnummer verwenden möchten, also werde ich dies als Null hinzufügen, der fünfte und letzte Wert wird wahr sein. diesen Wert auf true setzen, wird erklärt, dass wir möchten, dass WordPress dieses Skript zur Fußzeile hinzufügen, Sie brauchen nur wp_footer-Tag, die wir früher hinzugefügt haben, und dies ist hier. Schließlich, wenn wir das speichern und dann unser Thema neu laden. Ich habe auch einen Syntaxfehler, lassen Sie uns das überprüfen, und wir könnten nur ein Semikolon verpassen. Du musst retten. Wir können überprüfen, dass JavaScript geladen wird. Wenn wir den Browser nach unten scrollen, und wir wissen, dass das JavaScript funktioniert, weil unser Dropdown voll funktionsfähig ist. Wenn wir nun den Browser ein wenig größer erweitern, und dann gehen wir zum Neuladen Ressource. Lassen Sie uns zuerst an den Anfang der Datei gehen. Wenn wir genau hinsehen, können wir unsere Custom CSS sehen. Wir können unsere fontawesome sehen, und auch, was wir bootstrap-css nennen, wurde geladen. Dann bis ganz unten haben wir hier auch ein Skript, das eines unserer bootstrap.min.js ist. Sie haben jetzt gelernt, wie Sie WordPress Stylesheets und Skripte auf die richtige Weise hinzufügen. Dies ermöglicht WordPress zu steuern, was geladen wird, und mögliche Probleme zu vermeiden. 22. Kopfzeilen-Navigationsmenü: In unserem Header-Bereich, unser Menü links oben. Wenn wir auf die Startseite klicken, diese Links zu unseren HTML-Versionen unserer Index-Seite, und auch wenn wir auf den Blog klicken, geht dies auch zu unserem Blog zu HTML. Dies ist nicht, was wir wollen jedoch für ein WordPress-Theme, da wir wollen WordPress, um die Seiten und auch die Navigation zu steuern. Lassen Sie uns die Dinge starten, indem Sie ein neues WordPress-Menü im Dashboard erstellen. Gehen wir also zum Haupt-Dashboard und gehen Sie dann zu Erscheinungsbild und dann Anpassen. Von hier aus können wir zum Customizer gehen und ein neues Menü hinzufügen. Wie Sie erraten haben, können wir dies auf der Registerkarte Menüs tun und dann ein neues Menü erstellen. Dies ist unser erster Blick auf das, was der Customizer genannt wird. Dies ermöglicht es uns, visuell Änderungen an bestimmten Teilen unseres Themas vorzunehmen, und wir können auch eine Vorschau auf der rechten Seite unserer Änderungen sehen. So können wir mit diesen Einstellungen herumspielen und sehen, wie es in unserem Thema aussieht, bevor wir uns begehen. Wir werden den Customizer verwenden, um dieses neue Menü zu unserem Thema hinzuzufügen. Dann fügen Sie einen Menünamen des Hauptmenüs hinzu, klicken Sie auf „Weiter“, fügen Sie Elemente zu anderen Seiten hinzu, die wir zu unserem Menü hinzufügen möchten. Der erste wird für zu Hause sein, und dann haben wir noch keine Blog-Seite. So können wir die gerade unten hinzufügen. Klicken Sie auf „Hinzufügen“ und stellen Sie sicher, dass wir die Home- und Blog-Links auf der linken Seite haben. Wenn wir wollten, könnten wir auch benutzerdefinierte Links hinzufügen. Wir könnten auch Links zu verschiedenen Beiträgen und den Kategorien oder Tags hinzufügen , die mit diesen Beiträgen verbunden sind, aber für jetzt sind diese beiden Seiten alles, was wir brauchen, um unsere Bootstrap-Vorlagen zu reflektieren. Wir können auch Seiten automatisch zu unserem Menü hinzufügen , wie sie erstellt werden, indem Sie hier auf diese Schaltfläche klicken. Aber wir wollen nur die beiden vorerst. Klicken Sie also auf „Veröffentlichen“, schließen Sie dies, und wir können unsere Seite aktualisieren. Das Menü ist also erstellt, aber wir haben es noch nicht in unserem Thema erscheinen. Dies sind die Links aus unserem HTML. Gerade vorwärts tun dies wir gehen über auf den WordPress-Codex, der auf developer.wordpress.org verfügbar ist. Gehen Sie also auf diese Seite. Dann können wir eine Suche nach wp_nav_menu durchführen, getrennt durch Unterstriche. Also wp_nav_menu. Suchen Sie danach und gehen Sie dann zur Funktionsreferenz. Wir sehen oben wp_nav_menu wird verwendet, um ein Navigationsmenü anzuzeigen , und das ist genau das, was wir brauchen. Im Folgenden haben wir einige Parameter, die wir in unser Menü hinzufügen können. Diese Parameter ermöglichen es uns, das Menü anzupassen, indem Sie Dinge wie Container zusammen mit verschiedenen Kundenklassen und IDs hinzufügen. Mit all diesen Parametern können wir WordPress genau sagen , welche Klassen wir es zu unserem Menü hinzufügen möchten, um unser Styling und Layout genau zu halten, wie er Bootstrap verwendet. Ich werde dies tun, indem ich einen Bootstrap Navwalker verwende. Lassen Sie uns zum Tab gehen und auf der Suche nach dem Bootstrap für navwalker, uns auf die GitHub-Seite bringen würde. Dieser Navwalker ermöglicht es uns, alle Bootstrap-Klassen und IDs und die grundlegende Struktur mit unserem WordPress-Menü zu verknüpfen . So haben wir keine Unterschiede im Styling. Das erste, was wir tun müssen, ist die ZIP-Datei herunterzuladen. Lassen Sie uns auf „Klonen oder Download“ klicken. Laden Sie die ZIP-Datei herunter. Ich möchte, dass es heruntergeladen wird, müssen wir dies zum Wurzel unseres Projekts hinzufügen. Öffnen Sie das also, dann haben Sie hier eine Klasse , die class-wp-bootstrapnavwalker.php genannt wird. Also lassen Sie uns das kopieren oder in der Tat werde ich das in die Sidebar ziehen. Dadurch wird dies innerhalb unseres Theme-Ordners im Stammverzeichnis des Projekts platziert. Wenn wir zurück auf die GitHub-Seite für den Navwalker gehen, scrollen Sie nach unten zur Installation. Wir haben bereits den ersten Schritt abgeschlossen, darin besteht , unsere PHP-Datei in unseren Ordner zu legen. Das nächste, was wir tun müssen, ist, zu der functions.php zu gehen und den folgenden Code hinzuzufügen. Also werde ich dies in die Funktionsdatei kopieren und dann nach oben scrollen und ich werde dies direkt nach unserer Theme-Unterstützung für das Titel-Tag hinzufügen, fügen Sie dies in, und wir sind gut zu gehen. Also benötigen Sie einmal, die am Anfang dieser Zeile ist eine PHP-Funktion, die die Datei enthalten wird, die wir angeben. In unserem Fall zeigen wir es auf das Haupt-Home-Verzeichnis und dann in die PHP-Datei, die wir hinzugefügt haben. Require einmal ist ähnlich wie die PHP require Funktion. Wir prüfen zunächst, ob diese Datei bereits in der Vergangenheit enthalten ist, bevor wir sie noch einmal benötigen. Mit diesem jetzt registriert gehen wir zurück in die Dokumentation und der nächste Schritt ist die Verwendung einer WordPress-Funktion namens register_nav_menus. So können wir diese Funktion nur hier kopieren. Dies muss auch zu unserer Funktionsdatei gehen, und ich möchte dies nur in der folgenden Zeile hinzufügen. Fügen Sie das hier ein. Es gibt auch eine Funktion, um ein einzelnes Menü namens register_nav_menu anstelle von Menüs zu erstellen . Aber wir werden auch zu einem späteren Zeitpunkt ein Fußzeilenmenü hinzufügen. So können wir bei Menüs bleiben. Dies enthält ein Array von Menüs. Wenn nicht nur die, die in den Momenten. Hier fügen wir in unserem Menü als primäre hinzu und wir werden einen Blick auf dies in nur einem Moment. Danach haben wir eine Menübeschreibung. Sobald wir zur Beschreibung kommen, das Haupt-Header-Menü. Danach haben wir den Namen des Themas. Ich werde mich nur besänftigen. Dieser Name muss mit den Kommentaren oben in der Datei style.css übereinstimmen. Es muss viel diese Text-Domäne, die wir früher erklärt. Zurück in den Funktionen, wird diese Text-Domäne auch später verwendet werden wenn wir uns die Übersetzung unseres Textes in das Thema ansehen. Gehen wir nun zurück zur Dokumentation und fahren Sie mit diesem Menü fort. Wenn wir zur Verwendung scrollen, ist das nächste Stück Code wp_nav_menu. Dies ist, was wir in der WordPress-Codex kurz vor. Dies wird in wp_nav_menu verwendet, um unser Menü zu registrieren, das wir dann weitermachen und unsere WordPress-Klassen mit der Bootstrap-Äquivalenz abbilden können. Lassen Sie uns diese Funktion direkt hier in unseren Header kopieren , wo unser Menü gespeichert ist. Unser Menü, um zur ungeordneten Liste zu navigieren. Wir können diese löschen oder diesen Abschnitt kommentieren. Da wir diese hartcodierte Version nicht mehr verwenden. An Ort und Stelle werden wir einige PHP-Tags hinzufügen, da wir jetzt in PHP-Code springen und dann in unser Menü einfügen. Beachten Sie die Liste der Parameter auf der linken Seite dieses Arrays. Dies sind die Parameter, die wir vorher gesehen haben, als wir uns wp_nav_menu innerhalb der WordPress-Website angesehen haben. Das sind nur die hier. Wir haben dann auf der rechten Seite die Möglichkeit, diese auf unsere Bootstrap-Äquivalenz abzubilden. So werden die Bootstrap-Klassen wirksam, anstatt die WordPress-Standardwerte. Wenn wir damit beginnen, diese zu speichern und dann unsere Homepage neu zu laden, sehen wir, dass unser Menü jetzt verschwunden ist, seitdem wir es auskommentiert haben. Wir gehen hinüber, um ein Menü hinzuzufügen, aber ich muss auf unser Hauptmenü genommen, das wir vorher erstellt haben. Wir müssen nun dieses Hauptmenü auf unsere Theme-Position des Haupt-Headermenüs setzen. Also wählen Sie diese, speichern Sie unsere Änderungen und beachten Sie unter dem Aussehen haben wir jetzt ein Menü-Menü. Wir können zurück zu unserer Website gehen, indem Sie auf diesen Link klicken nur hier. Sie können sehen, jetzt haben wir unsere Startseite und unsere Blog-Links aus unserem Menü. Das ist jetzt auf der linken Seite vorbei, aber das ist etwas, was wir jetzt leicht beheben können. Zurück zum Menü in Ihrer header.php Datei, die unser Menü umgibt, und in der Tat werde ich nur diese ungeordnete Liste entfernen. Wir haben immer noch dieses umgebende div mit den Bootstrap-Klassen. Wir werden das in einem Augenblick entfernen. Aber im Moment können wir dies als Referenz verwenden, da wir dies im Grunde durch die folgenden Parameter ersetzen. Der Themenspeicherort ist auf primär festgelegt. Das ist in Ordnung, da dies mit dem Namen in unseren Funktionen der primären nur hier verknüpft ist. Als nächstes haben wir die Tiefe des Menüs. Wir werden das auf einen Wert von Eins setzen. Da dieses Menü kein Dropdown-Menü ist. Unser Container hat auch die Klasse von justify-content-end. Also werde ich das kopieren und dies am Ende der Container-Klasse hinzufügen. Dadurch wird unser Menü wieder auf die rechte Seite verschoben. Die ID von navbar-nav, können wir dies nehmen und dies als Container-ID hinzufügen. Wir können auch den rechten Rand Wert von auto entfernen, da wir dies nicht in unserem Thema verwenden. Dies ist unser Container jetzt repliziert, und unten unten haben wir eine neue navwalker-Instanz erstellt jetzt Thema zu verwenden. Alles, was jetzt noch zu tun ist, ist das umgebende div, die Öffnung und auch die schließenden Tags des Browsers zu entfernen und dann können wir neu laden. Okay, gut, unsere Speisekarte wird jetzt nach rechts geschoben. Wenn wir zu den Entwickler-Tools gehen, indem Sie mit der rechten Maustaste klicken und überprüfen, Klicken Sie auf den „Inspektor“, und gehen Sie zum Menü. Wenn es das div mit der ID von navbar-nav findet, das jetzt alle unsere div und Klassen enthält, die im navwalker zurückgesetzt werden, und dann innerhalb verschachtelt haben wir unsere ungeordnete Liste und dann unsere Listenelemente. Wenn wir das jetzt schließen, können wir auf die Links klicken. WordPress hat jetzt die volle Kontrolle darüber, wo wir hingebracht werden. Wir sehen keinen der HTML-Links mehr oben. So funktioniert unser Menü jetzt wie erwartet und so können wir ein benutzerdefiniertes Menü zu unserem Thema hinzufügen. Als nächstes werden wir daran arbeiten, unsere Bilder zu reparieren. 23. Bildpfade: Unsere Bilder in unserem WordPress-Theme haben nicht funktioniert, seit wir mit der Konvertierung begonnen haben. Das ist etwas, was wir in diesem Video beheben werden. Wenn Sie mit der rechten Maustaste klicken und dann zu den Entwicklertools mit Inspektionen gehen, können wir die Konsole auschecken, indem Sie auf diese Registerkarte klicken. Wir haben eine Liste von vier oder vier Nachrichten von NOT_FOUND. Diese alle vier unserer Bilder, wie Sie hier sehen können. Das ist etwas, was wir ziemlich leicht beheben können. Es ist wirklich nur ein Fall, die Dateipfade für die Bildquelle zu ändern. Beginnen wir oben mit dem Haupt-Hintergrundbild, das die in header.php. Wenn Sie die Bildelemente, bei denen es sich um einen ordentlichen Feature-Abschnitt handelt, verschieben möchten, scrollen Sie nach unten. Das ist es, was wir nur hören müssen. Ich werde Bildquelle ersetzen. Vor unserem Dateipfad, um das PHP zu betreten, öffnen und schließen Sie dies ab. Hier drinnen werden wir eine PHP-Zeichenfolge Echo. Dann können wir die Escape-URL-Funktion verwenden, die überprüft und auch die bereitgestellte URL säubert, alle Zeichen entfernen, die nicht erlaubt sind, dann genauso wie bei uns, als wir das CSS in JavaScript-Dateien in den Funktionen hinzugefügt haben, können wir verwenden gets-Vorlagen-URI. Es ist ein Punkt auf das Stammverzeichnis unseres Themas. Sind Klammern an den Enden? Sind Semikolons am Ende? Wir müssen auch einen Schrägstrich vor dem Ordner Bilder hinzufügen. Da dies nicht standardmäßig des Projekts hinzugefügt und neu geladen wird. Jetzt haben wir unser erstes Bild wieder auf dem Bildschirm. Jetzt ist nur ein Fall, durch den Rest der Bilder des Themas gehen und dann [unhörbar]. Sie können dies kopieren und einfügen oder Sie können dies manuell eingeben , wenn Sie es vorziehen, die Dinge zu beschleunigen. Ich werde alles kopieren. Ein öffnendes PHP-Tag bis zum Schrägstrich, kopiert dies. Wir können den Rest der Bilder in unserer index.PHP finden. Lassen Sie uns eine Suche mit Befehl oder Steuerelement F machen, suchen Sie nach den Bild-Tags. Kopieren Sie nun unser PHP und fügen Sie es ein. Die erste, die zweite, die Kerzen, das Retreat-Bild. Die Kluft wird benötigt, um weiter unten zu gehen, wir haben ein anderes Bild hier für einen Teiler. Wir haben das Massage-Bild, wir haben die Gesichtskosmetik, und das sieht aus wie alle. Lassen Sie uns diese speichern und überprüfen Sie die alle verlinkten jetzt den Browser, Ich werde nach oben und unten scrollen und überprüfen, nur Bilder sind, wo sie sein sollten und alles sieht gut aus. Wenn Sie Probleme mit Bildern haben, stellen Sie sicher, dass Sie alle den PHP-Code an der richtigen Stelle eingefügt haben. Das sind unsere Bilder, wieder auf unsere Arbeit. Als nächstes werfen wir einen Blick auf die Template-Hierarchie, die nicht von Seite verwendet wird. 24. Vorlagenhierarchie und Titelseite: Wir gehen jetzt auf der Titelseite unseres Themas zu erstellen. Sie denken vielleicht, haben wir noch nicht unsere Homepage angezeigt? Ja, Sie haben Recht. Wenn wir das Thema besuchen, sehen wir den Inhalt des Index Punkt PHP. Dies liegt im Grunde daran, da wir jetzt eine geeignete Homepage Templates erstellt haben, WordPress wird standardmäßig zurück zu unserem Index Punkt PHP. Um besser zu verstehen, wie das funktioniert, gehen wir zu Google, und suchen Sie nach der WordPress-Vorlagenhierarchie. Das ist der Link, den wir oben brauchen. Vorlagen mit WordPress verwendet können wiederverwendbare Dateien sein, um unsere Webseiten anzuzeigen. Wir haben bereits die Kopf- und Fußzeilenvorlagen verwendet, die wir in unserem Thema wiederverwendet haben. Allerdings müssen nicht alle Vorlagen für das gesamte Thema verwendet werden. Wir können Seitenvorlagen erstellen, um nur einige Seiten anzuzeigen, oder sogar bedingte Rendering-Steuerung verwenden, wenn wir sie verwenden. Scrollen wir nach unten zur Template-Hierarchie im Detail Abschnitt, und dies ist der Abschnitt nur hier. Wir sind über herauszufinden, dass am einfachsten, WordPress verwendet ein Hierarchiesystem, um zu entscheiden, welche Vorlage steuert welche Seite. Aber in dem Moment, das ist ziemlich einfach, da wir nur wirklich den Index Punkt PHP haben bringt uns unser Thema wächst, das Sie bald werden. Wir müssen uns der Reihenfolge der Auswahl bewusst sein, die verwendet wird, da wir mehr verfügbare Seitenvorlagen haben. Wir werden die Index-Punkt-PHP-Datei verwenden, um unsere Blog-Beiträge anzuzeigen, die in WordPress ziemlich üblich ist, und erstellen Sie dann eine neue aus Seitenvorlagen. Wenn Sie zur Startseite Seite Anzeige gehen, die Sie hier sehen, wird WordPress standardmäßig die Seiten Homepage so einstellen, dass die neuesten Blogbeiträge angezeigt werden. Offensichtlich haben wir noch keine Blogbeiträge, und wir werden uns das Thema ändern. Es wird zuerst nach einem Home-Punkt PHP-Vorlagen suchen. Wenn dies nicht gefunden wird, wird es standardmäßig zurück auf den Index Punkt PHP. Das Wichtigste, was Sie hier merken sollten, ist, dass unsere Blogbeiträge standardmäßig zurück Indexseite werden , wenn keine passende Seite gefunden wird. Ist dann eine Notiz direkt darunter, die besagt, dass die Titelseite Punkt PHP beide überschreibt, und dies ist eine Datei, die als nächstes für unsere Homepage erstellt wird. Wenn wir nach unten scrollen, können wir jetzt die Titelseite Punkt PHP sehen. Diese Titelseite Punkt PHP wird verwendet, um die Seiten von Seite zu rendern, und das ist genau das, wofür wir es verwenden werden. Wenn die Titelseite Dot PHP nicht gefunden werden kann, werden wir dann nach einem sekundären Home-Dot PHP suchen. Danach, wenn diese Seite nicht gefunden werden kann, werden wir dann nach der Seite Punkt PHP suchen, und dann schließlich den Index Punkt PHP. Wenn wir noch weiter nach unten scrollen, können die Vorlagen, die wir für den einzelnen Beitrag, eine einzelne Seite, verschiedene Kategorien und vieles mehr verwenden. Viele davon werden wir während des Kurses nutzen, aber diese Seite ist immer eine gute Referenz, wenn Sie verstehen müssen, wie die Dinge funktionieren. Lassen Sie uns nun an der Erstellung der Titelseitenvorlagen arbeiten. Wenn wir zum Dashboard gehen, indem wir hier auf die obere Ecke klicken, können wir eine neue Seite erstellen, indem wir zu unseren Seiten Link gehen und dann neue hinzufügen. Dies ist, wo wir alle Seiten für unser Thema erstellen, würde mit der Erstellung der Homepage beginnen, und klicken Sie dann oben auf veröffentlichen. Wir können nun daran arbeiten, den Inhalt unseres Indexpunkts PHP auf die von der Seitendatei zu verschieben . Lassen Sie uns duplizieren oder kopieren und fügen Sie den Index Punkt PHP, und dann können wir dies die Titelseite Punkt PHP umbenennen. Da unsere Indexseite nicht mehr für unsere von Seite verwendet wird, können wir den gesamten Inhalt zwischen Kopf- und Fußzeile entfernen. Löschen Sie alle Abschnitte, wobei nur die Kopf- und Fußzeile übrig bleiben. Wir können überprüfen, ob dies in Ordnung ist, indem wir die Seiten besuchen, und wir sehen immer noch alle Abschnitte unserer Homepage. Warum sehen wir immer noch alle Inhalte unserer Homepage? Nun, das liegt daran, dass wir jetzt eine spezifischere Vorlagen oder Titelseite haben, und es hat jetzt alle Inhalte, die wir brauchen. Wir werden auf diese Indexseite im nächsten Abschnitt zurückkommen, wo wir diese verwenden, um unsere Blogbeiträge zu rendern. Das nächste, was zu tun ist, ist, zum Dashboard zu gehen, und hier unten in den Einstellungen. Dann können wir beim Lesen festlegen, welche Seite Sie sie für die Homepage und auch für alle Blogbeiträge anzeigen möchten. Auf unserer Homepage wird eine statische Seite angezeigt. Dies wird die Homepage sein, die wir zuvor erstellt haben. Speichern Sie Änderungen, und jetzt können wir loslegen. Wir können überprüfen, ob alles sauber von unseren Titelseiten-Vorlagen ist , indem wir einfach etwas in hier hinzufügen. Ich habe willkommene Würge-Bar geändert. Das ist genug, um zu hören, auch Titelseite, und das ist unser Text, der von der Titelseite kommt. Gut, das ist also unsere Titelseite jetzt Setup und unsere erste werden wir uns benutzerdefinierte Seitenvorlagen ansehen. Als nächstes wird zurück auf den Index Punkt PHP. Wir werden die WordPress-Schleife erstellen und unsere Blog-Beiträge anzeigen. 25. Den Loop abschließen: Wir werden jetzt auf einen Blick auf die berühmte WordPress-Schleife gehen, und wie wir es verwenden können, um durch alle unsere Blog-Beiträge Schleife und zeigen sie auf dem Bildschirm. Ich habe es einfach an die WordPress-Entwicklerseiten übergeben und dann im Loop-Abschnitt, uns ein bisschen mehr Informationen darüber geben kann, was die Schleife ist und was sie tun kann. Aber ich habe wahrscheinlich einen der wichtigsten und einfachsten Abschnitte hier hervorgehoben, im Grunde sagt, dass die Schleife jeden für die aktuelle Seite abgerufenen Beitrag einzeln durchläuft , und dann können wir eine Aktion für jeden Beitrag ausführen, der wird abrufen. Also im Grunde, was wir tun werden, ist Schleife durch jeden Beitrag, der in WordPress erstellt wurde, und dann können wir unseren Blog-Post in irgendeiner Weise strukturieren, die wir gerne mit HTML und auch einige WordPress-Funktionen verwenden. Wenn wir nach unten scrollen, können wir sehen, wie die Schleife in PHP aussieht. Das kann also ein wenig seltsam aussehen, wenn Sie PHP nicht gewohnt haben. Erstens, wenn Sie die PHP-Tags herausnehmen, was ziemlich viele von ihnen ist, wie wir in und aus dem Code gehen und dann einen Schritt zurück und sah Redis, wie es Englisch war. Wir sagen im Grunde, wenn verfügbar, indem wir Beiträge haben, wir werden dann eine Schleife verwenden, die eine while-Schleife genannt wird, und dann werden wir alle diese Beiträge durchlaufen und dann den Inhalt jedes Beitrags greifen. Dies bedeutet die Innenseite dieses while-Loop-Abschnitts. Wir haben dann Zugriff auf alle verfügbaren Post-Inhalte, wie den Titel, den Body Abschnitt, alle Tags oder Kategorien oder irgendetwas anderes, das wir erstellen. Danach alles, was wir tun, ist nur die Schleife zu schließen und dann den if-Abschnitt von oben zu schließen. Lassen Sie uns voran und erstellen Sie das jetzt. Im Moment in unserem Blog zu HTML. Dies ist alles nur statischer Inhalt und das ist in Ordnung für eine normale HTML-Websites. Wenn wir möchten, dass WordPress die Kontrolle darüber hat, wie diese Blog-Beiträge auf der Seite angezeigt werden. Also werden wir die Schleife erstellen und dann werden wir die Struktur für unsere WordPress Übergabe Dinge wie den Titel, das Datum und die Beschreibung erstellen für unsere WordPress Übergabe Dinge wie den Titel, . Wie ich bereits erwähnt habe, werden wir unsere Blog-Beiträge in der index.php erstellen. Wir können die Schleife zwischen der Kopfzeile und der Fußzeile schreiben. Beginnen wir mit dem Öffnen der PHP-Tags. Dann werden wir unsere if-Anweisung erstellen, um zu überprüfen, ob irgendwelche Beiträge vorhanden sind. Habe Unterstrich-Beiträge. Dies ist eine WordPress-Funktion, dann ein Doppelpunkt kurz danach. Dieser Doppelpunkt ist eine Kurzschrift oder eine alternative Syntax für PHP, was bedeutet, dass wir unseren Inhalt erst danach hinzufügen können, wenn diese Bedingung erfüllt ist. Dann schließe ich das mit einem endif und einem Semikolon ab, schließe das PHP am Ende ab. Also, wenn Sie Post zur Verfügung haben, was wollen Sie tun? Wir möchten unsere while-Schleife erstellen, um Beiträge zu durchlaufen, während sie verfügbar sind. So können wir die gleiche Funktion verwenden, wo wir Beiträge haben. Aber ich werde jeden durchlaufen. Verwenden Sie wieder einen Doppelpunkt, und dann erklären wir danach was wir tun wollen, während verfügbar gepostet. Wenn verfügbar gepostet, wollen wir die WordPress-Funktion verwenden, den Unterstrich Beitrag, den wir die Daten aus dem nächsten Beitrag in Zeile aufrufen, die wir schleifen und ein Semikolon am Ende, und dann können wir unsere while-Schleife mit endwhile. Dies wird aus der Schleife brechen, sobald wir alle Beiträge durchlaufen haben, Semikolon am Ende. Also, jetzt innerhalb dieses while-Abschnitts, haben wir die Post-Informationen. Wir können weitermachen und unsere HTML erstellen, um unsere Blog-Posts zu erstellen. Wenn wir voran gehen und fügen Sie ein HTML-Element wie ein dif, genau so, können wir sehen, dass der Texteditor dieses weiß hervorgehoben hat , da dies keine gültige Syntax ist. Dies liegt daran, dass wir einen PHP-Abschnitt mit den öffnenden und schließenden Tags erstellen und daher erwartet der Texteditor, dass alle Inhalte PHP sind. Aber da wir es jetzt auf HTML übertragen, müssen wir jetzt unser PHP schließen. Um dies besser lesbar zu machen, können wir dies alles auf die gleiche Zeile setzen. Dann springen wir nach diesem HTML zurück in PHP. Also müssen wir das noch einmal öffnen. Wir können dies auch auf die gleiche Zeile setzen, damit es besser lesbar ist. Jetzt hat die PHP alle die öffnenden und schließenden Tags, wir sind jetzt frei, den HTML hinzuzufügen, wo wir brauchen. Jetzt haben wir unseren Abschnitt, in dem wir unsere Blog-Post-Struktur erstellen können. Ich werde keine PHP-Funktion verwenden, die den Inhalt genannt wird. Öffnen Sie die PHP-Tags, schließen Sie diese und die WordPress-Funktion nennt den Unterstrich Inhalt. Dies wird verwendet, um den Inhalt des Blog-Beitrags aus der Datenbank zu filtern und dann auf dem Bildschirm zu rendern. Wir werden sehr bald darauf zurückkommen und weitere Inhalte zu unserem Blogbeitrag hinzufügen. Aber für jetzt werde ich noch Abschnitt hinzufügen. Wir sagen hier, wenn wir Beiträge haben und wir werden unseren Blog-Beitrag innerhalb zu konstruieren. Wenn nicht, können wir anderen Abschnitt hinzufügen, der Doppelpunkt. Also, wenn keine gepostet verfügbar, lassen Sie uns einige HTML erstellen, die p-Elemente, und dann einen Text von sorry, kein Beitrag entsprechen unseren Kriterien. Wir können sofort sehen, dass dies weiß hervorgehoben ist da wir unser PHP kurz oben schließen müssen. Danach können wir wieder loslegen. Dann werden wir unseren Text in eine Echo-Funktion umschließen. PHP unterstrichen also e, um dies dem Browser anzuzeigen. Dann als String können wir unseren Text mehr einfügen, ein Semikolon hinzufügen, das PHP schließen, und jetzt ist alles, wie es sein sollte. Mit dieser Unterstrich e-Funktion können Sie unseren Text später in einem Thema übersetzt werden, das ist ein ziemlich wesentlicher Teil eines Themas, es sei denn, Sie planen, eigene verwendet Thema für sich selbst in einer bestimmten Sprache. Das kann also ziemlich verwirrend aussehen, wenn Sie neu in all dem sind. Aber nur um zusammenzufassen, wir überprüfen, ob Post verfügbar ist. Wenn sie sind, durchlaufen wir mit einer PHP-while-Schleife und jedes Poster definiert innerhalb von WordPress, wir werden den Inhalt des Beitrags mit Umschließung der Schleife anzeigen. Dann ist kein Code mehr unten für den Lauf dieser Post verfügbar. Wenn diese Beiträge jedoch nicht verfügbar sind, wird der Abschnitt unmittelbar nach dem anderen ausgeführt und dann erhalten wir eine Meldung mit der Meldung: „Entschuldigung, kein Beitrag entspricht Ihren Kriterien. Wir werden später darauf zurückkommen, wo wir den Rest unseres Blogbeitrags konstruieren. Also sollten sie in einem zukünftigen Video ein wenig klarer aussehen. Dieser Index ist jetzt unsere Standard-Blog-Seite. Wenn keine spezifischere Vorlage gefunden werden kann. Wir müssen das auch jetzt für die Seitenvorlage tun, was eine Standardseite sein wird, wenn keine andere Seite gefunden werden kann. Lassen Sie uns alle auswählen, kopieren Sie dies, und wir können dies als unsere Basis verwenden. Innerhalb unserer Sidebar erstellen wir die Seite Punkt PHP Templates, fügen Sie diese in. Da dies die Standardseitenvorlagen ist, keine für Blogbeiträge, können wir sagen, dass keine Seiten Ihren Kriterien entsprechen. Schließlich kommentiert die Vorlage oben. Dies wird die Vorlage für die Anzeige aller einzelnen Post sein. Das ist es jetzt für unsere Loop-Basics, aber wir werden mit diesem in den kommenden Videos fortfahren , um den Rest unserer Blog-Posts zu konstruieren. 26. Dynamische Blog-Beiträge: Mit allen grundlegenden Schleife jetzt, alle Setup. Jetzt wird ein guter Zeitpunkt sein, um einige Blog-Posts hinzuzufügen, um tatsächlich Raum zu verlassen. Wir können dies tun, wenn wir zur Website gehen und dann zum Dashboard gehen. Unten in der Post Abschnitt, können wir gehen zu Alle Beiträge oder Hinzufügen Neu. Von hier aus werde ich den neuen Beitrag hinzufügen, so einfach Blog-Post 1. Einige einfache Beispieltext ein Absatz ist in Ordnung, fügen Sie es in. Wir können einige Tags hinzufügen. Lass uns Neuigkeiten, Updates holen. Dann veröffentlichen wir. Lässt zwei weitere hinzufügen. Klicken Sie auf „Add New“, phantasievoll mit Titeln, wenn Sie wollen, Blog-Post 2. Fügen Sie einige Beispielkontakte hinzu, dann gehen einige Tags für Make-up- und Schönheitsbehandlungen. Diese Typen werden auch auf dem Bildschirm angezeigt. Sobald Sie diese zu einer Schleife hinzufügen, können wir in einigen Kategorien hinzufügen. Wenn das in Ordnung ist, veröffentlichen Sie. Dann fügen wir ein drittes und letztes hinzu. Geht frei. Direkt unten können wir einen neuen Block auswählen, fügen Sie den Inhalt ein. Sie können natürlich hier auf das Plus-Symbol klicken und verschiedene Stile von Blöcken auswählen, wenn Sie es bevorzugen. Unterkategorien. Lassen Sie uns für Haare gehen und klicken Sie dann auf Veröffentlichen. Als nächstes brauchen wir irgendwo, es ist tatsächlich diese Blog-Beiträge anzuzeigen. Denken Sie daran, dass wir einen Blog-Link in unserem Menü erstellt haben. Wenn wir auf Seiten gehen und darauf klicken, haben wir alle Seiten hier, die wir aus unserem Menü früher erstellt haben. Auch wenn wir zur Website gehen, indem wir auf diesen Link klicken, dann klicken Sie auf den Blog-Link oben. Immer im Block Abschnitt sehen ist diese Kopfzeile und die Fußzeile ohne Inhalt dazwischen. Nun, um unseren Beitrag dazwischen anzuzeigen, müssen wir dies im Dashboard einrichten. Wir müssen zum Dashboard gehen, zu den Einstellungen, und dann von hier aus einlesen, genau wie wir unsere Homepage früher als Homepage festlegen. Wir können auch die Beiträge auf der Blog-Seite anzeigen. Speichern Sie diese Änderungen. Besuchen Sie unsere Website und gehen Sie dann zurück zu unserem Blog-Link.You sehen diese Beiträge auf hier angezeigt, weil wir die Index-Seite verwenden. Wenn Sie sich früher erinnern, als wir uns die Vorlagenhierarchie angesehen haben, wird die Indexseite immer die Standardseite unter Blogeinträgen sein. Wenn keine spezifischere Seite gefunden werden kann. Zurück zu unserem Index PHP. Wir können jetzt damit beginnen, dies zu konstruieren, um unsere Bootstrap-Vorlagen widerzuspiegeln. Wenn wir zu unserer Blog-Seite gehen, die das Blog zu HTML ist. Möchten Sie den gesamten Inhalt aus dem Hauptbereich kopieren. Von diesem Block Abschnitt hier, öffnen Sie es wahrscheinlich im Haupt-Tag. Dann den ganzen Weg hinunter zum schließenden Hauptcontainer. Kopieren Sie diese, zurück zur Indexseite. Fügen wir dies direkt unter der Kopfzeile ein. Zurück nach oben, wo wir unseren Blog-Beitrag haben. Ich werde die ersten paar löschen nur einen Blog-Beitrag an Ort und Stelle lassen. Blasen Sie einfach diese „coll-sm-8". Lasst uns diesen ersten greifen und entfernen und das gleiche mit dem zweiten machen, so dass nur ein Blog-Post an Ort und Stelle bleibt. Dieser Abschnitt wird ziemlich wichtig sein. Dies wird derjenige sein, den wir brauchen, um innerhalb der WordPress-Schleife Schleife. Dann können wir dies als Struktur für jeden Blog-Beitrag verwenden. Anstatt den hartcodierten Text wie neue Funktion zu haben, werden wir hier eine PHP-Funktion oder WordPress-Funktion hinzufügen, die jeden Titel aus der Datenbank greifen und dann platzieren Sie es hier. Vor diesem Hintergrund müssen wir dies nun als den Inhalt unserer WordPress-Schleife hinzufügen. Wir haben die Schleife unten erstellt. Gehen wir voran und greifen den Öffnungsabschnitt , der hier oben ist. Wir können das unser Haus nennen. Scroll-Sicherung. Vor allem Blogbeitrag. Lassen Sie uns dies mit einem Bedürfnis schließen. Zurück zu unserer Schleife. Wir können das Ende schneiden, während Abschnitt. Nehmen Sie das heraus und fügen Sie es dann direkt nach dem Ende unseres Blogbeitrags ein. Die nächste Stufe besteht darin, jeden statischen Inhalt zu durchlaufen, den wir im Blog-Post haben. Dann ersetzen Sie sie bei mit WordPress-Funktionen. Schnell schreiben Sie den Titel und h2-Tags. Dies kann durch eine Funktion namens Titel ersetzt werden. Dies ist PHP-Code. Wir müssen die PHP-Tags öffnen, sie schließen. Dann der Funktionsname des Titels, gefolgt von den Klammern Semikolon. Dies wie erwartet, wird den Blogbeitrag Titel für jeden Beitrag abrufen. Wenn wir das speichern und dann zum Browser gehen, können wir sehen, welche Wirkung dies hat, neu laden. Wir haben den dynamischen Titel der Blog-Beiträge 3, 2, 1. Der gesamte Rest des Inhalts wurde gerade durch den statischen HTML-Code ersetzt und dies ist für alle drei Beiträge gleich. Wir müssen weitermachen und das dynamischer machen. Wir können dies wieder mit WordPress-Funktionen, beginnend mit dem Datum, so entfernen Sie das hartcodierte Datum in das PHP. Im Inneren hier werden wir Echo, um dies anzuzeigen, der Browser und eine Funktion namens erhalten das Datum. Holen Sie sich das Datum wird in freien Argumenten innerhalb der Zitate zu nehmen. Wird ein Großbuchstabe F sein, ein Kleinbuchstaben j, dann ein Komma, um dies von einem Großbuchstaben Y zu trennen. Wenn Sie neu in PHP sind, diese Buchstaben F, j können diese Buchstaben F, j und Y seltsam aussehen. Alles, was wir hier tun, ist, die Formate festzulegen, die Tag, Monat und Jahr angezeigt werden sollen. Möchten Sie beispielsweise, dass ein im Januar erstellter Blogbeitrag als das Wort Januar oder nur Jan oder sogar als Monatsnummer 1 angezeigt wird . Wenn Sie mehr über diese Funktion erfahren möchten, können Sie zu WordPress gehen und nach Formatierung Daten und Uhrzeit suchen. Wenn wir hier drinnen nach unten scrollen, können wir sehen, was jeder dieser Buchstaben darstellt. Zum Beispiel haben wir das Kapital Y verwendet, das ein vierstelliges Jahr sein wird, genau wie wir hier sehen. Wir können das gleiche für den Monat und die Tage auch tun, um das genaue Format zu erhalten, das wir wollen. Nun, wenn wir dies ein Speichern geben, können wir dies im Browser überprüfen, unsere Blog-Seite neu laden und wir sehen, dass Datum jeder Beitrag erstellt wurde. Als nächstes wollen wir den Autor erst danach erstellen. Auf der gleichen Zeile haben wir einen Link zum Blogbeitrag Angebot. Anstatt die hartcodierte Version. Wir werden dies durch eine WordPress-Funktion ersetzen, die der Autor genannt wird. Das ist einfach genug, es braucht keine Argumente, es wird nur den Autor der Beiträge beschneiden, wir können neu laden. Der Autor ist in unserem Fall der angemeldete Benutzer , der ruhig admin ist. Ich werde das Wort nur kurz davor hinzufügen. Folgen Sie einfach einem Link hier können Sie hinzufügen, sagen Sie dies. In der Tat braucht es kurz danach einen Platz. Nachladen. Jetzt auf diesen Text unten. Wir können diese dynamischer zu machen, indem wir eine WordPress-Funktion namens Tags verwenden. Anstelle dieser hartcodierten Version werden wir diese entfernen. Fügen Sie eine PHP-Funktion hinzu, die die Unterstrich-Tags ist. Diese Funktion kann bis zu drei Argumente innerhalb der Klammern aufnehmen. Der erste ist der Text, den Sie hinzufügen möchten, bevor die Tags angezeigt werden. Ich werde das Wort getaggt hinzufügen, gefolgt von einem Doppelpunkt, einem Leerzeichen und einem Komma kurz danach. Der nächste wird das Trennzeichen sein. Dies ist, was zwischen jedem Tag erscheinen wird. Standardmäßig werden die Tags durch ein Komma getrennt. In unserem Thema verwenden wir das Tilda-Symbol. Lassen Sie uns dies mit dem Raum auf beiden Seiten hinzufügen. Wir können auch ein optionales drittes Argument hinzufügen, bei dem es sich um einen beliebigen Text handelt, den Sie nach dem Tag anzeigen möchten. Aber ich lasse das einfach so, wie es ist, zum Browser. Nachladen. Unser Blogbeitrag Feed hat keine Tags. Für die zweite hat man den Vor-Text von Tags. Wir haben jedes einzelne Tag mit der Tilda trennt jedes einzelne, auch als zwei bekannt. Wenn wir den Mauszeiger über jedes dieser Tags bewegen. Diese auch Links zu und wenn wir auf diese klicken, führen wir auch zu einer Seite, die alle Beiträge mit diesem speziellen Tag anzeigen wird. Wir hatten mehrere Beiträge mit dem gleichen Tag. Es würde alles auf einer Liste erscheinen. Dies ist wie fast jetzt mit dem Blogbeitrag fertig. Der letzte Teil des Bodens ist der Inhalt. Wir wissen bereits, wie man das packt. Wir haben bereits die Funktion unten unten, was der Inhalt ist. Das könnte einen Platz verdienen. Dann verschieben Sie das wieder auf unseren Blog. An dieser Stelle anstelle unseres Lorem ipsum Text an diesem Ende und lasst uns neu laden. Jetzt auf einem Blogbeitrag Listing. Genau so sieht die Menge an Inhalten, die wir haben, nicht so schlecht aus. Aber wenn dies viel länger wäre, wie fünf, sechs, sieben Absätze, würde jede Seite wirklich lange anstelle dieses Inhalts. Was wir oft auf einer Seite wie dieser tun wollen, ist, den Text zu verkürzen, der angezeigt wird. Wir können dies mit einer WordPress-Funktion namens Excerpt tun. Anstatt den Inhalt, werden wir das in den Auszug legen. Dies sollte nun im Browser eine kürzere Version anzeigen. Diese Seite wird nicht zu lange. Dann, wenn der Benutzer will, um die Vollversion zu lesen, können sie dann auf diesen Blog-Beitrag klicken und sie werden auf eine vollständige einzelne Seite genommen werden.Dies ist, was wir bekommen, um mit im nächsten Video zu arbeiten. 27. Der Permalink: Wir werden eine verkürzte Version des Blog-Beitrags im letzten Video mit einer PHP- oder WordPress-Funktion namens Auszüge haben. In einem typischen Blog möchten wir auch, dass dieser Beitrag mit der Vollversion auf einer neuen Seite verlinkt wird, wenn Sie darauf klicken. Um dies zu tun, werde ich diesen Blogbeitrag Titel anklickbar machen, die alle auf diese einzelne Seite im vollen Inhalt angezeigt und auch einen Lese mehr Link unter diesem Auszug erstellen, um auf die Vollversion zu verlinken. Um dies zu tun, wollen wir zu gehen, wo alle Blogs produziert werden, und dies ist im Index Punkt PHP. Innerhalb der Schleife haben wir diesen Blogbeitrag Titel. Ich möchte dies in einem HTML-A-Tag umgeben, das vor dem Titel steht und kurz danach können wir das schließen. Innerhalb dieses Links müssen wir die HREF-Attribute zur Verfügung stellen. Dann wird dies zu unserem Permalink verlinken. Öffnen Sie das PHP. Schließ das ab. Dann können wir hier auf den Permalink verlinken, fügen Sie die Klammern kurz danach und das Semikolon hinzu. Permalink ist, was WordPress die aktuelle URL nennt. In unserem Fall wird es die URL für jeden Blog-Beitrag sein. Wenn wir das speichern und dann zum Browser gehen, können wir jetzt aktualisieren. Jetzt sehen, wenn Sie den Mauszeiger über jeden Blogbeitrag Titel bewegen, ist dies jetzt ein Link. Wir können dann auf klicken und dann nehmen wir es auf eine Seite mit nur diesem Blog-Beitrag. Wir können auch im Titel sehen, dies hat seine eigene eindeutige URL, die die gleiche wie der Titel ist. Dies ist Blog-Beitrag 3. Klicken Sie auf Nummer 1, und die URL ist genau die gleiche. Wir werden später im Kurs auf diese Seite zurückkommen, um den vollständigen Inhalt des Blogbeitrags anzuzeigen , anstatt nur den Auszug, den wir hier sehen. Nun gehen wir zu dem Read More Text direkt unter diesem Auszug. Geh zurück. Dann können wir in unserem Index von PHP etwas Platz unter dem Auszug machen und dann ein neues div erstellen, das der Wrapper für unseren Text sein wird. Ich werde eine Bootstrap-Klasse hinzufügen, die mit MB und einem Wert von drei einen Rand unten sein wird. Der Inhalt wird auch ein Link sein, so dass wir dies in den A-Tags hinzufügen können. Schließ das ab. Wir können hier einfach jeden Nur-Text ausgeben, den Sie wollen. Aber stattdessen werde ich etwas PHP hinzufügen, was die Unterstriche E-Funktion sein wird, die dem Browser einen Text widerspiegelt oder anzeigt. Dies bedeutet auch, dass dies später im Kurs übersetzbar ist. Wir können den Text von mehr lesen hinzufügen. Dann, wie wir oben mit dem Titel getan haben, können wir auch den Permalink hinzufügen, um auf die URL für diesen aktuellen Blogbeitrag zu verlinken. Der HREF wird gleich dem Permalink sein. Speichern Sie dies und wir können es im Browser testen. Gehen Sie zurück zu unserem Blog. Klicken Sie auf eine dieser Optionen. Siehe den Text „Mehr lesen“. Dies wird nun auch zu unserem vollständigen Blogbeitrag verlinken. Wieder mit der URL als Titel festgelegt. Wir haben noch keine Vorlage für die einzelne Blogbeitrag-Seite festgelegt. Es wird standardmäßig zurück zu unserem Index Punkt PHP. Deshalb sehen wir nur die verkürzte Version unseres Blogbeitrags. Nur hier. Nun, das ist etwas, was wir in einer Weile reparieren werden. 28. Seitennummerierung: Wir werden uns darauf konzentrieren eine wichtige Funktion namens Paginierung zu unserer Blog-Seite hinzuzufügen. Im Moment haben wir nur drei einzelne Blog-Beiträge, das sind vier mit dem Beispiel eins. Aber wenn wir Hunderte von Blog-Beiträgen hätten, würde diese Seite wirklich lange werden. Paginierung ermöglicht es uns, die Beiträge in separate Seiten aufzuteilen. Wir können dann auf einige vorherige und nächste Schaltflächen klicken, um durch alle unsere Beiträge über in der index.php von unseren Bootstrap-Vorlagen zu blättern , wir haben bereits unsere Links für die nächste Seite und vorherige Seite, also werden wir zwei Dinge in diesem -Video. Wir werden zuerst unsere vorherige und nächste Seite Text durch einige WordPress-Funktionen ersetzen , um die Funktionalität für diese zu bieten, um dies zu funktionieren. Wir werden dies auch außerhalb der Schleife entfernen, so dass wir im L-Abschnitt nur den Text unten haben. Lassen Sie uns daher beginnen, indem wir unseren Navigationsbereich mit unserer ungeordneten Liste und auch dem schließenden div unten ausschneiden mit unserer ungeordneten Liste , also setzen Sie dies fehl am Platz. Dann geht das direkt nach dem Endif-Abschnitt, der das Ende unserer Schleife ist. Hier unten können wir das einfügen und es einfach zurückrücken. Okay, fangen wir mit der nächsten Seite an. Wir werden diesen Text durch eine PHP-Funktion ersetzen. Öffnen Sie PHP und dann werden wir die WordPress-Funktion namens next_posts mit einem s verwenden und dann Link, Semikolon am Ende. Dann werden wir die vorherige Seite durch eine sehr ähnliche WordPress-Funktion ersetzen. Dies wird vorherige Posts Link sein, getrennt durch die Unterstriche, Semikolon am Ende, und dann schließen Sie die PHP. Speichern Sie diese Datei, und dann über in den Browser. Lassen Sie uns die Seite neu laden. Wenn wir nun nach unten scrollen, sehen wir immer noch unsere Blogbeiträge, aber wir sehen unsere Schaltflächen für die vorherige und nächste Seite nicht. Dies liegt daran, dass wir nicht genug Blogbeiträge haben, um die Paginierung tatsächlich zu erstellen. Wir können zum Dashboard gehen und dann zu Einstellungen gehen. Im Lesebereich müssen wir auf die Blog-Seiten achten, höchstens zeigen. Wir haben diesen Satz auf 10 Beiträge gesetzt, so dass wir keine neue Seite erstellen, bis wir 10 oder mehr Beiträge haben. Um dies in Aktion zu sehen, lassen Sie uns dies auf fünf reduzieren, speichern Sie die Änderungen. Jetzt können wir weitermachen und einige neue Blog-Beiträge erstellen. Ich habe 1, 2, 3. Lassen Sie uns Nummer vier erstellen. Kopieren Sie den Beispieltext, fügen Sie ihn in ein. Wir können hier einige Tags hinzufügen. Veröffentlichen Sie diese. Blog-Beitrag fünf, einige Beispieltexte. Lassen Sie uns für eine weitere gehen, wir werden Nummer sechs tun, Blog-Post 6 fügen Sie dies in und veröffentlichen. Jetzt können wir unsere Seiten überprüfen, indem wir die Blog-Seite besuchen. Wir haben die Nummer 6, 5, 4, 3 und 2, also gibt es fünf Blogbeiträge. Jetzt haben wir die nächste Seite Link. Wenn wir darauf klicken, haben wir den Blogbeitrag 1 und auch unser Hello World Beispiel. Wir können auch auf vorherige klicken, um zurück zu gehen. Dies wird unsere Blog-Seite davon abhalten, wirklich lange zu werden, wenn wir viele einzelne Beiträge haben. Dies ist, wie wir eine Paginierung zu unserem Thema hinzufügen können. Als nächstes werden wir einen Blick auf die Verwendung von Filterhaken werfen. 29. Filter-Hooks: Die nächste Aufgabe besteht darin, die eckigen Klammern zu entfernen, die sich am Ende unseres Blogbeitrags befinden. Ich werde die Klammern entfernen und dann einfach die drei Punkte kurz danach lassen. Dies ist völlig optional, aber ich bevorzuge, wie das aussieht. Diese werden automatisch an Ort und Stelle hinzugefügt, wenn die Funktion „Auszug“ verwendet wird, um die verkürzte Version anzuzeigen. Es gibt uns auch eine Chance zu sehen, wie wir auch einen Filterhaken verwenden können. Wenn Sie nicht wissen, was ein Haken ist, Haken ermöglicht es uns, in den Rest von WordPress Haken, so dass wir eine Aktion oder einen Filter zur Verfügung stellen. Im Falle dieses Videos verwende ich einen Filterhook namens „excerpt_more“. Um mehr über diese Hooks und andere WordPress-Funktionen zu erfahren, können wir zu developer.wordpress.org/reference gehen. Diese Seite ändert sich im Laufe der Zeit. Seien Sie nicht zu überrascht, wenn das ein wenig anders aussieht. Sie sehen, hier können wir durch die verfügbaren Funktionen, Hooks, Klassen und Methoden, die WordPress bietet durchsuchen . Wenn wir auf den Haken Link klicken, werden wir zu allen verfügbaren Haken, auf die wir Zugriff haben, weitergeleitet. Es gibt eine Menge davon. Ich werde auf diese Lupe klicken und eine Suche nach 'excerpt_more' machen und wir sehen das auftauchen. Ich werde danach suchen. Dann haben wir die Code-Referenz für den 'excerpt_more' Filterhook und wir können sehen, dass dies ein Filter ist, der die Zeichenfolge in dem „mehr Link“ filtern wird, der nach einem getrimmten Auszug angezeigt wird. Das ist perfekt für das, was wir brauchen. Gehen wir rüber zur 'functions.php' nach oben. Drinnen haben wir bereits einige Action-Hooks früher benutzt. Wir haben bereits das 'after_setup_theme' verwendet, das hier ist. Wir werden unser „tranquilwp“ Setup direkt nach diesem Hook, harter Lauf ausführen. Wir haben auch 'wp_enqueue_scripts verwendet, die direkt danach unsere eigenen 'tranquilscripts' ausführen werden. Ich werde unseren eigenen Filter direkt nach dieser Zeile hinzufügen. Aber trotzdem brauchten wir das PHP. Ich werde eine PHP-Funktion erstellen. Ich werde das alles nennen, was du wählst. Ich möchte meinen 'new_excerpt_text' durch die Unterstriche getrennt aufrufen. Öffne die geschweiften Klammern. All diese Funktionen, die tun müssen, ist eine Zeichenfolge zurückzugeben. Wir haben alles, was wir anstelle der eckigen Klammern anzeigen möchten. Wir können die return-Anweisung verwenden, um eine Zeichenfolge zurückzugeben. An Ort und Stelle werde ich nur die drei Punkte mit einem Semikolon am Ende hinzufügen und die Zeichenfolge kann jeder Text sein, den Sie bevorzugen. Sie können sehen, dass wir gerade hier einen Fehler haben. Ich denke, wir müssen am Ende ein Semikolon hinzufügen, und das wird das beheben. Dann können wir nach unserer Funktion unseren Filter mit 'add_filter' hinzufügen. Dies erfordert zwei Argumente. Der erste ist der Filtername , der 'excerpt_more' ist, den wir gerade in der Dokumentation betrachtet haben, getrennt durch ein Komma. Das zweite Dokument ist der Name, den wir unserer Funktion direkt oben gegeben haben. Dies ist neu und fügen Sie dies als eine Zeichenfolge, neuen Auszug und dann Text, Semikolon am Ende und dann über zu unserem Thema im Browser, es lädt neu. Nun, es sind nur drei Punkte am Ende ohne die eckigen Klammern. Ich denke, das gibt einen viel saubereren Blick auf unseren Blog. Für den Schlüssel zum Mitnehmen ist daran zu erinnern, dass jedes Mal, wenn wir etwas in WordPress tun wollen, gibt es oft einen Haken für diese zu verwenden, und es braucht nur eine Suche in der Dokumentation, um sie zu finden. Denken Sie auch daran, nie versucht zu sein, die WordPress-Kerndateien direkt für die Verwendung dieser Haken in unseren benutzerdefinierten Themen oder unsere Plugins zu ändern ist völlig in Ordnung. 30. Die Seitenleiste neu einführen: Auf unserer Blog-Seite haben Sie vielleicht bemerkt, dass wir nicht die Sidebar auf der rechten Seite haben, die wir in unseren Bootstrap-Vorlagen hatten. Dies liegt daran, dass wir dies immer noch innerhalb unserer Wordpress-Schleife in der else Abschnitt. Dies wird nicht auf dem Bildschirm gerendert, solange wir derzeit Blogbeiträge haben. Um dies zu beheben, können wir zu unserer index.php gehen und dann, wenn wir zu unserem else Abschnitt gehen, kurz danach, haben wir diesen beiseite Abschnitt , der der Wrapper für unsere Sidebar ist. Wenn wir alle beiseite Abschnitt auswählen, dann schließen sie auch und rollen auf Behälter. Da alles, was darin enthalten sein muss. Das ist nur das hier. Dann werde ich dies direkt nach dem nächsten und vorherigen Postlink direkt über dem Fußzeilenabschnitt hinzufügen, wir können dies einfügen. Lassen Sie den zugewiesenen Abschnitt an Ort und Stelle, werde ich alle divs hier wegnehmen. So codiert alle Blöcke aus unserer Sidebar und wir können jetzt diesen Inhalt verwenden, um in unsere sidebar.php zu gehen. Einfach aufgeräumt, einfache kleine Bits. Nehmen Sie den Inhalt und öffnen Sie dann die Seitenleiste und gehen Sie zu unserer sidebar.php. Wir können diesen Inhalt hier einfügen. In ähnlicher Weise, wie wir mit der Kopf- und Fußzeile, innerhalb unserer index.php, können wir den Inhalt einer Sidebar mit einer WordPress-Funktion wieder einführen. Hier unten haben wir die Fußzeile für die Sidebar verwendet, wie Sie wahrscheinlich erraten haben, wir müssen get sidebar verwenden. Öffnen und schließen Sie das PHP. Dann Wordpress-Funktion, die Unterstrich Sidebar erhält, die Klammern und das Semikolon. Standardmäßig erhalten Sidebar, wir werden nach einer Datei namens sidebar.php suchen. Wenn Sie jemals die Notwendigkeit haben, mehr als eine Seitenleiste in Ihr Design einzuführen, z. B. eine sidebar-dark.php. Wenn wir diese Datei hatten, werden wir, würde dann entfernen Sie die Sidebar Abschnitt und dann fügen Sie einfach den Namen dunkel hier. Dann würde dies nach der Sidebar dark.php Datei suchen und dann anstelle des Standardwertes hinzufügen. Wir brauchen das nicht, also werde ich das einfach löschen und bis es leer ist. Das ist jetzt genau das, was wir zuvor in unseren Bootstrap-Templates hatten. Der einzige Unterschied besteht darin, dass der Inhalt der Seitenleiste jetzt in eine separate Datei ausgelagert wird, genau wie mit der Kopf- und Fußzeile. Jetzt können wir dies im Browser ausprobieren und die Seitenleiste wird nun wieder auf unsere Seite eingeführt. Wir kehren zurück zur Sidebar als nächstes, wo wir all diesen HTML-Code mit dynamischen Inhalten ersetzen und WordPress erzählen. 31. Die Seitenleiste dynamisch gestalten: Anzeige dieser Seitenleiste auf der Seite ist nun ein Schritt in die richtige Richtung. Im Moment haben wir nur die Dummy-Daten, die zu unserem Thema hinzugefügt wurden. Darauf konzentrieren wir uns in diesem Video. Zunächst einmal ist der obige Block an der Spitze nur ein einfacher einfacher Text. Wir können das so lassen, wie es ist. Danach haben wir unsere dynamischen Abschnitte von Archiven und Kategorien, und wir können mit diesen über in der sidebar.php arbeiten. Dies ist der oberste Block mit dem Text. Das zweite ist die Archive. Was wir tun müssen, müssen wir unsere kostenlose Listenelemente entfernen , die wir innerhalb der bestellten Listen haben, und dann anstelle dieser können wir eine WordPress-Funktion namens wp_get_archive hinzufügen. Klammern, und dann Semikolon am Ende. Lassen Sie uns diese Arbeit im Browser überprüfen. Nachladen. Gut, ich habe diese Blogbeiträge nur in einem Monat erstellt. Wir sehen nur den einen Monat in den Archiven erscheinen. Wir können darauf klicken, wir sehen, dass das Datum in der URL gefüllt wird, und auch die Plug Posts, die wir in diesem Monat erstellt haben. Gehen wir nun zu den Kategorien direkt darunter. Wir können eine sehr ähnliche Sache tun, indem wir unsere beiden Listenelemente entfernen und diese dann durch eine WordPress-Funktion ersetzen. Diese WordPress-Funktion wird diesmal wp genannt. Diese Kategorien, sieh dir das an. Sie haben mehrere Kategorien, also Aktualisieren. Wir haben die Neuigkeiten, Angebote und auch einen Abschnitt für alle nicht kategorisierten Blog-Beiträge. Standardmäßig haben wir auch den Titel einer Kategorie an der Spitze. Wir haben dies jedoch bereits als Überschrift. Wir können dies entfernen, wenn wir auf die WordPress-Funktion der Listenkategorien zurückgehen. Drinnen hier als String, können wir den Titel setzen. Also title_li. Ich werde das einfach so einstellen, dass es nichts gleich ist. Speichern Sie diese, Neuladen und der Titel wurde aufgehoben. Wenn Sie auch die WordPress-Funktionsreferenz überprüfen möchten, finden Sie viele andere Argumente zu finden, falls erforderlich. Beispiel die Möglichkeit, Kategorien zu sortieren, fügen Sie ein zusätzliches Styling hinzu und fügen Sie ein Trennzeichen zwischen den einzelnen Kategorien hinzu. Ich werde das nur für jetzt verlassen, da wir das Styling bereits mit Bootstrap hinzugefügt haben. Wir können nun auf „Kategorie“ klicken, lassen Sie uns für News gehen. Wir werden sehen, wie ein kostenloser Blog-Beitrag hier bietet. Wir haben nur zwei, die mit Angeboten markiert sind, und dann alle, die nicht in eine Kategorie fallen. Das letzte, was wir in unserer Sidebar haben, sind unsere Social-Media-Symbole. Nach Ihren eigenen Social-Media-Seiten hier. Ich werde nur eins als Beispiel hinzufügen, also lasst uns für Twitter gehen. Sie können den Link mit HTML-Elementen hinzufügen. Wir können den Link Standort mit der href finden : https://twitter.com/chrisdixon161. Schließ das ab. Dann können wir kurz nach unseren i Elementen unseren Link schließen und dann einrücken. Ich werde jetzt den Rest Ihnen überlassen, wenn Sie weitermachen und weitere Social-Media-Links hinzufügen möchten . Sobald du damit fertig bist, werde ich dich dann im nächsten Video sehen. 32. Bedingte Tags in WordPress: Wenn wir uns unsere ursprünglichen Bootstrap-Vorlagen ansehen, die ich hier geöffnet habe, haben wir den Text der voll responsive Premium-Spa-Theme für WordPress in der Kopfzeile. Dann, wenn wir auf den Blog-Sektion klicken, ändert sich der Text in Ruhe Spa offiziellen Blog. Mauszeiger zurück in unserer WordPress-Version, wir haben nur den gleichen Text, wenn wir auf beide Seiten klicken. Da beide Dateien unsere header.php verwenden, was bedeutet, dass der Text derselbe sein wird. Um dies zu beheben, werden wir uns ansehen, wie wir einige benutzerdefinierte PHP-Code in unser Theme hinzufügen können. Dieser Code erkennt, auf welcher Seite wir gerade sind, und dann können wir den Text auf der Grundlage der Seite bedingt rendern. Dieser Text wird in der Datei header.php gespeichert. Lass uns da drüben arbeiten. Wenn wir den Feature-Textbereich finden, werde ich den Text von hier entfernen, also schneiden Sie diesen aus, und dann werden wir an Ort und Stelle einige benutzerdefinierte PHP hinzufügen. Dies wird unsere eigene benutzerdefinierte PHP-Funktion sein und nichts mit WordPress zu tun. Nennen wir dies das Feature Textkapital T. Wir können dies jetzt in unseren Funktionen dot PHP einrichten, lasst uns rüber zu hier gehen. Dann direkt nach unserem Filter, noch innerhalb der PHP-Tags, können wir diese Funktion erstellen, die als Feature-Text bezeichnet wird. Innerhalb des Körpers dieser Funktion besteht die Aufgabe darin, zu überprüfen, ob wir auf der Titelseite oder auf der Blog-Seite sind und dann den entsprechenden Text anzuzeigen. Wir können dies mit einer if-Anweisung tun, um zuerst mit der WordPress-Funktion zu überprüfen, ob die Seite die Titelseite ist. Wenn ja, dann fügen wir danach einige geschweifte Klammern hinzu. Es ist Titelseite, ist ein WordPress-Bedingungs-Tag, dem wir den Text setzen, den wir für die Titelseite wollen. Genau so, können wir einen Unterstrich hinzufügen, e, das Echo unseren Text. Dies wird eine Zeichenfolge sein, die in den Zitaten hinzugefügt werden soll. Ich zitiere die Texte vorher aus der Kopfzeile, so dass wir dies jetzt wieder an Ort und Stelle einfügen können. Lassen Sie uns überprüfen, dass alles im Browser funktioniert. Stellen Sie sicher, in der WordPress-Version, oops, und wir haben einen Fehler. Zeile 43, Semikolon nochmals, speichern, neu laden und es gibt Text auf unserer Homepage. Wenn wir jedoch zu unserem Blog gehen, sehen wir, dass kein Text generiert wird. Dies liegt daran, dass wir den Text nur setzen, wenn die Seite die Titelseite ist. Wenn es nicht die Titelseite ist, können wir eine nie bedingte Tag namens ist home hinzufügen. Die Funktion is home bezieht sich auf die Blog-Beitrag-Seite. Betrachtet man dies in einem else-if-Abschnitt, innerhalb der Klammern, verwenden wir unser bedingtes Tag von ist home. Öffnen Sie die geschweiften Klammern und möchte etwas Ähnliches wie vorher tun. Wir werden auf den Browser Echo und es ist Akte der ruhigen Spa, offiziellen Blog mit einem Semikolon am Ende. Speichern wir das und laden Sie es neu. Unser Text des ruhigen Spa offiziellen Blog wird jetzt auf der Blog-Seite angezeigt. Wenn Sie neu sind, wenn else Anweisungen werden sie den Code innerhalb der geschweiften Klammern ausführen. Wenn beispielsweise von Seite true zurückgibt, dann wird der Text innerhalb dieser geschweiften Klammern ausgeführt. Wenn wir nicht auf der Titelseite sind, werden Sie dann auf den nächsten Abschnitt zurückgreifen, der elseif ist. Checken Sie ein, ob die Seite zu Hause ist, und dann wird der Code innerhalb der Reihe von geschweiften Klammern statt. Wir können auch mehrere elseif Abschnitte hinzufügen und wir werden dies später im Kurs tun. Am Ende finden wir heraus, wenn keine dieser Bedingungen erfüllt ist, können wir einen letzten L-Abschnitt hinzufügen. Dies fungiert als Fallback, wenn keine der beiden oben genannten Bedingungen erfüllt ist. Wenn nicht, werden wir nur auf dem Bildschirm den Standardtext, den wir auf der Homepage haben, Echo . Fügen Sie dies in und dies funktioniert für Dinge wie eine folgen vier Seiten oder eine der Seiten, die wir nicht setzen den benutzerdefinierten Text. Wir werden diese Funktion weiterhin hinzufügen, da wir mehr Seitenvorlagen erstellen, beide Analysen, alles, was wir brauchen. Als Nächstes gehen wir zu unseren einzelnen Seitenvorlagen. 33. Die Vorlage Single.php: Im letzten Abschnitt, als wir diese Blog-Seite erstellt haben, haben wir auch eine permanente Funktion hinzugefügt, die es erlaubt, diese auf die vollständige Blogbeitrag-Seite zu verlinken. Wenn ich auf den Titel klicke, werden wir zu einer einzigen Post-Ansicht weitergeleitet, um mehr Details über den Beitrag zu sehen. Im Moment sehen wir jedoch immer noch die verkürzte Version des Blogbeitrags, den ganzen Auszug, wie er genannt wird, und wir können auch den lesen mehr Text unten sehen , den wir auch entfernen müssen. Dies liegt daran, dass das Design standardmäßig in die Datei index.php zurückkehrt, wenn die spezifischste Datei nicht gefunden werden kann. In diesem Video möchte ich jetzt eine neue Seitenvorlage Tranquil namens single.php erstellen, und dies ist eine Datei, die von WordPress als Vorlage erkannt wird , um einen einzelnen Blog-Beitrag anzuzeigen. Lassen Sie uns zu unserem Texteditor in der Wurzel des Projekts gehen. Klicken Sie auf „Neue Datei“. Dies ist die single.php. Wir können wie immer mit unseren Kommentaren an der Spitze beginnen. Öffnen oder schließen Sie die PHP-Tags, und dann fügen wir einen Kommentar mit dem Schrägstrich hinzu, und dann schließen die Sterne ab. Es wird tatsächlich die Vorlage für die Anzeige aller Blogbeiträge sein. Da diese Datei viele Ähnlichkeiten mit der index.php teilen wird, gehe ich dorthin und kopiere den Inhalt zunächst. Unten unten von der Fußzeile kopieren wir alles bis in die Kopfzeile. Übernehmen Sie dies und fügen Sie dies direkt unter unseren Befehlen in einer single.php hinzu. Beginnen wir ganz oben in dieser Datei. Der Titel, wir wollen nur den Titel an der Spitze des Blog-Beitrags anzeigen. Wir brauchen dies nicht, um auf den vollständigen Beitrag zu verlinken, da wir bereits dort sind. Wir können den Link entfernen, der diesen umgibt. Entfernen Sie diese, wir sollten jetzt auf unserer single.php verlassen. Wenn wir neu laden, sollten wir jetzt sehen, dass wir nicht auf diesen Seitentitel klicken können, was bedeutet, dass die einzelne Datei, die wir erstellt haben, jetzt wirksam wird. Das nächste, was zu tun ist, ist, diese Texte hier zu machen, den vollständigen Inhalt statt den Auszug. Wenn wir nach unten zu dem Auszug scrollen, das ist diese Funktion gerade hier, alles, was wir tun müssen, ist es einfach zu ändern, um den Inhalt zu sein, und das ist jetzt die Vollversion unseres Blogbeitrags Inhalt. Wir haben nur den einen Absatz für den Moment. Wir können sehen, dass dies der vollständige Inhalt ist, den wir haben. Der nächste Schritt besteht darin, diesen lesen Sie mehr Text zu entfernen. Da wir bereits den vollständigen Blog-Post haben, über single.php, wenn wir nach diesem Lesen mehr Text hier suchen, werde ich den vollständigen Link oder das vollständige div entfernen, das dies umgibt. Wir brauchen nichts mehr von dem. Sagen Sie das und der Text ist jetzt verschwunden. Lassen Sie uns nur bestätigen, dass das alles in Ordnung ist, wenn wir zurück zu unserem Blog gehen, sehen wir immer noch die verkürzte Version. Wir sehen immer noch den Link für den Titel und den lesen mehr Text. Zurück zu unserer single.php. Um dieses Video einzuschließen, wenn Sie bemerken, oben haben wir den Standard-VG-Text. Dies liegt daran, dass wir in der functions.php den else Abschnitt als Fullback erstellt haben, wenn keine spezifischere Seite in den beiden gefunden wird. Also die Standardeinstellung zurück zu dem Text, den wir hier sehen. Allerdings wollen wir den Text von Tranquil Spa Official Blog, da wir immer noch im Blog-Bereich sind. Wir können einen Operator innerhalb dieser sonst wenn Abschnitt hinzufügen, um zu überprüfen, ob die Seite zu Hause ist, oder wir können die beiden Rohre verwenden, um zu überprüfen, ob dies ist, wenn zu Hause oder auf Single ist, was auf die single.php Vorlagen zeigen wird. Nun, über die einzelne Datei und unser Text wird jetzt als offizieller Blog angezeigt. Wir werden zu diesem einzelnen Beitrag im nächsten Video zurückkehren und wir zeigen Ihnen, wie Sie die Paginierung einschließen können. 34. Seitennummerierung: Willkommen zurück. In diesem Video werden wir die Paginierung einführen. Dies ermöglicht es uns, unseren Blogbeitrag auf zwei Arten zu organisieren. Zunächst einmal können wir wirklich lange Beiträge in kleinere, mehr überschaubare Seiten aufteilen , die dann Seitenzahlen am unteren Rand haben, auf die Sie klicken können, um zwischen ihnen zu überspringen. Zweitens, wenn wir auf der einzelnen Post-Ansicht sind, können wir dann einen Link am Ende des Beitrags hinzufügen. Dies geben vorwärts und rückwärts zum nächsten oder vorherigen Beitrag. Beginnen wir mit dem Hinzufügen eines Pager, wenn wir einen wirklich langen Blog-Beitrag haben. Dies ist eine wirklich einfache Sache zu tun. Wir müssen zum Editierbeitrag hinübergehen. Gehen Sie in einen Blog-Beitrag und klicken Sie dann auf Bearbeiten, wird dann in den Bearbeitungsbereich des Dashboards nehmen und hier sehen wir, dass wir einen Absatz Text haben. Wenn wir dann auf das Plus-Symbol oben klicken, können wir einen neuen Block für alle Post einfügen. Ich werde eine Suche nach Seitenumbruch machen. Klicken Sie dann auf den Seitenumbruch nur hier. Dann können wir weiter mit unseren Inhalten, die ich werde nur diesen Absatz kopieren und dann einen neuen Block hinzufügen , der ein Textabsatz sein wird. Fügen Sie das hier ein. Lasst uns noch einen machen. Unmittelbar darunter können wir einen neuen Block hinzufügen, einen neuen Seitenumbruch hinzufügen, kleinen Text kopieren. Klicken Sie auf das Plussymbol, um einen neuen Absatz zu erhalten. Fügen Sie das hier ein. Klicken Sie auf Aktualisieren, um unsere Änderungen zu speichern und dann unseren Beitrag zu sehen. Wir sehen sofort unseren ersten Absatz des Textes und das ist bis zu unserem ersten Seitenumbruch. Wir sehen jedoch keine Seitenzahlen am unteren Rand, um zur nächsten Seite des Inhalts zu gelangen. Aber das müssen wir WordPress sagen, wo wollen diese Links in unserem Thema erscheinen. Wir möchten, dass dies in der Datei single.php erscheint und wir werden eine Funktion namens WP-Link-Seiten verwenden, die ich direkt unter dem Inhalt hinzufügen werde. Sie für die Content-Funktion unten ÖffnenSie für die Content-Funktion untendas PHP. Dann im Inneren, verwenden Sie die WP-Link-Seiten-Funktion, Klammern kurz danach und ein Semikolon. Wenn wir jetzt sagen, dies und aktualisieren. So gut, wir sehen jetzt die Seitenzahlen unten unten unten, die beide von einer aktuellen Seite verlinkt dieses CSS ist ein wenig durcheinander. Bevor wir dies beheben, lassen Sie uns einfach überprüfen, ob der Rest der Seite funktioniert. Wir können auf Seite 2 klicken, die auch die aktuelle Seite in der URL zeigt. Versuchen wir Nummer 3 und es funktioniert auch. Bevor wir weiter voranschreiten, ändern wir das CSS. Dies gilt, weil, wenn wir in die Entwickler-Tools mit Rechtsklick gehen und inspizieren, lassen Sie uns den Mauszeiger über diese aktuelle Seite und dies wird in einem Span-Element gegründet. Die Span-Elemente haben bereits einige benutzerdefinierte Styling von unserer Homepage, die für den Preisbereich für jedes Büro ist. Lassen Sie uns das bearbeiten. Wenn wir in die Sidebar gehen und dann unten von Seite innen hier haben wir diese Span-Elemente. Ich werde eine benutzerdefinierte Klasse hinzufügen. Nennen wir das einfach den Preis. Das ist der Erste. Wir können dies für die zweite Spanne und auch die dritte unten in der Nähe des Bodens tun, geben Sie das Speichern und dann über zu unserer style.css. Nie brauchen, um nach unserer Spannweite zu suchen, die nur hier ist. Provenienz, wir können das den Preis mit einem Punkt nennen, da dies eine Klasse ist. Schließen Sie diese Dateien, und laden Sie sie neu. Diese funktionieren immer noch gut, schauen wir uns unseren Blog an. Klicken Sie auf einen dieser einzelnen Blogs, und gehen Sie zu unseren kostenlosen Seiten und jetzt unten unten. Als nächstes wählen Sie einen Link unten unten hier, der wird ein Link zum vorherigen oder nächsten Blog-Beitrag sein. Zurück zu der single.php. Wir haben unten einige Links, die wir von unserer index.php kopiert haben. Diese Links, wenn wir zu unserem Blog gehen, werden diese Links durch unsere vorherige und unsere nächste Seite oder Blog-Beiträge Zyklus. Wir wollen eine ähnliche Sache für alle Seiten tun. Alles, was wir tun müssen, ist, diese Funktion umzubenennen, um post zu sein , anstatt das S am Ende zu haben. Tun Sie das für die vorherige oder nächste, es ist sicher. Dann gehen Sie in einen unserer Blog-Beiträge und als unsere beiden Links. Wir sind auf Blog-Beiträgen 1, so dass der vorherige wird unsere Hallo Welt sein. Wir können dann überspringen, um Blogpost 1, Nummer 2, Nummer 3, und das alles funktioniert gut. So können wir die Paginierung auf WordPress verwenden. Als nächstes werden wir mit der einzelnen Post-Ansicht fortfahren, indem wir uns ansehen, wie wir Kommentare aktivieren können. 35. Das Kommentarformular: Eine gemeinsame Funktion bei der Arbeit mit einem Blog besteht darin, einen Kommentarabschnitt unter jedem Beitrag zu haben. Dies ermöglicht unseren Lesern zu kommentieren oder Fragen über den Beitrag zu stellen, und auch andere können antworten und kommentieren. Die Kommentarfunktion wird in den nächsten paar Videos hinzugefügt werden. Dieses Video konzentriert sich auf das Hinzufügen der tatsächlichen Formulareingabe und dann der nächste wird der Code sein, um die Kommentare unter dem Blog-Beitrag anzuzeigen. Für die Kommentare werde ich eine neue Datei hinzufügen, die comments.php genannt wird. Dies wird in den Wurzeln des Projekts sein, neben den restlichen Seitenvorlagen. Erstellen Sie die comments.php, fügen Sie PHP-Tags oben für unsere Kommentare hinzu, schließen Sie dies mit dem Text der Vorlage für die Anzeige von Kommentaren ab. WordPress hat eine eingebaute Funktion, die ein Standard-Kommentarformular angezeigt wird, wird dies der Kommentar auf der Schädelform genannt. Da dies eine PHP-Funktion ist, müssen Sie die PHP-Tags öffnen. Dann wird dies der Kommentar zur Schädelform genannt. Wir geben dieser Datei ein Speichern und öffnen dann unsere Datei single.php, laden Sie jeden Blogbeitrag neu. Es werden keine neuen Inhalte zu dieser Seite hinzugefügt. Aus dieser Ursache müssen wir einrichten, wo das Formular in dieser Vorlage angezeigt werden soll. Wir können dies in unserer single.php hinzufügen. Lets gehen direkt über dem nav Abschnitt für alle Seiten, die PHP-Tags. Im Inneren hier werden wir eine PHP if-Anweisung erstellen. Hier drinnen wird dies zwei Dinge überprüfen: Erstens werden wir überprüfen, ob die Kommentare tatsächlich offen sind. Dann verwenden wir den Operator, der die beiden Rohre ist. Die zweite Bedingung ist zu überprüfen, ob wir mindestens einen Kommentar zur Verfügung haben. Wir tun dies mit der WordPress-Funktion namens get_comments_number. Dann brauchen Doppelpunkt am Ende, wo wir den Inhalt hinzufügen, die Sie anzeigen möchten, ist diese Bedingung wahr ist, der Inhalt, den wir anzeigen möchten, ist die Kommentarvorlage. Diese Kommentarvorlage wird standardmäßig auf unsere Datei comment.php gespeichert, die wir bereits erstellt haben. Schauen wir uns das im Browser an. Hat Syntaxfehler in Zeile 52 der Single, wir müssen nur hinzufügen, wenn am Ende unsere if-Anweisung zu schließen. Angezeigt wird das standardmäßige WordPress-Befehlsformular. Wir lassen dies im Standardzustand oder wir können auch Argumente zu diesen Kommentaren hinzufügen, die die Anpassung bilden, einschließlich einiger Bootstrap-Klassen, um es besser mit dem Rest unseres Themas passen. In der Datei comments.php können wir ein Array von Werten einrichten, um jedes Feld im Formular anzupassen. Lassen Sie uns diese direkt über dem Kommentarformular hinzufügen. Wir können eine Variable mit dem $ Symbol erstellen, das ich args nennen werde. Set ist auf ein PHP-Array. Wir können dann unsere Argumente in unsere Kommandoform übergeben. Dies wird wirksam und fügen Sie am Ende ein Semikolon hinzu. Bevor wir unsere Argumente hinzufügen, werfen wir einen kurzen Blick auf unser Formular. Ich werde mit dem Anpassen dieses Formular ganz oben beginnen, das ist der Lassen Sie eine Antwort Text. Alle diese Änderungen werden durch Änderungen an den Standardparametern in unserem Array durchgeführt . Wenn wir auf die WordPress-Website gehen und einen Blick auf die gemeinsame Form Abschnitt. Dies zeigt uns alle verfügbaren Parameter, die wir ändern können. Wenn wir scrollen nach unten zum Parameterabschnitt. Im Moment arbeiten wir mit dem Titel. Wir müssen ein Feld namens Titel-Unterstrich Antwort Ziel. Wenn wir nach diesem suchen, das ist dieses Feld nur hier, dies ist ein Feld, das wir brauchen, um den Titel des Kommentarformulars anzupassen. Dies ist das erste Argument, das wir in Titel, Unterstrich, Antwort hinzufügen müssen. Dann ein Pfeiloperator, der das Gleichheitssymbol ist, und dann der Pfeil nach rechts. Wir können dann den neuen Titel als Antwort oder Kommentare festlegen, oder Sie können diesen an jeden Text anpassen, den Sie bevorzugen. Dieser Pfeiloperator, wenn er in PHP mit einem Array verwendet wird, wird im Grunde verwendet, um den Wert auf der rechten Seite auf die Taste auf der linken Seite zu setzen. Dann gehen Sie zu unserem Projekt und aktualisieren. Wir haben nun den Titel des Formulars geändert. Wir können auch einige Bootstrap-Klassen hinzufügen, um etwas Platz in oben und unten dieses Titels hinzuzufügen. Wir können dies tun, indem wir ein div innerhalb unserer Zeichenfolge hinzufügen. Eine Bootstrap-Klasse oder ein Titel antwortet auf den Wert drei, schließt dann unser div ab, gerade danach wird es neu geladen und da ist unser Platz oben und unten. Als nächstes können wir nach unten zu unserem gemeinsamen Abschnitt gehen, das ist dieser Textbereich. Dafür verwenden wir ein Feld, wenn wir zu unserer Referenz namens Kommentar auf dem Schädelfeld gehen, das hier ist. Dies ist, um den Textbereich und die Beschriftung des Kommentarkörpers zu setzen. In unseren Argumenten macht Sie ein Komma direkt nach unserer Titelantwort hinzufügen. Wir können dann diese gemeinsamen Felder anvisieren, unseren Pfeil und dann unsere Zeichenfolge einrichten. Um dies klarer zu machen, werde ich dies in mehreren Zeilen hinzufügen, beginnend mit einem div-Abschnitt. Wir können Bootstrap-Klassen hinzufügen, genau wie wir oben getan haben, dies wird die Form Gruppenklasse sein. Dann können wir ein Label definieren, wenn vier Attribute, dies wird für Kommentare, den Text der Kommentare sein, dann schließen Sie unser Label. Dann ein Break-Tag, um dies auf eine neue Zeile hinzuzufügen. Als nächstes haben wir unseren Textbereich, die öffnenden und schließenden Tags. Innerhalb des öffnenden Tags können wir unsere Attribute hinzufügen. Die ID wird gleich den Kommentaren sein. Tomato legte das Label, der Name des Kommentars zwei die Bootstrap-Klasse wird Steuerung gebildet werden. Dann schließlich in der letzten Zeile wird dies unser div schließen, so dass die Datei gut projektiert und neu geladen wurde. Gut. Dieser Textbereich passt nun besser zu unserem Thema. Als nächstes haben wir auch diesen Submit-Button am unteren Rand. Sehr bald werde ich auch zurückkommen und ein Namens- und E-Mail-Feld erstellen. Wer wird das später tun, da dies ein bisschen anders ist. Dieser ist Ziel, die Schaltfläche „Senden“. Kurz nach unserer Zeichenfolge können wir ein Komma hinzufügen. Dies ist für die Schaltfläche „Senden“, also „Senden“ auf der Schaltfläche „Schädel“. Richten Sie unseren Pfeil ein, dann als Zeichenfolge können wir unsere Bootstrap-Schaltfläche mit der Art der Einsendungen hinzufügen. Die Bootstrap-Klassen von btn, btn-primary. Der Text, der auf einer Schaltfläche zum Senden angezeigt wird und dann schließen Sie unsere Schaltfläche schreibt am Ende. Immer noch in einer Zeichenfolge fügen Sie ein Komma hinzu, drücken Sie „Speichern“ und laden Sie dann neu, da unsere Bootstrap-Klassen jetzt wirksam werden. Als nächstes werde ich einen Namen und ein E-Mail-Feld hinzufügen. Wenn wir zurück zur Dokumentation für das gemeinsame Formular gehen, dann, was wir als nächstes wollen, ist dieser Feldwert. Dies gilt für die Eingabefelder von Angebot, E-Mail, URL und Cookies. Um damit zu arbeiten, müssen wir das Feld Array innerhalb unserer Argumente verschachtelt einrichten ist Feld Array verwendet auch das Kommentarformular. Standardfelder Haken, um Filterung anzuwenden, so zurück zu den Kommentaren von PHP können wir jetzt diese Untätigkeit sehen. Ihre Sachen, die unsere Taste, stellen Sie sicher, dass es ein Komma am Ende. Wir können unsere Felder fragen. Richten Sie das wie zuvor ein, aber dieses Mal werden wir auf die Schädelfilter an den Klammern anwenden. Der erste Parameter innerhalb unseres Filters ist der Name des Filter-Hook , den wir zuvor als gängige Formularvorgabefelder gesehen haben. Fügen Sie dies als Zeichenfolge, Kommentarformular, Standardfelder hinzu. Dann ist der zweite Parameter unser Array von Feldern, die Sie filtern möchten. Innerhalb dieses Arrays können wir das Angebot E-Mail, URI oder Cookies hinzufügen , die wir zuvor gesehen haben. In unserem Fall wollen wir nur das Angebot und die E-Mail ausrichten. Beginnen wir mit dem Angebot als String. Dies ist ein Setup, genau wie wir es mit jedem anderen Feld genau oben getan haben. Fügen wir dies als String hinzu und machen etwas Platz. Benötigen Sie ein umgebendes div mit den Bootstrap-Klassen oder Formulargruppe. Als nächstes beschrifte ich, schließen Etikett von zwei. Wir können unsere Attribute innerhalb hinzufügen. Der erste wird vier sein, das ist für das Angebot mit dem Text Ihres Namens. Dann werde ich Eingaben bilden, dies wird die ID haben, die Autor sein wird, nach dem Link, den wir Etikett haben, der Name des Angebots, dies ist eine Art von Text. Dann schließt sich schließlich die Bootstrap-Klasse des Formularsteuerelements. Dann müssen wir auch unser umgebendes div schließen. Nächster Halt ist die E-Mail, die ein weiteres Element in unserem Array sein wird. Also werde ich den Off-Abschnitt kopieren, ein Komma hinzufügen, und dann fügen Sie dies in knapp unten, dieser wird für die E-Mail sein, lassen Sie uns diesen E-Mail-Abschnitt kopieren. Wir haben diese Runde und div wird das Etikett für E-Mail, Text Ihrer E-Mail, Eingabe-ID, Änderungen, der Name und auch der Typ sein. Speichern Sie diese Datei und dann über den Browser in unsere Projekte. Wir sehen direkt unter unseren Kommentaren und übermitteln , dass wir nicht diesen Namen und E-Mail-Abschnitt zeigen. Dies liegt daran, dass diese Felder nicht angezeigt werden müssen, wenn wir uns gerade angemeldet haben. Wir haben uns derzeit als ruhiges Admin angemeldet, so klicken wir auf Abmelden. So sieht das Formular für nicht angemeldete Benutzer aus. Also werden wir auch den Namen und die E-Mail hinzufügen. Die nächste Stufe besteht darin, den Anfang zu den erforderlichen Feldern hinzuzufügen. Ich werde dies zu den Kommentaren, Angeboten und E-Mail hinzufügen. Zunächst einmal bis zu unserem Textbereich für die Kommentare im Etikett, was bedeutet, fügen Sie einen Stern, dann das Angebot, also direkt nach Ihrem Namen. Dann ist die E-Mail unten, das ist Ihre Checkliste arbeitet mit einem Neuladen, das ist jetzt für Teil einer der Kommentare. Im nächsten Video werden wir uns ansehen, wie wir die Kommentare tatsächlich auf dem Bildschirm anzeigen können . 36. Kommentare anzeigen: Teil 2 dieses Kommentarabschnitts wird es sein, alle Kommentare anzuzeigen , die unter dem Blog-Post hinterlassen wurden. Dies wird wieder in der Kommentare/PHP-Datei sein. Fangen wir da drinnen an. Wir beginnen an der Spitze, indem wir zuerst überprüfen, ob sie nicht posten konnte, ist passwortgeschützt? Wenn kein Passwort vom aktuellen Besucher eingegeben wurde, können wir beenden, indem wir zurückkehren, bevor wir einen der Kommentare laden. Lasst uns das oben machen, direkt über unserem Array. Lassen Sie uns eine PHP if-Anweisungen hinzufügen. Wir werden überprüfen, ob der Beitrag passwortgeschützt ist mit einer WordPress-Funktion namens post_password _ erforderlich. Wenn der Beitrag passwortgeschützt ist, werden wir einfach zurückkehren, ohne einen der Kommentare zu laden. Mit diesem Check-In können wir unten gehen. Kurz danach werden wir einen Abschnitt für unsere Kommentare erstellen, nur reguläre HTML ist. Daher müssen wir das PHP direkt oben schließen und es dann erst danach neu starten. Im Inneren werden wir überprüfen, ob irgendwelche Kommentare vorhanden sind, also wird PHP dies in einem if-Anweisungen tun. Wir können überprüfen, ob irgendwelche Kommentare existieren zuerst mit einer WordPress-Funktion namens haben _comments, ein Doppelpunkt am Ende schließt dann ab. Wir müssen auch etwas Platz machen und dann am Ende einen endif-Abschnitt hinzufügen. Wenn Kommentare vorhanden sind, wird der Code innerhalb des hier ausgeführt. Ich werde eine Überschrift der Ebene zwei mit etwas Polsterung hinzufügen, also h2, eine Bootstrap-Klasse, die py-3 gleich sein wird, schließen Sie unsere Überschrift ab. Anstatt Codierung in einem statischen Titel als Überschrift hinzuzufügen, werden wir dies dynamisch mit PHP machen, also lassen Sie uns das PHP im Inneren öffnen und schließen. Diese Überschrift wird dynamisch sein und sich für die Anzahl der Blog-Posts ändern. Zum Beispiel kann es sagen, etwas wie kostenlose Kommentare zu einem Blog-Beitrag 1, und dann wird die Zahl für jeden Kommentar zu erhöhen. Wenn wir Kommentare haben wollen wir wissen, wie viele, können wir auf diese Informationen zugreifen mit der WordPress-Funktion namens get_comments_number. Dann werden wir dies innerhalb einer Variablen speichern, was wir mit einem Dollar-Symbolpräfix tun, und dann werde ich diese Variable die Zahl_of_comments nennen, getrennt durch Unterstriche, und setzen Sie dies gleich get_comments_number. Wir können nun diese Variable verwenden, um den Text zu ändern, der diese Überschrift angezeigt wird. Wenn wir nur einen Kommentar haben, möchten wir, dass der Text als ein Kommentar als Singular angezeigt wird. Wenn es jedoch mehrere Kommentare gibt, müssen wir die Pluralversion anzeigen, wie zum Beispiel sechs Kommentare mit dem s am Ende, kann dies mit einer bedingten if else Anweisungen erreicht werden. Direkt unter unserer Variablen, lassen Sie uns hinzufügen, wenn Abschnitt, und wir sagen number_of_comments, das ist die Variable, die wir oben erstellt haben wird gleich dem Wert von eins sein. Wir werden diesen Code innerhalb ausführen, sonst führen wir den Code innerhalb dieses nächsten Abschnitts aus. Dieser if und der else Block werden beide verwendet, um einen Titel hinzuzufügen aber mit der Singular- oder Pluralversion, die Sie zuvor erwähnt haben. Diese Texte können mit printf angezeigt werden, was eine formatierte Zeichenfolge ausgibt und ich möchte dies zu beiden Blöcken hinzufügen. Wir werden printf verwenden, weil es uns erlaubt, Variablen in unsere Textzeichenfolge einzufügen, die wir in einem Moment betrachten werden. Innerhalb dieser printf Klammern, werde ich eine WordPress-Funktion als ersten Parameter hinzufügen, der für das Format ist, oder mit anderen Worten, den Text, den Sie verwenden möchten. Später in diesem Kurs werden wir uns ansehen, wie wir die Fähigkeit hinzufügen können , den Text in unserem Feld zu übersetzen, so dass einige von ihnen später ein wenig mehr Sinn machen können, aber jetzt werde ich den if-Anweisungsabschnitt mit dem _x Funktion, und dies wird in drei Parametern nehmen. Beginnen wir mit dem Hinzufügen der ersten beiden erforderlichen Parameter, dann werde ich erklären, was diese bedeuten. Der erste als String ist der Text eines Kommentars und dann weiter. Danach werden wir einige HTML-Entitäten hinzufügen, so „ und dann die“, durch ein Komma getrennt. Der zweite wird der Text des Kommentartitels sein, also lassen Sie uns mit dem ersten Parameter beginnen, diese Zeile gerade hier ist. Dies ist die Zeichenfolge von Texten, die in unserem Thema angezeigt werden. Es wird auch eine Zeichenfolge sein, die wir später im Kurs übersetzen können. Wir beenden diese Zeichenfolge mit dem linken doppelten Anführungszeichen und auch dem rechten doppelten Anführungszeichen hier. Diese HTML-Entitäten, die die sicherere Art sind, Symbole in unsere Websites hinzuzufügen. In der Tat, so wird es auf den Websites angezeigt, wie man kommentiert dann die Anführungszeichen, Zeile zwei, die gerade hier ist. Dies ist die Kontext-Information für Übersetzer. Später im Kurs fügen wir einen dritten optionalen Parameter hinzu, wenn wir unser Thema übersetzen. Zwischen diesen doppelten Anführungszeichen möchten wir auch den Titel des Beitrags anzeigen, also würde dies so etwas wie ein Kommentar zu einem Blogbeitrag sagen 4. Denken Sie daran, bevor wir mit printf gesagt haben, erlaubt es uns, eine formatierte Zeichenfolge auszugeben. Nun, das erlaubt uns, Variablen in unseren Text hinzuzufügen. Wir können eine Variable hinzufügen, indem Sie ein Prozentsymbol gefolgt von einem Wert hinzufügen, also nur der Buchstabe s, was bedeutet, dass wir einen Zeichenfolgenwert erwarten. Zwischen den Anführungszeichen, fügen Sie ein Prozentsymbol, und dann ein s, und dies wird sein, wo wir alle unsere Variable setzen. Aber woher erhalten wir den Wert, um ihn einzufügen? Wir erhalten dies, indem wir einen zweiten Parameter zu unserer printf-Funktion hinzufügen, so dass kurz nach diesen x ein Komma hinzufügen