Ein WordPress-Theme programmieren | Intro zur WordPress-Entwicklung

1. Einführung in den Kurs: Hallo an alle. Mein Name ist Kyle und ich bin ein Webentwickler aus Ohio. Ich bin seit etwa fünf Jahren Vollzeit-Webentwickler. Und heute werde ich Ihnen beibringen, wie Sie beginnen, Ihren eigenen benutzerdefinierten WordPress-Theme von Grund auf neu zu bauen . Wir werden auf alle Elemente einer WordPress-Website ausgehend von der ersten lokalen Sites Setup berühren , die ich mit Lampe auf Mac. Und die Lösung der Kerndateien unter Verwendung einer Starter-Vorlage, Integration von HTML- und CSS-Frameworks wie Bootstrap, sowie ein paar zentrale Plug-Ins, die während des gesamten Prozesses verwendet werden können. Dieser Kurs richtet sich an absolute Anfänger, aber ich hoffe, dass jeder, der diese Klasse nimmt, auf dem Weg etwas lernen kann. Nochmals vielen Dank, dass Sie den Kurs genommen haben und ich hoffe, Sie sind genauso aufgeregt wie ich, um loszulegen. 2. Einrichtung der lokalen Entwicklung - MAMP: Okay, also der erste Schritt, um unsere lokale WordPress-Umgebung Setup zu bekommen , ist tatsächlich eine Software namens Karte zu installieren. Also werde ich die MAMP Pro-Version verwenden. Es gibt eine kostenlose Version des Menschen auf ihrer Website, die völlig in Ordnung für das, was wir hier zu tun haben. Also MAP ist wirklich nett. Es macht es wirklich, wirklich einfach, tatsächlich heruntergeladen, installieren und einrichten WordPress-Websites auf Ihrem lokalen Computer. Es kümmert sich um die gesamte Serverkonfiguration mit Apache, MySQL und solchen Dingen. Es ist wirklich nur ein Ein-Klick-Download in einem Ein-Klick-Stern und dann haben Sie Ihre Website auf und läuft im Grunde. Also gehen Sie voran und Kopf über zu MAMP dot info und, und laden Sie die kostenlose Version oder wenn Sie gehen und kaufen wollen, um die Pro-Version, fühlen Sie sich frei. Es gibt einige Einstellungen, die Sie mit der Pro-Version anpassen können , die Sie mit der kostenlosen Version nicht können. Ich glaube, die kostenlose Version lässt Sie nur eine Site Setup haben. Könnte damit falsch sein. Ich kenne die Pro-Version, Sie können mehrere Setups sowie eine Reihe von anderen Sachen haben, aber okay, also hier lade ich tatsächlich die kostenlose Version von MAMP herunter und nehme euch ein Beispiel dafür, wie das aussieht. So können Sie das während des gesamten Kurses nutzen. Also gehen Sie voran und klicken Sie auf Free Download, sobald Sie hier drin. Und das wird Sie auf diese Seite bringen und einfach voran und laden Sie die richtige Version für Ihren Computer herunter. Und die Installation selbst ist eigentlich ziemlich unkompliziert. Ich gehe einfach weiter und pausiere die Aufnahme und komme zurück, wenn Minus-Setup. Also gut, mein Download ist fertig und ich werde das öffnen. Es ist zu Fuß durch es wirklich schnell. Und sobald das erledigt ist, komme ich zurück. Alles klar, also war mein Download und die Installation erfolgreich. Also, jetzt habe ich gerade MAMP geöffnet und das ist der Bildschirm, den ihr sehen werdet. Also, wie ich schon sagte, geh einfach weiter und lass alles gleich. Gehen Sie weiter und klicken Sie auf Start. Alles klar, und das ist der Bildschirm, auf dem euch das vorgestellt wird. Und wie ein Server startet. Und das, es sieht sehr ähnlich zu den Pro-Versionen Dashboard-Tools hier oben hat PHP, mein Admin. Dies wird später im Kurs wichtig sein. Nehmen wir an, localhost Doppelpunkt 8888, Schrägstrich, Schrägstrich. Fragezeichen, Sprache entspricht Englisch. Du könntest das haben oder auch nicht. Wenn Sie voran gehen und tatsächlich alles nach dem 8888 löschen und klicken Sie dann auf Enter. Sie werden mit diesem Bildschirm angezeigt. Und das bedeutet, dass installiert war erfolgreich. Wenn Sie sehen können, dass diese Seite Karte ordnungsgemäß konfiguriert und gestartet wurde und ist bereit zu gehen. Sie können einige nur allgemeine Informationen hier sehen, Dokumentstamm. Diese HT-Dokumente sind, wo wir unsere Website-Dateien speichern, PHP-Version, und dann gibt es eine Datei, die derzeit index.php ist. So toll, das war die kostenlose Version, sehr ähnlich wie die Pro-Version Setup. Ich hoffe, ihr habt das hilfreich gefunden. 3. WordPress herunterladen: Okay, Also in diesem Abschnitt werden wir die Einrichtung der tatsächlichen WordPress-Umgebung innerhalb von Ma'am. Also, was ich eigentlich tun werde, da ich mehrere Websites bereits eingerichtet habe und ich in der Vergangenheit gearbeitet habe. Ich werde tatsächlich einen neuen Host innerhalb von MAMP Pro erstellen. Wenn Sie die kostenlose Version verwenden, fühlen Sie sich frei, um voran etwa 30, 45 Sekunden zu überspringen. Wenn Sie die Pro-Version verwenden, bleiben Sie hier. Es ist ein sehr unkomplizierter Prozess. Also, du willst einfach runter zum Pluszeichen hier. Ich lasse es immer leer. Fahren Sie fort. Ich werde nur diesen Webkurs benennen und dann root dokumentieren. Ich werde es in meinem eigenen Ordner auswählen und behalten. Ich werde tatsächlich den Webkurs-Ordner hier auswählen, öffnen. Und dann werde ich das deaktiviert lassen und dann den Host erstellen. Und das ist es so ziemlich. Also alles, was Sie von hier aus tun müssen, wenn Sie die Pro-Version verwenden, ist sicherzustellen, dass Sie Ihren Host hier ausgewählt haben. Geben Sie ihm eine Sekunde, um zu generieren, was es im Backend generieren muss. Sobald es fertig ist, sollte dieser Öffnen-Button hier auftauchen. Für diejenigen von Ihnen, die die kostenlose Version verwenden. Sie können voran gehen und einfach den Server starten, und das öffnet Ihre lokale Host-URL innerhalb Ihres Browsers. Und wir können von da aus gehen. Okay, also meine ist bereit zu gehen, also gehe ich einfach weiter und klicke auf Öffnen. Wie gesagt, die kostenlose Version wird nur automatisch geöffnet, wenn der Server gestartet. Also werde ich auf Öffnen klicken. Und dies wird eine sehr ähnliche Seite zeigen, wie ich im letzten Abschnitt gezeigt habe. Das heißt also nur, dass Dokumentstamm auf den Ordner gesetzt ist , den ich PHP-Version erstellt habe und so weiter. Also der nächste Schritt hier ist eigentlich gehen, um die WordPress-Dateien zu bekommen. Um das zu tun, möchten Sie zu wordpress.org gehen. Sobald diese Seite geladen ist, gibt es oben rechts einen blauen Knopf, der „Get WordPress“ sagt. Gehen Sie weiter und klicken Sie darauf. Und dann kommen Sie zu dieser Seite hier. Also in diesem ersten Absatz gibt es einen Link, der download und install sagt. Gehen Sie weiter und klicken Sie darauf. Und es wird es weiter auf die Seite fallen. Und dann können Sie auf Download WordPress 5.8 klicken. Zum Zeitpunkt des Ansehens dieses Videos, diese Version, könnte es anders sein, aber gehen Sie vor und klicken Sie einfach auf, dass und installieren. Und warten Sie, bis das heruntergeladen wird. Ich gehe weiter und halte eine Pause und komme zurück, wenn es fertig ist. Okay, mein Download war fertig. Also, was das tut, ist tatsächlich herunterladen die ZIP-Datei, die alle Kerndateien WordPress-Dateien enthält. Gehen Sie weiter und öffnen Sie die ZIP-Datei. Und dann innerhalb dieses Ordners werden Sie alle diese Dateien hier sehen, index.php lizenzierte Punkt TXT. Lesen Sie mir alles, was mit WP Strich beginnt, ist eine WordPress-Kerndatei. Also das sind, was tatsächlich baut WordPress-Backend. Was Sie also tun möchten, ist, diesen Ordner hochgezogen zu haben und dann den HT-Dokumentenordner. Was Sie tun werden, ist einfach zu löschen, was sich in diesem Ordner befindet, sollte nur eine index.php Datei sein. Gehen Sie weiter und löschen Sie das. Und dann von dort, können Sie tatsächlich ziehen über alle WordPress-Dateien von diesem Download. Sie werden gehen und das tun. Drache drüber. Und dann säubere ich es einfach mit Namen. Und dann ist es so ziemlich. Also machen Sie voran und schließen Sie die beiden Finder-Fenster. Schließen Sie dieses Pop-up. Und dann jetzt, wenn Sie zurück in Ihren Browser gehen und aktualisieren, sollten Sie eine WordPress-Seite zu bekommen. Grundsätzlich wie eine Setup-Seite, da irgendwie durch das gehen. Also, sobald Sie bereit sind und gehen Sie voran und wählen Sie Ihre Sprache, Ich werde Englisch wählen, Weiter. Und dann hier steht, Willkommen bei WordPress. Bevor wir beginnen, benötigen wir einige Informationen über die Datenbank. Sie müssen die folgenden Punkte kennen, bevor Sie fortfahren. Datenbankname, ein Datenbank-Benutzername, ihr Kennwort, der Datenbankhost und dann das Tabellenpräfix. Also hier werden wir tatsächlich in PHP, meinen Admin, gelangen und tatsächlich die Datenbank erstellen. Um das zu tun, werden wir zurück zu MAMP springen und Sie werden auf diesen Web-Start-Button klicken. Und dann, sobald das geladen ist, gehen wir zum Tools-Drop-down-Menü PHP, mein Admin. Großartig. Also, jetzt in PHP mein Admin, was wir tun müssen, ist tatsächlich die Datenbank zu erstellen. Also oben in der linken Seitenleiste hier, gehen Sie vor und klicken Sie auf Neu. Gib ihm einen Namen. Ich werde nur meinen Webkurs nennen. Fühlen Sie sich frei, es zu nennen, was Sie wollen. Sie können dies in Ruhe lassen und fortfahren und auf Erstellen klicken. Also, was dies tat, war eine neue Datenbank namens Web Course zu erstellen. Und es hat momentan keine Tische. Eigentlich gehen, um alle Tabellen zu erstellen. Wir werden die WordPress-Installation Setup tatsächlich all das für uns tun lassen. Aber was wir tun müssen, ist einen Benutzer für diese, diese Datenbank. Also oben in dieser Leiste hier, gehen Sie voran und klicken Sie auf Privilegien. Benutzer hinzufügen. Und hier werde ich meinen einen Webbenutzer nennen. Lassen Sie den Host allein Kennwort. Ich werde nur Test 123 machen und es dann erneut eingeben. Test 1, 2, 3. Wenn Sie dies tatsächlich für eine Produktionsstätte tun, irgendwann, oder Sie etwas sichereres jetzt verwenden möchten, sollten Sie definitiv finden, wahrscheinlich immer etwas sichereres verwenden. Dies ist eine lokale Website, daher ist Sicherheit kein großes Problem. Aber wenn Sie dies auf einer Beta-Site, auf einem Beta-Server irgendwo platzieren oder einfach direkt in die Produktion verschieben. Das kann ein Problem sein. Mit einem sehr einfachen, extrem schwachen Passwort. Nur etwas, worauf man sich da bewusst sein muss. Sobald das alles eingerichtet ist, Benutzername und Passwort, scrollen Sie nach unten und klicken Sie auf diese Schaltfläche Go. Jeder von denen, die kommen und dann einfach wieder klicken. Und jetzt sind wir alle bereit. So balancieren Sie zurück auf die WordPress-Setup-Registerkarte. Jetzt, da wir all diese Informationen haben, die sie wollen, können wir auf klicken, los geht's. Und jetzt ist dies der Datenbankname. Das ist, was wir in PHP, meinem Admin, erstellt haben , habe ich meinen Webkurs genannt. Stellen Sie sicher, dass Sie genau das eingeben, was Sie den Namen gemacht haben. Web-Kurs. Die Verwendung des Namens ist Web-Benutzer. Und Test 1, 2, 3. Lassen Sie den Datenbank-Host in Ruhe, das ist in Ordnung. Tabelle Präfix sowie finden WP Unterstrich Standard für WordPress Website. Gehen Sie also voran und klicken Sie auf Absenden. Sagt, dass wir alle bereit sind. Es kann mit der Datenbank kommunizieren und wir werden fortfahren und die Installation ausführen. Hier. Dies sind einige allgemeine Website-Informationen. Wir können hier unseren Website-Namen, den Benutzernamen und das Passwort angeben, oder was wir tatsächlich verwenden, um sich beim WordPress-Backend anzumelden. Sobald die Website tatsächlich konfiguriert ist, müssen Sie sich tatsächlich an den Benutzernamen und das Passwort erinnern, die Sie hier eingerichtet haben. Dies war etwas, das Sie oft verwenden und referenzieren werden, Ihre E-Mail, und Sie können Ihre echte E-Mail verwenden. Sichtbarkeit der Suchmaschinen. Ich überprüfe das immer, wenn ich entwickle. Sie können es deaktiviert lassen. Wieder, es ist eine lokale Website, niemand kann darauf zugreifen. Also, sobald dies alles eingerichtet ist, gehen Sie vor und klicken Sie auf WordPress installieren. Okay, sieht so aus, als ob alles gut war. Gehen Sie weiter und klicken Sie auf Anmelden. Und hier ist, wo wir unseren Benutzernamen und unser Passwort eingeben. Und klicken Sie auf Login. Großartig. So sind wir jetzt in unserem WordPress-Backend. Dies ist, wo wir tatsächlich gehen, um Blog-Posts, neue Seiten, verwaltete Kommentare zu erstellen . Sie können Benutzer verwalten, installieren Sie Themen, untergeordnete Themen, kontrollierte Permalink, die die URL-Struktur der WordPress-Seiten ist. Und viele andere Sachen. Du wirst viel Zeit in seinem Back-End verbringen , sobald wir weiter im Kurs sind. Aber das ist ein großartiger Ort zu sein. Also, bisher haben wir MAMP eingerichtet, wir haben eine WordPress-Website lokal eingerichtet. Und im nächsten Abschnitt werden wir tatsächlich einen Code-Editor installieren. Und dann werden wir in den Start bekommen, Aufbau eines tatsächlichen Thema innerhalb von WordPress. 4. Einen Code-Editor installieren: Alles klar, in diesem Abschnitt werden wir einen Code-Editor einrichten. Das ist also, was wir tatsächlich verwenden werden, um Seiten, Seitenvorlagen zu erstellen , andere Konfigurationsdateien zu bearbeiten, die wir brauchen, und so weiter. Also verwende ich Visual Studio Code. Wenn Sie diese Klasse nehmen, Sie mehr als wahrscheinlich bereits eine installiert. Ich empfehle Visual Studio Code. Es ist wirklich toll, wenn man sich daran gewöhnt hat. Ich benutzte eigentlich einen namens Atom. Ich weiß, dass es ein paar andere gibt, wie Klammern und andere solche. Fühlen Sie sich frei zu verwenden, was auch immer Sie sich wohl fühlen. Ich verwende Visual Studio Code. Es kommt mit einer Menge von Erweiterungen, die Sie herunterladen und installieren können , dass irgendwie helfen Sie Ihrem Code, wie Sie es IntelliSense und solche Dinge eingeben. Also definitiv viele Vorteile für die Verwendung von Visual Studio Code. Ich glaube, Adam hat auch Erweiterungen und solche Dinge. Also mach voran und installiere, was immer du willst. Ich denke, ich benutze Visual Studio-Code, also werde ich das jetzt hochziehen. Okay, wenn Sie also Visual Studio Code zum ersten Mal öffnen, erhalten Sie ein, im Grunde ein leeres Fenster. Also, was Sie tatsächlich tun können, ist zu File Open gehen und einfach diesen 80 Docs-Ordner öffnen. Ich habe meine innerhalb von Dokumenten MAMP Seiten mit Kurs, und öffne das. Sobald sich das öffnet, können Sie alle Dateien hier sehen. Also, beginnend an der Spitze, WP Admin kaum etwas innerhalb von dort berühren. Das Gleiche mit WP beinhaltet. Das sind wirklich Kerndateien zu WordPress. Normalerweise, wenn Sie mit irgendetwas drinnen durcheinander, Es wird einen Fehler irgendwo auf der Website verursachen und dazu führen, dass es nicht richtig funktioniert. Grundsätzlich wird alles, was Sie bearbeiten oder hinzufügen oder etwas mit tun werden, innerhalb des WP-Strichinhaltsordners, HT-Zugriff. Sie werden wahrscheinlich ein wenig geraten, wenn Sie dies für eine Produktionsstandort konfigurieren. Und dann ist eine andere Datei hier unten WP-Konfiguration. Und mach das auf. Diese Datei sagt also im Grunde WordPress, nach welcher Datenbank zu suchen ist. So können Sie tatsächlich sehen, dass hier, Datenbankname, Web-Kurs, Datenbankbenutzer, Web-Benutzer und so weiter. Dies sind tatsächlich die Informationen, die wir während der Installation der Website zur Verfügung gestellt haben . Ein offkey, sicherer Schlüssel, solche Sachen, kommen wirklich nicht viel in irgendwas davon. Wp Debuggen. Dies ist hilfreich, wenn Sie versuchen, die WordPress-Website zu debuggen. Wir können das wahr machen, wenn wir auf der Straße irgendwelche Probleme bekommen. Dies wird normalerweise auf „false“ belassen. Es gibt einige andere Dinge, die Sie dieser Konfigurationsdatei hinzufügen können. Einige Zwischenspeicher-Plugins, fügen Sie einige Zeilen hinzu. Einige Überschreibungen in Datei-Uploads können manchmal hier und Dinge wie diese eingehen. Wirklich das einzige, worüber man sich in dieser Datei Sorgen machen muss, sind die Datenbankinformationen. Wenn Sie gehen, um Server zu wechseln, wechseln Datenbankserver oder so etwas. Sie möchten nur sicherstellen, dass alle diese Informationen korrekt aktualisiert werden , damit Sie weiterhin auf Ihrer Website arbeiten können. Ich sehe weiter gehen und das schließen. Wenn Sie in den Ordner WP-Inhalt gehen, werden einige Ordner in ihren Plug-Ins, Designs und Uploads angezeigt. Selbsterklärend hochladen. Hier werden alle Ihre WordPress-Dateien, die Sie hochladen, gespeichert. Das ist alles in den Medien. Wordpress-Dashboard. Dies ist also, wo alle Ihre Blog-Bilder oder Seitenbilder, Banner, so etwas, PDF. Sie können sich also vorstellen, dass Sie diese hochladen und dann im Katalog in diesem Upload-Ordner gespeichert werden. Plugins, das Gleiche da. Jedes Plug-In, das Sie installieren, befindet sich in diesem Ordner. Themen. Dies ist eigentlich, wo wir die meiste Zeit in diesem Kurs arbeiten jetzt sind wir Presse kommt Standard mit drei Standardthemen, die 2019, 2020 und 2021 Themen. Diese sind ideal für sehr einfache Blog-ähnliche Websites. Das ist nicht unser Ziel für diesen Kurs, unser Kern, diesem Kurs geht es darum, ein benutzerdefiniertes Thema zu erstellen damit Sie genau das erstellen können, was Sie wollen, wie Sie wollen. Wir werden im Grunde von Grund auf neu mit einer nackten Schablone beginnen und sie von dort aus bauen. So können Sie tatsächlich alle diese Gewinner löschen. Wir werden das erst jetzt tun, wenn wir unser anderes Thema installiert haben. Aber das ist es, was das ist. Und dann werden Sie auch alle untergeordneten Themen sehen, die Sie in diesem Ordner haben. So können Sie sehen, ob Sie in eine dieser erweitern, können Sie alle Arten von Dateien innerhalb von hier sehen. Die wichtigsten, um sich wirklich auf footer.html, functions.php, Header Dot PHP, index.php und Single Dot PHP zu konzentrieren functions.php, Header Dot PHP, . Nun, sie sind wirklich alle wichtig, aber das werden die wichtigsten sein. Kopf- und Fußzeilenpunkt PHP. Das ist ziemlich Standard, um alles in der Header-Datei zu behalten, die dort gehört, wie Meta-Tags, Site-Titel, so etwas. Navigation kann manchmal auf ihre Fußzeile gehen, dasselbe. Typische Fußzeilenelemente können in die Fußzeilenpunkt-PHP-Datei und dann in die Datei functions.php gehen . Dies ist eigentlich, wo wir in CSE oder CSS Dateien, JavaScript-Dateien hinzufügen , alles, was wir brauchen, um tatsächlich auf der Website zu verwenden. Wir werden sie innerhalb der functions.php Datei laden. Das werde ich in einem späteren Abschnitt anfassen. Aber das ist, wofür diese Datei verwendet wird, sowie benutzerdefinierte Funktionen und solche Dinge hinzuzufügen. Seite. Dies ist eine Standardseitenvorlage in WordPress. Eine wichtige Sache hier zu wissen ist die get-Header-Funktion. Also berühre ich die Header-Punkt-PHP-Datei. Diese Funktion direkt hier ruft diese Datei tatsächlich auf die Seite auf. Also, was ist wirklich toll an WordPress ist die Verwendung von Template-Teilen. Ich betrachte den Header als Vorlagenteil. Das bedeutet, dass Sie eine Datei erstellen, die Sie auf mehreren verschiedenen Seiten verwenden können , indem Sie sie einfach in einer Funktion aufrufen. Der Header get Header ist also eine bestimmte Funktion, die die Header Dot PHP-Datei aufruft. Diese Funktion hier in Zeile 17 ruft tatsächlich ein anderes Template-Teil auf. So können Sie die get-Vorlagen-Teile-Funktion aufrufen Vorlage Strich Teile Inhalt Seite sehen. So ist es in einer Datei unter typischen Teile-Inhalt, Inhaltsseite ziehen. Alles in dieser Datei wird mit einer Codezeile auf diese Seite geladen , was wirklich großartig ist. Und dann auf Zeile 25, gleich, Fußzeile bekommen. Das wird die Fußzeilenpunkt-PHP-Datei in diese Datei aufrufen, wieder mit einer Codezeile. Also, das ist es, was es wirklich toll gibt, wird auf mehr dieser Dateien berühren , wie wir tiefer in den Kurs bekommen. Suchen. Dies ist die spezifische Seitendateivorlage für Suchergebnisse. Wenn Sie also auf einer Website sind und sich ansehen, möchten Sie nach allem, was mit Sport zu tun hat, suchen. Sie würden nur Sport suchen und dann können Sie tatsächlich diese Vorlage anpassen, die die Ergebnisse zeigt. Suchformular ist die eigentliche Suchform single. Standardmäßig ist dies für einzelne Post. Diese Dinger hier oben. Jedes Mal, wenn Sie einen neuen Beitrag erstellen , ist dies die Standardvorlage, die verwendet wird. Und das können wir auch anpassen. Das ist also so ziemlich der Überblick über die WordPress-Dateistruktur. Im nächsten Abschnitt werden wir tatsächlich unser Starter-Thema installieren. Es ist ein bare-bone Thema, gibt Ihnen alle Kerndateien, die Sie brauchen, um tatsächlich ein WordPress-Theme zu erstellen , so dass wir keine Fehler, die wir sofort laufen. Und von da aus verzweigen wir es irgendwie heraus, bauen es aus, wie es will, und wir gehen von dort. Ich freue mich also darauf. 5. Ein Starter auswählen: In diesem Abschnitt werden wir unser Starter-Thema installieren, das es uns ermöglicht, ein Kind-Design zu machen und von dort aus zu verzweigen und es in unser benutzerdefiniertes Thema zu bauen. Also, was Sie tun möchten, ist sicherzustellen, dass Sieauf der WordPress-Website, die wir in den vorherigen Abschnitten erstellt und Kopf über das Aussehen und dann Themen angemeldetsind auf der WordPress-Website, die wir in den vorherigen Abschnitten erstellt und Kopf über das Aussehen und dann Themen angemeldet . Von hier aus gehen Sie weiter und klicken Sie auf Neu hinzufügen. Und dann auf der rechten Seite, werden wir nach einem Thema suchen, das leere Schiefer genannt wird. Und es ist der allererste hier. Wenn ich auf Installieren und aktivieren klicke. Gleichzeitig ist es ein sehr, sehr leeres, kein Wortspiel beabsichtigtes Thema. Es gibt keine Stile, es gibt keine Formatierung, es gibt wirklich keine Struktur. Aber was wirklich schön daran ist, dass es Ihnen alle Kerndateien gibt , die Sie brauchen, um das Thema tatsächlich aufzubauen. Standardmäßig, wenn Sie ein Theme innerhalb von WordPress erstellen, sucht es nach bestimmten Dateien. Wenn wir einfach in diesen Themes-Ordner gehen und einfach einen neuen Ordner erstellen und wir nennen es Kyle's Thema. Mit diesem blinzeln, blinzeln Ordner. Wenn wir in WordPress gehen und versuchen, dieses Thema zu aktivieren, wird es einen Fehler zu werfen sagen, dass wir ein paar Dateien fehlen. Was an leerer Schiefer schön ist, ist B, Sie erweitern es. Sie können sehen, dass es tatsächlich mit all diesen Dateien geladen wird, die wir brauchen werden. Kopfzeilenindex der Fußzeilenfunktion und so weiter. Alle sind bereit zu gehen. Und dann können wir tatsächlich ein untergeordnetes Thema basierend auf diesem übergeordneten Thema erstellen, die es uns ermöglichen, alle unsere Bearbeitungen zu machen und die Website genau so aufzubauen, wie wir wollen, ohne sich auf die leere Schiefer-Entwickler und potenziell ruinieren unsere Website die Straße hinunter. Wenn Sie Jungs nicht wussten, den Zweck eines Kinder-Theme innerhalb von WordPress ist es Ihre Änderungen in Ihrer Anpassung des Themas vom Eltern-Thema oder das Hauptthema zu trennen . Grund dafür, sagen wir, wir bauen unsere Website aus, wir starten sie auf einem Produktionsserver. Der Verkehr geht dahin. Alles ist großartig. Okay, so sagen Sie zur gleichen Zeit, dass die Entwickler, ein leerer Slate veröffentlicht ein Update, das den Sicherheitspatch oder so etwas behebt. Wenn wir in unsere Produktionsstätte gehen und The Blank Slate Thema aktualisieren, würde es im Grunde alles löschen, was wir innerhalb dieses Themas getan haben, wenn wir es nicht in einem Kinderthema tun. Also sagen wir, wir gingen gerade in diese Fußzeile und wir sagten: Hallo, Dies ist ein Test aus der Fußzeile. Und wir retten es. Und wir gehen hierher zurück und erfrischen uns. Sie können sehen, dass das genau hier ist. Nehmen wir also an, das war unsere Live-Website und wir gingen voran und aktualisierten das leere Schiefer-Thema vom Entwickler. Und diese Zeile hier, da sie innerhalb des übergeordneten Themas gemacht wurde, würde dies vollständig gelöscht werden. Es gäbe keine Möglichkeit, es zurückzubekommen. Deshalb ist es wirklich, wirklich wichtig, als Kinderthema zu verwenden. Selbst wenn Sie ein Thema aus dem Themenwald oder wo auch immer gekauft haben, möchten Sie immer, immer, immer, sicherstellen, dass sie ein untergeordnetes Design verwenden. Sie möchten nicht, dass all Ihre harte Arbeit von einem einfachen Update weggespült wird. Also bedenken Sie das immer im Hinterkopf. Und ich werde Ihnen im nächsten Abschnitt zeigen, wie Sie ein untergeordnetes Thema erstellen können. Aber was wir hier gemacht haben, ist ein toller Anfang. Sie können irgendwie herumklicken. Ich weiß, es ist nicht formatiert, aber Sie können aktuelle Beiträge sehen, Hallo Welt. Und so würde ein einzelner Beitrag hier aussehen. Sie können sehen, willkommen zu WordPress ist, dass Ihr erster Beitrag, bearbeiten oder löschen Sie es und beginnen zu schreiben. Es gibt einen Testkommentar. Und Sie können sehen, dass unsere Fußzeile immer noch hier ist , da wir sie in die eigentliche footer.html eingefügt haben. Also, das ist ein Thema installieren. Um im nächsten Abschnitt zu beginnen, gehen wir über, wie ein untergeordnetes Design zu erstellen. Wir werden ein wenig in die WordPress-Dokumentation kommen und dann von dort gehen. 6. Ein benutzerdefiniertes Kind machen: In Ordnung, ich hoffe, ihr habt die Klasse bisher genossen. In diesem Abschnitt werden wir unser Kinderthema erstellen. Also gehen Sie vor und springen Sie in Ihren Texteditor. Und was wir jetzt tun werden, ist eigentlich nur die Themen 2019, 2020 und 2021 zu löschen . brauchen wir eigentlich nicht. Also durch und löschen Sie diese einfach. Und dann auf Ihrem leeren Schieferordner, was wir tun wollen, ist tatsächlich eine Suche und ersetzen Sie für das Wort leere Schiefer und ersetzen Sie es durch was Sie wollen, um Ihr Thema zu nennen. Also, was ich tun werde, ist den Namen leer Schiefer durch Web-Kurs zu ersetzen. Und ich werde alles da drin ersetzen. Jetzt, wenn das erledigt ist, werde ich den Ordner auch in Web-Kurs umbenennen. Und jetzt, wenn wir zurück zum Dashboard springen und zu Erscheinungsbild Themes gehen, wird es eine inaktive leere Schiefer zeigen, nur weil wir alle Namen von leerer Schiefer geändert haben , was Sie es genannt haben, dieses Thema existiert nicht wirklich noch mehr. Also alles, was Sie tun müssen, ist nur Ihr neues zu aktivieren. Und wir sind gut zu gehen. So können Sie aktuelle Thema sehen, Web Corps Version 2019 0.3. Durch ordentliche Dinge, lesen Sie bitte Tags und solche Sachen, damit wir tatsächlich alle diese Informationen bearbeiten können. Das ist jetzt unser Thema, also brauchen wir nichts davon drin zu haben. Wir können es natürlich für das Elternthema behalten, aber für unser Kinderthema können wir das loswerden, es ein wenig aufräumen. Springen Sie also zurück zum Visual Studio-Code oder Ihrem Texteditor. Und was wir jetzt tun wollen, ist einen neuen Unterordner innerhalb des Themes-Ordners zu erstellen. Also geh einfach voran und tu das. Was du tun willst, ist es genau dasselbe zu nennen, Dash Kind. Sobald Sie diesen Ordner haben, heißt die erste Datei, die wir innerhalb dieses neuen untergeordneten Theme-Ordners erstellen werden style.css. Und dann wird die nächste Datei, die wir erstellen wollen, Funktionen PHP genannt werden. Und dann müssen wir anfangen, die style.css, CSS-Datei zu bearbeiten. Also, um dieses untergeordnete Thema tatsächlich mit dem übergeordneten Thema zu verknüpfen, müssen wir nur ein paar Zeilen Code hinzufügen, um die beiden dazu zu bringen, sich gegenseitig zu erkennen. Also, was wir hier tun werden, ist, einen Kommentar zu starten. Und dann sagen wir den Namen des Themas, das Kind des Webkurses. Und dann sagen wir Thema, URI. Und ich werde tatsächlich zum Web-Kurs Elternthema springen und nur schnappen, dass genau hier. Und dann Beschreibung. Wir können sagen, Web-Kurs, Kind ist Autor. Sie können Ihren Namen sagen, Autor, Ihre, wir können sagen, wenn Sie eine Portfolio-Website haben, Sie können das tun. Wenn Sie bauen diese sehr begleiten, können Sie das setzen, wie Sie das auch dort setzen können. Eigentlich werde ich das einfach loswerden. Es wird nicht benötigt. Vorlage, dies ist die wichtigste Zeile hier. Wir müssen dies genau mit dem Namen des übergeordneten Themas übereinstimmen, was mein Fall ist, eine Webkurs-Version. Wir können 1 machen. Und Textdomäne kann Web-Course Kind sein. Und dann schließen wir diesen Kommentar ab. Also die wichtigste Zeile hier ist Template-Web-Kurs. Dies wird der Name Ihres Themas sein. Dies ist eigentlich, was dieses untergeordnete Design mit dem übergeordneten Design verknüpft. Stellen Sie also sicher, dass das richtig übereinstimmt. Gehen Sie weiter und speichern Sie das. Wenn Sie zurück zu den WordPress-Themes springen möchten. Inzwischen sollten Sie das Wort sehen, das untergeordnete Thema, das wir erstellt haben. Sie können sehen, dies ist das Kinderthema von Webcasts, so groß. Das ist genau das, was wir bisher brauchen. Nun, was wir tun werden, ist die Datei functions.php zu bearbeiten, um Stylesheets einzuziehen. Also unser erstes Stylesheet und wir werden in der Tat auf die leere Schiefer-Eltern-Thema Stylesheet zu ziehen . Also ein erneuter Umstieg auf die Datei functions.php innerhalb des untergeordneten Strahl. Und was wir tun werden, ist einfach mit einem PHP-Öffnungstag zu beginnen und es dann zu schließen. Und was wir tun werden, ist die Funktion einzugeben , um diese Stylesheets im Grunde zu ziehen. Also werden wir tun Add Action, WP, Enqueue, Skript, Kurs, Enqueue-Stil, Semikolon, Funktion, Web natürlich. Und das ist der Name Ihres Themas. Stile. P und Q Stil Kind Thema, Stylesheet, BRI über eine Zahl sein. Wir werden sagen, Eltern Griff, WP, Thema, Git-Version. Dies funktioniert nur, wenn Sie die Version und den Stil-Header festgelegt haben. Und dann schließen wir das einfach ab und speichern es. So können wir jetzt auf WordPress umdrehen und unser Kinder-Theme aktivieren. Und wenn wir die Seite tatsächlich sehen, sieht sie ein bisschen anders aus. Wir ziehen tatsächlich Stile aus dem Elternthema, die Dinge ein wenig besser für uns formatieren. Das ist also ein toller Anfang. Wir werden tatsächlich diese Funktion hier verwenden um zusätzliche Ressourcen wie benutzerdefinierte Stylesheets, alle Bibliotheken oder Frameworks, die wir hinzufügen müssen, einzubeziehen. Genau hier werden wir diese Dateien laden. Wir wollen nicht wirklich Links zu externen Ressourcen und die Kopfzeile, die Fußzeile, nur die Art und Weise, wie WordPress lädt die Ressourcen. Dies ist eigentlich ein effizienterer Weg, dies zu tun. Von hier aus haben wir wirklich alles eingerichtet, was wir brauchen, um mit dem Aufbau unseres benutzerdefinierten Themas beginnen zu können , was großartig ist. Also im nächsten Kapitel oder im nächsten Abschnitt werden wir darauf eingehen. Ich werde Bootstrap verwenden, um das Thema auszubauen, damit ihr Jungs folgen könnt. Oder verwenden Sie das Framework, das Sie wollen. 7. Am Thema arbeiten: Alles klar, in diesem Abschnitt werden wir eigentlich anfangen, unser Thema auszubauen. Also eine Sache, die ich vergessen habe, im Code-Editor-Abschnitt zu erwähnen waren Erweiterungen, die Sie tatsächlich in Visual Studio Code hinzufügen können. Neben Adam denke ich, dass es nur ein bisschen ein anderer Prozess in Adam oder anderen als Visual Studio Code ist. Aber eine wirklich wichtige, die ich viel benutze, heißt Verschönern. Deine Vorstellung, was das macht. Wenn du es nennst. Es formatiert tatsächlich Ihre Codedatei und eine viel lesbare Art und Weise. Also kehre ich zurück zum übergeordneten Thema und ich werde die Header-Datei öffnen. Sie können sehen, dass das Blank Slate Thema, das wir ursprünglich installiert haben , alle Dateien enthält, die wir benötigen. Sie sind jedoch nicht gut formatiert oder so etwas. Aber was ist schön an dieser Erweiterung ist, dass Sie die Datei verschönern können, sagen, dass es HTML ist und dann alles richtig formatiert. Es ist viel einfacher zu lesen und sieht einfach schöner aus, einfacher zu arbeiten. Das ist eine Sache, die ich empfehle, ist Installation von Erweiterungen helfen, den Code zu formatieren, verschönert, was ich für Visual Studio Code verwende. Ich bin mir nicht sicher, ob sie eine für Atom haben, aber es lohnt sich, nachzusehen. Also, jetzt, das ist aus dem Weg, was wir mit unserem Thema beginnen ist die Schaffung eines Navigationsmenüs über die Spitze. Wir wollen ein Logo hier drüben, vielleicht ein paar Links ganz oben. Und wie ich bereits sagte, werde ich Bootstrap dafür verwenden, und ich werde Bootstrap Version fünf verwenden. Also der erste Schritt dafür ist, Bootstrap tatsächlich mit dem Thema zu verbinden. Also werden wir in das untergeordnete Thema springen, in die Datei functions.php. Und dann machen wir eine neue Linie. Und wenn ich WP-Enqueue-Stil sage, und wenn ich Bootstrap Core sage, und dann werden wir Komma machen und dann Anführungszeichen öffnen. Und wir werden auf die Bootstrap-Website springen. Und was wir tun werden, ist in die Dokumente zu springen und loszulegen. Und Sie können hier sehen, kopieren Sie den Stylesheet-Link in Ihren Kopf vor all dem, unsere Blätter, um unser CSS zu laden. Dies ist große kleine Vogel nicht wirklich gehen, um es in den Kopf Abschnitt zu setzen. Wir werden es in die Datei functions.php einfügen. Also gehen Sie weiter und kopieren Sie den Link. Wechseln Sie zu Ihrem Code-Editor und fügen Sie ihn dann direkt dort ein und speichern Sie ihn. Und dann gehen Sie zurück auf die Bootstrap-Website. Und dann machen wir dasselbe mit diesen Stiefeln oder mit diesem JavaScript. Kopieren Sie das dann und wechseln Sie dann zurück zum Editor. Wir werden eine neue Zeile machen, WP-Enqueue-Skript. Und das kann Bootstrap-Kernskript sein. Und dann kleben Sie es auch hinein. Und sicher. Wenn wir also unsere Website aktualisieren, sollte die Formatierung wieder etwas anders aussehen. Diesmal sind wir eigentlich Bootstrap-Stile enthalten. Also gehen wir weiter und wechseln zu dem und sehen, was das getan hat. So können Sie sehen, unsere Links sind jetzt blau, dass Schriftfamilien ein wenig unterschiedliche Abstände, wenig anders. Das ist also ein gutes Zeichen. Dies bedeutet, dass wir Bootstrap-Stile und Skripte korrekt mit unserem Thema verbunden haben. Und wir können damit beginnen, die eigentliche Navigation auszubauen. Gehen Sie also weiter und wechseln Sie zurück zum Code-Editor. Wir können functions.php für jetzt schließen. Und was wir tun wollen, ist den Header, die PHP-Datei innerhalb unseres Kindesthema zu erstellen. Und was wir tun können, um die Dinge einfacher für uns zu machen, ist das übergeordnete Thema zu öffnen, gehen Sie zur Header-Dot-PHP-Datei, öffnen Sie es und kopieren Sie es einfach und fügen Sie es in unseren Kind-Theme-Header und schließen Sie dann diese. Großartig. Das ist also unser Header für unser Kinderthema. Irgendwie hilft uns entlang einfach kopieren und einfügen, so erhalten wir die gesamte erforderliche Struktur eines HTML-Dokuments. Alles, was wir heute hier in diesem Kurs machen werden , wird tatsächlich eine Menge HTML, CSS und JavaScript sein. Das ist wirklich alle WordPress-Sites sind. Es ist nur eine Möglichkeit, eine Site aufzubauen und sich mit der Datenbank zu verbinden , um Informationen aus der Verwendung von PHP innerhalb von HTML zu ziehen. Und dann haben wir all sein CSS formatiert. Sie werden also eine Menge vertrauter Struktur sehen , wenn wir diesen Kurs durchlaufen , wenn wir Seiten und solche Dinge erstellen. Also haben wir den Standard-HTML-Code hier oben, Körper, Körperklasse. Dies ist eine WordPress-spezifische Funktion. Das Gleiche mit dem hier. Und dann kommen wir in der Tat dazu, unseren eigentlichen Header auszubauen. So können Sie sehen, dass wir den Header mit der Header-ID haben. Wir können das alles loswerden. Und dann können wir anfangen, unsere Bootstrap-Navigation einzubauen. Also werde ich damit beginnen und sagen, nav Klasse gleich navbar ist. Navbar erweitern eine große Navigationsleiste. Licht. Bg, wie Und ich werde das schließen. Und dann in diesem NADH werden wir einen Container öffnen. Flüssigkeit. Wir schließen das ab. Ok. Und dann innerhalb dieses Containers wird die navbar Markenklasse gleich navbar Marke HRF tun , oder einfach nur lassen, dass es für jetzt. Und wir sagen einfach Navbar. Alles klar, speichern Sie das und wir können zurück zu unserer Seite wechseln und sehen, wie das aussieht. Großartig. Also haben wir navbar und die linke, die die Marke ist. Und wir können es untersuchen. Wir können sehen, dass wir unsere navbar haben, die die volle Breite überspannt. Im Inneren haben wir einen Container. Navbar Marke, großartig. Und wir haben den Stil zieht von Bootstrap, so perfekt. Als nächstes werden wir die Schaltfläche erstellen, um das Menü auf mobilen Bildschirmen umzuschalten. Also machen wir hier einen Zeilenumbruch und wir sagen Button Klasse, navbar Kleinkind. Geben Sie die Schaltfläche Gleich ein. Daten ein-/ausblenden gated. Das Ziel ist navbar unterstützte Inhalte. Bereichs-Steuerelemente. Navbar unterstützter Inhaltsbereich. Erweiterte, falsche Bereichsbeschriftung, Umschalten, Navigation. Wir schließen das. Und dann innerhalb dieser Schaltfläche, fügen wir eine Spanne mit einem Klasse navbar Krawattenunschärfe-Symbol hinzu. Wir können weitermachen und unsere Seite aktualisieren. Und dann, wenn wir das schrumpfen, tun Sie es von dieser Seite. Wir sollten unseren Menü-Button da oben sehen. Wir haben nicht tatsächlich den Inhalt der Seite bearbeitet, um tatsächlich ein Menü anzuzeigen, aber die Schaltfläche ist da und es zeigt und versteckt je nach Bildschirmbreite. So großartig. Jetzt müssen wir nur den tatsächlichen Inhalt hinzufügen, der angezeigt wird und den ausgeblendeten, wenn diese Schaltfläche gedrückt wird, sowie anzeigen. Ich bin Ordner breiter Bildschirme. Also direkt unter der Schaltfläche wird Hello Klasse navbar kollabieren. Und wir geben ihm eine ID von navbar unterstützten Inhalten. Schließen Sie das div. Und dann öffnen wir einfach eine ungeordnete Liste und einen Listeneintrag. Und dann wird dies eine Klasse von nav Element haben. Und das innerhalb dieser haben wir einen neuen Link mit der Klasse nav Link und aktiv, und dann geben wir ihm Bereich, aktuelle Seite und H ref. Wir können einfach leer lassen und wir sagen einfach, Oh, ich habe vergessen, die Klasse der Liste hinzuzufügen. Also sagen wir Navbar, Nav und Auto und B sind hier groß, und das sind nur Abstandsklassen. Das sind, das sind alle Bootstrap, Bootstrap-spezifische Klassen. Gehen wir weiter und speichern Sie das, wechseln Sie zurück zur Website und aktualisieren Sie es. Toll, also sehen wir nach Hause. Und dann können wir es zusammenbrechen und dann sehen wir auch nach Hause. So arbeitet das Kleinkind und das Menü funktioniert wie vorgesehen auf kleinen und großen Bildschirmen. So großartig. Eine letzte Sache in diesem Abschnitt, statt des Wortes navbar für die Marke, wollen wir tatsächlich ein Bild dort haben. Also, was wir tun können, ist, das loszuwerden. Und dann können wir einfach ein Bild hier reinlegen und sagen die placeholder.com. Und wir sagen einfach 140 mal 70. Und das ist nur ein Platzhalter Bild, um zu zeigen, wie es aussehen würde, wenn es ein echtes Logo gäbe. Nun, das und aktualisieren Sie das und Sie können sehen, ob das ein echtes Markenlogo war. Es wird dorthin gehen und gut aussehen. Das war's also für diesen Abschnitt. Und im nächsten Abschnitt gehen wir über die Mitte der Seite, den tatsächlichen Inhalt. Wir können ein paar Bilder und Zeilen und solche Dinge drinnen bekommen. Und wirklich diese Seite ausbauen. 8. Erstellen einer Seitenvorlage: In diesem Abschnitt werden wir tatsächlich Seitenvorlagen durchlaufen, wie man Seitenvorlagen zuweist und tatsächlich Inhalte für diese bestimmte Seite innerhalb des Code-Editors aufbaut. Also springen wir einfach direkt hinein. Was wir jetzt tun wollen, ist auf unserer Homepage, wir wollen eigentlich ein paar Dinge tun. Zum einen möchten wir eine Homepage erstellen. Wir werden dann eine Seitenvorlagendatei erstellen. Wir werden diese Seitenvorlage der Homepage zuweisen. Und dann laden wir nur einige grundlegende Heldeninhalte aus Bootstrap, nur um etwas hinein zu bekommen, damit die Seite ein bisschen schöner aussieht. Also lasst uns weitermachen und loslegen. Wir gehen zurück zum Dashboard und WordPress. Und wir werden zu Seiten navigieren. Und dann wollen wir eine neue Seite hinzufügen. Und wir werden das hier nur unter Titel nennen und wir werden es die Homepage nennen. Und dann werden wir es veröffentlichen. Sobald das veröffentlicht ist, gehen Sie auf Seite anzeigen klicken. Und dann von hier aus, was wir tun wollen, ist tatsächlich klicken Sie auf anpassen. Und wir gehen zu Homepage-Einstellungen. Und dann werden wir dies auf eine statische Seite umschalten und dann Homepage werden wir auf Homepage setzen und dann veröffentlichen. Also, was das tut, ist jedes Mal, wenn die Webseiten oder die Website geladen werden, wird es diese Homepage als Hauptseite laden. Toll, Also, was wir jetzt tun können, ist zum Code-Editor zu springen. Und innerhalb unseres Kindesthema wird einen neuen Ordner erstellen und wir werden diese Seitenvorlagen nennen. Und dann innerhalb dieses Ordners, werden wir eine neue Datei erstellen und wir werden diese Homepage bei PHP aufrufen. Im Inneren von hier werden wir mit PHP-Tags beginnen und wir werden Template-Name Homepage sagen. Dieser Kommentar direkt hier im Grunde nur sagt WordPress im Back-End, dass dies eine Seite Template-Datei ist und es erlauben, aus der Liste der Seitenvorlagen ausgewählt werden , aus denen Sie wählen können, wenn Sie die Seite bearbeiten. Wir kommen in nur einer Sekunde nach dieser Linie dorthin. Was wir als Nächstes tun wollen, ist die Kopfzeile einzuschließen. Also erhalten wir Unterstriche Kopfzeilenklammern, schließen Sie das aus, und dann machen wir dasselbe für die Fußzeile. Und dann geh weiter und speichere das. Und wir können auf unsere Webseite zurückkehren und aktualisieren. Und da gehen wir. Nichts ändert sich, alles ist gut. Was wir jetzt tun müssen, ist auf Seite bearbeiten klicken. Denken Sie daran, dass wir die Homepage, die wir soeben als Homepage der Website erstellt haben, eingestellt. Deshalb sehen wir es hier und klicken Sie auf Seite bearbeiten. Oben auf der rechten Seite. Erweitern Sie die Vorlage Akkordeon, Standardvorlage, klicken Sie darauf und ändern Sie es dann zur Startseite. Und dann gehen wir weiter und klicken auf Aktualisieren. Und dann Seite anzeigen. Okay, also sieht diese Seite jetzt anders aus, wir haben tatsächlich nichts zwischen der Kopf- und der Fußzeile wie die Standardvorlage. Also im Moment alles, was wir haben, ist die Navigation, die wir hinzugefügt haben, und dann die Fußzeile, die nur das Copyright mit dem Namen ist. Und dann einige Texte, die wir früher im Kurs hinzugefügt haben. Großartig. Was wir jetzt tun können, ist zurück in die Homepage-Dateivorlage zu gehen und beginnen, einige Hero-Inhalte von Bootstrap hinzuzufügen. Also sagen wir div. Wir geben dem eine Klasse. Px, PY fünf und y fünf Textcenter wird innerhalb dieses div gehen und wir werden H1 sagen. Ich möchte sagen, das ist ein Titel. Wir geben dem einen Kurs. Anzeige fünf, F, W fett. Und dann unter diesem H1. Und wir werden sagen, div mit der Klasse von col, große sechs und auto. Und dann sagen wir drinnen, wir sagen nur einen Absatz mit der Klasse von Lead und MB. Und wir werden nur ein paar Lorem Ipsum da reinbringen. Und dann unter diesem Absatz wird ein weiteres div geben. Wir werden hier ein paar Knöpfe setzen. Also sagen wir ein div mit der Klasse der D-Gitterlücke zum Flex, rechtfertigen Inhalt kleines Zentrum. Und dann wird innerhalb dieses div eine Schaltfläche sagen. Wir sagen einfach „primär“. Und dann geben Sie gleich Taste, Klasse. Taste, Taste, Primär. Und wieder, das sind alle Bootstrap-Standardklassen, sagen Button Strich groß, AX4, erhalten drei. Und dann, um es einfacher zu machen, kopieren wir einfach diese Tastenzeile, fügen Sie sie direkt unten ein, ändern Sie den Text ist sekundär. Sekundär. Und dann ändern wir uns. Die Klasse ist nur ein wenig anstelle von Schaltfläche primären wird Schaltflächenumriss sagen. Sekundär, Taste groß können wir halten und dann sagen wir p von x und wir werden das speichern. Und wir können auf die Webseite zurücksetzen und aktualisieren. Und wir haben diesen schön aussehenden Header-Abschnitt, dieser Hero-Abschnitt hier, wieder mit nur einem Platzhalter-Inhalt, aber sieht viel, viel besser aus. Und definitiv auf das, was wir in einem benutzerdefinierten Thema sehen wollen. Großartig. Als nächstes können wir eine Zeile mit einigen Karten hinzufügen, einige Bootstrap-Karten nur für einige weitere Inhalte auf der Seite. Also, was wir hier tun wollen, ist zurück in den Texteditor zu springen. Und genau unten hier sagen wir div mit der Klasse der Zeile. Und wir beginnen eine Spalte, kleine sechs. Und dann drinnen legen wir die Karte. Und dann innerhalb, dass wir ein weiteres div mit Kartenstrichkörper haben. Und dann hier drin sagen wir H5 mit einer Klasse von Kartentitel. Wir werden sagen, das ist ein Kartentitel. Und dann direkt darunter wird ein Absatz mit einer Klasse von Kartentext gesetzt. Und wir werden nur sagen, das ist einige Texte geht unten. Und dann direkt darunter werfen wir einfach einen anderen Knopf. Also sagen wir einen Knopf, Taste primär. Ein H ref ist nur eine für jetzt. Und wir sagen das, wir sagen einfach Link. Und ich werde das retten. Und dann können wir jetzt einfach diese ganze Spalte kopieren und sie so einfügen, wie wir zwei Spalten mit einer Karte an jeder haben. Speichern Sie das, kehren Sie zurück zur Website und aktualisieren Sie es. Und Sie können sehen, dass wir zwei Karten drin haben. Eine Sache, die wir vergessen haben, war, das einfach in einen Behälter zu legen , damit wir etwas Abstand auf der Seite bekommen. Also werde ich einfach zu hier Container gehen und dann einfach die ganze Sache in einen Behälter wickeln. Großartig. Also, jetzt sind wir ein bisschen mehr enthalten, haben einige Abstände integriert. Nun, alles sieht gut aus. So großartig. Nächsten Abschnitt gehen wir auf die Anpassung der Fußzeile, Reinigung, die ein wenig und gehen von dort. 9. Fußer: Also in diesem Abschnitt werden wir an der Fußzeile arbeiten. Wieder, was wir einige Bootstrap-Elemente verwenden werden , um dies etwas schneller zu formatieren. Aber ich werde euch nur zeigen, wie man das macht. Wir machen uns auf die Bootstrap-Website, getbootstrap.com. Und dann gehen wir zu Docs und suchen einfach Twitter. Ich klicke hier auf dieses erste Ergebnis. Und alles, was wir hier suchen werden, ist nur ein Beispiel für etwas, das wir tun wollen. Also können wir das hier sehen. Sieht aus, als ob es in dieser Vorschau ein bisschen anders war. Sieht aus, als wären es vier Säulen. Also gehen wir einfach weiter und machen das. Das sieht so aus, als hätte es nur ein bisschen Scrunch, aber wir machen es vier Spalten. So können wir das tun, indem wir zurück in den Code-Editor gehen. Und gerade jetzt haben wir die Homepage-Datei geöffnet. Aber was wir jetzt öffnen wollen, ist eigentlich das, was wir jetzt erstellen wollen, die Datei footer.html. Also innerhalb des Webkurses, oder was auch immer Sie Ihr Thema genannt haben, das Kinderthema hier werden wir neue Datei machen, footer.html, CPI. Und in dieser Datei können wir einfach voran gehen und anfangen zu tippen, was wir wollen in die Fußzeile. Wir machen einfach etwas Einfaches. Wir werden ein div mit einer Klasse von Containern machen. Innerhalb dieses div wird eine Zeile machen. Und dann werden wir 43 Spalten mit Breite machen. Geben Sie darauf ein. Und dann können wir 1, 2, 3 und 4 sagen 2, 3 . Wir werden das retten. Und wir können voran gehen und zurück auf die Homepage I PHP-Datei. Und doch haben wir die Fußzeile enthalten. Also lasst uns zum Browser zurückkehren. Gehen Sie zu unserer Website, aktualisieren Sie die Seite. Und Sie können sehen, dass wir unsere vier Säulen hier haben. Der Grund, dass es losgeworden ist, was wir vorher hatten, ist weil das, was wir vorher hatten, im Elternthema war. Also gehen wir zurück in die Fußzeile PHP. Dies ist also die übergeordnete Themes Footer Datei. Alles hier wird sofort ersetzt, sobald wir die Fußzeilenpunkt-PHP-Datei in unserem Kinderthema erstellen, was wir hier mit unseren vier Spalten gemacht haben. Das ist also der Grund, warum es passiert ist. Großartig. So können wir jetzt zu diesem Bootstrap-Beispiel zurückkehren. Und es sieht so aus, als hätten sie ein Logo und dann drei Menüs. So können wir weitermachen und etwas Ähnliches tun. So können wir tun, Lassen Sie uns einen Link mit einem Bild machen. Und ich werde nur das gleiche Bild verwenden, das wir in der Kopfzeile genau hier verwendet haben. Ist das drin? Und dann kommen Sie zu, wir machen einfach eine ungeordnete Liste, einfache Listenelement. Und wir machen noch einen da drin. Und dann kopieren wir das einfach, legen Sie es in die anderen beiden Spalten, wird aktualisiert. Und da gehen wir. Im Moment ist es also ein bisschen nah beieinander. Wir können hier einige Stile hinzufügen. Ich kann Ihnen zeigen, wie Sie Ihr eigenes benutzerdefiniertes Stylesheet tatsächlich mit der Website verbinden können. Gehen wir zurück zum Code-Editor. Und dann innerhalb des untergeordneten Designs, gehen Sie hinein und erstellen Sie einen neuen Ordner. Wir nennen das CSS einfach. Dann im Inneren, werden wir styles.css sagen. Großartig. Und dann wird dies unser benutzerdefiniertes Stylesheet sein. Und dann, was wir jetzt tun müssen, um es tatsächlich mit der Website zu verbinden. Wenn Sie sich vorher erinnern, habe ich erwähnt, dass wir diese benutzerdefinierten Stylesheets nicht direkt zum Header der Website hinzufügen . Aber was wir tun wollen, ist, sie in die Datei functions.php hinzuzufügen. Öffnen Sie das. Und um die Dinge ein bisschen einfacher zu machen, können wir einfach dieses Bootstrap kopieren, das wir getan haben. Und ich will das hier nur hinstellen, ändert sich ein wenig. Wir können Custom CSS sagen. Und dann, was wir anstelle dieses Links tun wollen, wollen wir Stylesheets, Verzeichnis, URI, Punkt, offene Anführungszeichen bekommen , und wir werden CSS-Stile sagen, die CSS, wenn Sie das speichern. Und wenn wir sicherstellen wollen, dass unsere Styles funktionieren, können wir zurück zu unserem neu hergestellten Stylesheet wechseln. Und wir können sagen, sagen wir, H sind rot. Speichern Sie das. Und wir können zurück in die Fußzeile gehen. Und nur um dies zu testen, fügen wir hier ein Element hinzu. Dies ist ein Test, speichern Sie ihn. Und dann werden wir zurück zum Browser wechseln und aktualisieren. Und jetzt kann man sehen, dass es schon ein H1 war, also ist dieser rot und das ist so, dass es großartig ist. Das bedeutet, dass unser Stylesheet verbunden ist und funktioniert. Was wir jetzt tun können, ist eigentlich nur einige der Abstände hier anzupassen. Lassen Sie uns das loswerden und wir sagen einfach div mit noch, dass wir voran gehen und einfach tun können. Die Fußzeilenklasse hat eine Polsterung von 50. Speichern Sie das, gehen Sie zur Fußzeile und zur Fußzeilenklasse zum übergeordneten Container. Und dann sollte uns das ein wenig Platz geben. Perfekte Analyse. Ich werde das loswerden. Ein Platzhalter dort. Alles klar, sieht gut aus. Es gibt also die Fußzeile und auch, wie man ein benutzerdefiniertes Stylesheet mit dem Ding verbindet. 10. Dynamische Inhalte: Also in diesem Abschnitt gehen wir tatsächlich über, wie man Daten oder Inhalte aus dem Backend oder dem WordPress-Editor ziehen und tatsächlich zeigen , dass Inhalte auf dem Frontend der Website dem Besucher, tatsächlich den Besuch der Seite. Also, was wir tun wollen, ist, gehen Sie weiter und melden Sie sich wieder in das Dashboard, wenn Sie nicht bereits sind. Ok. In Ordnung. Jetzt, wo ich wieder im Dashboard bin, gehen wir weiter und machen uns auf die Homepage zurück. Einige Seiten auf der linken Homepage. Und ich werde nur die Bildschirmoptionen hier anpassen. Bevorzugen Sie es nicht, im Vollbildmodus zu sein. Ich mag nur den Standardmodus in der Sidebar. Moment schauen wir uns den Namen der Seite an und dann diese eng an zwei oder wählen Sie einen Block. Dies ist der eigentliche Seiteninhalt. So standardmäßig dies als WordPress Gutenberg-Editor. Das ist völlig in Ordnung. Wir können es so behalten, wie es ist. Und alles, was ich hier tun werde, ist zu sagen, dass das Testinhalt ist. Dies wird auf der Seite angezeigt. Und ich gehe einfach weiter und klicke auf „Aktualisieren“. Also nur ein einfacher Satz, 12 Sätze hier, zum Beispiel Zwecke. Gehen Sie also voran und sehen Sie sich die Seite an. Im Moment wird das nichts in unserer Vorlagendatei zeigen. Wir haben eigentlich nichts eingerichtet, um diese Daten einzuspielen. Also, was wir tun wollen, ist zurück zum Code-Editor und wir wollen unsere Homepage-Vorlage öffnen. Und statt dieses Satzes hier, werden wir eigentlich wollen, dass dies unser Inhalt ist, den wir gerade in den Seiteneditor einfügen. Also, um das zu tun, müssen wir verwenden, was die WordPress eine Schleife genannt wird. Im guten Beispiel ist dies im übergeordneten Thema in der Seite Punkt PHP-Datei. Also gehen Sie weiter und finden Sie das, öffnen Sie das. Und ich werde diese Datei nur verschönern, damit sie etwas einfacher zu lesen ist. Ok? Also, beginnend auf Zeile 3, ist das eigentlich, was die WordPress-Schleife beginnt. So heißt es, wenn Beiträge haben, während Beiträge haben, erhalten Sie den Inhalt des Beitrags. Dies sind alle WordPress Standardfunktionen. Das ist nichts Brauch. Das ist genau das, womit wir arbeiten müssen. Also, was wir tun wollen, ist eigentlich nur diese Linie zu greifen. Kopieren Sie das und wir wechseln zurück zu unserer Homepage-Vorlage. Und wir können diese Linie genau hier setzen. Also sagen wir Zeile drei Paste. Und dann direkt unter der Fußzeile können wir diese if- und while-Anweisungen tatsächlich schließen. Also lasst uns voran gehen und das was beenden. Gehen Sie voran und öffnen Sie zuerst die PHP-Klammern und dann sagen wir Ende, während Sie das speichern. Moment sagt das alles, wenn es einen Beitrag gibt und während wir den Beitrag haben, holen Sie sich die Post-Daten, wir sehen eine Seite, also werden wir einen Beitrag zu zeigen haben. Sofort. Es wird immer noch alles zeigen, was wir codiert haben. Aber nur um Ihnen zu zeigen, dass nichts kaputt wird, werden wir fortfahren und die Seite aktualisieren. Sieht genau gleich aus. - Großartig. Also lasst uns wirklich schnell zurückwechseln. Und dann hier, anstelle dieses Absatzes, können wir einfach sagen, lassen Sie uns unsere PHP-Klammern hier öffnen und wir werden den Unterstrich Inhalt sagen. Und wieder, dies ist eine WordPress-spezifische Funktion. Das ist nichts, was wir alleine tun mussten. Lass uns voran gehen und das speichern. Und was das tut, das ist tatsächlich ziehen was Inhalt innerhalb des Editors ist. Das sollte uns unseren Platzhalter einen Satz geben. Genau da ist es, und das ist einige Testinhalte, Inhalte, dies wird auf der Seite angezeigt. Das ist also nur ein sehr kurzes Beispiel dafür, wie man Inhalte aus dem Editor in die Seite zieht . Im nächsten Abschnitt werden wir tatsächlich über ein Plug-in gehen, das ich auf fast allen meinen WordPress-Websites verwenden , die diese Funktionalität in eine Tonne von verschiedenen Feldoptionen, Bilder, alles, was Sie sich vorstellen können. Es ist eigentlich ein wirklich, wirklich großartiges Tool zu verwenden, wenn Sie auf Kunden-Websites aufbauen. Es ist viel effizienter als die Verwendung eines Page Builder-Plugins. Also freue ich mich sehr, euch das im nächsten Abschnitt zu zeigen. 11. Erweiterte benutzerdefinierte Felder: Ordnung, Also im letzten Abschnitt haben wir übergegangen, wie man nur einen einfachen Satz oder zwei aus dem Seiteneditor auf unsere Seitenvorlage zieht , um tatsächlich auf dem Frontend unserer Website zu zeigen. In diesem Abschnitt werde ich Ihnen tatsächlich zeigen, Jungs ein Plug-In, das ich fast auf jeder einzelnen WordPress-Website, die ich für Kunden gebaut. Es ist ein wirklich großartiges Werkzeug, um diese Funktionalität, die wir gerade gelernt haben, zu übernehmen und sie in eine Reihe von verschiedenen Elementen zu erweitern , von denen man ziehen kann. Also haben wir Bilder, wir haben Farbcodes, wir haben wiederholende Elemente, wir haben Tabellen. Es gibt eine grenzenlose Vielfalt an Elementen, die tatsächlich von der Verwendung dieses Plugins ziehen. Die Polygone nennen es also erweiterte benutzerdefinierte Felder. Ich werde einen Link dazu in der Beschreibung des Kurses hinterlassen. Dieses Plug-in verfügt über eine kostenlose Version und eine Pro-Version. Die Pro-Version ist es meiner Meinung nach viel wert. Und es gibt Ihnen noch ein paar Elemente, die wirklich, wirklich leistungsfähig für Websites sind . Ohne zu tief in sie zu kommen, können Sie alle Arten von Optionsseiten, Galerien sehen , Felder klonen, und so weiter. Nur ein paar Sachen, die Sie mit diesem wirklich, wirklich tolles Plugin bekommen. Wie auch immer, die kostenlose Version ist mehr als genug für das, was wir hier lernen müssen. Also, was Sie tun können, ist tatsächlich zurück in Ihr WordPress-Dashboard. Und wir gehen zu Plugins und dann Neu hinzufügen. Und wir können eigentlich einfach danach suchen. Also sagen wir erweiterte benutzerdefinierte Felder. Und es ist dieser hier, 1 Million Installationen. Und Sie können sehen, dass es eine Reihe von anderen Plug-Ins gibt und eine Art von erweitern auf die bereits massiven Felder Listen, die sie integriert haben. So können Sie sehen, es gibt eine Gravity Forms, fügen Sie auf Schriftart, Ehrfürchtig, fügen Sie auf Tabelle fühlen, dass auf erweitert und so weiter. Sobald das heruntergeladen wurde, gehen Sie weiter und klicken Sie auf Aktivieren. Und jetzt können wir zu benutzerdefinierten Feldern und der Sidebar gehen. Und ein kurzer Überblick darüber, dieses Plugin hier. Also, was wir tun wollen, lasst uns darauf zurückkommen. Also dieses Dashboard hier, die erweiterte benutzerdefinierte Felder Homepage, wenn Sie so wollen. Dies ist, wo Sie alle Ihre benutzerdefinierten Felder verwalten, die sie verwenden, für was auch immer es sein mag eingerichtet haben. Seiten posten benutzerdefinierte Beitragstypen, was auch immer Sie sich vorstellen können, Kategorieseiten und so weiter. Das ist, wir werden das alles schaffen. Ich möchte also auf Neu hinzufügen klicken und diese in verschiedene Gruppen aufteilen, die auf der Seite basieren. Also für diese Gruppe, werde ich es nur die Homepage und die Standortregeln nennen. Hier legen Sie tatsächlich diese Gruppe von Feldern so fest, dass nur der spezifische Beitrag oder die spezifische Seite angezeigt wird, die Sie möchten. Was wir also tun müssen, ist zu sagen, wir können es auf verschiedene Arten tun. Wenn wir wollten, dass es nur auf jeder Seite ist, könnten wir einfach von posten eine Seite ändern. Und jetzt, wenn wir eine neue Seite erstellen, werden diese Felder dort erscheinen, aber wir wollen ein wenig genauer sein. Also wollen wir eigentlich die Seitenvorlage ausrichten. Und wenn es der Homepage-Vorlage entspricht, die wir erstellt haben, möchten wir, dass diese Felder angezeigt werden. Großartig, So können wir voran gehen und lassen, dass und wir können auf Feld hinzufügen klicken. Also, was ich tun werde, ist , anstatt diese Standard-Gutenberg WordPress Editor für unseren Satz zu verwenden, ich werde nur sagen Hero-Satz. Und dann Tad, das erstellt tatsächlich den Feldnamen standardmäßig mit einem Unterstrich. Es ersetzt Leerzeichen durch Unterstriche. Sie können dies auch ändern, wenn Sie möchten, dass es ein wenig anders ist. Wir können diesen Satz dem Text überlassen. Normalerweise setze ich es auf einen wysiwyg-Editor, wenn ich den gesamten Abschnitt ausbauen werde. Also werde ich das hier eigentlich tun. Ich werde das in Heldeninhalte und Held Countertenor ändern. Sei einfach ein bisschen genauer. Ich mag es nicht, dass nichts erforderlich ist, es sei denn, es ist absolut notwendig. Das wird ein wenig knifflig, wenn Sie zurückgehen würden , wenn Sie Ihre Website ein wenig mehr aufgebaut haben. Und Sie möchten zurückgehen und einige Einstellungen anpassen oder neue Seiten erstellen, Seiten loswerden, solche Sachen. Wenn Sie jemals Felder benötigen, wird es ein wenig schwierig. Ich muss nur sicherstellen, dass alles passt. Also lasse ich alles gerne wie nicht benötigt. Und wir können den Rest so lassen, wie er ist. Großartig. Also lasst uns weitermachen und das veröffentlichen. Und was das tut, ist nur tatsächlich unsere Einstellungen hier zu speichern. Wir können auf unsere Seiten Homepage zurückwechseln. Und jetzt, da unsere Vorlage auf die Homepage-Vorlage gesetzt ist, können wir jetzt unsere benutzerdefinierte Gruppe hier sehen, die nur mit dem Held Inhalt mit einem wysiwyg Editor gekennzeichnet ist. Was wir also tun können, ist eigentlich nur diesen Satz zu kopieren und dann einfach hier einzufügen. Und ich werde die Seite sehr schnell ansehen, bevor wir etwas speichern. Und ich werde das hier eigentlich nur schnappen. Und legen Sie es auch hier rein. Toll, also haben wir ein H1, lassen Sie mich nur einen Absatz darunter haben. Ich klicke auf Aktualisieren und dann die Seite anzeigen. In Ordnung, also haben wir den Satz loswerden, also ist das weg und dann ist der Titel immer noch da. Das ist, was wir jetzt tun müssen, ist, zurück zu unserem Code-Editor zu wechseln. Und wir können diese Ausrichtung hier loswerden, dieses H1-Element. Und wir können diesen Absatz hier loswerden. Und alles, was wir jetzt tun müssen, ist zu sagen, dass es unsere PHP-Klammern geöffnet hat und sagen, die Feld-Hero-Inhalte. Dies ist also der Name des Feldes, das wir gerade erstellt haben. Und das Feld, das ist ein, dies ist es eine erweiterte benutzerdefinierte Felder Standardfunktion , die tatsächlich dieses Feld aus der Datenbank aufruft. Also lassen Sie uns voran und speichern Sie das und aktualisieren Sie unsere Seite. Und jetzt sehen wir unsere H1-Elemente hier. Unser Absatztext ist hier, und dann waren die Schaltflächen die ganze Zeit da. Großartig. Und so können Sie sehen, dass wir hier keinen hartcodierten Text haben. Es ist einfach, dies aus der Datenbank zu ziehen. Und wir können diesen Inhalt ändern. Wir können das noch ein paar Mal kopieren, nur damit wir mehr Text da drin bekommen. Okay. Perfekt. Also funktioniert alles genau so, wie wir es wollen. Wir können das Gleiche für diese Karten tun. Wir können auch erweiterte benutzerdefinierte Felder dafür verwenden. Wir können es sogar für die Fußzeile tun. Also werde ich euch zeigen, wie man diese beiden Karten in diesem Abschnitt macht. Also, was wir tun wollen, ist, es tut mir leid, gehen Sie zurück zum Dashboard, erweiterte benutzerdefinierte Felder Dashboards sind und fügen Sie neue hinzu. Wir wollen zurück auf die Homepage springen und ein Feld hinzufügen. Also, um die Dinge hier ein bisschen zu vereinfachen, sagen wir einfach linke Karte. Und dann machen wir das eigentlich zu einer Gruppe. Und dann innerhalb der Gruppe haben wir Unterfelder. Wenn wir also zurück zu unserer Homepage gehen, können wir den Titel und den Untertitel machen. Eigentlich wechseln wir zurück. Also haben wir ein H5 und okay, großartig, Yeah, wir können das als ein wysiwyg Editor tun und wir können tatsächlich ein Element hinzufügen, um diesen Link zu machen, wird dies sowohl für die linke als auch für die rechte Seite tun. Gehen wir zurück zum Feld-Editor hier werden wir ein Feld hinzufügen. Wir sagen nur Titel und Untertitel. Und nur um das ein bisschen zu bereinigen, sagen wir Titel Untertitel, ändern Sie dies in wysiwyg Editor. Und das ist alles, was wir dafür tun müssen. Und dann hier sagen wir Button, Button, und dann können wir dies ändern, um zu sehen, was wir dafür allein wollen. Wir wollen eine Verbindung. Und gut, also jetzt, was wir hier tun können, haben wir die linke Karte. Erweiterte benutzerdefinierte Felder machen es wirklich einfach. Wir können einfach duplizieren und dann ändern Sie dies bis zu sagen oder schreiben Karte, rechte Karte. Und dann können wir die gleich behalten. Und dann können wir das aktualisieren und zum Homepage-Editor zurückspringen. Und jetzt können Sie sehen, wo die linke Karte und die rechte Karte. Und was ich tun werde, ist, diesen Inhalt einfach zu kopieren, ihn hier einzufügen und zu glauben, dass es das Gleiche für diesen ist. Ist es, ich werde das retten. Und dann die Schaltfläche können wir einen Link auswählen. Ich mache nur einen Platzhalter-Link. Ich denke. Dasselbe hier unten. Okay, wir sind alle hier eingestellt. Es wird aktualisiert. Wird wieder die Seite sein, nichts wird sich ändern. Aber was ich Ihnen zeigen möchte, ist die erweiterte benutzerdefinierte Felder Dokumentation. Es ist wirklich, wirklich großartig. Es zeigt viele Beispiele, wie man so ziemlich alle Felder mit ein paar verschiedenen Beispielen für jedes verwendet . Also, was Sie tun können, ist eigentlich nur suchen, die auf die falsche Ebene geklickt wird. Lass uns die Dokumentation gehen. Und dann sagen wir nur Gruppe. Scrollen wir nach unten. So können Sie die Verwendung der Vorlage sehen. Es gibt Anzeigeinhalte, es gibt das Loop-Beispiel, wie die gleiche Gruppe mit der Funktion have rows angezeigt wird. Und wir werden einfach einfach gehen und einfach dieses Anzeigeinhaltbeispiel kopieren. Also, was wir hier tun wollen ist, dass sie sich nicht auf Held gesetzt haben, Unterstrich-Feld-Helden bekommen. Dies sieht sehr ähnlich zu dem, was wir bereits in unserer Vorlage, dem Feld, verwendet haben. Der Unterschied hier ist also, ob wir den Wert unseres benutzerdefinierten Feldes innerhalb einer Variablen speichern werden . Wir wollten Unterstrich Feld bekommen. Dies zeigt das Feld tatsächlich nicht an und legt es fest, zieht es einfach und speichert es dann in der Variablen. Wenn wir das Feld hier sagen würden, würde dies tatsächlich Fehler ausfallen. Es würde nicht funktionieren. Das ist also der Unterschied zwischen den beiden. Wenn Sie nur das Feld genau so anzeigen möchten, wie es ist, gehen Sie vor und tun Sie es einfach durch Feld und speichern Sie es in einer Variablen, die ich ging, um Feld zu erhalten. Das werden wir also tun. Hier ist nur eine einfache Überprüfung, um zu sehen, ob das tatsächlich etwas hat , und dann zeigen Sie es einfach an, wie Sie es normalerweise tun würden. Es sieht so aus, als hätten sie hier einige Stile hinzugefügt. Und Sie schließen einfach die if-Anweisung. Toll, also gehen wir weiter und machen das. Wir können hier auf Linie 16 tun, wir sagen einfach linke Karte gleich und bekommen Feld linke Karte. Und dann zu PHP, wenn Spaltkarte. Und dann direkt nach der Karte wird nur schließen, dass wenn Aussage. Also vergessen wir es nicht. Und gerade jetzt, da dieser Wert im Editor gesetzt ist, wenn wir die Seite aktualisieren und wir sollten immer noch den gleichen Inhalt sehen , da wir nichts geändert haben. Perfekt, also ist es immer noch da. Und dann können wir das jetzt so anpassen, wie wir es brauchen. Anstatt also das H5 und der Absatz codiert werden, werden wir nur das Feld sagen. Ich habe schon vergessen, wie wir es nannten. Springen Sie einfach hier zurück. Wir haben es Titel Untertitel genannt. Okay, ich werde das kopieren und es dann einfach dort einfügen. Und jetzt werde ich es einfach speichern und die Seite aktualisieren. Und es ist nicht da. Mal sehen, was wir hier falsch haben. Nun, das stimmt. Da wir das Gruppenfeld verwenden, müssen wir tatsächlich auf die Gruppenfelder Variable verweisen und dann sagen, welches Feld Sie darin wollen. Also lasst uns weitermachen und das etwas ändern. Aber es sagte das Feld, das wir sagen werden, in Ordnung, gehen Sie links Karte, und dann werden wir Titel-Untertitel sagen. Perfekt, da ist es. Und Sie werden feststellen, dass ich tatsächlich die eckigen Klammern anstelle der Klammern verwende. Dies ist genau das, was Sie verwenden, wenn Sie tatsächlich auf einen Wert oder ein Feld verweisen, das sich innerhalb einer Gruppe befindet. Das ist also der Unterschied zwischen den Getfield-Klammern und dann dem Echo-Feld innerhalb einer Gruppe. So können wir dasselbe für den Link tun. Also statt nur das Wort Link, werden wir PHP sagen, die linke Karten-Taste gehen. Und da dies ein Linkfeld ist, sagen wir Titel. Und dann werden wir das hier kopieren, genau das Gleiche hier und es dorthin bringen, wo der HRF ist. Und dann wird dies anstelle von Titel, sagen wir URL. Dann speichern wir die Aktualisierung. Und Sie können sehen, wie unser Titel den Test-Link ändern, was wir in den Editor setzen. Und wenn wir es inspizieren, können Sie sehen, dass die HRF auch geändert wird, was wir im Editor haben. Groß, Also, um die richtige Seite zu tun, können wir einfach kopieren und einfügen, wird entdecken, ist riesig, wenn Anweisung hier und einfach ersetzen Sie es hier und ändern Sie die Werte. Also statt der linken Karte wollen wir einfach rechts, richtig. Und dann müssen wir es auch hier ändern. Und wenn wir aktualisieren, können Sie sehen, dass dieser Titel den Testlink zu ändern und dann wird die URL auch geändert. Perfekt. Dies ist also nur ein sehr hoher Überblick über erweiterte benutzerdefinierte Felder und wie man nutzt, um Inhalte aus dem Editor zu holen und tatsächlich dem Besucher der Website zu zeigen. Im nächsten Abschnitt werde ich über Post auf der Seite gehen oder auf der Website posten. Und tatsächlich, wie man diese die Vorlage bearbeiten und das entweder in einem Blog-Format oder einfach nur auf dieser Homepage in so etwas wie einem dreispaltigen Layout anzeigen lässt. Das wird also der nächste Abschnitt sein. 12. Blog-Beitrag – Erstellen, zeigen und Styling: Ich hoffe, ihr habt die Klasse bisher genossen. In diesem Abschnitt werden wir über Blog-Beiträge gehen und wie sie die Vorlage bearbeiten und tatsächlich bekommen, um diese auf der Website zu erscheinen. Also lasst uns einfach reinspringen. Machen Sie Ihren Weg zum WordPress-Dashboard und klicken Sie auf Beiträge. Also standardmäßig, WordPress gibt Ihnen die Post, Post Typ. Dies ist in der Regel, was Sie verwenden, wenn Sie einen Blog auf Ihrer Website erstellen? Es gibt benutzerdefinierte Beitragstypen. Ich bin mir nicht sicher, ob ich in diesem Kurs darauf eingehen werde oder nicht. Es ist ein bisschen mehr ein Thema auf hohem Niveau. Dies ist mehr für nur die Grundlagen der Erstellung eines WordPress-Theme. Aber wie auch immer, so einen Beitrag Wordpress zu erstellen gibt Ihnen diese Standard-ein. Ich mach das einfach ab und füge einfach ein neues hinzu. Und wir sagen Testtitel eins und nur Inhalt hier für unseren Testpost. Und ich werde das nur ein paar Mal kopieren, um es auszufüllen. Und ich werde es veröffentlichen und dann den Beitrag ansehen. Dies verwendet also tatsächlich eine unformatierte Seitenvorlage, im Wesentlichen nur diesen Beitrag gezeigt. Es ist sehr unformatiert. Es gibt keine Stile und hat immer noch unsere alte Seitenleiste, aber es verwendet die Kopf- und Fußzeile, die wir erstellt haben. Das ist also gut. Lassen Sie uns also darauf eingehen, wie man diese Vorlage hier tatsächlich anpassen kann. Also springen Sie zurück in den Code-Editor. Und Sie können im übergeordneten Design sehen, gibt es eine Datei namens single.php. Php. Das ist also tatsächlich die Datei, die WordPress verwendet, um diesen Blog-Beitrag anzuzeigen. Also werden wir nur ein bisschen Code daraus stehlen und unseren eigenen machen. Also springen Sie in das untergeordnete Thema und erstellen Sie eine neue Datei. Und wir werden diesen Single Dot PHP nennen. Und wir werden tatsächlich alles aus dem Elternthema Single Dot PHP kopieren und es einfach in unsere Kind-Theme-Datei einfügen. Und wir werden das loswerden. Wir werden die Kommentare loswerden. Das wollen wir im Moment nicht. Und dann die Fußzeile Haupt und wir werden auch die Sidebar loswerden. Auch diese Haupt. Großartig. Also im Moment haben wir die Kopfzeile, wir haben unsere WordPress-Schleife, und dann haben wir die Fußzeile. Also lassen Sie uns voran und speichern Sie das und aktualisieren Sie die Seite jetzt sollte es nichts zeigen. Alles klar, Jetzt sollte es nichts außer der Kopfzeile und der Fußzeile zeigen, was genau das ist, was wir wollen. Und dann wechseln wir jetzt einfach zurück zu unserem Editor und bauen diese Seite aus. Also werde ich einfach ein sehr einfaches zweispaltiges Layout machen. Also, um zu beginnen, werden wir nur div Container mit einer Reihe sagen, und dann werden wir sie einfach Bootstrap-Klassen hier verwenden, um die Inhaltsseite zu machen. Und dann machen wir hier nur eine Sidebar. Und wir sagen vier. Perfekt. Also sagen wir Gruppen auf der linken Seite. Und toll, Also lassen Sie uns voran und aktualisieren, dass und nur stellen Sie sicher, dass wir unsere Formatierung und Layout-Setup perfekt haben . Und dann können wir einige WordPress-Standardfunktionen verwenden, ein wenig Code und tatsächlich einige Post-Inhalte in diese Vorlage ziehen. Also wollen wir nur sagen, den Titel. Und dann sagen wir PHP, den Inhalt. Im Moment wird dies nur den Titel und den Inhalt auf der Seite anzeigen. Perfekt. Offensichtlich sieht das jetzt nicht sehr gut aus. Also lasst uns das ein bisschen ändern. Also sagen wir, wir wollen, dass der Titel in einem H1 ist, also machen wir einfach eine neue Zeile. Eins. Wir bringen das hier hoch. Und dann können wir sagen, Blog-Titel. Und dann wickeln wir das vorerst in ein div ein. Und wir werden nur Blog-Inhalte sagen. Perfekt. Und dann gehen wir in unser benutzerdefiniertes Stylesheet, das wir gemacht haben. Und wir werden nur sagen Blog-Titel, Schriftgewicht, fett, Polsterung, tatsächlich, Rand unten 25, nur um etwas Platz zu geben. Perfekt. Und dann noch eine Sache, wenn es das tatsächlich wegschiebt, dieser ganze, ganze Container vom Header weg. Also gehen wir zurück zu der Single und wir sagen einfach Blog-Post. Wir sagen einfach 50 und dann Polsterung unten 50 als auch, um es von der Fußzeile weg zu schieben. Aktualisieren Sie diese, wir werden sehen, dass Wirkung perfekt, bereits besser aussehen. Nehmen wir an, wir haben ein vorgestelltes Bild für diesen Blogbeitrag. Und tatsächlich gehen wir voran und fügen das jetzt hinzu. Also klicken wir einfach auf „Beitrag bearbeiten“. Und dann vorgestellte Bild auf der rechten Seite. Wir werden nur dieses Bild hochladen. Sie können jedes Bild hochladen, das Sie wollen. Ein Update. Im Moment wird es nichts zeigen. Also lassen Sie uns in unseren Code-Editor und dann unsere single.php PHP-Datei springen. Und direkt über dem Titel, Lassen Sie uns eine neue Zeile mit einem Bild-Tag machen. Und wir werden sagen, innerhalb der Quelle, Es ist öffnen einige PHP-Klammern. Und wir werden sagen, hier oben, innerhalb unserer Schleife, wir werden nur sagen, vorgestellte Bild-URL gleich die Post Thumbnail URL erhalten. Und dann im Inneren werden wir sagen, holen Sie den Ausweis. Und dies ist nur eine Standard-WordPress-Funktion, um die ID des aktuellen Beitrags zu erhalten , der innerhalb der Schleife ist. Und dann werden wir die Größe des Bildes festlegen, das wir wollen. Wir wollen die volle Größe und schließen das einfach. Großartig. Also im Moment haben wir die URL des Full-Size Featured Bild, das wir gerade hochgeladen in dieser Variable gespeichert. Also lassen Sie uns die Schaltfläche speichern oder kopieren Sie das. Und wir gehen zurück zu unserem Bild-Tag und sagen echo diese Variable. Und dann können wir unsere Seite aktualisieren. Und jetzt können Sie sehen, unser Bild ist da. Es sieht so aus, als ob es sich ein wenig überlappt. können wir auch anpassen. Aber das ist großartig. Also lasst uns in unser Stylesheet springen und das bearbeiten. Wir sagen Blog-Post. Bild maximale Breite von 100%, Höhe. Auto sollte innerhalb unserer Spalte enthalten. Perfekt. Also suchen viel mehr wie ein Blog-Beitrag jetzt haben wir einige anständige Abstände Setup. Wir haben unser Bild oder Titel und einige Inhalte auf der rechten Seite. Dies ist in der Regel, wo wir ähnliche Artikel in Bezug auf Kategorien oder Tags, die Sie möglicherweise eingerichtet haben, zeigen . Im Moment werde ich einfach ein paar Platzhalter dort platzieren, aber das können wir jetzt tatsächlich eintauchen. Also innerhalb der einzelnen Punkt PHP-Datei, diese rechte Seite, Lassen Sie uns einfach ein div machen und es Blog nennen. Und dann innerhalb des ländlichen, so werden sie eine Reihe haben, die eine Spalte große Pore coulomb mit einem Bild hat. Wir lassen das für den Moment leer. Und dann die nächste Spalte. Dies wird der Titel und ein kurzer Satz sein. Vorschau des Inhalts. Lass uns das speichern und sehen, wie das aussieht. Okay, also haben wir kein Bild, aber dieser Abstand sieht gut aus. Es gibt einen Titel und dann eine Vorschau. Großartig, Also tatsächlich, um einige Inhalte zu bekommen, um hier zu zeigen, Lassen Sie uns gehen und einen neuen Platzhalter Blog-Post machen. Kommen wir zurück zum Armaturenbrett. Wir werden diesen Test nur benennen. Ich werde die gleichen Bilder zum Testen verwenden. Und dann ein paar Inhalte hier. Inhalt vor Test 2 ist Inhalt für Test zwei. Und ich mache das nur ein bisschen länger, nur damit ich euch zeigen kann, wie man eine Vorschau zeigt , anstatt den gesamten Inhalt dieses Beitrags veröffentlicht. Und Hoppla, wir gehen tatsächlich zurück und sehen unseren ersten Beitrag, den wir gemacht haben. Und was wir tun wollen, ist, dass dieser zweite Beitrag hier auftaucht. So können wir wieder in unseren Redakteur gehen. Und was wir hier tun wollen, ist im Grunde zu sagen, wenn es einen weiteren Beitrag gibt, den wir diesen Block von Inhalten zeigen wollen, diese Blog-bezogene Box, die wir gerade erstellt haben. Also, was wir tun können, ist tatsächlich eine, eine weitere WordPress-Schleife, um zusätzliche Beiträge auf dieser Seite zu erhalten. Wir müssen grundsätzlich eine andere Schleife in die Seite ziehen oder öffnen Ups und PHP-Klammern. Und wir werden ARDS sagen, was kurz für Argumente ist. Array. Öffne das und wir sagen Post pro Seite. Wir setzen das auf drei. Dies bedeutet nur, dass wir nur drei Beiträge innerhalb dieser Schleife wollen. Im Moment haben wir nur noch einen anderen Platzhalter. Aber wir wollten das auf drei beschränken. Wir werden sagen, der Post-Typ, wir wollen ausschließlich Post aussehen. Und dann sagen wir den Poststatus. Und wir wollen nur die veröffentlichten Beiträge. Großartig. Und dann können wir das schließen und dann machen wir eine neue Zeile und sagen die Abfrage, die wir ausführen möchten, setzen Sie diese Variable, wir sagen neue WP-Abfrage mit unserer Kunst, die wir gerade gesetzt haben. Und dann werden wir sagen, wenn diese Abfrage eine Abfrage gepostet hat gepostet hat. Gastgeber. Wir möchten das vorgestellte Bild greifen. Und wieder, das vorgestellte Bild ist gut, die Post Thumbnail URL. Und dann werden wir jetzt sagen, bekommen Sie die ID dieses Beitrags und die volle Größe kann tatsächlich den Daumen bekommen. Jetzt. Schließen Sie das. Und dann lassen Sie uns einfach schließen auf diese Weise tatsächlich die Weile vergessen. Während. Abfragegruppen haben Beiträge. Und dann hier unten, müssen wir die nur schließen. Genau so. Mach dir keine Sorgen, bekomme irgendwo einen Fehler. Werde die Klammer da los. Großartig. Also im Moment haben wir diese Zeile hier, die tatsächlich nur in den Titel dieser Post zieht hier, die wir gerade geschnappt haben. Und dann können wir auch das vorgestellte Bild, URL-Bild. Und wir können das speichern und unsere Seite aktualisieren. Und Sie können dort sehen, wir haben das Thumbnail und wir haben tatsächlich beide Beiträge, weil wir gerade jetzt nur auf einen Beitrag schauen und dann drei von ihnen greifen. Also standardmäßig wird das tatsächlich den aktuellen Beitrag greifen, den wir betrachten, unsere sekundären Beiträge, die wir gerade erstellt haben. So können wir einen weiteren Schritt machen, um den aktuellen Beitrag, den wir betrachten, tatsächlich auszuschließen, weil wir das nicht in unseren verwandten oder ähnlichen Artikeln in unserer Sidebar sehen wollen. Und um das zu tun, ist es wirklich einfach. Wir werden nur wieder in den Code-Editor springen. Und dann werden wir hier noch ein Argument hinzufügen und wir sagen nur Post, klopfen rein. Und ich werde keine Array-Schleifen sagen. Post-ID. Gehen Sie voran und speichern Sie diese, aktualisieren Sie unsere Seite. Und das hat es nicht getan. Und das wäre, weil ich glaube, ich habe meine Unterstriche fehl am Platz. Also lassen Sie mich hier zurückwechseln. Und ja, das sollte eins sein und das sollte nicht zu perfekt sein. So wird der aktuelle Beitrag davon befreit, in der Sidebar zu sein. Ich werde diese Linie tatsächlich kommentieren, nur damit wir sie hier entsprechend anpassen können. Und dann füge ich es wieder ein. Also kommentieren Sie, dass drei frisch und dann sehen, wie diese berühren. Wir wollten nur ein bisschen Trennung hier. Also alles, was wir tun müssen, ist nur diese Klasse zu greifen, die wir ihm Blog-Unterstriche gegeben haben, und fügen Sie einfach Rand unten hinzu. Wir sagen nur 25 Pixel. Perfekt. Also, jetzt haben wir einige gute Abstände Setup. Jetzt müssen wir nur diesen Platzhaltersatz ändern um den Inhalt zu ziehen, den wir tatsächlich in den Post-Editor einfügen. Um das zu tun, werden wir zum Single Dot PHP springen. Und dann sagen wir PHP-Klammern Echo, bekommen den Unterstrich x. einfach so. Und das ist eine weitere WordPress-Standardfunktion, die nur eine bestimmte Anzahl von Zeichen des Beitrags zieht und zeigt, dass auf der Seite. Also lassen Sie uns das speichern und dann aktualisieren. Jetzt können Sie sehen, dass wir tatsächlich den eigentlichen Inhalt hineinziehen. Wenn es sich um Absätze und Absätze des Inhalts handelte, würde es in dieser Vorschau immer noch nur eine bestimmte Anzahl von Zeichen anzeigen. Es gibt einige Dinge, die wir tun können, um das etwas kleiner zu machen. Wir können den Inhalt in eine Variable speichern und dann eine PHP-Funktion verwenden, um das zu trimmen. Auch hier können wir die Schrift kleiner machen. Wir können ein paar andere Dinge tun. Sie sind irgendwie Stift, stilisieren das ein bisschen mehr. Aber für unsere Zwecke ist dies ein guter Anfang hier. Also im nächsten Abschnitt, werden wir einfach über einige lose Enden hier mit Ihrem benutzerdefinierten WordPress-Theme-Entwicklung gehen . Hoffe, Sie Jungs haben entlang der Aufbau Ihrer eigenen Test-Website verfolgt , nur um ein Gefühl für, wie WordPress funktioniert, was Sie damit tun können, welche Plugins Sie nutzen können die Art erweitern die Funktionalität im Back-End. Dies ist wirklich großartig, wenn Sie die Website an einen Kunden weitergeben. Auf diese Weise müssen sie nicht wirklich in großen Code geraten, um größere Änderungen vorzunehmen. Es ist wirklich, wirklich hilfreich dafür. Ich habe einen halben Haufen anderer Dinge. Ich könnte es später natürlich machen, wie Sie erweiterte benutzerdefinierte Felder in vollen Zügen nutzen und tatsächlich ein echtes Thema mit gut aussehenden Elementen, funktionalen Elementen und solchen Dingen erstellen . Also hoffe, ihr seid aufgeregt. Danke, dass ihr die Klasse genommen habt. Wie ich im nächsten Abschnitt sagte, wir werden die Dinge einpacken. 13. Blog-Posts auf Homepage: Alles klar, in diesem letzten Abschnitt hier werden wir unseren Blog-Beitrag auf der Homepage hinzufügen , um sie dort zu präsentieren, sowie ein paar andere Dinge. Also, was wir tun werden, ist auf die Homepage gehen, lecker klicken Sie auf das Dashboard und wir werden die Website besuchen. Toll, also sind wir wieder auf der Homepage. Und was wir tun wollen, ist direkt unter dieser Karte und dieser Karte wollen wir unsere beiden Blog-Beiträge zeigen. Also gehen wir zurück in unseren Code-Editor und gehen zur Homepage-Vorlage. Und dann, direkt unter diesem Container hier, machen wir einfach einen neuen Container. Eigentlich können wir das außerhalb der Schleife tun. Also sagen wir, Sie haben Container div Zeile gemacht. Und ich mache einfach eine einfache Seite an Seite, 5050. Und dann wird das übrig bleiben und das wird oder ich sein. Also, wenn Sie aktualisieren, stellen Sie sicher, dass wir das in Gang bringen. Perfekt. In Ordnung, also jetzt alles, was wir tun müssen, ist sehr ähnlich zu dem, was wir für die verwandte oder ähnliche Blogbeiträge Seitenleiste getan haben. Wir können tatsächlich den größten Teil dieses Codes kopieren. Also werde ich das einfach auskommentieren, alles kopieren und auf die Homepage verschieben und es einfügen. Und dann können wir das wirklich loswerden, da wir nur eins brauchen, weil es zweimal laufen wird. Damit ich Ihnen das in einer Sekunde zeigen kann. Und dann müssen wir diese Aussagen wieder schließen. Genau so. Großartig. Also, jetzt ist es auf drei gesetzt. Wir müssen nur posten und wir wollen nur posten, wobei das zu zwei ändern. Wir können Post Naught in loswerden und den Rest behalten. Und lasst uns weitermachen und dies einfach in den Titel ändern und aktualisieren. Und dann können Sie Test Tidal einen Test mit dem Titel zwei sehen, das sind die Titel, die wir unseren Platzhalter-Blog gegeben. Das funktioniert also genau so, wie wir es wollen. Also lasst uns einfach voran und stylen das ein bisschen schöner. Und wieder, wir können ein wenig in diesem Code stehlen. Ich werde nur diese Funktion greifen, die bereits da ist. Also brauchen wir nur dieses Bild-Tag. Titel. Sie wollen tatsächlich diese 84 und die Absätze einschließen. Ich werde das hier nochmals kopieren und einfügen. Und dann nur ein bisschen runter und erfrischen. Und dann sollte das uns unser Thumbnail Bild, Titel und Inhalt geben. Willst du das nur ein wenig anpassen. Wir können voran gehen und ändern statt Thumbnail, es ist irgendwie eine mittelgroße Größe. Lass uns gehen und diese H2 ändern. Und dann möchte ich alles in sein eigenes div einwickeln. Und wir sagen Blog, Seite. Perfekt. Diese Datei nur ein wenig, und dann bereinigen Sie es. Noch einen. Großartig. Gehen Sie und aktualisieren Sie das, sehen Sie, was wir bekommen. Perfekt, so dass das Bild ein bisschen größer ist. Ich werde eigentlich nur die volle Breite wechseln, nur damit wir sie bekommen. Der wirkliche Effekt hier, denn das ist es, was wir eigentlich wollen. Perfekt. Also wieder, es ist irgendwie überlappend. Wir werden das mit einigen Stilen in nur einer Sekunde beheben, aber wir haben ein, was wir wollen. Also lasst uns diese Klasse greifen und zu unserem benutzerdefinierten Stylesheet springen. Und wir werden sagen, dass das Bild auch maximale Breite zu 100% automatisch sein sollte. Nun, wir wollen auch genau diesen Kurs machen. Wir wollen eine Marge oben von 50 geben, Rand unten von 50. Und dann geben wir ihm ein bisschen eine Grenze und vielleicht etwas Polsterung. Sehen Sie, wie das aussieht. Alles klar, also sieht gut aus, passend zur Kartengröße ein wenig, nicht ganz gleich. Wir können das anpassen, ihm ein bisschen einen Grenzradius geben. Sagen Sie einfach fünf Pixel. Und lasst uns das in etwas ändern, vielleicht ein bisschen leichter, vielleicht ein bisschen zu leicht, aber du verstehst den Punkt. Sieht gut aus. Wir können das weiter machen. Wir könnten eine Schaltfläche hinzufügen, die mehr lesen sagt, dass Links zu dem Artikel. Wir könnten die Bildgröße ändern, mehr Inhalt hinzufügen und so weiter. Aber das ist im Grunde, wie Sie einen Blog-Beitrag auf eine Seitenvorlage ziehen. Wir können tatsächlich darauf verlinken, damit ich Ihnen zeigen kann, dass es auf diese Vorlage zurückgeht. Also alles, lasst uns einfach die ganze Sache hier in einen Link einwickeln. Und dieser Link wird die H Breite des Echos haben, erhalten Sie den Permalink. Und all dies tut, ist eine WordPress-Vorlage, unsere Funktion wieder, die den Link zu dem Beitrag erhält, der der aktuelle Beitrag in der Schleife ist und ihn einfach hier setzt. Also gehen wir weiter und speichern das und aktualisieren. Und jetzt können Sie diese ganze Sache in einen Link geändert sehen und wir können einfach darauf klicken und es wird uns direkt zu unserer neu gestalteten Post Template bringen. Echt schnell. Ich werde das einfach anpassen. Diese Links, Texte, Farbe schwarz. Und wir gehen zurück Kegel. Und das ändert sich nicht, welche Homepage, beide Homepage-Link ist außerhalb. So können wir hier tun, ist ein Blogs. Und dann ändere das einfach, um zu sagen. Alles klar, perfekt, genau das, was wir wollen. 14. Schlussbemerkungen zum Kurs: Alles klar, das schließt diesen Kurs ab. Danke, Jungs, dass ihr den Kurs genommen habt. Ich hoffe, Sie haben es den ganzen Weg durch und fand es hilfreich und Ihre Reise zum Aufbau Ihrer ersten benutzerdefinierten WordPress-Theme. Ich mag es wirklich, es zu unterrichten, wenn ihr irgendwelche Fragen habt, zögern Sie nicht zu fragen. Ich freue mich wirklich darauf, zu sehen, was ihr zusammengestellt habt. Das war sehr spannend, Zusammenstellung dieses Kurses, Ich hoffe, mehr in der Zukunft zu tun, und ich hoffe, ihr Jungs werdet auch weiterhin zurückkommen und von mir lernen. Also nochmals vielen Dank. Ich hoffe, Sie haben den Kurs genossen.