Bootstrap für WordPress: Erstelle dynamische Themen!

1. Einführung: Willkommen zu diesem Kurs auf den Aufbau einer benutzerdefinierten responsive WordPress-Theme mit dem Bootstrap kostenlosen Framework. Mein Name ist Chris, und ich werde Sie Schritt für Schritt durch den Prozess führen. Wir werden beginnen, indem wir ein tolles Aussehen und Theme-Vorlage mit Bootstrap erstellen, eines der beliebtesten Front-End-Frameworks der Welt. Sobald dies gebaut ist, werde ich Sie durch den Prozess der Umwandlung dieser in eine voll funktionsfähige, gut aussehende benutzerdefinierte WordPress-Theme führen den Prozess der Umwandlung dieser in eine voll funktionsfähige, . In diesem Kurs lernen Sie Dinge wie das Erstellen von Websites mit Bootstrap, Hinzufügen von benutzerdefinierten Navigationsmenüs, die WordPress-Schleife, wie WordPress-Vorlagen funktionieren. Sie erfahren mehr über Widgets, benutzerdefinierte Felder, Header-Bilder, wie Sie Sprachübersetzungs-Spots zu Ihrem Thema hinzufügen und vieles mehr. Dies wäre also die großartig aussehende Website, die wir während dieses Kurses aufbauen werden. Dies ist die Homepage. Es ist ein Spa-basierte WordPress-Theme. Ich werde Sie durch jeden Schritt des Prozesses führen. Also werden wir nicht nur die Homepage bauen. Wir werden tatsächlich bauen die vollständige Website, einschließlich verschiedener Blog-Seiten, Kontakt und Über uns Seiten. Wenn wir zum WordPress-Abschnitt kommen, später im Kurs, Bereiche wie die neuesten Angebote Abschnitt, werden wir benutzerdefinierte Felder hinzufügen, um sicherzustellen, dass die Website vollständig anpassbar ist. Scrollen Sie weiter nach unten, wir haben einen Shop Online Bereich. Dann der Abschnitt Foto unten mit verschiedenen Links, die Über uns, die Seite Kontaktieren Sie uns. Wenn Sie zurück zum Seitenanfang scrollen, haben wir auch einen voll funktionsfähigen Block. Wir haben eine funktionierende Seitenleiste, die ein Suchfeld enthält, und auch Möglichkeiten, die Beiträge nach den Tags, den Kategorien oder den Monaten des Jahres zu filtern , und natürlich wird dies vollständig von der Website anpassbar -Administrator. Wir stellen auch sicher, dass Nutzer Ihrer Website Kommentare zu den Beiträgen hinterlassen können. Wenn Sie also in die einzelnen Beiträge gehen, erhalten Sie jetzt die Vollversion. Links zu früheren Beiträgen im Anhang und dem Abschnitt „Kommentare“ unten. Außerdem werden wir einen Abschnitt „Neueste Nachrichten“ haben , der ziemlich auf dem Blog-Abschnitt basiert. Aber wir wenden WordPress-Filter an, um die Blog-Beiträge nach Beiträgen zu filtern, die mit der Kategorie der Nachrichten beginnen, und wir zeigen Ihnen, wie Sie das tun. Es wird keine unnötigen Inhalte geben, nur um den Kurs zu füllen, nur direkt auf die Punkt-Videos. Jeder lehrt Ihnen eine neue Fähigkeit, für Ihre eigenen Projekte oder für Kunden zu verwenden, und Sie werden auch einige PHP auf dem Weg. Worauf wartest du? Begleiten Sie mich jetzt in diesem Kurs und ich freue mich darauf, Sie an Bord zu haben. 2. Bootstrapeinrichtung: Willkommen im Bootstrap-Bereich zu diesem Kurs. In diesem Abschnitt werden wir unsere Website mit dem Bootstrap-Framework bauen , die später im Kurs, werden wir verwenden, um zu einem voll ansprechenden benutzerdefinierten WordPress-Theme zu konvertieren. Um zu beginnen, gehen Sie zu getbootstrap.com und drücken Sie die Schaltfläche Bootstrap herunterladen. Sie werden dann zum Downloadbereich weitergeleitet. Es gibt drei verschiedene Versionen von Bootstrap, die Sie herunterladen können. Ich werde nur für die Standardversion auf der linken Seite gehen. Drücken Sie den Download-Button. Sobald das heruntergeladen wird, wenn wir zu den Downloads gehen und dann entpacken, dass. Weil unser Thema Ruhige Spa genannt wird. Dies ist die Bootstrap-Vorlage. Ich werde das beschauliche WP nennen. Dann möchte ich das auf dem Desktop speichern. Da gehen wir. Sie sollten den Bilderordner bereits heruntergeladen haben, der in diesem Video enthalten ist. Wenn Sie dies nicht getan haben, machen Sie das jetzt und legen Sie es dann in den Bootstrap-Ordner ab. Wenn wir den Bootstrap-Ordner öffnen und einen Blick darauf werfen, was enthalten ist. Zunächst einmal haben wir einen CSS-Ordner, der alle Bootstrap CSS enthält, sowohl die Standardversion als auch minimierte Dateien. Es gibt auch den Schriftartenordner, der alle Glyph-Symbole enthält. Als unser eigener Bilderordner, den wir gerade eingefügt haben, gibt es auch einen JavaScript-Ordner, der die Bootstrap JavaScript-Dateien enthält. Um loszulegen, wenn wir den Texteditor öffnen und dann werde ich in unseren Projektordner ziehen. Da gehen wir. Der Bootstrap-Ordner, den wir gerade heruntergeladen haben, enthält so ziemlich alles, was wir brauchen, um loszulegen. Das einzige, was ich jetzt hinzufügen muss, ist eine Indexseite, also werde ich Befehl und N oder Strg+N drücken , um eine neue Seite zu erstellen. Ich werde dies als index.html speichern und das in den tranquil-wp-Ordner platzieren. Sobald wir unsere Index-Seite haben, müssen wir jetzt wieder zu getbootstrap.com gehen. Immer noch im Abschnitt Erste Schritte, wenn wir nur ein wenig weiter nach unten scrollen, bis wir die grundlegende Vorlage finden. Wir werden dies als Starter-Vorlage verwenden. Es enthält alle grundlegenden HTML-Struktur und auch die Links zum Bootstrap, CSS und JavaScript. Drücken Sie einfach den Kopier-Button, dann zurück in die Index-Seite, wir können das einfügen. Für den Moment werde ich nur den Titel der Webseite ändern, nur um ein ruhiges Spa. Dann lassen Sie uns die Live-Preview-Schaltfläche drücken und dann sehen, wie es im Browser aussieht. Da gehen wir. Es ist eine ziemlich einfache Vorlage. Wir haben gerade das Hallo, Welt! Überschrift. Aber es sagt, es war viel Zeit, dass wir eine Indexseite erstellen würden. Wir haben erwähnt, dass Bootstrap mit eigenen CSS-Dateien kommt, was großartig für einen Ausgangspunkt ist. Aber wir wollen auch unsere Vorlage anpassen, so dass wir auch eine neue CSS-Datei hinzufügen. Ich werde eine neue Seite erstellen und diese als custom.css speichern und ich werde dies in den CSS-Ordner legen. Lassen Sie uns dies nun auf der Indexseite verknüpfen. Wie Sie sehen können, gibt es bereits, den Link zur Bootstrap-Minified Version Wenn wir also nur diesen und den Kommentar kopieren, können wir dies direkt unten einfügen und wir werden dies das benutzerdefinierte CSS nennen, und auch den Dateinamen ändern Custom CSS. Es gibt nur ein oder zwei andere Dinge, die wir in unsere Webseite verlinken müssen, um loszulegen. Die nächste sind die benutzerdefinierten Schriftarten. Wenn wir gehen über zu Google, und suchen nach Schriftarten. Das bringt uns zu google.com/fonts. Sobald wir da drin sind, können wir oben links suchen. Die Schriftart, die ich für diese Webseite verwenden werde, heißt Merriweather. Sie können eine andere Schriftart wählen, wenn Sie irgendwelche Präferenzen haben, aber ich werde bei diesem für jetzt bleiben und ich werde den Standard Merriweather auswählen. Also, was wir tun müssen, müssen wir uns die Felder auf der rechten Seite ansehen und auf das zweite Feld in klicken, das ist die Schnellverwendungs-Registerkarte. Google stellt uns verschiedene Schriftgewichte zur Verfügung, die wir verwenden können, und jedes Mal, wenn wir ein Schriftgewicht zum Herunterladen auswählen, zeigt es uns die Auswirkungen auf die Ladezeiten der Seite. Die Schriftarten, die wir in diesem Projekt verwenden werden, sind das 300 Gewicht, das 400, das ist die normale Größe, und auch die 700 für den fett formatierten Text. Es ist wirklich einfach, in das Projekt einzubeziehen. Wir können einfach den Link für den Kopfbereich kopieren und ihn unter unserem CSS einfügen. Ich werde auch einen Kommentar dort einfügen, nur für die benutzerdefinierten Schriftarten. Wir speichern das und gehen zurück zu Google-Schriftarten, und dann müssen wir unsere Schriftarten in das CSS integrieren. Kopieren Sie also die Schriftfamilie und gehen Sie dann zu unserer benutzerdefinierten CSS-Datei. Die Schriftfamilie wird in den Hauptteil gehen, und ich werde nur beginnen, indem ich einen Kommentar nur für den globalen Abschnitt hinzufüge. In diesem Abschnitt werden alle Stile beibehalten, die wir auf der gesamten Website verwenden werden, und wir beginnen mit dem Körperabschnitt. Fügen Sie in der Schriftfamilie und wir werden die Schriftstärke hinzufügen, wir fügen die Standardschriftgewicht von 300 hinzu, und fügen Sie auch die Schriftgröße 16 Pixel als Standard hinzu. So fügen wir die Schriftarten zur Website hinzu. Dann ist das allerletzte, was wir für das Setup tun müssen, zurück zu Google zu gehen und nach Font Awesome zu suchen, und dann auf die GitHub-Seite für Font Awesome zu gehen. Dies wird das I-Konzept sein, das wir für unsere Website verwenden werden. Wenn Sie die verfügbaren Symbole überprüfen möchten, wählen Sie einfach die Icons Registerkarte oben und Sie können einen Blick auf all die verschiedenen, die verfügbar sind. Um dies herunterzuladen, müssen wir gehen zu, Erste Schritte. Es gibt ein paar einfache Möglichkeiten, diese in unser Projekt einzubeziehen. Wir gehen mit der CDN-Route, die einfach beinhaltet, den Link zu kopieren und dann in unseren Kopfbereich einfügen. Dies verlinkt unsere Website mit den Font Awesome Icons, die unter dieser Adresse gehostet werden. Schließlich werde ich den Kommentar kopieren, fügen Sie ihn ein und benennen Sie diese Schriftart Awesome, und speichern Sie ihn dann. Da gehen wir. Das ist also unser Bootstrap-Abschnitt, alles Setup. Wenn du mir im nächsten Video beitrittst, werden wir mit dem Projekt fortfahren, indem wir den Kopfbereich erstellen. 3. Kopfbereich: HTML: Willkommen zurück. Jetzt haben wir unser Bootstrap-Projekt eingerichtet. Werfen wir einen Blick auf das endgültige Projekt und werfen einen Blick auf das, was wir in diesem Abschnitt bauen werden. Als nächstes werden wir das HTML für den Header-Abschnitt hinzufügen. Der Kopfzeilenabschnitt enthält eine Navigationsleiste oben links, die das Logo oben links haben wird. Auch auf der rechten Seite werden wir die Menü-Links haben. Wir werden ein großes Hintergrundbild und auch den vorgestellten Text in der Mitte hinzufügen , der sowohl horizontal als auch vertikal ausgerichtet sein wird. Der Text und das Bild werden für den Moment statisch sein. Aber sobald wir später im Kurs auf den WordPress-Abschnitt gelangen, wird der Benutzer in der Lage sein, den Hintergrund und auch den Text zu ändern. Um also mit dem Header-Abschnitt zu beginnen, gehen wir zu unserem Texteditor und lassen Sie uns die Sidebar vorerst loswerden. Wenn wir also nach unten scrollen, können wir die Hello Welt h1 Überschrift löschen und dann mit einem Kommentar für den Header-Abschnitt beginnen. Okay, also wird der Header-Abschnitt zwischen den Header-Tags sein. Wir beginnen mit der Navigationsleiste oben auf der Seite. Das wird also in nav-Tags sein und es wird einige Bootstrap-Klassen haben. Die erste wird navbar und dann navbar-default sein. Also werden wir eine Menge diese Bootstrap-Klassen verwenden, während wir das Projekt durchlaufen. Wenn Sie neugierig sind, genau zu wissen, was jeder von ihnen tut, können wir zum Bootstrap CSS im CSS-Ordner gehen. Wenn wir nach der bootstrap.css suchen, zum Beispiel, wenn wir nach navbar-default suchen. Also gehen Sie zu Bootstrap CSS, und wenn Sie die Suchfunktion Ihres Texteditors verwenden und dann die Klasse eingeben, nach der Sie suchen möchten. Also werde ich nach einem Navbar-Standard suchen. Dies führt Sie dann zu dem Abschnitt des CSS, der gilt. So können wir sehen, dass durch Hinzufügen eines navbar-default, es enthält verschiedene Rahmen und Hintergrundfarben. Also können wir dies verwenden, wenn Sie genau wissen wollen, was im CSS hinter den Kulissen passiert. Aber es lohnt sich auch zu bedenken, dass jede dieser Bootstrap-Klassen, die wir enthalten haben , wir auch unsere eigene benutzerdefinierte CSS-Datei hinzufügen oder überschreiben können. Als nächstes werden wir ein div mit der Klasse der Container-Fluid hinzufügen. Auch hier ist container-fluid eine Bootstrap-Klasse. Sie können entweder container-fluid verwenden, das ein flüssiges div mit voller Breite bereitstellt, oder Sie können die Container-Klasse selbst verwenden, die ein div mit einer festen Breite enthält. Dann werden wir innerhalb der Containerflüssigkeit ein neues div mit einer Klasse von navbar-Header erstellen. Innerhalb dieses div wird dies der Abschnitt sein, der die Informationen für Bildschirmlesegeräte enthält. Außerdem werfen wir einen Blick auf das fertige Projekt. Sie können sehen, ob wir den Browser nach unten verkleinern, es ist eine voll responsive Website. Sobald wir also unter eine bestimmte Größe sind, verwandelt sich das Navigationsmenü in ein Dropdown-Menü. Die Kopfzeile enthält also auch die Informationen für die Dropdown-Schaltfläche. Fangen wir jetzt mit diesem Knopf an. Die Schaltfläche wird eine Art von Schaltfläche haben. Wir werden einige Bootstrap-Klassen hinzufügen. Die erste ist navbar-toggle und dann ausgeblendet. Es wird standardmäßig reduziert, so dass wir die Datenumschaltung hinzufügen können, um gleich zu kollabieren und das Datenziel gleich ist.navbar-collapse ist . Also, was das Datenziel tut, ist dies in der Schaltfläche mit einem div mit einer Klasse alle navbar-collapse verknüpft. Wir werden das nach dem Button erstellen. In der Schaltfläche verschachtelt, werden wir die drei Symbolleisten hinzufügen, die sich auf der Dropdown-Schaltfläche befinden. Also der erste, diese werden alle zwischen Span-Tags liegen. Das erste span -Tag wird nur eine Klasse für Bildschirmlesegeräte sein. Dies wird eine Klasse von sr-only haben und der Text für die Bildschirmlesegerät wird Toggle Navigation sein. Als nächstes fügen wir eine weitere Spanne mit einer Klasse von Symbolleiste hinzu. Dies ist also die erste der drei Symbolleisten. Also wird es genau das Gleiche für zwei weitere sein. So können wir das einfach kopieren und einfügen oder duplizieren und einfach die Rechtschreibung dort ändern. Da gehen wir. Okay, also lasst uns das in der Vorschau überprüfen. Da gehen wir. Auf dem kleineren Bildschirm erscheint dort die Dropdown-Schaltfläche. Das sollte verschwinden, sobald wir eine bestimmte Größe erreicht haben. Da gehen wir. Als nächstes müssen wir das Logo in der oberen linken Ecke und auch die drei Navigationslinks hinzufügen . Also, um zu beginnen, wird das Logo direkt unter der Schaltfläche gehen, aber immer noch innerhalb der Navbar Header div, und es wird ein Link sein. Also werden wir die href von Tags setzen und dies wird zurück auf die Indexseite verlinken, die index.html ist. Die Bootstrap-Klasse ist navbar-Marke. Da unser Logo einfach Text ist, können wir das einfach dort eingeben. So Tranquil Spa. Das ist das Ende des Navigationsleisten-Header-Abschnitts. Also werde ich nur einige Kommentare hinzufügen. Also nennen wir das den Navbar-Header und wir werden das dort beenden. Also direkt unter dem navbar-Header div, am nächsten Tag werden wir die drei Links von zu Hause, Blog und neuesten Nachrichten haben . Das Container-div wird also die Klasse des Zusammenbruchs haben. Als nächstes fügen wir die navbar-collapse-Klasse hinzu, die wir für das Datenziel verwendet haben. Dann fügen wir in diesem Collapse-Abschnitt unsere ungeordnete Liste hinzu und fügen unsere Bootstrap-Klassen von nav navbar-nav und auch navbar-right hinzu, die die Navigationslinks auf die rechte Seite des div schiebt, dann kostenlose Listenelemente, die auch Links sind. Also die href, für den ersten Link ist für zu Hause, also wird dies auf die index.html verlinken, und der Text war zu Hause. Wir brauchen zwei weitere Listenelemente. Die zweite ist für die blog.html und ändern Sie den Namen. Der dritte Link ist für die neueste neue Sektion. Jetzt werde ich nur den Link für diesen leer lassen, wir werden unsere Vorlage für den Blog-Abschnitt mit Bootstrap erstellen. Aber wenn es um die neuesten Nachrichten Abschnitt geht, wird dies dynamisch in WordPress generiert werden. Wir werden im Grunde die Blog-Seite verwenden, aber wir werden nur einen Filter verwenden, nur um die Blog-Beiträge herauszufiltern, um die neuesten Nachrichten Kategorie zu sein. Dann lassen Sie uns einige Kommentare hinzufügen. Also lassen Sie uns zuerst einen Kommentar zum navbar-collapse schließenden div hinzufügen, und dann ist der letzte für die Container-Fluid. Ich kann das da oben schließen. Schauen wir uns das im Browser an und sehen, wie das aussieht. Großartig. Also haben wir das Logo auftaucht. Wir haben die drei Links auf der rechten Seite. Verkleinern Sie den Browser nach unten, die auf eine Dropdown-Schaltfläche, die erweitert wird, um die drei Links anzuzeigen. Da diese Dropdown-Schaltfläche funktioniert, zeigt dies übrigens auch, dass unser Bootstrap-JavaScript, das im js-Ordner enthalten ist, korrekt verknüpft ist und alles funktioniert. Unten unten auf der Seite können Sie sehen, dass die Links bereits in der Bootstrap-Vorlage enthalten sind, sowohl für jQuery als auch für das Bootstrap-JavaScript. Wir wissen also, dass das alles korrekt funktioniert. Jetzt haben wir unsere Navigationsleiste komplett. Als nächstes beginnen wir mit dem Hintergrundbild und auch dem Text. Wir werden dies den Feature-Bereich nennen. Also werden wir das direkt unter die Navigation stellen. Lassen Sie uns diesen Header kopieren und fügen Sie ihn dann direkt unter dem schließenden und nav Tag, aber immer noch innerhalb der Kopfzeile ein. Ich werde dies den FEATURE SECTION nennen. Da der Feature-Bereich also ein großes Hintergrundbild hat , das wir auf die volle Breite der Seite dehnen wollen, werden wir das Bootstrap Container-Fluid wieder verwenden. Dann müssen wir innerhalb des Containerflusses eine weitere Bootstrap-Klasse der Zeile und auch unsere eigene benutzerdefinierte Klasse hinzufügen , die Funktion ist. Damit können wir im CSS im nächsten Video verlinken. Fügen Sie dann den Pfad zum Bild hinzu. So Image-Sauce. Wir haben Images Ordner innerhalb des Projekts und dann wird das große Hintergrundbild lakebg.jpeg genannt und fügen Sie dort etwas Alt-Text hinzu. Ich werde nur See-Hintergründe hinzufügen. Also lassen Sie uns überprüfen, ob das funktioniert. Ich gehe zurück in unser Projekt. Also da gehen wir, es gibt ein großes Bild im Hintergrund angeheftet. Lassen Sie uns als nächstes den Text hinzufügen, der das Bild überlagert. Der Text wird in seinem eigenen div gehen, und wir fügen eine benutzerdefinierte Klasse von Feature-Text hinzu. Dann fügen wir in diesem Container unseren Text in den p-Tags hinzu. So war der Text voll reaktionsschnell PREMIUM SPA THEME FÜR Wordpress. Dann werde ich einige Break-Tags nach dem Wort responsive und auch nach dem Wort Thema hinzufügen , nur um das in verschiedene Zeilen aufzuteilen. Wenn wir also zurück in den Browser gehen und sehen, wie das aussieht, der Text noch nicht über dem Bild erscheinen , weil wir etwas CSS hinzufügen müssen, damit das funktioniert. Aber der Text erscheint direkt unten, also brauchen wir uns noch keine Sorgen darüber zu machen. Das lösen wir im nächsten Video. Also werden wir diesen Abschnitt einfach beenden, indem wir einige abschließende Kommentare hinzufügen. Zunächst zum Fluid-Container und dann zum div mit der Klasse der Zeile und dann zum Feature-Text. Also gehen wir hin. Das ist also das Ende des HTML für den Header-Abschnitt. Wenn Sie mir im nächsten Video beitreten, werden wir mit dem Header-Abschnitt fortfahren, indem Sie das CSS hinzufügen. Ich werde auch einen Blick auf die Bootstrap-Zeilen und das Grid-System werfen. 4. Kopfbereich: CSS: Willkommen zurück. Im letzten Video haben wir den HTML-Code für den Header-Abschnitt erstellt. Wir haben die obere Navigationsleiste mit den Menü-Links, das Haupt-Hintergrundbild und auch den Feature-Text eingefügt. In diesem Video werden wir unsere Website mehr wie das fertige Projekt aussehen lassen , indem wir das CSS hinzufügen. Wir werden die Linkfarbe und den Hintergrund für die Navigation ändern. Wir werden auch den Text formatieren und sicherstellen , dass er horizontal und vertikal auf das Hintergrundbild ausgerichtet ist. Wir werden auch einen Blick auf das Bootstrap-Grid-System werfen, und ich werde Ihnen zeigen, wie Sie eine Spalte zu unserer Website hinzufügen, um es reaktionsschnell zu machen. Beginnen wir mit unserem Texteditor. Wir müssen die Seitenleiste hochziehen und in unser benutzerdefiniertes CSS gehen. Blasen Sie einfach den Körper, immer noch innerhalb des globalen Abschnitts, das erste, was ich hinzufügen muss, ist eine maximale Breite für die Bilder. Wir werden sie auf 100 Prozent setzen, was verhindert, dass Bilder zu groß werden. Lassen Sie uns einen Kommentar für den navbar Abschnitt erstellen. Wir werden mit dem Navbar-Abschnitt beginnen. Die Hauptnavigation hat die Klasse der navbar. Dies ist der Teil, den wir zuerst stylen werden, also dot und dann navbar. Wir müssen die violette Hintergrundfarbe nach oben. Der Hintergrund wird eine Anzahl von 97689c haben. Lassen Sie uns überprüfen, ob das funktioniert. Die Hintergrundfarbe hat sich geändert, aber wir müssen den Rand loswerden , der ganz unten ist das Hintergrundbild nach unten drückt. Wir tun das einfach, indem wir den unteren Rand auf Null ändern. Das nächste, was wir tun möchten, ist die Standard-Grenze zu entfernen. Es ist ziemlich schwer, den Standardrahmen um die Navigationsleiste zu sehen. Aber wir können das entfernen, indem wir einfach die Grenze auf Null setzen. Dann müssen wir jetzt den Text für das Logo in der Navigation ändern. Bootstrap hat viele Klassen und eine Menge CSS, die als Standard enthalten ist. Es kann manchmal schwierig sein, genau zu finden, welche Klasse wir ändern müssen. Eine der einfachsten Möglichkeiten, dies zu tun, ist, in die Browser-Entwickler-Tools zu gehen. In Chrome müssen Sie mit der rechten Maustaste klicken und Element prüfen auswählen. Wenn Sie dann die Lupe auswählen und dann einfach über das Element bewegen, das wir ändern müssen, und klicken Sie auf. Dann sollten wir eine Liste der Klassen erhalten, die dieses bestimmte Element beeinflusst. Wir können sehen, das erste Element ist die Farbe für die navbar Standard navbar Marke, und das ist in der Bootstrap minified Version. Wir können diese Farbe ändern. Ich werde nur die Klasse kopieren, die diese Farbe beeinflusst. Dann zurück in unser benutzerdefiniertes CSS, fügen wir dies ein und ändern Sie die Farbe in weiß. Das ändert die Farbe des Logos. Wir müssen auch das gleiche für die Navigationslinks tun, die ein Home-Blog über die neuesten Nachrichten ist. Tun Sie dies erneut, wählen Sie die Lupe aus und wählen Sie eine der Links. Auch hier können wir die Standardgraue Standardfarbe überschreiben, indem wir die Bootstrap-Klasse kopieren. Da wir auch wollen, dass dies weiß ist, können wir dies im selben Abschnitt hinzufügen. Das ändert die in Weiß. Dann wollen wir auf der kleineren mobilen Ansicht auch die freien Symbolleisten weiß sein. Wählen Sie erneut die Lupe aus. Wenn Sie einfach eine der Symbolleisten auswählen können, und stellen Sie sicher, dass wir diejenige finden, die die Hintergrundfarbe steuert. Kopieren Sie die Klassen. Dann lassen Sie uns diese in unser CSS einfügen. Lassen Sie uns die Standard-Hintergrundfarbe ändern, wir ändern sie in weiß. Aktualisieren. Großartig. Da gehen wir. Die Symbolleisten sind jetzt alle weiß. Das ist alles, was wir brauchen, um der oberen Navigationsleiste hinzuzufügen. Jetzt können wir nach unten in den vorgestellten Bereich gehen, und wir können mit der Arbeit an der Position im Bild auf dem Text beginnen. Lassen Sie uns einen neuen Kommentar für den Feature-Abschnitt erstellen. Wir können den Text über das Bild hinzufügen. Wir müssen eine relative und absolute Positionierung verwenden. Wir müssen den Container relativ machen. Vervollständigen Sie den Text darin. Der Container für den Feature-Abschnitt hatte eine Feature-Klasse, bei der es sich um eine benutzerdefinierte Klasse handelt, die wir selbst hinzugefügt haben. Beginnen wir, indem wir das hinzufügen und die Position so einstellen, dass sie relativ ist. Da das Hintergrundbild gestreckt werden soll und die gleiche Breite wie der Browser aufweist, müssen wir die maximale Breite von 100 Prozent überschreiben, indem die Feature-Image-Class hinzugefügt wird. Anstelle der maximalen Breite werden wir nur die Breite einstellen, diesmal von 100 Prozent. Das bedeutet, dass sich das Bild etwas größer oder etwas kleiner als die ursprüngliche Größe des Bildes dehnen kann . Jetzt haben wir die Containerposition relativ. Jetzt müssen wir den Text so ändern, dass er absolut ist. Wir haben eine weitere benutzerdefinierte Klasse hinzugefügt, die den Text umgab, der eine Klasse von Feature-Text war. Als nächstes fangen wir damit an. erste Position wird auf absolut gesetzt, weil wir absolute Positionierung verwenden. Wir werden sowohl die obere als auch die untere Position auf gleich setzen. Sie werden beide gleich Null sein. Nun, da das absolut positioniert ist, erscheint der Text nun über dem Bild. Wir können damit beginnen, es horizontal und vertikal auszurichten. Wir werden damit beginnen, den Text jetzt vertikal auszurichten. Zuerst werde ich das einfach austippen, und dann werde ich erklären, was das danach tut. Die Feature-Text-Class und dann vorher. Legen Sie den Inhalt so fest, dass er leer ist. Der Anzeigetyp, der Inline-Block sein soll. Die Höhe, die zu 100 Prozent des Behälters einnimmt. Schließlich senkrecht ausrichten, um Mitte zu sein. Darauf kommen wir in einem Augenblick zurück. Zunächst fügen wir nur die Stile für den Text hinzu. Die Feature-Class und dann das p, das den Text umgibt. Dies wird auch den Anzeigetyp des Inline-Blocks haben, und alle werden bald klar werden. Auch vertikal ausgerichtet, um Mitte zu sein. Die Textausrichtung wird im div zentralisiert. Die Breite, die 100 Prozent des Containers betragen soll. Wenn wir zurück in den Browser gehen und wenn wir uns das fertige Projekt ansehen, gibt es eine Hintergrundfarbe. Es ist ziemlich schwach, aber es umgibt den Text, der abgerundete Kanten hat, und es ist auch halbtransparent. Lassen Sie uns das jetzt hinzufügen. Um zu beginnen, können wir die Hintergrundfarbe hinzufügen, die einen RGBA-Wert hat. Zunächst müssen wir die roten, grünen und blauen Werte hinzufügen . Um die graue Farbe zu erstellen, ist der erste Wert 74, 82, 95, und dann der letzte Wert ist das Alpha oder die Deckkraft. Ich möchte, dass das 0,2 ist, was die gleiche wie 20 Prozent Deckkraft ist. Der Hintergrund hat abgerundete Ecken, die Sie erhalten, indem Sie einen Grenzradius von 10 Pixeln hinzufügen. Die Textfarbe ist weiß. Also gibt es den Hintergrund für den Text an Ort und Stelle. Also im Grunde, was wir hier tun, ist, dass wir etwas Text erstellen und wir fügen ihm einige Stile hinzu, und dann fügen wir ein gefälschtes Element kurz vor dem Text hinzu, damit wir es als vollständige Höhenreferenz verwenden können, um den Text im div auszurichten. Vor dem Text erstellen wir ein leeres div, das keinen Inhalt hat, die sowohl das gefälschte div als auch der Text sind, der Inline-Block ist. Also werden sie Seite an Seite sein. Da die gefälschten Elemente eine Höhe von 100 Prozent haben, wird dies die volle Höhe des div einnehmen, und dann, da dies die volle Höhe des div ist, können wir dann die vertikale Ausrichtung so einstellen, dass sie Mitte ist, und dies bewirkt, dass der Text in der Mitte des div ausgerichtet wird. Um diesen Trick zum Laufen zu bringen, müssen wir nur noch eine Sache tun, da der Inline-Block standardmäßig eine Lücke zwischen den Elementen hat. Wir müssen das entfernen. Also müssen wir eine Eigenschaft hinzufügen, die Null Breite ist. Wenn wir die Schriftgröße auf Null ändern, wird die Lücke zwischen den gefälschten Elementen und dem Text entfernt. Da wir die Schriftgröße auf Null gesetzt haben, müssen wir dann die Schriftgröße in den p-Tags hinzufügen. Man muss also 48 Pixel sein. So hat es das gespeichert und überprüft, dass im Browser. Das sieht gut aus. Das ist jetzt vertikal auf das Hintergrundbild ausgerichtet, und wir können auch die halbtransparente Hintergrundfarbe sehen. Also lassen Sie uns einfach ein wenig darauf hinzufügen, nur drei Prozent, und legen Sie die Zeilenhöhe auf 80 Pixel. Lassen Sie uns sparen und sehen Sie sich das an. Großartig. Das sieht jetzt viel besser aus. Das nächste, was wir tun müssen, ist es horizontal im div auszurichten. Wir werden das tun, indem wir einige Bootstrap-Spalten hinzufügen. Wenn wir den Kopf zurück, um bootstrap.com zu bekommen und dann, wenn wir in den CSS-Abschnitt gehen, und wählen Sie dann das Grid-System auf der rechten Seite, und dann scrollen Sie nach unten zu den Rasteroptionen. Bootstrap hat ein 12-Säulen-Grid-System und um darauf zuzugreifen, dass wir das Klassenpräfix von col und dann dash verwenden und dann können wir die xs für die Anzahl der Spalten verwenden, warum wir in extra kleinen Geräten wollen, sm für kleine Geräte oder Tablets, md für mittlere Geräte oder Desktops oder lg für die großen Desktops. So können wir divs erstellen, die auf kleineren oder größeren Geräten unterschiedlich angezeigt werden. Es gibt ein Beispiel unten. Wenn wir ein div erstellen möchten, das zwei Teile hat und die volle Breite der Seite umfasst, benötigt jedes div jeweils sechs Spalten, und das gleiche, wenn wir drei Spalten nebeneinander erstellen möchten, geben wir jedem div eine Klasse von vier Spalten. Lassen Sie uns dies in unserem Projekt in die Praxis umsetzen. Zurück in die Indexseite. Wenn wir nach dem div suchen, das den Text direkt nach der Feature-Text-Klasse umgibt, werden wir die Bootstrap-Spalten hinzufügen. Wir möchten also, dass der Text den gesamten verfügbaren Speicherplatz in einer mobilen Ansicht einnimmt, so dass wir col-xs für extra kleine Geräte 12 hinzufügen können , so dass wir die vollen 12 Spalten auf einem kleinen Gerät aufnehmen. Wenn wir nicht wollen, dass es auf größeren Geräten volle Breite hat, können wir col-md-8 hinzufügen, denn das wird acht Teile von 12 oder zwei Dritteln und dann noch größer, auf großen Desktops, col-lg-6, weil das die Hälfte der Breite der Webseite. Lasst uns das speichern und einen Blick werfen. Wenn wir nach unten zu der kleinen Größe scrollen, können Sie sehen, dass der Text die volle Breite einnimmt. Aber sobald wir die mittleren Geräte getroffen haben, wird dieses Div nur acht Teile belegt. Weil es nur acht Teile beansprucht hat, hinterlässt es vier Säulen auf der rechten Seite. Um sicherzustellen, dass dieses div in der Mitte der Seite bleibt, können wir einen Offset auf der linken Seite hinzufügen. Um dieses div zu zentralisieren, müssen wir einen Offset von zwei hinzufügen, und die Art und Weise, wie wir das tun, ist col, also die erste ist md dann dash offset, und dann um es auf zwei Spalten zu versetzen, setzen wir das auf zwei. Lass uns das speichern und sehen, ob das gut funktioniert. Großartig. Also ist das acht-spaltige div in der Mitte der Seite mit zwei Spalten in der Seite jetzt. Wir werden dasselbe für die großen Geräte tun, da die großen Geräte sechs Teile eingenommen werden. Wir müssen einen Offset von drei hinzufügen. Also col-lg-offset drei. Da gehen wir. Bootstrap-Dokumentationen erhielten weitere Informationen über das Grid-System und das Offset. Es gibt auch einige Beispiele, die Sie im Offset-Bereich betrachten können. Also, das ist dieses Video fast fertig. Nur eine weitere Sache, die wir hinzufügen müssen, bevor wir gehen, ist, wenn wir den Browser nach unten verkleinern, der Text ist ziemlich groß. Also kommen wir zu den kleinen Tablet- oder mobilen Größen. Wir müssen sicherstellen, dass der Text kleiner ist. So können wir das in unserem CSS tun, indem wir eine Medienabfrage hinzufügen. Lassen Sie uns einen mobilen Styling-Kommentar direkt am unteren Rand der Seite hinzufügen. Also lassen Sie uns eine Medienabfrage hinzufügen, so @media Bildschirm, und wir werden die Geräte mit einer maximalen Breite von 768 Pixeln anvisieren. Durch die Verwendung von 768 Pixeln bleibt dies mit den Medienabfragen von Bootstrap inline. Wenn wir wieder an die Spitze des Grid-Systems gehen, können Sie die Medienabfragegrößen sehen, die das Bootstrap verwendet. Also werden wir in unserer Medienabfrage für extra kleine Geräte mit weniger als 768 Pixel einstellen. Um die Schriftgröße zu reduzieren, müssen wir die Klasse von Feature-Text hinzufügen, und dann p, und wir müssen den Raum nach und zeigen, da gehen wir. Also müssen wir die Schriftgröße reduzieren. Setzen wir dies auf 28 Pixel und auch die Zeilenhöhe, die gleich sein kann, das kann auch 28 Pixel sein. Speichern wir das und gehen Sie zurück in den Browser. Wenn wir zurück in das Projekt gehen und dann den Browser nach unten verkleinern. Sie können sehen, dass der Text jetzt auf den kleineren Geräten nach unten skaliert und in den Container eingebaut wird. Wenn wir größer werden und die Medienabfrage treffen, erhalten wir den größeren Text, also sieht das viel besser aus. Während wir in der Medienabfrage sind, können wir auch einfach die kostenlosen Links in der mobilen Ansicht machen, hier oben in der Mitte der Seite, können wir das im lia-Abschnitt hinzufügen, weil es unsere Listenelement Hyperlinks sind, also text-ausrichten Zentrum. Da gehen wir. Großartig. Das war's also für diesen Abschnitt. Das ist alles, was CSS für den Header abgeschlossen ist. Wenn du mir im nächsten Video beitrittst, werden wir mit der Website fortfahren und zum Begrüßungsbereich gehen. 5. Startseite: Willkommensbereich: Im letzten Video haben wir den HTML und das CSS für den Header-Abschnitt abgeschlossen. Als nächstes, wenn wir einen Blick auf die fertige Website werfen, werden wir mit dem Willkommensbereich beginnen. Es ist ein ziemlich einfacher Abschnitt, es gibt nur eine Ebene 2 Überschrift oben, es gibt auch ein Divid-Bild, und dann vier Links zu verschiedenen Teilen der Website. Lasst uns anfangen. Wechseln Sie zu Ihrer Indexseite und kopieren Sie dann den Kommentar für den Featurebereich. Wir werden anfangen, direkt unter dem schließenden Header-Tag zu arbeiten und das in einfügen. Dies wird der Willkommensbereich sein. Der Willkommensabschnitt wird in den Abschnitt-Tags sein, und das Abschnitt-Tag wird eine ID der Begrüßung haben, so dass wir das im CSS verwenden können. Das ganze div muss eine Klasse von Containern haben. Im Gegensatz zu den vorherigen Abschnitten, werden wir nur einen Satz Breite Container verwenden. Wir wollen uns nicht zu weit ausdehnen. Dann fügen wir innerhalb des Containers das übliche div mit der Klasse der Zeile hinzu. Dann legen wir die Anzahl der Bootstrap-Spalten fest. Wir möchten, dass die Überschrift der Ebene 2 und auch das Trennbild die Hälfte der Breite der Webseite haben, also setzen wir die Anzahl der Spalten auf sechs und wir fügen einen Offset von drei auf der linken Seite hinzu. Wir werden den Text auf dem Bild mit einem div umgeben, mit einer Klasse von col-sm-6 und auch für den Offset, col-sm-offset-3. Dann die Ebene 2 Überschrift, die „Willkommen in Tranquil Spa“ ist, dann direkt unter der Überschrift, werden wir das Bild hinzufügen, so dass die Bildquelle, dieses Bild ist auch in unserem Bilderordner, images/divider-purple.png. Wenn wir uns das fertige Projekt anschauen, können Sie sehen, dass der Teiler lila auf der weißen Hintergrundfarbe ist. Aber weiter unten, wir haben lila Hintergrundfarbe, wir haben auch eine Teilung mit den silbernen Töpfen. Wir verwenden die Trennwand Silber auf den Abschnitten. Nach dem Dateipfad können wir den Alt-Text von Divider hinzufügen, und schließen Sie das Bild aus, und dann lassen Sie uns einfach die schließenden div-Kommentare kopieren. Die erste ist für die Spalten, die nächste für die Zeilen und die letzte für den Container. Mal sehen, wie das aussieht, zurück in den Browser und aktualisieren. Da gehen wir. Das Bild auf dem Text ist zentriert. Wir müssen ein wenig mit dem CSS arbeiten, aber das ist für jetzt in Ordnung. Als nächstes erstellen wir die vier Bilder und die vier Links direkt darunter. Zurück in den Texteditor starten wir knapp unterhalb der letzten schließenden Zeile, aber immer noch innerhalb des Hauptcontainers. Lassen Sie uns eine neue Zeile erstellen. Eine div-Klasse von Zeile und wir werden auch eine benutzerdefinierte Klasse von Einrichtungen hinzufügen, können wir das auf dem CSS verwenden. Jeder der einzelnen Links geht auf drei Spalten, so dass wir vier verschiedene divs mit einer Klasse von col-sm-3 erstellen können. Die erste, div-Klasse von col-sm-3, also wird sowohl das Bild als auch der Text ein Link sein, also lassen wir einfach ein leeres. Innerhalb des Links fügen wir zuerst das Bild hinzu. Die Bildquelle der Bilder und das erste Bild ist makeup.png mit dem alten Text, lassen Sie uns die Seitenleiste loswerden. Der alte Text lautet: „Hair and Makeup“. Dann direkt nach dem Bild können Sie den Text für den Link hinzufügen, also Haar, und dann, um das Symbol und zu erhalten, verwenden wir das kaufmännische Und-Zeichen, dann amp; dann Make Up, dann lassen Sie uns einige Kommentare zu den schließenden divs hinzufügen. Die äußere ist für die Zeile und dann ist die innere für die drei Spalten div. Da wir diese drei Spalten div vier Mal verwenden werden, kopieren wir den Abschnitt und fügen Sie ihn dann unten drei weitere Male, speichern Sie das, und überprüfen Sie im Browser, und aktualisieren Sie. Toll, das funktioniert. Wir haben die vier Bilder, alle Hyperlinks. Wir können die Unterstreichung sehen, wenn Sie den Mauszeiger über und auch der Text ist da. Lassen Sie uns nun die Bilder auf dem Text ändern. Das erste div ist in Ordnung, lassen Sie uns zum zweiten Bild gehen. Das zweite Bild hat den Namen candles.png, der Alt-Text ist „ Spa-Einrichtungen “ und auch der Text ist Spa Facilities. Dann hat der dritte Abschnitt ein Bild namens lake.png und der Text ist „Lakeside Retreats“, und auch der gleiche für den Alt-Text. Schließlich ist der letzte, der Bildname pool.png, der Text ist „All Our Facilities“ und wir werden das auch für den Alt-Text kopieren. Lassen Sie uns das im Browser sehen und aktualisieren. Das ist für den Moment in Ordnung. Als nächstes werde ich weitermachen und einige CSS für diesen Abschnitt hinzufügen. Wir wollen sicherstellen, dass die Überschrift der Ebene 2 zentralisiert ist, wir brauchen einige Abstände über und unter den Bildern. Wir werden auch den Text zentralisieren und die Unterstreichung entfernen, wenn Sie den Mauszeiger über bewegen, und wir werden auch die Textfarbe ändern. Lassen Sie uns das im Custom CSS tun. Wir werden mit der Überschrift Level 2 beginnen weil wir dies oft auf der Website verwenden werden, wir wollen dies in den globalen Abschnitt oben setzen, also direkt unter dem Bild, können wir h2 dort haben. Wir müssen Text ausrichten, zentrieren. Auf der Schriftgröße 2em zu sein, und auch um ein wenig Platz oben und unten zu schaffen, lassen Sie uns ein wenig Rand hinzufügen. Rand oben, 30 Pixel, und auch einige Rand auf der Unterseite, um 20 Pixel. Lassen Sie uns das speichern und überprüfen Sie das im Browser. Nun, wir haben den Text in der Mitte, und auch ein wenig Platz oben und unten. Während wir auch im globalen Abschnitt sind, können wir die Unterstreichung von den Hyperlinks entfernen, wenn wir den Mauszeiger über. Direkt unter dem h2, wählen wir ein:hover. Wir können die Unterstreichung entfernen, indem Sie die Textdekoration auf keine setzen. Lassen Sie uns auch die Textfarbe festlegen, während wir hier sind. Wenn Sie den Mauszeiger über, muss es 97689c sein. Jetzt, wenn ich den Mauszeiger über, ändert sich der Text in lila und die Unterstreichung wird entfernt. Da wir die Schriftgröße h2 auf 2em eingestellt haben, wird das wahrscheinlich ein bisschen zu groß sein, wenn wir auf die mobile Größe hinunter kommen Lassen Sie uns also zur Medienabfrage hinuntergehen. Unterhalb des Feature-Textes können Sie die h2 hinzufügen. Wir reduzieren nur die Schriftgröße auf 1.6em. Jetzt haben wir die globalen Stile hinzugefügt, wir können beginnen, indem wir einen Willkommensbereich hinzufügen und einige der Welcome-spezifischen Stile hinzufügen. Lassen Sie uns den Kommentar für mobiles Styling kopieren und wir fügen ihn direkt über dem mobilen Styling-Abschnitt ein. Nennen wir das den Willkommensbereich. Im Willkommensbereich geben wir eine ID von „welcome“. Begrüßungsbereich hat eine weiße Hintergrundfarbe. Fügen wir am Ende des Abschnitts etwas Polsterung hinzu, damit alles unten nicht zu nahe kommt. Wir setzen die Polsterung unten auf 30 Pixel. Wir werden auch nur Text in diesem Abschnitt in der Mitte zu sein. Im globalen Abschnitt ändern wir die Farbe der Links, wenn wir über sie schweben. Aber jetzt müssen wir die Farbe so einstellen, dass das Standardblau überschrieben wird. Willkommen und dann ein, weil sie Links sind und die Farbe wird den Wert von 494646 haben, was eine dunklere graue Farbe ist. Als nächstes im Abschnitt mit den Bildern und dem Text wollen wir den Text ein wenig größer machen und auch die einzelnen Bilder, wir werden sie ein wenig kleiner machen und etwas Rand oben und unten hinzufügen, nur Abstand ein Ein bisschen mehr. Um diese Zeile herum, werden wir im HTML zurückblicken. Die vier einzelnen divs waren alle von einer Reihe umgeben und wir geben dieser Reihe eine benutzerdefinierte Klasse von Einrichtungen. Lasst uns unser jetzt benutzen. Lassen Sie uns die Schriftgröße erhöhen. Schriftgröße, lassen Sie uns das auf 1.5 em setzen, und auch das Facilities Bild, lassen Sie uns die Anzeige auf Block setzen. Um sie ein wenig kleiner zu machen, können wir die maximale Breite auf 60 Prozent einstellen, so dass es ein bisschen besser aussieht. Dann, um hier ein Leerzeichen hinzuzufügen, setzen wir den Rand, wir wollen 30 Pixel oben und unten setzen, und setzen Sie die linke und rechte auf auto. Da gehen wir, das ist, was jetzt mit der Willkommensseite fertig ist. Das ist das Ende dieses Videos, und wenn du mir im nächsten Video beitrittst, werden wir mit der Website fortfahren und wir werden nach unten gehen , um den neuesten Office-Abschnitt zu erstellen. Wir sehen uns dort. 6. Startseite: Angebotsbereich – HTML: Unsere Website nimmt jetzt Gestalt an, wir haben den Header-Abschnitt und auch das vorgestellte Bild und Text abgeschlossen. Wir haben dann die Begrüßungsabteilung erstellt, die Links zu allen Abschnitten der Website hat. Wenn wir einen Blick auf die fertige Website werfen, ist der nächste Teil, den wir erstellen werden, die neuesten Angebote Abschnitt. Es wird aus einer ähnlichen Ebene 2 Überschrift und Divider zum letzten Abschnitt bestehen, und dann werden wir eine neue Zeile mit drei verschiedenen Angeboten erstellen. Die drei verschiedenen Angebote sind statische Texte für jetzt, aber sobald wir später im Kurs auf den WordPress-Abschnitt gelangen, stellen wir sicher, dass der Benutzer sich einloggen und die Werte ändern kann, damit er die Sonderangebote auch auf dem neuesten Stand halten kann ohne technisches Wissen. Lassen Sie uns auf der Indexseite beginnen, damit wir mit einem Kommentar beginnen. Dieser Abschnitt wird als die neuesten Angebote bezeichnet werden, und wir werden direkt unter dem Willkommensbereich tun, wie wir es im letzten Video getan haben, also werden wir den abschließenden Abschnitt finden und dann den Kommentar direkt unten einfügen, also ist das neueste Angebote. Die neuesten Angebote werden auch einen eigenen Abschnitt haben und dies wird eine ID der neuesten Angebote haben, sie sind innerhalb des Abschnitts. Wir werden das übliche div mit der Klasse des Containers erstellen, und dann, weil die Zeile, die wir verwenden werden ziemlich identisch mit dem letzten Abschnitt ist, können wir einfach das div mit der Klasse der Zeile kopieren und wir können das wiederverwenden. Fügen Sie das innerhalb des Containers ein, und dann müssen wir die Überschrift der Stufe 2 auf die neuesten Angebote ändern. Da wir dieses Mal auf einem violetten Hintergrund sind, ändern wir den Teiler in die divider-silver.png und lassen Sie uns einen Blick darauf werfen. Es gibt unseren Abschnitt mit der Überschrift Level 2 auf dem Teiler, also werden wir nur eine weitere benutzerdefinierte Klasse hinzufügen, die eine Klasse sein wird , um etwas Rand am unteren Rand des Teiler hinzuzufügen. Wenn wir uns das fertige Projekt anschauen, müssen wir sicherstellen, dass die freien Divs unter dem Teiler leicht vom Bild nach unten gedrückt werden, also fügen wir die Klasse der unteren Zeile hinzu. Wir fügen einen Rand im nächsten Video hinzu, in der CSS, lassen Sie uns einfach einen schließenden Kommentar zu dem Container hinzufügen. Lassen Sie uns die kostenlosen Spezialangebote in Reihe stellen, also lassen Sie uns ein neues div mit der Klasse der Zeile erstellen. Wir werden die kostenlosen Spezialangebot-Divs erstellen, aber wir müssen diese kostenlosen Spezialangebot-Divs in einen Container legen , also werden wir einen Container mit voller 12 Spaltenbreite legen, der diese umgibt. Div mit einer Klasse von col-sm-12, und das wird einen vollen 12-Spalten-Container erstellen. Da die kostenlosen Sonderangebotsabschnitte verschachtelt sind, müssen wir eine neue Zeile erstellen, damit sie hineingehen können. Innerhalb der Zeile wird das erste spezielle Angebot div Klasse col-sm-4 sein, so dass es ein Drittel der Seite einnimmt und auch, damit wir unsere benutzerdefinierten Stile hinzufügen können, werden wir auch eine benutzerdefinierte Klasse des Angebots hinzufügen. Um zu beginnen, müssen wir den Preis setzen, müssen wir Preis in die Span-Tags setzen, und dann werden wir den Namen des Sonderangebots in einer Ebene 3 Überschrift, und dann zwei separate Absatz-Tags direkt unten setzen . Für den Preis, die Spanne, und dann dazwischen hatte der erste einen Preis von $60, und dann unter dem in der Level-3-Überschrift, der Name des Angebots. Die erste ist Familienangebot, ich werde nur ein Break-Tag dort einfügen, und dann die Tags, also war die erste Textzeile Familienpool und dann Zeile zwei war großartiger Tag, also mal sehen, wie das aussieht. Es ist alles da, aber es gibt immer noch ein wenig Arbeit mit dem CSS zu tun, aber lassen Sie uns fortfahren, um jetzt den Rest der Angebote hinzuzufügen. Wenn wir das div finden, lassen Sie uns zuerst einen Kommentar machen, also kopieren Sie einfach den Container-Kommentar und dann ist der erste für die Klasse des Angebots. Die zweite wird sm-4 genannt, und dann ist dies die Zeile, in der Tat ist dies die verschachtelte Zeile, dann knapp darunter ist es der 12-Spalten-Wrapper und dann der letzte Zeilencontainer. Lassen Sie uns den vollständigen Abschnitt für das spezielle Angebot kopieren, und fügen Sie uns dann zweimal direkt unten ein. Das zweite Sonderangebot hatte den Preis von $120 und dies ist ein Brautpaket, so dass der Name des Angebots für die Braut war. Die erste Zeile des Textes war Haar und Make-up, und schließlich war es das volle Verwöhnpaket, und dann das letzte Sonderangebot war der Wochenendpass, der einen Preis von $90 hatte, so war der Name Wochenendpass. Der Text war moderne Einrichtungen, und der letzte hatte den Text des perfekten Geschenks. Zurück in den Browser, das scheint alles in Ordnung , genau so wollen wir es. Begleiten Sie mich im nächsten Video, und wir werden mit dem Abschnitt fortfahren, indem Sie das CSS hinzufügen. 7. Startseite: Angebotsbereich – CSS: In diesem Video werden wir mit den neuesten Angeboten fortfahren. Im letzten Video haben wir den HTML-Code für die kostenlosen separaten Angebote hinzugefügt und in diesem Video werden wir das CSS hinzufügen , um es mehr wie die fertigen Projekte aussehen zu lassen. Wir werden die lila Hintergrundfarbe für den vollständigen Abschnitt hinzufügen. Wir werden auch die Hintergrund- und Textfarbe für die kostenlosen individuellen Angebote ändern. Wir werden auch sicherstellen, dass der Preiskreis horizontal in der Mitte des div positioniert ist und sich auch an der Spitze überlappt. Wir machen das mit einer absoluten Positionierung. Wenn wir zu unserem CSS gehen, können wir einen neuen Abschnitt erstellen. Lassen Sie uns dies unten kurz vor dem mobilen Styling tun. Dies sind die neuesten Angebote. Der aktuelle Bereich der Angebote hatte die ID der neuesten Angebote. Wir werden dies nur verwenden, um die lila Hintergrundfarbe zu erstellen. Legen Sie die Schriftfarbe auf Weiß fest, und stellen Sie sicher, dass der gesamte Text ausgerichtet ist. Zunächst stellen wir die Textausrichtung so ein, dass sie in der Mitte liegt. Da wir eine violette Hintergrundfarbe oder dunkle Hintergrundfarben verwenden, möchten wir, dass das div weißen Text hat. Die lila Hintergrundfarbe hat die ID 97689c. Werfen wir einen Blick in den Browser. Jetzt haben wir die lila Hintergrundfarbe und den weißen Text, so dass wir zu den drei einzelnen Angebotsdivs übergehen können. Wenn wir zurück in die Index-Seite, die kostenlosen Angebote, geben wir ihnen eine benutzerdefinierte Klasse von Angebot, wir auf allen drei von ihnen verwendet. können wir jetzt auswählen. Also die Klasse des Angebots. Wir werden zuerst die dunkle Hintergrundfarbe einstellen. Der Hintergrund für die kostenlosen Angebote hat eine ID von 4a525f. Da gehen wir. Da dies Container für den Preis und Kreise sein wird, wir die Position so einstellen, dass sie relativ ist. Um sie ein wenig größer zu machen, fügen wir eine minimale Höhe von 350 Pixeln und ein wenig Polsterung hinzu. Ich werde 40 Pixel oben und unten und dann 10 Pixel auf der linken und rechten Seite hinzufügen . Dann als nächstes können wir um jeden Preis und Kreise beginnen. Der Preis und die Kreise wurden in einem Span-Tag eingewickelt. Wählen Sie sie mit der Angebotsklasse aus und dann span. Beginnen wir mit dem Ändern der Hintergrundfarbe. Die Kreise haben die Farbe von 8abbb1 und die Anzeige wird auf Block gesetzt. Wir geben diesen eine Höhe und Breite von 100 Pixeln. Da der Preis drinnen sein wird, setzen wir die Textausrichtung auf Mitte. Schauen wir uns an und sehen, wie das so weit aussieht. Wir haben die kostenlosen Preis-Divs erscheinen, wir haben eine andere Hintergrundfarbe. Als nächstes müssen wir sie zu einem Kreis machen. Dann müssen wir eine Position in den Kreisen suchen, wo wir sie wollen. Um diese Kreise zu machen, können wir einfach einen Grenzradius von 100 Prozent hinzufügen, und das macht ihn zu einem Kreis. Um dann den Text vertikal ausgerichtet zu machen, können wir auch die Zeilenhöhe auf 100 Pixel einstellen, was der vollen Höhe des div entspricht und der den Preis in die Mitte des Kreises bewegt. Da wir einen relativen Container haben, von dem wir arbeiten können, können wir diese Preiskreise so einstellen, dass sie eine absolute Position haben. Wir beginnen, diese Kreise von der linken Seite des Containers zu referenzieren. Wir fügen etwas Margin-links von 50 Prozent hinzu, um das in die Mitte des Containers zu legen . Jetzt ist es nicht ganz in der Mitte, weil wir die Hälfte der Breite des Kreises kompensieren müssen . Lasst uns das jetzt machen. Wenn wir die linke setzen, können wir den Wert auf negativ 50 Pixel setzen, das ist die Hälfte der Breite und das sollte sie horizontal zentriert. Dann können wir als nächstes den Kreis von oben referenzieren. Lasst uns die Spitze setzen. Wenn wir nun den Wert der Spitze auf Null setzen würden, würde ein Kreis an die Spitze des Containers gehen, aber wir müssen den Kreis um die Hälfte der Höhe überlappen. Anstatt die Spitze auf Null zu setzen, können wir die Spitze auf negativ 50 setzen, was die Hälfte der Höhe ist. Da gehen wir. Das ist die Positionierung genau dort, wo wir sie wollen. Nur um den Preisabschnitt abzuschließen, fügen wir einfach die Schriftgröße und das Schriftgewicht hinzu. Die Schriftgröße, die bis zu 2ems enden, und schließlich das Schriftgewicht wird fett sein. Da gehen wir. Dann erstellen wir als nächstes einige Abstände. Der Name des Autors befindet sich in einer Überschrift der Ebene 3. Lassen Sie uns etwas Rand an der Unterseite hinzufügen, nur um den Text bevorzugt zu schieben und wir können auch die Schriftgröße zu erhöhen. Unter dem Spanabschnitt haben wir die Klasse des Angebots und dann h3. Margin-bottom ist 50 Pixel und lassen Sie uns auch die Schriftgröße auf 1.2ems ändern. Das gibt uns ein wenig mehr Platz unter der Überschrift. Ich werde auch einige Abstände zwischen den beiden unten stehenden Zeilen hinzufügen , indem ich eine zusätzliche Zeilenhöhe hinzufüge. Die beiden Zeilen waren in P-Tags. Das Angebot p, wir können die Zeilenhöhe auf 2ems erhöhen. Das gibt Ihnen ein wenig mehr vertikalen Abstand. Lassen Sie uns nun etwas Raum zwischen dem Teiler und auch den kostenlosen Sonderangebotsabschnitten schaffen. Wenn Sie sich wieder in der Indexseite in der ersten Zeile erinnern, die die Ebene 2 Überschrift auf dem Divid-Bild hatte. Wir haben auch eine benutzerdefinierte Klasse von Margin-bottom hinzugefügt. Wir können dieses benutzerdefinierte CSS hinzufügen und die freien divs nach unten schieben. Lassen Sie uns die Margin-bottom auf 70 Pixel setzen und sehen, wie das aussieht. Großartig. Das ist genau so, wie wir wollen, dass es auf der Desktop-Ansicht aussehen. Wenn wir den Browser nach unten auf eine mobile Größe verkleinern und dann zu den kostenlosen Angeboten scrollen, müssen wir nur eine kleine Änderung am Rand vornehmen da die freien Divs zu einem mischen, wenn sie übereinander gestapelt sind. Wir können das leicht beheben, wenn wir den Abschnitt mit der Angebotsklasse finden. Dann können wir etwas Rand auf der Unterseite von 60 Pixeln hinzufügen. Mal sehen, wie das aussieht. Das sieht jetzt besser aus. Wir haben Platz zwischen den drei Sonderangeboten auf der mobilen Ansicht. Das war's. Das ist das Ende des letzten Angebotsabschnitts. Danke fürs Zuhören, und wir sehen uns im nächsten Video. 8. Startseite: Onlineshopbereich: Im letzten Video sind wir zum Abschnitt Aktuelle Angebote auf der Website herabgestiegen. In diesem Video werden wir den Bereich Online Shop ausfüllen. Jetzt ist der Bereich Shop Online ein relativ unkomplizierter Abschnitt. Wir werden eine ähnliche Ebene wie Überschrift auf Teiler verwenden, wie wir in den letzten beiden Abschnitten getan haben. Wir werden eine Schaltfläche hinzufügen, die ein Link zu einem Shop Here Abschnitt sein wird. Es wird auch ein großes Hintergrundbild über das CSS sein. Im Texteditor beginne ich auf der Indexseite und erstelle einen neuen Abschnitt. Ich füge den Kommentar direkt unter dem Abschnitt Letzte Angebote ein. Dies wird als „Shop Online“ -Bereich bezeichnet. Dies hat ein Abschnitt-Tag mit einer ID von shop-online und einen üblichen Bootstrap-Container in Zeile. Also div mit einer Klasse von Containern. Dann innerhalb des Containers haben wir die Reihe. Wir kopieren die Überschrift und teilen den Abschnitt vom letzten Abschnitt. Wir kopieren den sechsspaltigen Abschnitt und fügen ihn in unsere eigene Zeile ein. Die Überschrift der Ebene 2 ist der Text „Shop Online“. Das Bild, wir müssen ändern, um das lila Bild zu sein, weil es auf einem weißen Hintergrund ist. Direkt unter dem Teiler die a und href vorerst leer sein. Die Klasse wird die Bootstrap-Button-Klasse sein, also btn btn-default. Dann wird die Rolle gleich Button sein. Schließen Sie dann den Link ab und nicht den Shop Here Text, und werfen Sie einen Blick in den Browser. Dies ist unser Überschriften-Teiler und auch die Schaltfläche Standard. Jetzt können wir die Schaltfläche leicht in der Mitte der Seite erscheinen lassen , indem wir einfach eine Bootstrap-Klasse hinzufügen. Zu dem Container, direkt nach der Anzahl der Spalten, können wir die Bootstrap-Klasse von Text Center hinzufügen. Schiebt nun die Taste in die Mitte des div. Das ist alles, was wir für diesen Abschnitt hinzufügen müssen. Wir schließen einfach einige der divs mit Kommentaren ab. Dies ist die schließende Zeile im letzten Container. Okay, als nächstes müssen wir in das benutzerdefinierte CSS gehen. Ich werde das Styling für die Knopf-Standardwerte und auch für das große Hintergrundbild hinzufügen , genau wie die endgültige Website. Über zum benutzerdefinierten CSS, also lasst uns mit der Schaltfläche beginnen. Da wir die Schaltfläche später im Kurs verwenden werden, fügen wir sie dem globalen Abschnitt oben hinzu. Ich werde direkt unter dem Bild. Die Klasse war btn-default. Lassen Sie uns die Standard-Bootstrap-Werte überschreiben, die Zeile beinhalten. Zuallererst wird die Hintergrundfarbe der Schaltfläche nicht die blaue Farbe sein, die 8393ca ist, und wir fügen einen Rahmen, einen freien Pixelrahmen, solide hinzu. Die Farbe wird ecf0f1 und ein 5-Pixel-Rahmenradius sein, und dann einige Füllungen, um die Grenze ein wenig größer zu machen, 15 Pixel oben und Knopf und 30 links und rechts, und die Textfarbe wird weiß sein. Werfen wir einen Blick. Die Schaltfläche sieht gut aus, wir müssen nur den Hover-Zustand hinzufügen. Wenn wir zurück in den CSS btn-default gehen und dann mit dem Mauszeiger fahren, ändern wir die Hintergrundfarbe in 97689c. Wenn wir den Mauszeiger über die Schaltfläche bewegen, haben wir die gleiche violette Farbe wie der Hintergrund. Gehen wir nun zurück und erstellen Sie einen Shop Online Abschnitt. Wir werden die Kommentare kopieren, und direkt über dem MOBILE STYLING wieder nennen wir dies den Bereich Shop Online. Beginnen wir mit dem Hintergrundbild. Der Abschnitt hatte eine ID des Shops online. Wir können den Hintergrund ändern, indem Sie Hintergrund und dann URL hinzufügen, und dann, in Klammern, können wir den Dateipfad hinzufügen. So Punkt Punkt zurück zum Home-Verzeichnis, Schrägstrich Bilder, und dann die Bilder, die wir wollen, ist products.jpg, aber nicht in der Mitte sein. Letztendlich, keine Wiederholung. So wie es steht, ist das Bild vorhanden, aber es nimmt nur die gleiche Höhe ein wie der Inhalt, der bereits vorhanden ist. Wir können das ändern, indem wir die minimale Höhe hinzufügen. Ich werde die minimale Höhe auf die gleiche Höhe des Bildes einstellen, die 852 Pixel beträgt. Dann lassen Sie uns die Textfarbe der Überschrift Shop Online ändern. Die Farbe wird den Wert von 494646 haben. Dann schließlich, nur um die Schaltfläche vom Teiler zu trennen, werden wir etwas Rand an der Spitze hinzufügen, so dass die Shop-Online-ID und dann die btn-default. Lassen Sie uns die Taste nach unten drücken, indem Sie etwas Rand oben auf 25 Pixel hinzufügen und sehen, wie das im Browser aussieht. Okay, da gehen wir, der Knopf wird jetzt von der Trennwand nach unten gedrückt. Das ist das Ende des Videos. Vielen Dank für das Ansehen, und wenn Sie mir im nächsten Video beitreten, beenden wir die Bootstrap-Homepage, indem Sie die Fußzeile hinzufügen. 9. Fußzeilenbereich: HTML: Willkommen zurück. In diesem Video werden wir den Fußzeilenabschnitt für unsere Indexseite erstellen. Wenn wir zurück in unseren Texteditor und unter dem Shop Online-Bereich gehen, lassen Sie uns einfach die Kommentare kopieren und sie unten einfügen, und wir werden dies den Footer Abschnitt nennen. Wir müssen die Abschnitt-Tags nicht wie vorherige Abschnitte verwenden , da es ein Fußzeilen-Tag gibt, das wir an Ort und Stelle verwenden können. Wir verwenden die Fußzeilen-Tags. Da die Überschrift der Ebene 2 auf dem Bild für den Fußzeilenabschnitt ziemlich ähnlich wie die letzten Abschnitte ist, können wir diesen Abschnitt einfach von oben kopieren. Wir haben den Container aus dem Online-Bereich des Shops kopiert und zwischen den Fußzeilen-Tags eingefügt. Wir brauchen den Knopf nicht. So können wir diesen Abschnitt löschen. Der Shop-Online-Bereich wird „Bleiben Sie in Kontakt“ und kurz nach dem Text-Center wir die Margin-Bottom-Klasse wiederverwenden, die wir früher in den neuesten Angeboten Abschnitt verwendet haben. Dies wird den Inhalt von der Trennwand wegschieben. Lassen Sie uns speichern und einen Blick darauf werfen, und aktualisieren. Es gibt unsere Level-2-Überschrift und die Trennwand. Als nächstes müssen wir eine neue Zeile erstellen, die die Adresse auf derlinken Seite und einige der Navigationslinks in der Mitte und dann einige derSocial-Sharing-Schaltflächen auf der rechten Seite haben linken Seite und einige der Navigationslinks in der Mitte und dann einige der wird. Um diese drei Abschnitte einzufügen, erstellen wir eine neue Zeile direkt unter der letzten Zeile. Also ein neues div mit der Klasse der Zeile, und dann innerhalb der Zeile werden wir drei weitere divs erstellen, die vier Spaltendivs sein werden. Div-Klasse, dann col-sm-4. Wir können dieses div kopieren, es in zwei Mal einfügen. Das erste div hat die Adressierung, also werden wir semantisch sein und die Adresse-Tags verwenden. Die erste Zeile ist Tranquil Spa, und fügen Sie dann das Break-Tag hinzu. Fügen wir einige Adresszeilen hinzu, also Adresszeile 1 dann das Break-Tag. Duplizieren Sie diese zwei weitere Male, um die Adresszeile 2 und 3 zu erstellen. Dann hatte das zweite div die ungeordnete Liste mit der Navigation. Zwischen den ul -Tags erstellen wir vier Listenelemente und zwischen den Listen-Tags erstellen wir einige Links. Also ein href, und der erste Link wird über uns sein. Dies wird auf about.html verlinken und wir werden diesen Link dort für setzen, wenn wir das erstellen, und der Text ist Über. Kopieren und einfügen oder duplizieren Sie diese drei weitere Male. Der zweite Link ist die Kontaktieren Sie uns. Lassen Sie uns das jetzt ändern und der Link wird contact.html sein. Der dritte Link ist zum Blog. Der Link ist blog.html, und der Text von Blog. Und schließlich sind es die neuesten Nachrichten. Wir können einfach den Link dort löschen, weil wir das dynamisch in WordPress generieren werden. Werfen wir einen Blick in den Browser. Da gehen wir, wir haben unsere ersten beiden Abschnitte. Jetzt müssen wir nur den Social Media Bereich auf der rechten Seite erstellen. Für das div beginnen wir mit p-Tags und dem Text von Follow Us, und dann unter dem Follow Us Text werden wir die Font Awesome Symbole für Links zu sozialen Medien verwenden. Wir fügen die Font Awesome Symbole mit dem i-Tag hinzu, und fügen Sie dann eine Klasse hinzu. So ist die erste Klasse fa. Wir brauchen das für alle Icons. Dann ist das Facebook-Symbol fa-facebook. Dann, um das Symbol etwas größer als normal zu machen, fügen wir die Klasse von fa-lg hinzu und schließen dann. Erstellen Sie dann vier weitere Verknüpfungen. Der zweite ist der Link zu Twitter. Wir brauchen fa-twitter. Icon 3 ist Google Plus, und dann Pinterest, und dann schließlich ist es YouTube. Also lasst uns das speichern und sehen, wie das jetzt aussieht. Gut, wir haben die fünf Social Media-Symbole, wo sie sein sollten. Dann müssen wir das letzte, was wir tun müssen, den Copyright-Abschnitt ganz unten auf der Seite hinzufügen . Lassen Sie uns das jetzt hinzufügen. Also direkt unter dem Container, aber im Fotobereich gespeichert, fügen wir ein neues div mit einer Klasse von Container-Fluid hinzu, so dass es die volle Breite der Webseite umfasst. Wir werden auch eine ID der Kopie für das Copyright hinzufügen, und dann ein div mit einer Klasse von col-sm-12, um einen 12-spaltigen Container zu erstellen. Dann der Text zwischen den p-Tags, fügen wir das Copyright-Symbol hinzu, das kaufmännisches Und-Zeichen, und kopieren Sie dann; 2015 Tranquil Spa. Dann lassen Sie uns einige Kommentare hinzufügen. Dies ist das schließende div für die Zeile. Dies ist der 12-Säulen-Behälter und schließlich der Flüssigkeitsbehälter. Werfen wir einen Blick. Toll, also ist das alles HTML, das ich für die Homepage gemacht habe. Wenn du mir im nächsten Video beitrittst, beenden wir unsere Homepage, indem wir das CSS hinzufügen. 10. Fußzeilenbereich: CSS: Willkommen zurück. In diesem Video werden wir unsere Index-Seite beenden, indem wir das CSS für den Fußzeilenabschnitt hinzufügen. Wenn wir in unser benutzerdefiniertes CSS gehen und dann die Kommentare kopieren. Nur für den mobilen Stylingbereich nennen wir dies den „Keep in touch“ -Bereich. Der Fußzeilenabschnitt wird in die Fußzeilen-Tags eingeschlossen. Wir werden eine Hintergrundfarbe von lila hinzufügen. Um den Text hervorzuheben, setzen wir die Farbe auf Weiß und ändern dann die Hintergrundfarbe in lila, also 97689c. Als nächstes müssen wir den Teiler so ändern, dass er die silberne Farbe hat. In HTML werden wir den Teiler von Divider lila ändern, um Divider silver.png zu sein und dann, lassen Sie uns etwas Raum zwischen den Zeilen für die Adresse und auch die Listenelemente erstellen. Zurück im CSS können wir das tun, indem wir die Fußzeilenlistenelemente und auch den Adressabschnitt und die Zeilenhöhe auf 2ems erhöhen, und das gibt uns ein bisschen mehr Abstand vertikal. Die Social-Media-Symbole sind ein wenig gestanzt, also werde ich einige Marge auf der rechten Seite hinzufügen , nur um sie ein wenig zu trennen. Ich wähle Font Awesome Symbole mit dem i. Lassen Sie uns einen Rand hinzufügen, auf der rechten Seite, 15 Pixel. Das sieht ein bisschen besser aus. Dann möchten wir die Hintergrundfarbe für den Bereich Copyright am unteren Rand ändern und den Text in der Mitte ausrichten. Für den Bereich „Copyright“ geben wir diesem eine ID der Kopie an. Lassen Sie uns beginnen, indem Sie die Textausrichtung zentriert, die Hintergrundfarbe auf weiß setzen, und wir setzen die Schriftfarbe auf 494646 und die Höhen des div auf 60 Pixel, und setzen Sie auch die Zeilenhöhe auf 60 Pixel um den Text auszurichten, und dann schließlich werden wir etwas Rand an der Spitze des div hinzufügen, von 30 Pixel, aktualisieren. Es scheint zu funktionieren, also werden wir nur sehen, was das Problem ist. Ich habe den Ausweis der Kopie. Wenn es den Rechtschreibfehler geändert hat, dass zurück zu ID und speichern Sie das und aktualisieren. Das sieht besser aus. Wir müssen nun den Copyright-Bereich ganz unten auf der Seite trennen. Also als nächstes müssen wir etwas mit den Listenelementen arbeiten. Wir müssen die Farbe ändern und auch die Kugeln von der linken Seite entfernen. Wir tun dies im globalen Abschnitt oben. Fügen wir dies am Ende des globalen Abschnitts hinzu. Zuerst, um die Aufzählungspunkte zu entfernen, entfernen wir den List-Stil, wir können das auf keine setzen. Da es sich um Verknüpfungen handelt, können wir den Link für die Fußzeilenliste auswählen und die Farbe des Links in Weiß ändern. Führen Sie dann dasselbe für den Hover-Zustand, die Fußzeile, li a aus, und fahren Sie dann mit dem Mauszeiger. Die Hover-Farbe wird die graue Farbe sein, die wir im Text verwendet haben, also ist das 494646. Werfen wir einen Blick. Es funktioniert alles gut, gut. Alles sieht gut aus für die Desktop-Ansicht, also lassen Sie es auf die mobile Ansicht verkleinern und sehen, ob Änderungen vorgenommen werden müssen. Ja, wir haben einige Standardwerte Polsterung auf der linken Seite, und wir müssen auch den Text ausrichten, um in der Mitte zu sein. Es wird die Standard-Polsterung verschieben, öffnen Sie den globalen Abschnitt. Lassen Sie uns das direkt über den Listeneinträgen tun. Die UL, lassen Sie uns die Polsterung auf Null setzen, das sieht besser aus, und setzen Sie die Textausrichtung nach unten in der Medienabfrage. Wir werden das in der Fußzeile tun, text-ausrichten, um zentriert zu sein. Um die Adresse und die Fußzeile ungeordnete Liste zu trennen, möchte ich einen Rand unten hinzufügen. Also wieder, werden wir auf der Medienabfrage tun, so Fußzeile, ungeordnete Liste und auch die Adresse-Tags. Border-bottom, wir setzen auf ein Pixel und die Linie, die gepunktet werden soll. Werfen wir einen Blick. Das sieht gut aus. Wenn wir den Browser erweitern, scheint alles gut zu funktionieren. Das ist das Ende unserer Indexseite für unsere Bootstrap-Website. Wir haben nur noch ein paar Seiten zu tun, wie den Blog, den Kontakt und die Seite. Danke fürs Zuhören werde ich dich im nächsten Video sehen. 11. Blog-Seite: HTML: Willkommen zurück. Wir haben nun unsere Indexseite, unsere Bootstrap-Vorlage, fertig gestellt. In diesen nächsten Videos werden wir die letzten Seiten erstellen, um unsere Bootstrap-Vorlage zu beenden und dann können wir anfangen, zu WordPress zu konvertieren. In diesem Video werden wir mit der Blog-Seite beginnen. Wenn wir uns das fertige Projekt ansehen, können wir uns eine Vorstellung davon machen, was wir schaffen werden. Wir werden den Header-Abschnitt und auch das Hintergrundbild wiederverwenden. Aber wir werden den Text in Tranquil Spa Official Blog ändern. Dann scrollen wir nach unten, wir werden die einzelnen Blog-Beiträge auf der linken Seite haben. Wir werden drei davon in unsere Vorlage einfügen. Wir werden einige Links zu älteren und neueren Beiträgen haben. Auf der rechten Seite haben wir eine Sidebar. Die Seitenleiste wird ein wenig Text über die Website haben. Wir werden eine Archivseite haben, auf der alle Blogbeiträge nach Monaten und Jahr gespeichert werden. Wir werden auch die Blog-Beiträge in Kategorien unterteilen, und wenn wir dann ein wenig weiter unten auf der Seite gehen, werden wir auch den Fußzeilenabschnitt wiederverwenden. Die meisten der Sidebar werden nur leere Links für jetzt sein. Diese werden dynamisch in WordPress generiert. Wir werden sie nur in Bootstrap als leere Links hinzufügen, um das Aussehen der Website zu erhalten . Lasst uns anfangen. Wir gehen zu unserem Texteditor mit unserem Projekt. Dann lassen Sie uns eine neue Seite erstellen und speichern Sie diese als blog.html, und machen, dass auf der gleichen Ebene wie die Indexseite gespeichert ist. Dann, wenn Sie in die Index-Seite gehen, die wir früher fertig und wählen Sie alle und kopieren. Dann können wir dies als Ausgangspunkt für unsere Blog-Seite verwenden und diese in einfügen. Wie ich bereits erwähnt habe, werden wir den gleichen Header-Abschnitt verwenden. Wenn wir bis zum Ende des schließenden Kopfzeilen-Tags scrollen, das gerade da ist können wir beginnen, indem wir den Abschnitt Willkommen löschen und [unhörbar] löschen und weiter bis zum Anfang des Fußzeilenabschnitts gehen und dann löschen das. Bei diesem [unhörbar] haben wir gerade den Kopf- und Fußzeilenabschnitt. Das erste, was ich ändern werde, ist der Feature-Text. Wir werden dies nur in Tranquil Spa Official Blog ändern. Da gehen wir. Dann werden wir eine Bootstrap-Vorlage für unsere Blogs verwenden. Wenn wir gehen über zu getbootstrap.com, und wählen Sie dann den Abschnitt Erste Schritte. Wenn wir nach unten zu den Bootstrap-Vorlagen scrollen, sehen Sie diese Standardvorlagen, die Bootstrap zur Verfügung stellt. Es sollte einen heißen Blog geben. Also wählen wir den Blog aus. Wir werden einige der Teile dieser Website auswählen, die als Vorlage verwendet werden sollen. Die Seitenleiste befindet sich auf der rechten Seite und auch der Blogbeitrag auf der linken Seite. Dies wird einen guten Ausgangspunkt für unseren Blog schaffen. Um den Code dafür zu erhalten, müssen wir Ctrl-Click oder Rechtsklick. Gehen Sie zu „Seitenquelle anzeigen“. Wir werden den Code mit dem Blog-Beitrag in der Seitenleiste kopieren. Wenn wir nur ein wenig weiter nach unten scrollen. Wir müssen den Container kopieren, der direkt unter dem Blog-Masthead ist. Kopieren Sie den öffnenden Container und dann nach unten an den Beiträgen. Wir müssen den ganzen Weg runter in die Seitenleiste kopieren. Es ist am Ende der Seitenleiste, beenden Sie die Zeile und das Ende des Containers. Kopieren Sie alle unsere Abschnitt und gehen Sie dann zurück in den Texteditor zwischen der Kopf- und dem Fußzeilenabschnitt, lassen Sie uns das einfügen. Um die Dinge ein wenig klarer zu machen, können wir einige Kommentare hinzufügen. Lassen Sie uns den ersten Kommentar zur Seitenleiste hinzufügen. Wenn Sie nach dem Ende des Blogs suchen und diese direkt unten einfügen. Ändern Sie einen Entitäts-Sidebar-Abschnitt, und scrollen Sie dann Dann bis zum eröffnenden Blogbeitrag , der sich knapp über dem Container befindet. Fügen Sie das ein. Dies kann der Blog-Bereich sein. Als Nächstes werden wir einen Blick darauf werfen, wie das bisher aussieht , und wir werden sehen, welche Änderungen wir vornehmen müssen. Wir haben unseren Header-Abschnitt, und dann haben wir den Beispiel-Blog-Beitrag auf der linken Seite, der Seitenleiste genau dort, wo wir wollten. Dann haben wir den Fußzeilenabschnitt unten. Zurück in den Texteditor, wir wollen nur die Bootstrap-Blog-Überschrift oben entfernen. Lass uns das jetzt machen. Wir werden einfach das vollständige div mit dem Blog-Header verlassen. Schauen wir uns das an. Das ist die Überschrift entfernt. Standardmäßig auf der Bootstrap-Vorlage, die wir gerade kopiert haben. Es gibt drei verschiedene Arten von Blogbeiträgen. Um unsere Website konsistent zu halten, werde ich nur den dritten Blog-Beitrag verwenden. Wir sind zurück in den Blog-Bereich gegangen, und jeder einzelne Blog-Post hat eine Klasse von Blog-Post. So wissen wir, wo jeder Block beginnt und endet. Das ist der Erste. Ich möchte zum schließenden Tag für den Blogbeitrag nach unten scrollen und diesen löschen. Ich werde auch den zweiten Blogbeitrag löschen. Suchen Sie nach dem schließenden div, nach dem Blogbeitrag, und wählen Sie das aus und löschen Sie es. Jetzt sind wir nur noch mit den dritten und letzten Blogbeiträgen übrig. Um dies wieder einzufügen, möchten wir den Stil kopieren und ihn dann zweimal unten einfügen. Schauen wir uns den Browser an. Jetzt haben wir kostenlose Blog-Beiträge zurück auf unserer Seite, aber mit einem konsistenten Stil. Dann ändern wir den Text im Abschnitt Über zu in der Seitenleiste. Scrollen Sie nach unten zum Abschnitt der Seitenleiste und wenn wir den Abschnitt Über finden, können wir einfach den Beispieltext zwischen den P-Tags löschen und unseren eigenen Text einfügen. Willkommen im offiziellen Tranquil Spar Blog. Dann ein zweiter Satz direkt darunter, auch in P-Tags. Hier finden Sie alle Neuigkeiten rund um das was hier im Spa vor sich geht. Das ist der Abschnitt Über uns. Halten Sie die Archive, wie es für jetzt ist, und wir werden diese Arbeit dynamisch in WordPress später im Kurs. Im Abschnitt Anderswo ändern wir es in Kategorien. Lassen Sie uns vorerst einige Kategorien hinzufügen. Die erste können wir in Nachrichten umgewandelt werden und dann Angebote und dann schließlich uncategorize. Dann werden wir unsere Social-Media-Abteilung in. Wenn wir das Sidebar-Modul div kopieren und diese in direkt unten einfügen, können wir die Kategorien zu Follow Us ändern. Weil wir alle Social-Media-Links bereits im Fußzeilenbereich haben. Wir können einfach auf unsere Indexseite zurückgehen. Kann die Social-Media-Symbole unten ganz unten in der Fußzeile finden. Wenn wir die fünf Social-Media-Links kopieren und diese dann wieder in den Blog-Bereich einfügen. Löschen Sie diese zuerst und fügen Sie sie in ein. Dann speichern wir das und sehen, wie es im Browser aussieht. Das ist ein [unhörbares]. Wir haben die „Über uns“ -Text. Wir haben dann die Archive, die Rubrik Kategorie und die Social-Media-Rubrik. Das ist fast fertig mit dem Blog HTML. Nur noch eine kleine Sache, die ich gerne ändern würde, ist, wenn wir in den Container für den Blog gehen. Eine Sache, die ich für die Anzahl der Spalten auf dem Blog in der Seitenleiste ändern möchte. Standardmäßig hat Bootstrap den Blog-Bereich, der acht Teile auf den kleineren Geräten einnimmt. Ich möchte, dass unsere 12 Spalten breit, kleinere Geräte sind und dann auf mittleren Geräten zu acht wechseln. Dann müssen wir auch zum Sidebar-Abschnitt gehen und dasselbe für den Sidebar-Wrapper tun. Damit die Seitenleiste auf kleineren Geräten in voller Breite geht, können wir diese in 12 Spalten ändern und sie dann in col-md-3 ändern. Um die drei Spalten auf mittleren Geräten zu nehmen. Dann, weil wir das in mittel ändern, ändern wir auch den Offset auf den mittleren Geräten in eins. Genau wie ein wenig Abstand zwischen dem Blog-Post in der Seitenleiste und dann speichern Sie das. Das ist gerade fertig für den HTML für den Blog-Bereich. Wenn Sie mir im nächsten Video beitreten, werden wir mit unserer Blog-Seite fortfahren, indem Sie das CSS hinzufügen. 12. Blog-Seite: CSS: Also haben wir jetzt unsere Blog-Seite an Ort und Stelle. Lassen Sie uns es nun ein wenig mehr wie das fertige Projekt aussehen, indem Sie das CSS hinzufügen. Also müssen wir ein Divid-Bild unter dem Blog-Titel für jeden Beitrag hinzufügen. Außerdem fügen wir die Gliederung für jeden der einzelnen Beiträge in der Seitenleiste hinzu. Nun werden wir auch einige Ränder und Polsterungen hinzufügen, damit es ein wenig besser aussieht. Also lasst uns mit dem Titel des Blogbeitrags beginnen. Wir müssen das ein bisschen besser aussehen lassen und auch auf das Bild direkt darunter. So wie wir das tun, wenn wir uns jeden einzelnen Beitrag anschauen, hat die Level-2-Überschrift eine Klasse von Blog-Post-Titel. Also lasst uns zu unserem CSS Abschnitt gehen. Beginnen wir also mit unserem Blog-Abschnitt direkt unter dem Abschnitt „Keep In Touch“. Also kopiere ich den Kommentar und füge ihn in ein. Wir nennen dies den Blog-Bereich. Also fangen wir mit dem Blog-Post-Titel an. Um also das Hintergrundbild knapp unter der Überschrift der Ebene 2 zu erhalten, können wir die Hintergrund-URL hinzufügen. Dann in Klammern, werden wir den Pfad zu unserem Divider lila setzen , die wir auf der Indexseite verwendet haben. Also verwenden wir Punktpunkt. Dann sollten wir im Ordner Bilder den Divider purple.png haben. Dann, um die Position festzulegen, lassen Sie uns Mitte und mit der Seitenleiste hinzufügen, und dann das Bild so einstellen, dass es keine Wiederholung ist. Also schauen wir uns das an. Also haben wir jetzt ein Bild, aber es verbreitet die volle Breite der Ebene 2-Überschrift. Also müssen wir die Positionierung ändern. Also zuerst werden wir die Höhe auf 80 Pixel einstellen und dies ist die Höhe des vollen div. Als nächstes können wir die Größe des Bildes einstellen und wir können dies in der Hintergrundgröße tun. Stellen Sie also die Hintergrundfarbe auf 300 Pixel breit und 40 Pixel hoch. Werfen wir einen Blick. Es sieht also ein bisschen besser aus, aber es überlappt immer noch den Text. Lassen Sie uns also die Hintergrundposition verschieben. Also zuerst setzen wir die x-Position auf Mitte und dann die y, wir setzen das auf 35 Pixel. Ich sollte das Bild etwas runterschieben. Da gehen wir hin. So, jetzt, das Bild ist frei von der Ebene 2 Überschrift. Als nächstes werde ich nur ein wenig Rand am unteren Rand des div hinzufügen , nur um den Text wegzuschieben. Also legen wir den unteren Rand von 30 Pixel fest. Dann fügen Sie den Umriss zum Beitrag hinzu. Wenn man sich also die fertige Website anschaut, hat jeder einzelne Blogbeitrag den Ein-Pixel-Umriss mit den abgerundeten Ecken. Also lasst uns das jetzt machen. Wenn wir also einen Blick zurück in die blog.html werfen, können Sie sehen, dass jeder einzelne Blog-Beitrag eine Klasse von Blog-Post hat. Also lassen Sie uns das kopieren und fügen Sie es in. Also zuerst fügen wir die Grenze hinzu. Das wird ein Pixel durchgezogener Linie sein und die Farbe wird 494646 sein. Lassen Sie uns die abgerundeten Ecken erhalten, fügen Sie den Grenzradius von 10 Pixeln hinzu. Dann fügen wir als nächstes einen gewissen Spielraum hinzu. Um sicherzustellen, dass die Blogbeiträge oben und unten einige Abstände haben, können wir einen Rand von 30 Pixeln oben und unten und Null auf der linken und rechten Seite hinzufügen. Dann ein wenig Polsterung nur innerhalb des div von 20 Pixeln. Mal sehen, wie das aussieht. So sieht es jetzt viel besser aus. Als nächstes gehen wir zur Sidebar. Ich werde die Sidebar-Module ein wenig mehr wie die Blog-Posts aussehen lassen. Also zuerst, lassen Sie uns den Kommentar kopieren. Dies kann die Blog-Sidebar sein. Um die Sidebar zu stylen, können wir die Klasse des Sidebar-Moduls verwenden , da wir den gleichen Stil der Grenze verwenden, den wir gerade im Blog-Post verwendet haben. Wir können einfach dieses CSS kopieren und das dort einfügen. Werfen wir einen Blick. Da gehen wir hin. Also jetzt die Sidebar-Module, jetzt passen das Styling der Blog-Posts. Das ist es für dieses Video, danke für das Ansehen und ich werde Sie im nächsten Video sehen , wo wir die About wall Seite erstellen werden. 13. Informationsseite: Bewegen Sie sich von der Blog-Seite, die wir im letzten Video fertig. In diesem Video werden wir die „Über uns“ -Seite erstellen , die ziemlich einfach sein wird. Es wird die Kopf- und Fußzeilenabschnitt aus früheren Videos wiederverwenden. Wir werden eine ziemlich konsistente Ebene zwei Überschrift haben und Bild teilen. Wir werden es in einigen Lorem Ipsum Text platzieren , den Sie in den Text ändern können, den Sie wollen. Dann haben wir auch die Links, die wir auf der Homepage verwendet haben, zu verschiedenen Teilen der Website. Dann der Footer Abschnitt ganz unten. Also gehen wir zu unserem Texteditor und wir werden die Indexseite kopieren. Wählen Sie also Alle aus und kopieren Sie. Dann Befehl und N oder Control N, um eine neue Seite zu erstellen. Fügen Sie das in ein und speichern Sie es als about.html, erneut auf der gleichen Ebene wie die Indexseite und speichern Sie es. Also vom unteren Rand der Seite können wir den Fußzeilenabschnitt behalten. Dies wird das gleiche wie die Indexseite sein. Wir können den Bereich Shop Online entfernen. Das brauchen wir nicht. Wir können auch den Abschnitt „Letzte Angebote“ entfernen. Wir können den Bereich „Einrichtungen“ behalten. Das werden unsere vier Bild-Links sein. In der Tat können wir alle der Willkommensbereich behalten. Wir können einfach die Überschrift der Ebene 2 und das Bild wiederverwenden. Lassen Sie uns also beginnen, indem Sie den Abschnitt Willkommen in „Über uns“ umbenennen. Aber stellen Sie sicher, dass wir die ID des Abschnitts in etwa ändern. So können wir die gleiche Containerzeile auf der gleichen Anzahl von Spalten behalten und die Überschrift der Ebene 2 in Über uns ändern. Ich kann das violette Bild behalten. Mal sehen, wie das aussieht. Das ist in Ordnung. Für jetzt können wir die Alignment-Probleme in CSS bald lösen. Also als nächstes möchten wir ein paar Absätze Text hinzufügen. Also, wenn wir gehen über Google und machen eine Suche nach Lorem Ipsum, Ich klicke auf den ersten Link und wir können diese Seite verwenden, um einige Beispieltext zu bekommen. Also werde ich nur zwei Absätze generieren. Wählen Sie den ersten Absatz für jetzt aus und kopieren Sie ihn nach oben. Dann nach dem Klassen- und Zeilen-Tag für die Überschrift der Ebene zwei werde ich eine weitere Zeile erstellen. Also das div mit der Klasse der Zeile. Im ersten Absatz erstelle ich einige P-Tags. Fügen Sie dann den Absatz ein. Dann direkt darunter werden wir einen weiteren Absatz erstellen. Gehen Sie dann zurück zum Beispieltext und kopieren Sie den zweiten Absatz und fügen Sie ihn in ein. Lassen Sie uns das im Browser überprüfen. Da gehen wir. Als nächstes gehen wir zu unserem Custom CSS. Um zu beginnen, möchten wir ganz unten auf der Seite etwas Polsterung hinzufügen , nur um diesen Abschnitt von der Fußzeile zu trennen, der Linktext ist alles fehl am Platz, also setzen wir den Text ausrichten, um Mitte zu sein. Wir werden auch ein wenig Rand am oberen und unteren Rand der Absätze erstellen. Also, wenn wir zurück zu unserer custom.css gehen, dann erstellen Sie einen Abschnitt über uns. Geben Sie diesem Abschnitt also eine ID von etwa. Lassen Sie uns also beginnen, indem Sie die Polsterung am unteren Rand des div hinzufügen. Ich werde Pixel holen und dann Text ausrichten, um in der Mitte zu sein. Werfen wir einen Blick. So hat die Textausrichtung den Text in der Mitte der Seite ausgerichtet. Es wird auch sichergestellt, dass unser Divid-Bild in der Mitte ist und auch der Linktext unten ist jetzt 30 Pixel vom Rand am unteren Rand des div. Das letzte, was ich tun möchte, ist, etwas Rand am oberen und unteren Rand des Textes hinzuzufügen. Also lassen Sie uns die über ID und dann die p -Tags auswählen. Das einzige, was wir in diesem p tun wollen, ist ein paar Rand von 30 Pixeln oben und unten und Null auf der linken und rechten. Aktualisieren Sie dann. Da gehen wir. Also, das ist der Text getrennt und die Über uns Seite fertig. Also danke fürs Zuschauen. Im nächsten Video erstellen wir die letzte Seite für unsere Bootstrap-Vorlage, die die Kontaktseite sein wird. 14. Kontakt-Seite: HTML: Also willkommen zurück. In diesem Video werden wir die letzte Seite für unsere Bootstrap-Vorlage erstellen, die die Kontakt-Us-Seite sein wird. So wird es also aussehen. Also haben wir den Abschnitt „Kontaktieren Sie uns“, der Zwei-Säulen-Container enthält. Also die auf der linken Seite wird für die Adressdetails sein und dann auf der rechten Seite, wir werden einen Google iFrame mit einem Standort am See einbetten und dann direkt darunter fügen wir einen Abschnitt „Senden Sie uns eine Nachricht“ hinzu, und Dies erstreckt sich über die gesamte Breite der Webseite. Wenn wir zum WordPress-Abschnitt kommen, wird dies voll funktionsfähig sein. Also lasst uns in unserem Texteditor loslegen. Beginnen wir mit der About Seite, ich werde all das kopieren und dann verwenden Sie dies als Ausgangspunkt für unsere neue Seite, und fügen Sie es dann in. Speichern wir dies als contact.html. Diese Seite wird die gleiche Fußzeile verwenden, so dass wir den gesamten Fußzeilenabschnitt dort behalten. Moment können wir den Abschnitt Über was behalten, aber wir können dies einfach in den Abschnitt Kontaktieren Sie uns ändern und dann die Abschnitt-ID in Kontakt ändern. Die Überschrift der Ebene 2 kann in Kontakt geändert werden, sodass diese ganze Zeile mit dem Rest der Website und der folgenden Zeile mit dem Text konsistent bleibt. Wir können den gesamten Text für den Moment löschen, das brauchen wir nicht, aber wir können die Zeile behalten und wir werden den wiederverwenden. In dieser Zeile wird dies also die zwei-sechsspaltigen Abschnitte sein. Die auf der linken Seite wird die Adresse haben, und der Abschnitt auf der rechten Seite wird den Google Maps iFrame haben. Beginnen wir also mit dem Erstellen von zwei neuen divs mit einer Klasse von col-sm-6. Ich werde genau das gleiche für den Google iFrame tun. Also zuerst werden wir auf dem div auf der linken Seite beginnen, das die Adressinformationen haben wird. Zuallererst werden wir einige benutzerdefinierte CSS hinzufügen. So können wir unsere eigene Klasse von Adresse hinzufügen und auch, wenn wir einen Blick auf die fertige Website werfen, können Sie sehen, dass die Adresse das dunklere Hintergrundbild hat und dies von einem Bootstrap gut stammt. Also lassen Sie uns die Klasse von gut hinzufügen und die Adresse wird die gleiche wie der Fußzeilenabschnitt sein. Also, wenn wir nach unten zum Ende der Seite scrollen und dann die Address Tags kopieren, und fügen Sie dies in das div auf der linken Seite und es ist auch ein Font Awesome Symbol, das nur links vom Namen ist. Also lassen Sie uns das direkt nach dem öffnenden Adresse-Tag hinzufügen. Lassen Sie uns das Symbol hinzufügen. Es hat i Tag mit einer Klasse von fa fa-Map-Marker. Dann, direkt unter der Adresse, werden wir einige E-Mail- und Telefoninformationen hinzufügen. So hat sowohl die E-Mail als auch der Telefonbereich ein Font Awesome Symbol. Also der erste ist für die E-Mail, und das ist eine Klasse von fa fa-envelope-o, und dann direkt nach dem Symbol, können wir den Text der E-Mail hinzufügen. Ich werde nur generische E-Mails dort einfügen, also mailen Sie auf mail.com und fügen Sie dann ein Break-Tag auf dem zweiten Symbol hinzu. Das ist für das Telefon. So hat dies eine Klasse von fa fa-phone und Text alle Telefon. Wieder, ich werde einfach eine generische Nummer reinlegen. Schauen wir uns das an, wenn wir zurück in den Browser gehen und dann aktualisieren. Also haben wir das div auf der linken Seite schön angezeigt. Nur etwas, das Sie im Abschnitt E-Mail ändern können. Wir gehen wieder nach oben. Also haben wir nur ein paar Dinge, die wir dort ändern müssen, also ändern wir das in einen Doppelpunkt und dann ein at Symbol, und dann gehen wir. Als nächstes müssen wir den iFrame auf der rechten Seite erstellen. Also, wenn Sie zu Google Maps gehen, und wenn Sie eine schöne Lage am See finden, und dann, was Sie tun müssen, ist klicken Sie auf das Menü und wählen Sie dann Freigeben oder Einbetten Karte und wählen Sie die zweite Registerkarte, die Karte einbetten und dann kopieren den Link, den Google zur Verfügung stellt. Dann, wenn wir in unser zweites div gehen, können wir dies einfügen und sehen, wie das aussieht. Da gehen wir, also funktioniert das gut. Wir werden einige CSS im nächsten Video dafür hinzufügen, aber das sieht vorerst in Ordnung aus. Also, das ist diese Zeile fertig, so als nächstes gehen wir nach unten und wir fügen den Abschnitt Senden Sie uns eine Nachricht hinzu. Also zurück in den Texteditor, und wenn wir das div mit der Klasse der Zeile auf Einrichtungen finden, brauchen wir die Facility-Klasse nicht mehr, aber wir fügen unsere eigene Klasse von Message Area hinzu, und dann den gesamten Inhalt zwischen diesem Reihe können wir loswerden. Wenn wir also nach der Klasse im Zeilencontainer suchen, sind es alle Bilder und alle divs. Beginnen wir mit dem Abschnitt „Nachricht“. Lassen Sie uns also einen Abschnitt mit voller Breite erstellen. Wir geben dem div eine Klasse von col-sm-12 und dann innen verschachtelt, wir werden auch ein div mit einer Klasse von gut hinzufügen, so dass das ein wenig mehr abhebt. Dann innerhalb des Brunnens, werden wir das HTML-Formular erstellen. Lassen Sie uns zum fertigen Projekt gehen und werfen Sie einen Blick. Um Stil zu gestalten, fügen wir den Text oben auf „Senden Sie uns eine Nachricht“ hinzu, wir fügen dann einige Formulargruppen mit den Eingaben für den Namen, E-Mail und den Nachrichten-Textbereich hinzu und fügen dann unten eine Schaltfläche „Senden“ hinzu. Beginnen wir mit dem Text ganz oben. Wir fügen einige p-Tags hinzu und dann den Text oder Senden Sie uns eine Nachricht. Dann direkt unten fügen wir das erste div mit der Klasse der form-group hinzu, und dies ist eine Bootstrap-Klasse, die wir verwenden werden, um die freien Eingaben zu umgeben. Um zu beginnen, fügen wir eine Eingabe mit einer Art von Text und einer Klasse von Form-Steuerung hinzu, die auch eine Bootstrap-Klasse ist. Dann ID der Eingaben Namen und dann der Platzhaltertext einfach des Namens und schließen Sie ab. Als nächstes werden wir ein Label hinzufügen und dieses Label wird für die Bildschirmlesegeräte sein. Lassen Sie uns also eine Klasse von sr-only geben. Um dieses Label mit der Eingabe innerhalb des öffnenden Tags zu verknüpfen, können wir fallen hinzufügen und dann mit der Eingabe-ID des Eingangsnamens übereinstimmen. Dann zwischen den Label-Tags, können wir den Text hinzufügen, um den Namen zu erscheinen. Also lassen Sie uns diese Form-Gruppe kopieren und wir werden dies für den E-Mail-Abschnitt verwenden und fügen Sie diese dann unten. Also innerhalb dieser Form-Gruppe, müssen wir die Eingabe ändern, um Eingabe-E-Mail müssen wir die Eingabe ändern, um Eingabe-E-Mailund den Text zu sein E-Mail und dann innerhalb der Eingaben, wir ändern den Eingabe-Namen als Eingabe-E-Mail und der Platzhaltertext E-Mail sein, und fügen Sie dann noch einmal in die Formgruppe ein. Also dieses Mal wird es Eingabenachricht und der Name der Nachricht sein. Anstatt die Eingabe zu verwenden, können wir das einfach löschen und dieses Mal, weil es eine Nachricht sein wird, können wir einen Textbereich hinzufügen. Der Textbereich wird also die Klasse der Formularsteuerung haben. Die ID der Eingabe-Nachricht, die die gleiche wie die Beschriftung ist, und der Platzhaltertext wird gleich Nachricht sein, und dann wird das letzte Attribut die Anzahl der Zeilen, die wir als Standard erscheinen möchten. Also werde ich das anfangs frei machen. Um dann den Textbereichsabschnitt und dann direkt nach dem Textbereich zu schließen, ist das letzte, was ich hinzufügen möchte, die Eingabe für die Schaltfläche Senden. Eingaben, so haben wir eine Art von Submit. Dies wird die vertraute Klasse haben, die wir früher von btn btn-default verwendet haben, und dies wird die gleichen Stile haben, die wir auf den Schaltflächen auf der Indexseite verwendet haben. Schließlich wird der Wert, der der Text auf der Schaltfläche ist, Submit sein und dann schließen Sie ab und ich sollte ein paar abschließende Kommentare hinzufügen. Dann direkt über der Zeile ist dies das schließende Tag für den 12-Spalten-Abschnitt. Dann genau darüber ist dies für die Klasse von gut, also speichern wir das und überprüfen Sie dies im Browser. Da gehen wir. Also gibt es unser Formular unten auf der Seite. Das ist also alles, was wir für die Kontakt-Us-Seite brauchen. Schließen Sie sich mir im nächsten Video an und wir werden die Kontaktseite beenden, indem Sie das CSS hinzufügen. 15. Kontakt-Seite: CSS: Willkommen zum letzten Video in diesem Bootstrap-Template-Abschnitt. Wir haben den HTML-Code für die Seite „Kontakt“ hinzugefügt. Als nächstes fügen wir das CSS hinzu, damit es ein bisschen mehr wie das endgültige Projekt aussieht. Lassen Sie uns also zu unserem benutzerdefinierten CSS gehen. Wenn wir die Kommentare kopieren und diese direkt unter dem Abschnitt „Über uns“ einfügen, nennen wir dies den Abschnitt „Kontaktieren Sie uns“. Wir geben diesem Abschnitt eine ID des Kontakts. Um zu beginnen, werde ich etwas Polsterung am unteren Rand des div von 30 Pixeln hinzufügen, nur um ihm etwas Platz von der Fußzeile zu geben. Wir fügen auch die Textausrichtung der Mitte hinzu, und dies wird sicherstellen, dass sich das Teilungsbild in der Mitte der Seite befindet. Dann als nächstes werden wir im linken div beginnen. Lassen Sie uns also beginnen, indem Sie etwas Styling für den Adressbereich hinzufügen. Wenn wir zurück auf die Kontaktseite gehen, haben wir eine benutzerdefinierte Klasse von Adresse hinzugefügt. Diese Klasse umgab den gesamten Adressabschnitt. Also zurück in das Custom CSS, können wir das jetzt verwenden. Zunächst stellen wir sicher, dass der Text nach links ausgerichtet ist. Wir fügen oben ein wenig Platz hinzu, also ist das ein Rand oben von 30 Pixeln. Um die Schriftgröße ein wenig größer zu machen, erhöhen wir einfach die Schriftgröße auf 1,2 ems. Um die Linien auszuräumen, lassen Sie uns die Zeilenhöhe auf 2 ems setzen. Werfen wir einen Blick und erfrischen wir uns. Okay, als nächstes möchte ich die Farbe der Symbole so ändern, dass sie mit dem Rest der Website übereinstimmen. Innerhalb der Adressklasse könnten wir die Symbole mit dem I. anvisieren Lassen Sie uns also die Farbe der Symbole auf 97689c ändern. Werfen wir einen Blick auf das. Ok, gut. Das hat das Symbol in die pinky lila Farbe geändert. Das ist alles in Ordnung für den Moment. Das nächste, was ich tun möchte, ist, den 30 Pixel-Rand zu entsprechen , so dass der Iframe oben ausgerichtet ist. Im Moment dehnt sich der iframe ein wenig zu groß, also fügen wir die maximale Breite von 100 Prozent hinzu, um diese innerhalb des Containers zu behalten. Wählen wir die Kontakt-ID und den iframe aus. Lassen Sie uns den Rand oben des linken div auf 30 Pixel passen. Der iframe wird also nicht zu groß, wir legen die maximale Breite auf 100 Prozent fest. Lassen Sie uns sparen und sehen Sie sich das an. Toll, also sieht es viel besser aus. Wir haben jetzt die beiden divs von oben ausgerichtet und auch der iframe dehnt sich nicht zu weit aus. Das letzte, was ich ändern möchte, ist, einfach ein wenig Padding oder Rand oben im Nachrichtenabschnitt hinzuzufügen , so dass es das mit dem Rest der Website konsistent hält. Wir setzen das auf 30 Pixel. Also geben wir diesem Abschnitt eine benutzerdefinierte Klasse von Nachrichtenbereich. Wir müssen nur etwas Rand an der Spitze von 30 Pixeln hinzufügen und aktualisieren. Tolle Website, sieht gut aus auf der Desktop-Ansicht. Wenn wir den Browser einfach auf die mobile Ansicht verkleinern, gibt es nicht viel, was wir wirklich tun müssen, es gibt nur eine Sache, die ich ändern möchte. Wir müssen die Textzeile hinzufügen, um in der mobilen Ansicht zentriert zu sein. So können wir das unten in der Medienabfrage tun. Da wir auch die Fußzeilenklasse des Text-Align-Zentrums haben, könnten wir dies einfach am Ende hinzufügen. So können wir unsere Klasse der Adresse hinzufügen und speichern und einen Blick darauf werfen. Großartig. Also gehen wir hin. Es sieht also viel besser aus. Nun, das ist die Bootstrap-Vorlage fertig für unsere Projekte, und das ist das Ende dieses Abschnitts. Also danke fürs Zuhören. Wenn Sie sich mir im nächsten Abschnitt anschließen, können wir damit beginnen, unsere Bootstrap-Vorlage in WordPress zu konvertieren. 16. Localhost- und WordPress-Installation: Willkommen zurück zu diesem brandneuen Abschnitt wenn ich in den spannenden Teil des Kurses, wo wir beginnen, Umwandlung unserer Bootstrap-Vorlage zu einem WordPress-Theme. Kurz bevor wir anfangen, [unhörbar] müssen wir einen Webserver auf unsere Maschine herunterladen. Um WordPress-Websites auf unserem Rechner lokal zu entwickeln, müssen wir einen Webserver installieren. Wenn Sie zu MAMP, M-A-M-P , .info und einem Build gehen, um die neueste Version von MAMP zu installieren. Wenn Sie einfach auf den Download-Button klicken, ist dies für Mac und Windows kostenlos verfügbar. Klicken Sie auf den Download-Button, um uns zu starten und laden Sie dort die neueste Version herunter. Bis jetzt haben wir unsere Website in Bootstrap erstellt, die HTML, CSS und JavaScript enthält , die alle im Browser ausgeführt werden. Wir benötigen keine speziellen Tools, damit die Website im Browser erscheint. Aber weil wir WordPress verwenden und WordPress mit PHP erstellt wird und eine MySQL-Datenbank verwendet, müssen wir MAMP installieren, um einen lokalen Server auf unserer Maschine zu erstellen. Dies wird es uns ermöglichen, WordPress-Websites zu erstellen, ohne dass sie im Internet leben. Halten Sie einfach das Video für eine Minute an, während das heruntergeladen wird und wir sehen uns in einer Minute. Willkommen zurück. Hoffentlich haben Sie jetzt MAMP heruntergeladen. Wenn wir einfach zu unseren Downloads gehen und auf das Installationsprogramm doppelklicken, sollte dies Sie durch den Installationsprozess führen. Es sollte sowohl auf Mac als auch auf Windows ziemlich ähnlich sein. Sie sollten das Installationsskript abrufen. Wenn wir nur weiter durch und akzeptieren die Lizenz und Vereinbarung. Dann werden wir für alle Benutzer auf diesem Computer installieren. Klicken Sie dann auf Installieren, und es sollte nicht zu lange dauern, um die Installation abzuschließen. Wir haben eine MAMP und MAMP Pro wurde erfolgreich installiert. Wir werden nur die kostenlose MAMP Version verwenden. Das ist alles, was Sie für diesen Kurs benötigen, wir müssen nicht für die Pro-Version bezahlen. Sobald die Installation abgeschlossen ist, klicken Sie einfach auf Schließen. Jetzt haben wir MAMP installiert. Wenn Sie einen Mac verwenden, wenn Sie zu den Anwendungen gehen, sollte er dort gespeichert werden. Wenn Sie einen Windows-Computer verwenden, sollte er an Ihrem üblichen Speicherort wie dem C-Laufwerk gespeichert werden. Wenn wir einfach zu MAMP gehen und auf die MAMP mit dem Elefanten-Symbol doppelklicken. Dann sollten Sie ein Fenster bekommen, das so aussieht. Wenn wir in die Einstellungen gehen und dann auf die Registerkarte Ports klicken, wird die Apache-Ports, die der Web-Server auf Port 8888 verwendet. Dann, wenn Sie auf den Webserver klicken. Standardmäßig sollte der Pfad für den Dokumentstamm die htdocs sein. Wenn dies nicht der Fall ist, klicken Sie einfach auf den Ordner. Dann, wenn Sie sich im Ordner befinden, wenn Sie nur den Weg zu dem Laufwerk finden, auf dem MAMP installiert ist. Dann, wenn wir nach unten gehen, um MAMP zu finden und dann aufmachen. Wenn Sie dann nach dem Ordner htdocs suchen, wählen Sie diesen aus. Jede Website, für die wir PHP verwenden werden, müssen wir den Projektordner in die htdocs setzen, aber wir werden das in nur ein bisschen tun. Wenn wir beginnen, indem wir auf Server starten und hoffentlich, wenn alles in Ordnung installiert ist, sollten Sie die Starter-Seite erhalten , die Ihnen sagt, dass MAMP erfolgreich installiert wurde. Ok, großartig. Jetzt ist MAMP installiert. Wenn wir über zu Google und wenn Sie nach WordPress suchen. Dann, wenn das gesucht wird, müssen wir zu wordpress.org gehen. Wenn Sie einen Blick auf die WordPress-Homepage werfen möchten, zögern Sie nicht, das zu tun. Aber ich werde nur auf Download WordPress klicken und dann die neueste Version herunterladen, die derzeit 4.3 ist. WordPress braucht überhaupt nicht lange zu installieren. Es dauert nur ca. 10-15 Sekunden, wenn Sie eine gute Internetverbindung haben. Sobald das heruntergeladen wird, können wir einfach loswerden, dass und dann den Kopf über die Downloads und klicken Sie dann auf die WordPress-Zip-Datei und entpacken, dass. Nun, das ist unser neuer Projektordner für unsere Website. Ich werde diesen ruhigen WP umbenennen. Nur damit es keine Verwirrung gibt, den ursprünglichen Bootstrap-Ordner, werde ich dies in tranquil-bs ändern. Dann müssen wir das in unsere htdocs verschieben. Ich werde nur ein neues Fenster öffnen. Dann werde ich die htdocs finden. Wenn wir zurück in den MAMP Ordner und dann in htdocs gehen, und ziehen Sie dann in htdocs den WordPress-Ordner. Jetzt haben wir WordPress in unserem Dokumentstamm oder den htdocs installiert. Wenn wir zurück zu MAMP gehen und dann auf die geöffnete Startseite klicken, sollte dies uns zurück zum MAMP Begrüßungsbildschirm führen. Klicken Sie dann auf die Tools oben und klicken Sie auf phpMyAdmin. Dies sollte uns in den Admin-Bereich zum Erstellen von Datenbanken führen. Wir müssen eine neue Datenbank für WordPress erstellen. Die Art und Weise, wie wir das tun, wenn wir die Registerkarte Datenbanken oben und dann unter Datenbank erstellen auswählen , werde ich unseren Datenbanknamen dort einfügen. Ich werde meine Beruhigungs-Spa anrufen, und klicken Sie dann auf Erstellen. Dann links unten, sollten wir die Tranquil-Spa-Datenbank in der Liste erscheinen lassen. Dann werden wir als nächstes einen Benutzer für diese Datenbank erstellen. Dann, wenn wir zu den Registerkarten am oberen Rand der Seite gehen und auf Berechtigungen klicken und dann werden wir den neuen Benutzer auswählen, oder Benutzer hinzufügen, die am unteren Rand ist. Dann können wir die Informationen des Benutzers eingeben. Der Benutzername gibt uns das Textfeld. Ich werde meinen Benutzer spa-admin anrufen. Dann für den Host möchten wir lokal auswählen. Dann können Sie entweder das Passwort Ihrer Wahl eingeben oder ein Passwort generieren. Stellen Sie sicher, dass Sie ein Kennwort generieren, dass Sie es kopieren. Wir werden das nur in einem Moment verwenden, dann blättern Sie über die Seite nach unten und drücken Sie los. Es wurde unser Spa-Admin-Benutzer erstellt. Dann müssen wir jetzt zurück zu WordPress und sagen WordPress die Datenbankinformationen und die Benutzerinformationen, die wir gerade erstellt haben. Wir schließen den Browser für jetzt und öffnen dann Ihren Texteditor. Dann, wenn wir zurück zu den htdocs gehen, wo wir unseren ruhigen wp-Ordner gespeichert haben. Wenn Sie das einfach in den Texteditor ziehen. Es ist die WordPress-Datenbank konfiguriert. Wenn wir in den WordPress-Ordner gehen und wp-config-sample auswählen. Dann können wir unsere Datenbankinformationen eingeben. Führen Sie einen Bildlauf nach unten zum Datenbanknamen durch. Dann können Sie sehen, dass wir nur unseren Datenbanknamen hier einschließen müssen. Löschen Sie das. Wir nannten unsere Datenbank tranquil-spa, so ruhig-spa. Dann unter dem Datenbanknamen können wir den Benutzernamen einschließen. Löschen Sie hier den Benutzernamen. Wir haben unseren Benutzer spa-admin angerufen. Setzen Sie spa-admin oder einen beliebigen Namen, den Sie erstellt haben. Das Passwort, das Sie in die Zwischenablage kopieren sollten. Das können wir einfügen. Wir verwenden den localhost, so dass wir den Host einfach verlassen können, wie er ist. Dann müssen wir als nächstes die Schlüssel für Salze für die Authentifizierung generieren. Wo sich der Website-Link befindet , den wir einfach kopieren. Dann gehen Sie zu Ihrem Webbrowser und fügen Sie das in. Dies sollte die Schlüssel generieren, die eindeutig sind. Wählen Sie alle auf der Seite aus und kopieren Sie sie. Dann ersetzen Sie diese durch die, die wir gerade kopiert haben. Fügen Sie die ein. Dann müssen wir das letzte, was wir in dieser Datei tun , ist, bis zum Ende der Seite zu scrollen. Wir können das Präfix der Datenbanktabelle aus dem Standard-WP ändern. Ich werde meins zu tranquildb ändern. Das kann alles sein, was du magst, es spielt keine Rolle. Speichern Sie das. Dann ist das letzte, was wir für diese Datei tun müssen, das Beispielwort zu entfernen. Wir müssen es umbenennen wp-config.php. Stellen Sie sicher, dass das gespeichert ist. Wenn Sie sich erinnern, als wir MAMP zum ersten Mal heruntergeladen haben, gingen wir in die Einstellungen auf den Ports. Wenn Sie sich erinnern, dass der Hafen 8888 war. Wir können dies verwenden, um in unseren Webbrowser zu gehen. Wenn Sie in den Webbrowser gehen und dann localhost eingeben, und dann einen Doppelpunkt, und dann 8888 und dann eingeben, sollte dies Ihnen einen Index aller Website geben, die in den htdocs gespeichert ist. Vorerst haben wir nur das ruhige Spa. Wenn wir darauf klicken, und hoffentlich, wenn alles gut für Sie gelaufen ist, können Sie das WordPress-Installationsskript bekommen. Es ist wirklich einfach, mitzuverfolgen. Zuerst müssen wir unsere Sprache auswählen, die mir Englisch, UK ist und dann Weiter auswählen. Dann brauchen wir nur ein wenig Informationen über die Website. Der Website-Titel wird Tranquil Spa sein. Ich habe meinen Benutzernamen bereits als tranquil_admin gespeichert und dann ein Passwort erstellt. Beachten Sie, dass sich dieses Kennwort von Ihrer Datenbank unterscheidet. Dies wird sein, um in den WordPress-Admin einloggen. Erstellen Sie ein sicheres Passwort Ihrer Wahl. Dann geben Sie eine E-Mail und dann Datenschutz, wir können dies für jetzt deaktivieren. Wir können das später in den Einstellungen ändern, sobald wir die Website fertig sind und klicken Sie dann auf WordPress installieren. Dort gehen wir, es startet WordPress installiert. Das ist, wie schnell und einfach ist, WordPress auf Ihrem Computer zu starten. Wenn Sie nur gehen, um sich einzuloggen und wir [unhörbar], um auf das Bedienfeld zu gehen. Setzen Sie Benutzername und Passwort ein, und wir wurden zum WordPress-Dashboard weitergeleitet. Wenn Sie überprüfen möchten, wie die WordPress-Website so weit mit dem Standard-Theme aussehen, können wir einfach auf das Tranquil Spa Home Symbol oben klicken. Dies ist unsere Website, und das ist nur das Standard-Theme, das mit WordPress kommt. Da gehen wir, das ist WordPress jetzt installiert. Vielen Dank für das Ansehen, und wir werden Sie im nächsten Video sehen, wo wir beginnen, unsere Bootstrap-Dateien in WordPress zu importieren. 17. WordPress-Themenordner: Ok. Jetzt haben wir unseren lokalen Host und WordPress alle installiert. Wir werden nun an die Wichtigkeit der Bootstrap-Ordner in unserem benutzerdefinierten Thema arbeiten . Wenn wir zum MAMP Ordner und dann unter den HT-Dokumenten zurückkehren, können wir unseren tranquilwp Ordner finden. Öffne das auf. Dies sind alle Dateien und Ordner, die standardmäßig in WordPress enthalten sind. Die meiste Arbeit, die wir für das benutzerdefinierte Design tun werden, befindet sich innerhalb von WP Content und dann innerhalb des Themes-Ordners. Innerhalb des Themes-Ordners gibt es die Standard-Standard-Themes, die in WordPress enthalten sind. 2015 ist die aktuellste. Das ist eine, die wir sehen, wenn wir unsere Website vorher geöffnet haben. innerhalb des Themes-Ordners Lassen Sie unsinnerhalb des Themes-Ordnersmit unserem benutzerdefinierten Thema beginnen. Wenn Sie in einen neuen Ordner gehen, werde ich diesen Tranquilwp nennen. Wenn wir den tranquilwp-Ordner und auch unseren Bootstrap-Ordner öffnen, können wir beginnen, einige der Ordner in unser benutzerdefiniertes Thema zu setzen. Ich werde nur alle Dateien für jetzt auswählen und kopieren und diese dann in unseren Ordner einfügen. Wir brauchen nicht über den Blog oder die Kontaktseite nur für den Moment. Ich werde die einfach loswerden. Die Indexseite, müssen wir dies in index.php ändern, so dass WordPress es erkennt. Wir verwenden dort eine PHP-Erweiterung. Wir müssen die Bilder, das JavaScript, das CSS im Schriftartenordner behalten . Aber innerhalb des CSS-Ordners müssen wir unsere benutzerdefinierte CSS-Datei verschieben und wir müssen sie so verschieben, dass sie auf der gleichen Ebene wie unsere Indexseite ist. Wenn wir das benutzerdefinierte CSS auswählen, und es nach oben verschoben eine Ebene, und mit der Indexseite auf den Ordnern, weil das ist, wo WordPress erfordert das CSS sein. Außerdem erfordert es style.css, anstatt die benutzerdefinierte. Wir werden das in style.css ändern. Neben unserem benutzerdefinierten Stylesheet in unserer style.css, können wir auch einige wichtige WordPress-Informationen über unser Thema. Wenn wir wieder in unseren Texteditor gehen, müssen Sie möglicherweise aktualisieren, da wir einige der Dateien und Ordner geändert haben. Auf der tranquilwp, wenn wir zu Inhalten, Themen und dann tranquilwp gehen , können wir dann das Stylesheet finden, das wir gerade umbenannt haben. Ganz oben auf der Seite, wenn wir nur etwas Platz machen, müssen wir zurück in den Webbrowser gehen. Gehen Sie also zu Google. Ich werde nur eine Suche machen. Wenn Sie nach Codex suchen, ist Codex im Grunde die WordPress-Dokumentation. Wir verwenden das ziemlich viel in diesem Abschnitt, um viele Informationen wie PHP-Funktionen zu finden. Für jetzt, wenn Sie nur für den Codex Thema Stylesheets suchen, so ist es ein Top-Link, den wir brauchen, aber wenn Sie nur auf den Sprung zum Thema Stylesheet klicken, und dies wird auf den Teil der Seite springen, die wir brauchen. Unter dem Thema Stylesheet-Überschrift, WordPress gibt uns ein Beispiel des Kommentars, dass es an der Spitze der style.css enthalten muss. Kopieren wir das Beispiel, und fügen Sie es dann oben in unserem Stylesheet ein. Lassen Sie uns diese Seitenleiste loswerden und wir können anfangen, die Informationen zu bearbeiten. Ganz oben, unter dem Namen des Themas, werden wir unser Thema Namen setzen, die ruhig WP ist. Dann die Theme-Website. Du kannst vorerst alles einpacken, was du willst. Du willst vorerst nur etwas Generiges reinlegen. tranquilspatheme.com. Auf dem Autor setzen Sie Ihren Namen oder den Namen Ihres Unternehmens ein. Wenn Sie eine Website haben, können Sie diese auch dort hineinlegen. Dann können Sie eine Beschreibung für das Thema einfügen. Ich werde nur in einem voll ansprechenden WordPress Spa-Theme setzen, gebaut mit Bootstrap 3. Da gehen wir. Die Version, können wir bei 1.0 verlassen, und die Lizenz können wir verlassen. Wir werden einige der Tags ändern. Nun, bedenken Sie, dass die Tags, die in das Stylesheet gesetzt wurden, wir können nicht einfach in jedem Tag setzen, das wir wählen. Sie müssen WordPress genehmigte Tags sein, die Sie im Codex finden können. Für den Moment werde ich nur die rechte Seitenleiste hinzufügen. Dann werden diese durch Kommas getrennt. Responsive Layouts, benutzerdefinierte Kopfzeile und benutzerdefinierte Menü, ausgewählte Bilder. Dann am Ende, Übersetzung wirklich. Einige davon verstehen Sie vielleicht nicht, was sie sind, aber wenn wir den Kurs durchlaufen, werden Sie mehr und mehr von dem verstehen, was jeder von ihnen ist. Wir werden Dinge wie vorgestellte Bilder hinzufügen, und wir machen das Thema bereit, damit Menschen in verschiedene Sprachen übersetzen können, wenn sie wollen. Die Text-Domain, wir werden es das gleiche wie unser Theme-Name zu machen . Das wird beschaulich sein. Das wird später in diesem Kurs verwendet, wenn wir das Thema für die Übersetzung bereit machen. Wir können die Informationen unten löschen. Da gehen wir. Das ist alles, was wir vorerst in das Stylesheet aufnehmen müssen. Speichern Sie das. Wenn wir zurück zu unserem Theme-Ordner, sich in den HT-Dokumenten befindet, dann öffnen Sie es, und gehen Sie dann wieder zu WordPress-Inhalten, Themes und tranquilwp. Das letzte, was wir tun müssen, bevor wir unser Theme in WordPress aktivieren, ist, wenn wir in den Bilderordner in unserem benutzerdefinierten Thema gehen, wenn wir die screenshot.png finden , müssen wir dies über eine Ebene in die gleiche -Verzeichnis, wie wir unser Stylesheet in zuvor verschoben haben. Dann, wenn wir zu unserem Web-Browser gehen, und dann zurück zu unserem WordPress-Dashboard. Wenn wir zum Tranquil Spa in der Ecke gehen und den Mauszeiger über, und klicken Sie dann auf das Armaturenbrett. Grundsätzlich ist das Dashboard wirklich einfach zu bedienen. Auf der linken Seite haben wir eine Liste aller Links, wo wir verschiedene Beiträge, Seiten hinzufügen können. Wir können Dinge wie die Themen ändern. Wenn Sie zum Erscheinungsbild gehen und Themen auswählen, so wie Sie sehen können, ist das 2015 Thema aktiv, aber wir möchten das Tranquil Spa Thema verwenden, das wir gerade erstellt haben. Wenn alles gut geht, sollten Sie sehen, dass Ihr Thema auf dieser Seite erscheint, und klicken Sie dann auf Aktivieren. Da gehen wir. Nun, wenn wir auf das Home-Icon in der oberen linken, auf der Website besuchen, hoffentlich, dass alles gut für Sie ging, und Ihr Thema sollte jetzt aktiviert werden. Wie Sie sehen können, funktioniert alles, aber es gibt immer noch eine Menge Arbeit, die getan werden muss, um es wie unsere Bootstrap-Vorlage aussehen zu lassen. Lassen Sie uns beginnen, indem Sie einige der Ordner hinzufügen, die wir brauchen. Zurück in unseren Theme-Ordner, in den HT-Dokumenten, eine Sache, die Sie tun möchten, ist eine Verknüpfung auf Ihrem Desktop einrichten, oder wenn Sie einen MAC verwenden, können Sie einen der Farb-Tags hinzufügen, so dass Sie nicht gehen müssen durch den Prozess des Auffindens jedes Mal. MAMP, und dann die HT-Dokumente, tranquilwp, Inhalt, Themen und dann tranquilwp. Für diesen ruhigen Ordner werde ich nur das blaue Tag erstellen, so dass ich einfach das Blau auswählen und es viel schneller finden kann. Wenn Sie einen Windows-Computer verwenden, möchten Sie möglicherweise eine Verknüpfung auf Ihrem Desktop speichern. Wir müssen noch ein paar grundlegende Dateien in unseren Ordner hinzufügen. Wenn wir zu Klammern gehen und die Seitenleiste aufzurufen, werde ich Befehl und N drücken, um eine neue Seite zu erstellen. Die erste Seite, die wir hinzufügen müssen, ist die header.php. Speichern Sie das einfach als header.php, und stellen Sie sicher, dass es in unserem benutzerdefinierten Design enthalten ist, zusammen mit der Indexseite. Wir speichern das für jetzt, und dann noch eine neue Seite. Speichern Sie diese Datei als footer.php. Dann sind nur noch zwei weitere zu erstellen. Der nächste wird für die Sidebar sein, und speichern wir die sidebar.php. Ich werde dieses Mal eine Verknüpfung verwenden und diese mit der Indexseite speichern. Dann schließlich ist die letzte Datei, die wir speichern werden, für die Funktionen, also eine neue Seite und speichern Sie diese als functions.php. Wieder stellen Sie sicher, dass es an der richtigen Stelle ist. Das war's vorerst. Ich werde Sie im nächsten Video sehen. 18. Index-Seite: Ok. Willkommen zurück. In diesem Video werden wir uns die Indexseite ansehen und beginnen, die Kopf- und Fußzeile neu anzuordnen und auch einige Inhalte zu unserer Funktionsdatei hinzuzufügen. Ok. Also ein paar Dinge, bevor wir anfangen. Wenn Sie sicherstellen, dass die MAMP, die Sie im letzten Video heruntergeladen haben, läuft und läuft. Wenn Sie also sagen, Server starten, stellen Sie sicher, dass Sie auf sie klicken, um das zu starten. dann in Ihrem Texteditor Wenn Siedann in Ihrem Texteditorden tranquilwp öffnen, der den Theme-Ordner für das Projekt ist, und gehen Sie dann zu Ihrem Webbrowser, und dann, wenn Sie den lokalen Host eingeben ,:8888 und dann Schrägstrich tranquil-wp, und dies führt uns zu der Indexseite, an der wir mit der Arbeit beginnen müssen. Wenn Sie zum WordPress-Dashboard zurückkehren müssen, müssen wir einfach /admin am Ende der URL hinzufügen, und das bringt uns zurück zum Dashboard. Ok. Also lasst uns anfangen. Im Texteditor haben wir unsere Kopf- und Fußzeilendateien im letzten Video erstellt. Also werden wir sowohl die Kopf- als auch die Fußzeile in diese Dateien einfügen. Also werden wir die Kopfzeile und die Fußzeile von der Indexseite nehmen. Wenn Sie also zur index.php gehen und dann zum Anfang der Seite scrollen, müssen wir den gesamten Inhalt von oben auf der Webseite kopieren oder zitieren, bis wir zum schließenden Header-Tag gelangen, das gerade da ist. Kopieren Sie das alles nach oben und schneiden Sie das dann aus, und jetzt wird der Header-Abschnitt in seine eigene Datei gehen, die die header.php ist. Fügen Sie das also dort ein und speichern Sie, und wenn wir dann zurück in die Indexseite gehen, machen wir genau dasselbe mit dem Fußzeilenabschnitt. Scrollen Sie also nach unten bis zum Ende der Seite und dann unter dem Online-Bereich, wenn Sie nach dem Fußzeilenkommentar suchen, und schneiden Sie dann den gesamten Inhalt bis zum Ende der Indexseite ab. Schneiden Sie das also, und gehen Sie dann zur footer.php, und fügen Sie das in und speichern Sie es. Ok. Also, wenn wir zurück zu der index.php gehen. Was uns übrig bleibt, ist nur der Hauptinhalt der Webseite. Wir haben die Kopf- und Fußzeilenabschnitt entfernt. Da sich nun die Kopf- und Fußzeile in ihren eigenen Dateien befinden, müssen wir diese mit der Indexseite verknüpfen. Nicht ganz unkompliziert zu tun. Wenn wir nach oben gehen, wo der Header-Abschnitt war, werden wir anfangen, einige PHP zu verwenden. Um mit PHP zu beginnen, müssen wir zunächst den Dateinamen mit der PHP-Erweiterung haben, und dann PHP auf der Seite verwenden, verwenden wir eine Öffnungswinkel Klammer und dann ein Fragezeichen und dann PHP. Dies ist also das öffnende Tag und das schließende Tag ist das Fragezeichen und dann die schließende Winkelklammer. Ok. Dann verwenden wir zwischen der öffnenden und schließenden Klammer die WordPress Get-Header-Funktion. Also get_header. Da es Funktion ist, verwenden wir die geschweiften Klammern und dann ein Semikolon am Ende, und dann machen wir genau das gleiche, aber verwenden Sie get footer ganz unten auf der Seite. Also wieder, wir verwenden die PHP-öffnenden und schließenden Tags, und dann innerhalb der Tags, verwenden wir eine WordPress get footer-Funktion, die Klammern und dann das Semikolon. Also effektiv, was wir erstellt haben, ist eine Kopf- und Fußzeilenvorlage, und jedes Mal, wenn wir diese in WordPress wiederverwenden möchten, anstatt immer wieder über denselben Code zu tippen, können wir einfach das PHP verwenden und den Get-Header oder die Funktion „get footer“. Also und speichern Sie die Index-Seite, und dann müssen wir als nächstes zu unserer functions.php gehen, und da alle Funktionen in PHP sein werden, müssen wir sicherstellen, dass der gesamte Inhalt auf dieser Seite zwischen dem Öffnen und Schließen von PHP-Tags. Lassen Sie uns damit beginnen, eine PHP-Funktion zu erstellen. Wenn Sie PHP noch nicht verwendet haben, wird das Schlüsselwort function verwendet. Eine Funktion ist im Grunde nur ein Stück Code, dem wir einen Namen geben, und wir können es nennen, wenn wir es brauchen. Um dies einzurichten, verwenden Sie die Funktion und dann den Namen danach, der tranquilwp_setup ist, und dann verwenden wir am Ende des Funktionsnamens die geschweiften Klammern und verwenden dann eine Reihe von geschweiften Klammern und alle Informationen , die wir zwischen den geschweiften Klammern setzen, wird der Code sein, der ausgeführt wird, wenn das Thema eingerichtet wird. Also werden wir später mehr dazu hinzufügen, aber jetzt werden wir nur einige Theme-Unterstützung für RSS oder automatische Einreichungen hinzufügen. Also tun wir das durch add_theme_support, und in den Anführungszeichen, geben Sie automatic-feed-links und dann ein Semikolon am Ende, und stellen Sie sicher, dass das der Feed dort ist. Stellen Sie also sicher, dass die RSS-Informationen richtig in den Kopfbereich gelangen. Wir werden Theme-Unterstützung auch für das Titel-Tag hinzufügen, und so können sowohl Themen als auch Plug-Ins auf den Dokumenttitel zugreifen, so dass wir ihn dynamisch ändern können. Also add_theme_support, und vergessen Sie nicht die Anführungszeichen dort. Dieser wird das Titel-Tag sein. Also Titel-Tag. Also als nächstes müssen wir WordPress sagen, diese Funktion beim Einrichten des Theme auszuführen. Also, wenn wir außerhalb der geschweiften Klammern gehen und dann müssen wir eine Aktion und die Klammer hinzufügen, und dann das Semikolon am Ende. Dies wird in zwei Parametern nehmen. Also der erste in den Anführungszeichen ist nach _setup_theme, und dann durch ein Komma getrennt, müssen wir den Funktionsnamen setzen , der tranquilwp setup ist. Also werden wir das einfach kopieren und das zwischen den Anführungszeichen einfügen. Nur ein weiteres Stück PHP, das wir in die Funktionsdatei einfügen müssen, bevor wir weitermachen, ist, wenn wir an die Spitze gehen. Ok. Also werden wir eine PHP if-Anweisung verwenden. Also, wenn Sie noch keine davon gesehen haben, ist es wirklich nichts, worüber man sich Sorgen machen muss. Also werde ich einfach anfangen, indem ich austippe und dann reden wir über genau, was passiert. Also werden wir nur überprüfen, ob eine Bedingung erfüllt ist, und wenn dies der Fall ist, führen wir den Code zwischen diesen geschweiften Klammern aus. Der Code, den wir ausführen möchten, ist, dass wir eine Variable namens Inhaltsbreite hinzufügen möchten, und dies wird auf 660 Pixel gesetzt werden. Dieser Wert wird die maximale Breite von jedem Stück Inhalt zu steuern , die in der WordPress-Theme ist, und wir verwenden es, um sicherzustellen, dass der Benutzer nicht etwas hochladen kann, wie ein Bild, das viel zu groß für das Design und verursacht Layout-Probleme, und dann werden wir unsere Bedingung zwischen die Klammern oben setzen. Also werde ich das Ausrufezeichen verwenden und dann isset und dann zwischen zwei weiteren geschweiften Klammern werden wir unsere Variable setzen, die die Inhaltsbreite ist. Diese if-Anweisung würde normalerweise überprüfen, ob diese Variable existiert, indem isset verwendet wird, aber da wir das Ausrufezeichen davor verwenden, überprüft sie das Gegenteil. Wenn also die variable Inhaltsbreite nicht gesetzt ist, verwenden Sie die Variable zwischen diesen geschweiften Klammern und stellen Sie sicher, dass der Inhalt nicht größer als 660 Pixel breit ist. Ok. Das sind also die Funktionen, die für dieses Video fertig sind. Wir werden mehr dazu hinzufügen, während wir den Kurs durchlaufen, aber nur noch eine Sache, die ich Ihnen zeigen möchte, bevor wir dieses Video beenden , ist jetzt lassen Sie uns unsere PHP auf unserer Website zuwenden. Wir müssen sicherstellen, dass das Debuggen aktiviert ist, und ich werde Ihnen nur zeigen, warum. Wenn wir gehen über Chrome, und dann gehen wir zu besuchen Website, das ist, wie die Website jetzt aussieht, es sieht nicht sehr hübsch, aber es funktioniert. Wenn wir also zu unserer Index-Seite gehen und dann einen Tippfehler machen, also zum Beispiel, wenn wir zum PHP oben auf der Seite gehen, und wenn wir zum Beispiel nicht das schließende Tag nach PHP setzen, und wenn wir dann den Browser aktualisieren, Sie können sehen, dass wir einen weißen Bildschirm bekommen. Da wir also einen weißen, leeren Bildschirm haben, wissen wir, dass wir irgendwo einen Fehler gemacht haben, aber wir haben keinen Hinweis darauf, uns genau zu zeigen, wo wir falsch gelaufen sind. Um uns also einen Hinweis darauf zu geben, in welcher Codezeile wir falsch gelaufen sind, müssen wir zu unserem WordPress-Ordner gehen, sich in den htdocs befindet. Also finden wir MAMP, htdocs, tranquilwp, und dann müssen wir zurück in die Konfigurationsdatei gehen, wo wir unsere Datenbankinformationen sehen. Also doppelklicken Sie einfach, um das zu öffnen, und dann, wenn Sie unter alle Passwort- und Datenbankinformationen scrollen, und dann die Schlüssel und Salze. Direkt am unteren Rand der Seite, wenn Sie nach dem define WP Debug suchen, ist dies standardmäßig auf false gesetzt. Also werden wir dies auf true setzen und dann speichern, aber vergessen Sie nicht, es wieder auf false zu ändern, wenn Sie dies auf einen Webserver hochladen möchten. Also speichern Sie das und aktualisieren Sie dann in Chrome, und dann wird dies uns eine Fehlerzeile geben, und es sagt uns genau, wo wir falsch gelaufen sind. Also in unserer Indexseite auf Zeile drei. Werfen wir einen Blick. So können wir sehen, dass das Problem in Zeile eins war, aber WordPress hat nicht entdeckt, dass es ein Problem gab, bis es einige HTML in Zeile drei gefunden. Es ist also vielleicht nicht genau auf der Linie, aber es gibt einen guten Hinweis, wo genau das Problem liegt. Dann können wir das PHP einfach abschließen, speichern und dann aktualisieren, und alles sollte wieder funktionieren. Ok. Das ist also das Ende dieses Videos. Ich werde Sie im nächsten Video sehen. Wir werden mit der Arbeit an der Kopf- und Fußzeile beginnen. 19. Kopf- und Fußzeilenbereich: Jetzt werden wir unseren Kopfbereich und die Fußzeile dynamischer, WordPress-freundlicher machen . Zurück in einem Texteditor, wenn Sie zur Datei header.php gehen. Im Moment haben wir nur statisches HTML. Wir wollen dies dynamisch machen, indem wir einige WordPress-Funktionen und einige PHP hinzufügen. Beginnen wir damit, die Sprache dynamisch zu machen. Anstatt die Sprache an der Spitze zu haben, werden wir die PHP-Tags genauso öffnen wie vorher. Dann innerhalb der PHP, werden wir language_attributes hinzufügen, und dann, weil es eine Funktion ist, verwenden wir die Klammern und das Semikolon, und dies ermöglicht WordPress, die Sprache dynamisch hinzuzufügen, und dann als nächstes werden wir den Zeichensatz dynamisch hinzufügen. Anstatt den Zeichensatz gleich UTF-8 zu haben, können wir WordPress erlauben, dies dynamisch zu tun. Auch hier die PHP-öffnenden und schließenden Tags. Nun, wenn Sie diese kopieren und einfügen möchten, anstatt neu zu tippen, können Sie dies tun. Ich werde die Bloginfo-Funktion verwenden, und dann innerhalb der Klammern, und dann fügen wir den Zeichensatz wieder zwischen den Anführungszeichen und dann ein Semikolon am Ende hinzu. Nun, seien Sie vorsichtig, wenn Sie die PHP-Funktionen eingeben denn wie Sie im letzten Video mit dem Debugging gesehen haben, wenn wir nur ein Zeichen falsch oder fehl am Platz haben, sind die Chancen, dass Sie einen weißen Bildschirm bekommen, Also seien Sie vorsichtig, und dann statt unseren statischen Tranquil Spa-Titel, lassen Sie uns das ändern, um WordPress zu ermöglichen, dass. Wieder, zwischen den PHP-Tags, können wir den WordPress-Titel mit wp_title hinzufügen, und dann innerhalb der Klammern, lassen Sie einfach die leeren Anführungszeichen und dann das Semikolon am Ende, und scrollen Sie dann nach unten kurz vor dem schließenden Kopf gerade am Ende dort. Wenn wir nur die Zeile kurz davor finden, und dann werde ich nicht die wp_head-Funktion einschließen, die WordPress im Grunde erlaubt, Skripte zu Daten zurück in den Kopfbereich hinzuzufügen , wenn es nötig ist. Zwischen den PHP-Tags, die wp_head eingeben, dann die Klammern und das Semikolon. Dann in der öffnenden Körper-Tag, können wir die WordPress-Körperklasse hinzufügen. Zwischen dem PHP verwenden wir die body_class Funktion und die Klammern und das Semikolon, und dann fügt WordPress die body_class in den rechten Abschnitt ein. Scrollen wir nach unten zum Kopfzeilenabschnitt. Das nächste, was wir ändern werden, ist das Tranquil Spa. Der Tranquil Spa Link ist der Link oben links auf der Homepage, das ist unser Logobereich und unser Link zurück zur Homepage. Es gibt zwei Stücke von PHP, die wir hier einschließen müssen. Ich werde die Sidebar vorerst loswerden, nur um uns mehr Platz zu geben. Zunächst einmal müssen wir den Namen der Website ändern, die Tranquil Spa ist. Wir müssen das PHP einschließen, um diesen Namen dynamisch zu machen. Fügen Sie die PHP-öffnenden und schließenden Tags ein, und ich werde es in eine separate Zeile setzen, nur damit es klarer ist. Da gehen wir. Zwischen dem PHP. PHP verwendet den Echo-Namen, um den Inhalt des Browsers zu Echo, und dann verwenden wir die WordPress-Funktion von get_bloginfo. Die Bloginfo, die wir wollen, ist der Name der Website. Setzen Sie die Benennung dort und das Semikolon am Ende. Jetzt ist WordPress in der Regel im Namen unserer Website, die Tranquil Spa ist. Das wird der Text sein, der in der oberen linken Ecke erscheint, wo sich das Logo befindet. Aber wir müssen diesen Text zu einem aktiven Link machen. Weil wir keine index.html mehr haben, weil wir PHP verwenden. Wir müssen WordPress sagen, diesen Namen zurück zu unserer home_url zu verknüpfen. Wieder tun wir das zwischen den PHP-Tags und dann Echo. Es gibt ein paar verschiedene Möglichkeiten, wie wir dies in WordPress tun können. Aber ich werde die Escape-URL verwenden, die die URL bereinigt und sicherstellt, dass kein bösartiger Code drin ist. Echo esc_url. Dann in den Klammern danach werden wir den Link zur home_url setzen. Dann wieder die öffnenden und schließenden geschweiften Klammern und dann das Semikolon. Da sind unsere zwei Stücke von PHP. Der erste stellt den Link zur home_url bereit, und der zweite gibt den Namen der Website an. Dann zurück zum Kopfteil. Wir werden die CSS-Links auf eine etwas andere Weise hinzufügen. Wenn wir den Link für das Custom CSS und auch das Bootstrap CSS löschen. Wir fügen diese in nur einem Moment wieder in die Funktionsdatei ein. Speichern Sie das und öffnen Sie dann unsere Sidebar und gehen Sie zu der footer.php. Es gibt nicht viel, was wir brauchen, um mit der Fußzeile umzugehen. Eines der Dinge, die wir ändern wollen, ist das Jahr. Da wir wollen, dass sich dies jedes Jahr dynamisch ändert, können wir hier einige PHP unten hinzufügen. Anstatt 2015 hartcodiert zu haben, können wir dem Browser das Datum widerspiegeln. Dann zwischen den Klammern können wir das Kapital Y setzen, das ist die Art, wie PHP das Jahr hinzufügt. Mit PHP können Sie auch die Tage und Monate in verschiedenen Formaten hinzufügen. Wir werden uns das genauer ansehen, wenn wir die Blog-Posts machen. Dann ganz unten auf der Seite und dann kurz vor dem schließenden body-Tag. Hier werden wir eine weitere PHP-Funktion hinzufügen, die die wp_footer ist. Dies ermöglicht WordPress, skriptbasierte Daten zum Fußzeilenabschnitt hinzuzufügen. Speichern Sie das. Dann können wir das Bootstrap JavaScript löschen. Wir verknüpfen dies mit dem CSS in der Funktionsdatei. Da WordPress bereits mit jQuery kommt, können wir dies auch löschen. Binden Sie das ein wenig und drücken Sie dann „Speichern“. Nun haben wir das CSS des Kopfzeilenabschnitts und die Skripte des Fußzeilenabschnitts herausgenommen. Wir müssen WordPress erlauben, diese wieder auf der Website hinzuzufügen. Wir werden dies in der Art und Weise tun, wie WordPress empfiehlt, indem wir die Skripte in die Warteschlange stellen. Die Art und Weise, wie wir das tun, ist, wenn wir zur functions.php gehen. Wenn Sie nach dem add_action in den unteren Abschnitt gehen, stellen Sie sicher, dass Sie sich immer noch innerhalb der PHP-Tags befinden. Lassen Sie uns eine neue PHP-Funktion erstellen. Dieser wird als tranquil_scripts bezeichnet. Dann die Klammern und danach die geschweiften Klammern. Fügen Sie hier einfach einen Kommentar hinzu, damit wir genau wissen, was wir tun. Dieser Abschnitt wird die Stile zu der Funktion hinzufügen. Um diese richtig wieder in das Theme hinzuzufügen, müssen wir die WordPress oder wp_enqueue_style verwenden. Dann innerhalb der geschweiften Klammern und auch zwischen den Anführungszeichen, geben wir dem ersten Stylesheet einen Namen. Dies ist der Bootstrap-Core, dann durch ein Komma getrennt. Der zweite Parameter, den wir einschließen müssen, ist der Dateipfad zum Bootstrap CSS. Lassen Sie uns dies in WordPress hinzufügen. Wir geben in get_template_directory_uri, und dann die Klammern. Dann fügen wir den Dateipfad mit dem Punkt hinzu. Dann fügen wir in den Anführungszeichen den Link zu unserer Bootstrap-Datei hinzu, also /css/bootstrap.min.css. Dann ein Semikolon am Ende. Wir werden vorerst nur eine Sidebar loswerden. Hier drinnen geben wir dem Stylesheet einen Namen. Dann fügen wir das Template-Verzeichnis hinzu. Dann fügen Sie dem Vorlagenverzeichnis den Dateipfad für das CSS hinzu. Weil wir ein Bootstrap CSS haben und wir auch das Custom CSS bekommen haben. Wir können das einfach kopieren und dann direkt unten einfügen. Wir müssen nur den Namen und den Dateipfad ändern. Dies ist für unsere benutzerdefinierte Datei. Dann schließen wir auch get_template_directory ein. Dann müssen wir den Dateipfad ändern. Da sich unser benutzerdefiniertes Stylesheet in einem Dokumentstamm und nicht im CSS-Ordner befindet, können wir dies einfach in style.css ändern. Dann machen wir eine sehr ähnliche Sache, um die Skripte wieder hinzuzufügen. Fügen Sie Kommentare von Add Skripts hinzu. Es ist JavaScript zurück in, es funktioniert in ähnlicher Weise wie das Stylesheet. Wir kopieren einfach diesen Link und fügen ihn ein. Aber dieses Mal stellen wir anstelle des Enqueue-Stils das Skript in die Warteschlange. Dann fügen wir den Namen des Anfangs hinzu. Ich werde das das Bootstrap-js nennen. Wir verwenden get_template_directory auf die gleiche Weise. Aber dieses Mal befindet sich der Dateipfad in unserem JS-Ordner. Vergessen Sie nicht den Schrägstrich vorher. Dann müssen wir dies mit der Bootstrap-Minified Version verknüpfen. Bootstrap.min.js. Dies ersetzt das JavaScript aus dem Fußzeilenabschnitt. Danach fügen Sie ein Komma hinzu. Wir haben den Skriptnamen, die Skriptquelle, aufgenommen. Jetzt als nächstes müssen wir alle Abhängigkeiten einschließen. Da Bootstrap jQuery erfordert, müssen wir sicherstellen, dass jQuery vor Bootstrap geladen wird. Wir tun dies, indem wir ein Array hinzufügen. Dann setzen wir in Klammern den Namen der Abhängigkeit, die jQuery ist, durch Komma getrennt. Der letzte Wert, den ich einfügen werde, ist ein boolescher Wert von true. Dadurch wird der skriptfähige Link zum Fußzeilenabschnitt aktiviert. In der footer.php haben wir die Funktion wp_footer aufgenommen. Da wir dies in hinzugefügt haben, weiß WordPress genau, wo das Skript jetzt hinzugefügt werden soll. Nun, diese Funktion ist alles eingerichtet. Wir müssen etwas Ähnliches tun, das wir früh gemacht haben. Für das Design-Setup müssen wir die Aktion hinzufügen. Außerhalb der Funktion, unterhalb der letzten geschweiften Klammer, können wir in der add_action einfügen und after_theme_setup ersetzen, wir haben wp_enqueue_scripts. Dann ist der zweite Parameter der Name unserer Funktion, die tranquil_scripts ist. Wir können das kopieren und einfügen und speichern. Da Sie Debugging aktiviert werden müssen, wir hoffentlich keine Probleme bekommen, wenn wir den Browser aktualisieren solltenwir hoffentlich keine Probleme bekommen, wenn wir den Browser aktualisieren. Sie können beginnen zu sehen, dass sich einige Dinge ändern. Wir haben einige Farben erscheinen, was bedeutet, dass das Custom CSS richtig verknüpft werden muss. Auch das Bootstrap CSS muss korrekt verlinkt sein. Weil Sie sehen können, dass das Rastersystem, wie z. B. die freien Abschnitte, ordnungsgemäß eingerichtet sind. Wir vermissen die Bilder, aber wir kümmern uns bald darum. Das ist nichts, worüber man sich Sorgen machen muss. Schließlich, wenn wir den Browser nur auf eine kleinere Größe, auf die mobile oder Tablet-Größe verkleinern , können wir überprüfen, ob das JavaScript funktioniert, indem wir auf die Dropdown-Schaltfläche klicken. Wenn das alles gut für dich funktioniert, ist das großartig. Wenn Sie ein Dropdown-Menü haben, bedeutet das, dass das JavaScript funktioniert. Herzlichen Glückwunsch, so weit zu kommen, und ich werde Sie im nächsten Video sehen, wo wir die WordPress-Navigation hinzufügen. 20. WordPress-Menü mit Navwalker: Willkommen zurück. In diesem Video werden wir uns darauf konzentrieren, unsere Navigation zu öffnen und zu laufen. Da WordPress und Bootstrap verschiedene benutzerdefinierte Klassen für die Menüeinrichtung verwenden, müssen wir eine Möglichkeit, unsere Bootstrap-Klassen in WordPress zu konvertieren. Zum Glück hat jemand bereits ein nützliches Tool namens Bootstrap nav walker erstellt. Wenn Sie zu Google gehen und eine Suche nach Bootstrap navwalker haben, dann sollten Sie den ersten Link erhalten, die GitHub-Seite ist und Sie können sehen, dass nav Walker eine benutzerdefinierte WordPress nav Walker Klasse ist , um Twitter zu implementieren Bootstrap in unsere WordPress-benutzerdefinierte Themes. Wir können beginnen, indem wir den „Download“ -Button drücken. Es sollte ziemlich schnell heruntergeladen werden, es ist nur eine ZIP-Datei. Wenn Sie dann auf die Installation gehen, ist die Installation ziemlich einfach zu folgen. Wir beginnen damit, die Funktion zu kopieren. Also kopieren wir das und gehen dann zur functions.php. Dies wird in die Funktion tranquilwp_setup enthalten sein. Fügen Sie das direkt unter der Titel-Tag-Funktion ein. Dies schließt die navwalker-Datei in unser Projekt ein. Zurück zum Browser. Sie dann für die Verwendung KopierenSie dann für die Verwendungdas nav walker Array und gehen Sie dann zu einem Texteditor in die header.php. Es wird die Navigation lokalisieren. Wir müssen die Hauptnavigation finden, die auf der Homepage ist, die die Links zur Indexseite, zum Blog und auch die neuesten Nachrichten hat . Wir müssen die vollständige ungeordnete Liste ersetzen. So können wir all diesen Abschnitt löschen. Aber stellen Sie sicher, dass Sie das umgebende div mit der Klasse aus kollabieren lassen. Fügen Sie dann das Array zwischen diesen Tags ein. Wir binden das nur ein bisschen zusammen. Dieses Array formatiert richtig unser WordPress-Theme, um ein Bootstrap-Dropdown-Menü enthalten. Wir können alle Standardwerte belassen, wie sie auf der rechten Seite sind. Das einzige, was wir ändern müssen, ist die Menüklasse. Unsere Bootstrap-Menüs Klassen, wenn nav, navbar-nav, und dann auch navbar-right, weil unser Menü richtig ausgerichtet war. Alles andere, was wir als Standard verlassen können. Dann zurück zum Browser. Als nächstes müssen wir das Menü registrieren. Kopieren Sie die register_nav_menus und dann in functions.php, direkt darunter, wo wir den Navigations-Walker-Link aufgenommen haben. darunter können wir das hier einfügen. Dadurch wird die Navigation mit dem Thema registriert. Wir binden das einfach an und ändern dann den THEMENAME in tranquilwp und speichern das. Dadurch wird das Menü mit dem Home-Link und den Blog-Links oben auf der Webseite als unser Hauptmenü festgelegt. Darauf werden wir später im Kurs zurückkommen und die Fotomenüs registrieren. Das Letzte, was wir tun müssen, ist hoffentlich, dass jetzt für Sie heruntergeladen wird, gehen Sie zu Ihren Downloads und dann entpacken Sie das Paket, das wir gerade heruntergeladen haben, und öffnen Sie es. Dann müssen wir die PHP-Datei in ein benutzerdefiniertes Thema ziehen. Öffnen Sie dann auch Ihren Theme-Ordner und ziehen Sie dann in den PHP-Ordner und fügen Sie ihn in das Stammverzeichnis ein, genau wie die Indexseite. Das werde ich jetzt tun. Nun, das sollte alles funktionieren. Wenn wir zum Texteditor gehen und dann speichern, dass, und dann in Chrome und in WordPress und dann aktualisieren WordPress. Dann können wir unser Hauptmenü erstellen. Sie im Dashboard auf der linken Seite zur Darstellung und dann zu den Menüs. Erstellen Sie dann ein Menü und ändern Sie den Menünamen in Hauptmenü. Scrollen Sie dann nach unten, wenn die beiden Kästchen unten markiert sind, und dies stellt sicher, dass das Hauptmenü das primäre Menü ist und dass die neuen Seiten, die wir erstellen, automatisch zum Menü hinzugefügt werden. Sichern Sie sich das. Dann besuchen wir die Website und sehen, ob das Menü in Ordnung funktioniert. Unsere Speisekarte funktioniert. Wir können sehen, dass es oben auf der Seite erschienen ist. Wir haben erst den Link Startseite und Beispielseite, weil wir weder den Blog noch den neuesten neuen Abschnitt erstellt haben. Aber das ist in Ordnung. Das bedeutet, dass alles einwandfrei funktioniert. Das war's, wir lassen dieses Video vorerst. Wir sehen uns im nächsten Video. Wir werden alle Links für die Bilder reparieren. 21. Bildpfade: Unsere benutzerdefinierte WordPress-Theme, es beginnt, Gestalt zu nehmen jetzt. Eines der Hauptprobleme, die wir sehen können, ist, dass die Bilder, die wir in der Bootstrap-Vorlage enthalten sind, nicht auf der WordPress-Website erscheinen. Wir müssen das jetzt reparieren. Zunächst befinden sich die meisten Bilder auf der Indexseite. Wir gehen über zu index.php. Damit die Bilder angezeigt werden, müssen wir den Dateipfad korrekt ändern. Der erste ist im Abschnitt „Willkommen“, und das ist der Trennsteg lila. Innerhalb der Bildquelle werden wir die PHP-Tags, die öffnenden und schließenden Tags starten . Dann verwenden wir die gleiche Funktion, die wir verwendet haben, um den Dateipfad für das CSS einzuschließen. Also echo esc_url. Dann in Klammern, werden wir get_the_templates_directory_uri und dann ein Paar Klammern. Stellen Sie sicher, dass Sie das Semikolon wieder am Ende setzen. Öffnen Sie einfach die Seitenleiste. Wir erhalten das Template-Verzeichnis uri, das unser Theme-Ordner ist. Dann werden wir in den Ordner „Images“ einschließen , der sich im Stammverzeichnis befindet. Stellen Sie sicher, dass Sie kurz davor einen Schrägstrich , da dieser nicht automatisch hinzugefügt wird. Speichern wir das einfach und überprüfen Sie, dass es funktioniert, bevor wir weiter gehen. Da gehen wir. Da ist unser lilafarbiges Bild. Lassen Sie uns das einfach „Kopieren“, um eine Menge Tippen zu sparen. Wenn wir einfach alles vom Schrägstrich vor dem Image-Ordner bis zum Opening php -Tagkopieren dem Image-Ordner bis zum Opening php -Tag und dann zum Facility Abschnitt gehen, und dann einfach „Einfügen“ dieses vor jedem der Bilder. Das Make-up, die Kerzen, das Bild des Sees und der Pool. Dann haben wir das silberne Bild in der Rubrik Aktuelle Angebote. „ Einfügen“ das in und scrollen Sie weiter nach unten, um zu sehen, ob es noch mehr gibt, die wir ändern müssen. Es gibt noch ein Bild im Shop Online Bereich. Lassen Sie uns das speichern und sehen, wie das aussieht und „Aktualisieren“ Sie den Browser. Wir kommen jetzt irgendwohin. Das sieht besser aus. Wir müssen das Haupt-Hintergrundbild einschließen, aber das ist in der Kopfzeile. Das machen wir jetzt. Scrollen Sie in der header.php zum Feature-Abschnitt und „Einfügen“ vor dem Seebild, und speichern und aktualisieren Sie es dann. Gut. Wir kommen jetzt irgendwohin. Scrollen wir nach unten zum Fußzeilenabschnitt. Es gibt nur ein paar Bilder, die wir in den Fußzeilenbereich aufnehmen müssen, das ist das Trennbild und auch das Hintergrundbild „Online Shop“. Die footer.php scrollen Sie dann nach oben für den Teiler. „ Einfügen“ in und „Speichern“ und dann „Aktualisieren“. Da steht: „Ein Teilenbild.“ Dann ist es nur das Abschnittsbild „Online Shop“ und wir haben dies als Hintergrundbild im CSS hinzugefügt. Gehen Sie zu der „Style.css“ und scrollen Sie dann nach unten zum Bereich Shop Online. Damit dies in WordPress korrekt funktioniert, müssen wir den Schrägstrich und die beiden Punkte löschen. Speichern Sie das, und aktualisieren Sie es dann. Das ist das Bild im Hintergrund erschien, das wir sicherstellen müssen, dass sich die Schaltfläche „Online Shop“ unterhalb der Trennwand befindet. Ich glaube, wir vermissen nur ein Break-Tag. Zurück zur Indexseite haben wir die Überschrift und das Trennbild und dann die Schaltfläche direkt danach. Ich werde nur Break-Tag hinzufügen und dann aktualisieren, und hoffentlich sollte das funktionieren. Das ist großartig. Da gehen wir. Das funktioniert jetzt perfekt. Ich denke, das sind alle Bilder, die auf der Indexseite abgedeckt sind. Ich werde einfach nach oben und unten scrollen und sehen, ob irgendetwas fehlt. Großartig. Unsere Homepage sieht nun so aus, wie sie es tun sollte. Wir haben jetzt alle Bilder an Ort und Stelle und es sieht genau wie die Bootstrap-Vorlage aus, die wir erstellt haben. Vielen Dank für das Ansehen und wir sehen uns im nächsten Video. 22. So gestaltest du die front-page.php: Willkommen zurück alle. In diesem Video werden wir einen Blick auf, wie WordPress mit Vorlagen und Hierarchie-System für die Auswahl der Vorlage zu verwenden. Wir gehen über zu Google und wir suchen nach WordPress-Template-Hierarchie. Der erste Link, der auftaucht, sollte derjenige sein, den Sie brauchen. Wenn wir das auswählen, so würden wir auf die WordPress-Website übernommen werden und wenn wir einfach nach unten scrollen, können wir die Liste der Vorlagen finden, die WordPress erkennt und ich werde Ihnen eine Vorstellung davon geben, wie WordPress diese verwendet. Es gibt ein visuelles Diagramm, das wir uns in einem Moment ansehen werden. Aber wenn wir ein wenig weiter auf der Seite scrollen, können wir einige weitere Details darüber erfahren, wie WordPress mit Vorlagen umgeht. Standardmäßig verwendet WordPress die Titelseite oder die Homepage, um die neuesten Blog-Beiträge anzuzeigen, und das ist wirklich nicht, was wir für dieses Design wollen. In unserem Bootstrap-Design haben wir eine Titelseite und dann halten wir unseren Blog-Beitrag getrennt in seiner eigenen Blog-Seite. Wir müssen unsere WordPress-Theme ändern, müssen wir die front-page.php als unsere neue Homepage verwenden. In diesem Video nehmen wir den Inhalt der Indexseite und wir werden die front-page.php erstellen. Wir werden dann unsere Indexseite verwenden, um die Standardseite für die Anzeige von Blogbeiträgen oder WordPress-Inhalten zu sein . Wenn Sie nach unten scrollen, erhalten Sie eine Vorstellung von einigen der Vorlagen, die wir in diesem Kurs erstellen. Es gibt eine Vorlage für den einzelnen Beitrag, der die Indexseite als Fallback-Vorlage hat , wenn keine dieser vorhanden ist, wir werden auch eine Seitenvorlage erstellen, die WordPress verwendet, wenn es keine spezifischere Vorlage finden kann. Auch wenn keine von ihnen gefunden werden kann, wird es standardmäßig zurück auf die Indexseite und es gibt verschiedene benutzerdefinierte Vorlagen, die wir erstellen können. Wir schauen sie später im Kurs an. Wenn Sie einen Blick auf die visuelle Übersicht nehmen möchten , die Ihnen ein schönes visuelles Diagramm gibt, wie WordPress mit Vorlagen umgeht, welche Vorlagen es in einer bestimmten Reihenfolge sucht. Beginnen wir mit der Erstellung unserer neuen Titelseite. Wenn Sie zurück in das WordPress-Dashboard und dann auf dem Dashboard auf der linken Seite gehen, wenn Sie zu den Seiten gehen, werde ich nur die Beispielseite löschen, wir brauchen das nicht. Dann klicken wir auf „Neu hinzufügen“. Wir rufen diese Seite einfach zu Hause an und klicken dann auf „Veröffentlichen“. Dann gehen Sie zum Texteditor und wir erstellen die front-page.php, die wir zuvor nachgeschaut haben. Gehen Sie zunächst auf die Indexseite, wählen Sie alle aus, kopieren Sie und dann Befehl N oder Control N, um eine neue Seite zu erstellen, und fügen Sie diese dann in ein, und speichern Sie sie dann sofort als front-page.php. Dies wird nun unsere Titelseite der Website sein. Wir können den gesamten Inhalt auf der Indexseite löschen, alles zwischen dem Get-Header und Fußzeilen-Tags bis ganz unten erhalten. Wählen Sie einfach den gesamten Inhalt aus, scrollen Sie dann nach unten und löschen Sie, wobei nur die Kopf- und Fußzeile übrig bleiben. Wir werden nur diese Seite für jetzt speichern und wir werden darauf im nächsten Video zurückkommen , wo wir anfangen werden, die WordPress-Schleife zu erstellen , um alle Inhalte der Blog-Posts durchlaufen zu lassen, also speichern. Wenn Sie dann zurück zum Dashboard gehen und dann in den Einstellungen die Registerkarte „Lesen“ auswählen. Wenn wir auf die Titelseite gehen, die an der Spitze ist, erwähnten wir am Anfang dieses Videos, dass standardmäßig WordPress verwendet die Titelseite, um die neuesten Blog-Beiträge anzuzeigen. Wir werden das ändern, um eine statische Seite zu sein. Ich werde das auf die zu erstellende Homepage ändern. Ich werde das ändern und dann auf „Änderungen speichern“ klicken. Hoffentlich sollte das alles wieder funktionieren. Klicken Sie auf „Website besuchen“ aktualisieren und jetzt scheint es gut zu funktionieren. Wir haben gerade ein paar Menü-Links an der Spitze, also werde ich die jetzt loswerden. Zurück in Erscheinung auf Menüs, können wir die Beispielseite löschen. Das brauchen wir nicht im Menü und auch im Homepage-Link und speichern dann das Menü. Dann zurück auf unsere Titelseite, so dass alles wieder funktioniert. Danke fürs Zuschauen. Ich werde Sie im nächsten Video sehen. 23. WordPress Loop und page.php: Also in diesem Video, werden wir einen Blick auf die berühmte WordPress-Schleife. Also, wenn Sie gerade den Kopf über Google und dann werden Sie für WordPress-Schleife suchen. Wir sollten direkt zum Codex gebracht werden. Klicken Sie also auf den ersten Link, der uns auf die WordPress-Website führt. Die Schleife ist also PHP-Code, der von WordPress verwendet wird, um Beiträge anzuzeigen. Mit der Schleife WordPress verarbeitet jeden Beitrag auf der aktuellen Seite angezeigt werden und Format entsprechend, wie es entspricht bestimmten Kriterien innerhalb der Schleifen-Tags. Jeder HTML- oder PHP-Code in der Schleife wird auf jedem Beitrag verarbeitet. Also im Grunde, was das bedeutet, ist, anstatt was wir in unserer Bootstrap-Blog-Vorlage tun, wo wir drei separate Blog-Beiträge erstellen. Um das Wiederholen dieses Codes immer und immer wieder zu speichern, erstellen wir nur einen Beispiel-Blogbeitrag innerhalb der Schleife. WordPress wird weiter durchlaufen, ziehen alle Inhalte der Blog-Beiträge, bis es keine Beiträge mehr angezeigt werden. Scrollen Sie nach unten. Um also mit der WordPress-Schleife zu beginnen, müssen wir die öffnenden Schleifen-Tags kopieren. Also, wenn wir kopieren, wo es sagt, dass die Schleife hier beginnt, kopieren Sie die erste Zeile von PHP. Sie dann zwischen dem get-Header und der get footer FügenSie dann zwischen dem get-Header und der get footerdies ein und kopieren Sie dann die Schleifenende, die sich direkt darunter befindet. Dann fügen Sie dies ein und lassen Sie ein wenig Platz dazwischen für den Inhalt. Wenn Sie also ein wenig PHP kennen, sollte das ziemlich vertraut aussehen. Wenn nicht, im Grunde alles, was passiert ist, ist WordPress überprüft, ob Beiträge verfügbar sind und während Beiträge nicht verfügbar sind, wird es durch den Inhalt, den wir hier sehr bald ziehen. Wenn es dann keine Beiträge mehr gibt, endet es dann die Schleife. Dann sonst, wenn es keine Beiträge gibt, die dem Browser entsprechen. Das Wort tut mir leid, keine Beiträge entsprechen Ihren Kriterien. Also, jetzt ist die Schleife an Ort und Stelle, wir müssen den Inhalt des Spaltenpostens ziehen. Wir werden das tun, indem wir die PHP-Tags öffnen. Dann zwischen diesen Tags ziehen wir den Inhalt und die Klammern und Semikolon ein. Dies wird also den Inhalt der Beiträge ausdrucken, während sie verfügbar sind. Wir haben derzeit keine Beiträge auf der WordPress-Website, aber wir werden diese im nächsten Video erstellen. Also lasst uns das retten. Während wir dies als Backup oder Standardvorlage für Beiträge verwenden, müssen wir auch eine Standardvorlage für Seiten erstellen, wenn keine spezifischere Vorlage vorhanden ist. Also lassen Sie uns die Seite erstellen. PHP, die wir am Anfang dieses Videos angeschaut haben. Also, wenn wir nur den gesamten Inhalt auswählen und kopieren und dann eine neue Seite machen und dort einfügen. Diese Seite wird als page.PHP gespeichert. Also, sparen Sie das, da gehen wir. Da dies die Standardvorlage für Seiten anstelle von Beiträgen ist, müssen wir die Fehlermeldung ändern, dass keine Seiten Ihren Kriterien entsprechen, und speichern Sie diese. Also, wenn du mich im nächsten Video beitrittst, werden wir anfangen, einige WordPress-Blog-Posts zu erstellen. 24. Blogindexseite, Teil 1: Jetzt werden wir beginnen, indem wir einige Blog-Posts auf unserer Website hinzufügen. Wir erstellen auch die Blog-Seite, auf der diese angezeigt werden. Um einige Inhalte für die Blog-Posts zu erhalten, werde ich zu Google gehen und nach einigen Lorem ipsum suchen, um einige Beispieltext für die Beiträge zu erhalten. Klicken Sie auf „Lorem Ipsum“ und scrollen Sie dann nach unten zum Generator. Ich werde fünf Absätze Text generieren , so dass wir viel Inhalt für den Beitrag haben. Klicken Sie auf „Generieren“, kopieren Sie dann die fünf Absätze, und gehen Sie dann zurück in das WordPress-Dashboard. Sobald Sie zum Dashboard gelangt sind, klicken Sie auf die „Beiträge“. Wir können den Hello World Musterpost vorerst dort halten. Ich werde fünf neue Beiträge generieren. Klicken Sie auf „Neuen Beitrag hinzufügen“ und geben Sie ihm dann einen Titel Ihrer Wahl. Ich werde diesen Blog-Beitrag ein nennen, und dann in das Textfeld, fügen Sie das Lorem ipsum ein. Ich habe die Nachrichten bereits in der Bürokategorie erstellt. Wählen Sie einfach „Neue Kategorie hinzufügen“ aus und geben Sie eine Kategorie Ihrer Wahl ein, wie zum Beispiel Werbeaktionen. Dann drücken Sie „Enter“, und dann erhalten Sie den neuen Kategoriezeitraum dort. Unmittelbar unter den Kategorien befindet sich auch der Bereich für Tags. Möglicherweise möchten Sie auch ein paar Tags hinzufügen. Geben Sie ein und drücken Sie „Enter“. Ich werde Schönheit, Haare, Make-up erschaffen , und das wird vorerst tun. Klicken Sie auf „Veröffentlichen“ und fügen Sie dann neue oben hinzu, und ich werde fünf neue Blogbeiträge insgesamt machen. Wir haben viele Inhalte, mit denen wir arbeiten können. Sie können entweder Ihre eigenen erstellen oder mit mir folgen. Der nächste wird August Angebot sein. Jetzt füge ich den Beispieltext in die Bürokategorie ein. Ich werde einige Tags hinzufügen und dann auf „Veröffentlichen“ klicken. Auf der dritten kann dies August News oder Newsletter sein. Dies kann der neue Abschnitt auf den Tags sein, kann Nachrichten und Updates sein, fügen Sie den Inhalt und klicken Sie dann auf „Veröffentlichen“. Ich werde nur noch zwei machen. Fügen Sie den neuen und dann den Beispielbeitrag hinzu. Fügen Sie das ein und dies kann nicht kategorisiert werden. Jetzt werde ich veröffentlichen und dann noch eine. Beispiel Beitrag 2 und veröffentlichen Sie das dann. Also haben wir jetzt insgesamt fünf Beiträge, so dass wir viel Inhalt haben, mit dem wir arbeiten können. Auf der Homepage haben wir nur den Link zurück zur Homepage. Als nächstes müssen wir die Blog-Seite erstellen. Zurück in das Dashboard ein gehen Sie zu Seiten, Neue hinzufügen, rufen Sie diese die Blog-Seite, und klicken Sie dann auf „Veröffentlichen“. Wir müssen WordPress sagen, dass dies die Seite für die Anzeige von Blogbeiträgen ist, also gehen wir zu Einstellungen, Lesen, und ändern Sie die Beitragsseite zu dem Blog, den wir gerade erstellt haben, und speichern Sie dann Änderungen. Dann schauen Sie sich die Website an und überprüfen Sie, ob die Blog-Seite dem Menü hinzugefügt wurde. Okay, das ist großartig. Als nächstes müssen wir den Blog-Inhalt aus unserem Bootstrap-Projekt in WordPress übertragen. Wenn wir nur unseren Bootstrap-Ordner finden, ist meiner noch auf dem Desktop. Dann öffnen Sie es, dann ziehen Sie die blog.html in Ihren Texteditor, und wir können beginnen, einige der Inhalte über WordPress kopieren. Wir brauchen weder die Kopf- noch den Fußzeilenabschnitt. Was wir tun müssen, ist Scrollen Sie nach unten zum Blog-Abschnitt, und dann müssen wir alle Blog-Abschnitt kopieren. Kopieren Sie das und dann weiter unten, bis wir die Sidebar finden. Da sind die Sidebar-Module. Kopieren Sie dann alles bis zum Fußzeilenabschnitt. Kopieren Sie und gehen Sie dann in die index.php und fügen Sie dann all dies direkt unter get_header ein. Ich werde jetzt anfangen, damit zu arbeiten. Ich mache es WordPress freundlich. Wir beginnen, indem wir die Seitenleiste ausschneiden und die Seitenleiste in die Datei sidebar.php einfügen. Wenn wir nach dem schließenden Blog-Sidebar-Div suchen, schauen Sie sich das div kurz davor und kopieren Sie dann die Module bis zur Anzahl der Spalten. Schneiden Sie den Inhalt aus. Wir sollten einfach mit dem 12-Säulen-Container bleiben. Dann gehen Sie zur sidebar.php, fügen Sie das in und speichern Sie es, dann zurück in die Indexseite, und hoffentlich sollten Sie eine Vorstellung davon bekommen, was wir hier tun. die gleiche Weise, wie wir den Header bekommen haben, und auch auf die gleiche Weise, wie wir die Fußzeile wieder einlegen, werden wir genau dasselbe tun. zwischen dem Sidebar div Öffnen wirzwischen dem Sidebar divdie PHP-Tags und geben Sie dann get_sidebar, die Klammern und das Semikolon ein, und speichern Sie das dann. Hoffentlich ergibt das Sinn. Wir haben die Sidebar ausgeschnitten, in eine eigene Datei gelegt und sie dann mit PHP wieder hinzugefügt. Das nächste, was wir tun müssen, ist, müssen wir unseren Blog-Beitrag zu der WordPress-Schleife hinzufügen, die wir früher hinzugefügt haben. Wir brauchen nur einen der Bootstrap-Blog-Beiträge, mit denen wir arbeiten können, und wir haben derzeit drei, also lasst uns zwei davon löschen. Wenn wir das Ende der Blog-Beiträge finden, gibt es einen und es gibt zwei, so dass es uns nur mit einem Blog-Beitrag lässt. Wir brauchen keinen der Inhalte oder den Text, also können wir diesen löschen, um mehr Platz zu schaffen. Wir binden das einfach zusammen, damit wir wissen, was wir tun. Also bekamen wir den Container, die Zeile und die Anzahl der Spalten, dann den Blogbeitrag dort. Wie es steht, ist dies der Inhalt unseres Blog-Beitrags und wir möchten sicherstellen, dass dies innerhalb der WordPress-Schleife ist. Jedes Mal, wenn es einen Blogbeitrag durchläuft, wird es den Blogbeitrag Titel ausdrucken, auch das Datum, den Autor und dann den Inhalt. Wir können damit beginnen, diese mit der WordPress-Schleife zu umgeben. Also, wenn wir die offene End-Schleife schneiden und diese dann direkt über dem div mit der Klasse des Blog-Posts einfügen. Also fügen wir das ein. Wenn wir das Ende der Schleife schneiden und dann fügen Sie diese am Ende des Blogs. Ich füge das da rein. Wir schneiden alle Absätze des Textes aus, daher müssen wir den Inhalt wieder hinzufügen. Wir schneiden die PHP-Tags für den Inhalt aus und fügen diese dann wieder in knapp über dem Ende der Schleife ein. Das ist also der Inhalt in. Jetzt nur um sicherzustellen, dass unsere divs alle vorhanden sind. Wir haben das div mit dem Blog-Post und ich denke, wir brauchen nur ein schließendes Tag nach dem Inhalt. Ja, so viel geht mit dem Blogbeitrag, der div öffnet. Ich werde nur einen Kommentar in den Blog-Post setzen. Ich mache etwas Abstand zwischen dem Ende der Schleife. Es hat jetzt die Schleife und einige Blog-Informationen da drin. Lassen Sie uns auf unsere Website gehen und sehen, wie es aussieht und geben Ihnen einen visuellen Hinweis darauf, was die Schleife macht. Also, wenn Sie den Blog auswählen und dann nach unten scrollen. So können wir sehen, dass einige Blogbeiträge auf der linken Seite erscheinen und unsere Sidebar wieder in die Hand gezogen wird. Aber eines der Probleme, die wir bisher haben, ist, dass wir fünf verschiedene Blogbeiträge erstellen. Aber wenn wir nach unten scrollen, erhalten wir immer und immer wieder den gleichen Blogbeitrag, und das liegt daran, dass auf der Indexseite der Inhalt gezogen wird , der Lorem Ipsum Text für alle Informationen wie die Überschrift, das Datum und das Angebot ist alles Static HTML. Also müssen wir das jetzt in PHP umwandeln. So WordPress kann in die richtigen Informationen für die Blog-Beiträge, die wir erstellt haben, ziehen. Fangen wir das jetzt an. Wir beginnen mit der Überschrift „Level 2“ der neuen Funktion. Ich möchte das in einer anderen Zeile trennen, damit es klarer ist. Öffnen Sie also das PHP. Auch hier werde ich diese PHP-Tags nur kopieren , weil wir sie immer und immer wieder verwenden werden. Um den Titel zu erhalten, geben wir den Titel _ ein. Lassen Sie uns das speichern und gehen Sie zurück zum Blog und aktualisieren. Jetzt können wir sehen, dass wir verschiedene Titel haben. Dies sind die Titel der fünf Blogbeiträge, die wir zuvor gemacht haben. Wenn Sie den Mauszeiger über sie bewegen, können Sie sehen, dass diese Titel Links sind. Normalerweise brauchen Sie im Blog nicht den Link zum vollständigen Beitrag. So können wir das in WordPress tun, indem wir den Permalink hinzufügen. So können wir dieses PHP in einem Link-Tag umgeben. Also wird ein href gleich sein, dann fügen wir unser PHP ein. Um es zu einem Link zu machen, geben wir den Permalink ein. Vergessen Sie nicht die Klammern und das Semikolon. Wir müssen WordPress sagen, wo diese beiden zu verknüpfen. Tun Sie dies, indem Sie einen Titel hinzufügen. Der Titel wird gleich sein, fügen Sie in die PHP. Dann geben wir das_title_attribute ein. Lassen Sie es uns auf separate Zeilen setzen, damit es klarer ist. Also, wenn es schließt das Öffnen eines Tags, direkt nach dem title-Attribut und fügen Sie dann das schließende ein Tag nach dem Titel hinzu. Schauen wir uns das an und aktualisieren Sie es im Browser. Das ist also ein guter Anfang. Unsere Blogbeiträge sind jetzt blau, was bedeutet, dass es jetzt ein Link ist. Also zurück in den Texteditor. Dann machen wir dasselbe mit dem Datum und dem Autor. Also beginnend mit dem Datum, fügen Sie in die PHP. Echo auf den Browser get_the_date. Dann müssen wir in den Klammern WordPress mitteilen, welches Format wir möchten, dass das Datum erscheinen soll. also in den Zitaten Geben Siealso in den Zitatendrei Parameter ein. Die erste ist also ein Großbuchstabe F, was in PHP den Monat bedeutet und dann durch ein Komma getrennt wird. Ein kleines j ist für den Tag des Monats. Dann, wie wir in der Fußzeile verwenden, können wir das Kapital Y verwenden, um das Jahr zu erhalten. Die nächste machen wir den Autor. Also ändern wir den Namen des Autors, fügen Sie in das PHP ein. Der Autor ist ziemlich unkompliziert. Es ist nur die_author. Dann Klammer und Semikolon. Lasst uns das speichern und einen Blick werfen. Großartig. Also, jetzt poste es in den Benutzernamen, der tranquil_admin ist. Es gibt uns auch das Datum, an dem der Beitrag erstellt wurde. Es sollte alle gleich sein, weil sie alle zur gleichen Zeit erstellen. Also, während wir im Blogbeitrag Abschnitt sind, möchte ich ein wenig mehr Informationen zum Blog hinzufügen. Direkt unter dem Autor möchte ich einige Informationen hinzufügen, die zeigen , welche Kategorie und welches Tag wir für alle Beiträge verwendet haben. Das ist also ziemlich einfach zu tun. Wenn wir nur unter den Autorenbereich gehen, den wir gerade dort gemacht haben. Ich werde auch einige Font Awesome Icons hinzufügen, um diese ein wenig besser aussehen zu lassen. So Font Awesome wird mit dem i-Tag hinzugefügt und die Klasse ist fa. Also fügen wir zuerst die Tags hinzu. Das Font Awesome Icon für Tags ist also fa-tag. Dann schließen Sie das. Dann können wir die Namen der Tags generieren, indem wir die_tags eingeben. Lassen Sie uns das speichern und überprüfen, dass es in Ordnung ist und aktualisieren. Also haben wir ein Bild von der Tag-Erscheinung bekommen. Dann gehen wir zu einem Blog-Beitrag, wo wir ein paar Tags haben, wir haben Neuigkeiten und Updates, und dann hier beginnt alles richtig zu funktionieren. Fügen Sie dann ein Break-Tag hinzu. Wir fangen in den Kategorien an. Also ein Font Awesome Icon. Also i Klasse fa, und das könnte fa-folder-open sein, und fügen Sie dann einige PHP hinzu. Diesmal verwenden wir die_category und dann speichern. Also schauen wir uns mal an. Also haben wir das Font Awesome Icon erscheint, aber wir haben die Namen der Kategorien unten angezeigt. Wir möchten sicherstellen, dass sie mit dem Ordner übereinstimmen. Wir wollten auch, dass sie durch Komma getrennt werden. Das ist also ziemlich einfach zu beheben, wenn wir in die Klammern und bei den Zitaten gehen . Alles, was wir tun müssen, ist ein Komma hinzuzufügen, das das Trennzeichen ist, und dann ein Leerzeichen. Es gibt also ein Leerzeichen zwischen jeder der Kategorien und dann aktualisieren. Jetzt haben wir sie auch im Einklang mit dem Font Awesome Icon. Um dies ein bisschen mehr wie die Tags eins aussehen zu lassen, fügen wir einfach die Wortkategorien davor hinzu. Also kurz vor der Kategorie, werden wir PHP-Tags hinzufügen und dann werden wir Echo oder wir können eine Kurzschrift verwenden , die ein e mit einem Unterstrich davor ist. Dann ist das Wort, das wir ausklingen werden, Kategorie. Dann ein Doppelpunkt, wir haben auch Platz Zeug da. Es ist also ein Leerzeichen vor dem ersten Kategorienamen. Also speichern und dann aktualisieren. Das sieht gut aus, sieht viel besser aus als vorher. Hoffentlich hat das für Sie Sinn gemacht. Nun, fügen Sie ein Font Awesome Icon hinzu. Dann direkt danach verwenden wir im PHP-Echo, um die Wortkategorie auszugleichen. Dann direkt nach dem Wort verwenden wir die Kategorie-Funktion, um alle Kategorien auszudrucken, die mit dem Blog-Beitrag verknüpft sind. Also sparen Sie das. Einige von euch haben vielleicht bemerkt, wie ihr nach oben und unten scrollt, dass diese Blog-Beiträge ziemlich lang sind. Normalerweise haben Sie auf einem Blog nur eine kurze Einführung, vielleicht nur einen Absatz oder so. Wenn Sie dann auf den Blog oder den Titel klicken, nehmen Sie dann in den vollständigen Blog-Beitrag auf einer separaten Seite. Wir können dies ganz einfach in WordPress tun. Es ist nur ein Fall, den Inhalt als Auszug zu ändern. Also speichern, und es sollte jetzt eine verkürzte Version der Blogbeiträge sein. Genau so. Also ein wenig später auf dem Kurs werden wir die Vorlage für den vollständigen Blogbeitrag erstellen. Möchten Sie auf den Titel klicken. So glücklich würde sagen, dass dies vorerst gekommen ist. Also werden wir dieses Video dort beenden. Wir machen wirklich gute Fortschritte. Wir werden nun WordPress-Inhalte gehen, die dynamisch statt der statischen Bootstrap-Beiträge generiert wird. Also danke fürs Ansehen, und wir sehen uns im nächsten Video. 25. Blogindexseite, Teil 2: Willkommen zurück. Wir machen gute Fortschritte mit unserem WordPress-Blog. Wir haben jetzt WordPress in den Inhalt aller unserer Blog-Beiträge ziehen und sie auf der Blog-Seite anzeigen. Wir haben den WordPress-Auszug verwendet, um den Inhalt der Beiträge zu verkürzen, nur ein paar Sätze sein. Nun möchten wir eine Read More Schaltfläche am Ende des Textes hinzufügen. Dies kann auch auf die gleiche Weise wie der Titel auf den vollständigen Blogbeitrag verlinken. Um den Read More Button ganz am Ende hinzuzufügen, können wir dies direkt nach der Befreiung auf unserer Indexseite hinzufügen. Machen Sie einfach ein wenig Platz dort. Lassen Sie uns einen Link erstellen und dann innerhalb der Zitate, Einfügen der PHP-Tags. Dieses Mal werden wir auf den Browser, get_permalink () und Semikolon am Ende Echo , dann schließen Sie das „a“ -Tag und fügen das schließende Tag dort hinzu. Jetzt haben wir den Link, wir müssen den Text hinzufügen. PHP wieder, und wir verwenden wieder eine Kurzschrift, so dass _e nur Echo auf den Browser. Dann innerhalb der Klammern wird der erste Parameter der Text sein, den wir anzeigen möchten , der Read More und dann kurz drei Punkte danach sein wird. Dann speichern und sehen, ob das in Ordnung ist. Das ist am Ende eines jeden der Blog-Posts, also das ist gut. Eine kleine Änderung, die Sie machen möchten, ist, dass ich die eckigen Klammern am Ende des Textes nicht mag, also werde ich sie einfach entfernen und es einfach in die drei Punkte machen. Mal sehen, wie man das macht. Wenn wir den Kopf über zu den WordPress-Codecs, und wir werden für die Codecs für WordPress suchen. Suchen Sie dann oben nach dem Auszug und klicken Sie auf die Funktionsreferenz zum Auszug. Scrollen Sie ein wenig weiter nach unten, und es wird einige Informationen über die Verwendung und einige Beispiele geben. Aber wenn Sie ein wenig weiter zu etwa auf halbem Weg gehen und nach dem Titel suchen, der sagt, entfernen Sie die drei Punkte in einem eckigen Klammern mit Filtern. Wenn wir einfach die Funktion kopieren, dann gehen Sie zu der functions.php. Lassen Sie uns dies in aber außerhalb der Setup-Funktion einfügen. Scrollen Sie nach unten bis zum Ende der Seite und wir werden dies unter der add_action für die Skripte einfügen. In der Minute werden wir in den Punkten auf den eckigen Klammern zurückkehren, aber wir wollen nur diese eckigen Klammern löschen und das speichern. Oder Sie können alles einpacken, was Sie bevorzugen. Mal sehen, ob das funktioniert. Zurück zur Spa-Seite und erfrischen. Gut, das funktioniert alles richtig. Die eckigen Klammern wurden entfernt. Wir möchten nur diesen Titel ändern, um die gleiche Farbe wie die Bootstrap-Website zu haben, die das dunkelgrau ist. Wenn wir einfach auf Inspect Elements klicken und dann mit der Lupe auswählen, können wir sehen, dass der Cluster Bootstrap verwendet Blog-Post-Titel ist. Kopieren Sie das, ich werde diese Farbe in der style.CSS ändern. Werfen wir einen Blick auf den Blog-Abschnitt und dann fügen wir diese in knapp unter dem Titelabschnitt, den wir zuvor erstellt haben. Da es jetzt ein Link ist, fügen wir das „a“ hinzu und wir setzen die Farbe auf den Wert 494646. Speichern Sie das, und aktualisieren Sie es. Der Titel hat nun die gleiche Farbe wie die Bootstrap-Website. Sie haben vielleicht schon bemerkt, dass wir das ausgefallene Bild vermissen, das den Blog-Titel und den Rest des Inhalts trennt, weil wir immer noch die Punkte und den Matsch bekommen haben. Wir werden sie entfernen und dann aktualisieren, und das bringt die Bilder zurück in den Blog. Wenn wir zurück zum Ende der Seite gehen, können Sie sehen, dass es die Schaltflächen „Zurück“ und „Weiter“ sind. Wir werden jetzt, um diese in WordPress arbeiten. Gehen Sie zurück auf die Indexseite. Wenn Sie einen Blick auf den Abschnitt Seiten werfen, und wir können die Links [unhörbar] so halten, wie sie sind. Aber wir brauchen diese Links nicht mehr, weil wir gehen, um diese in eine WordPress Art und Weise zu setzen. Wir können einfach die Hyperlinks von Previous und Next löschen. Um die nächste Seite mit Beiträgen zu erhalten, fügen Sie die PHP ein. Um dann die nächsten Beiträge zu erhalten, geben wir next_posts_link und dann wollen wir, dass der Button „Ältere Beiträge“ sagt, also geben wir das in die Klammern ein. Dann werden wir dieses Stück PHP kopieren und dann fügen wir es direkt unten zwischen den Listenelementen ein. Aber dieses Mal wird es anstelle von next_posts zu vorherigen geändert. Dann ändern wir „Ältere Beiträge“ in „Neuere“ und speichern, und hoffentlich sollte das funktionieren, dann aktualisieren. Das bewirkt, dass die Tasten verschwinden und Sie fragen sich vielleicht warum. Nun, der Grund ist, weil es keine vorherige Seite oder eine nächste Seite zu gehen, weil wir nur fünf oder sechs Blog-Beiträge haben, und standardmäßig setzt WordPress 10 Blog-Beiträge auf einer Seite. Nur um zu testen, ob der Pager funktioniert, gehen Sie zurück zum Dashboard und dann unten die Einstellungen, auf Lesen, ändern Sie dann Blog-Seiten, um maximal 10 bis fünf anzuzeigen, und speichern Sie dann die Änderungen. Dann hoffentlich, wenn alles richtig funktioniert, wenn wir nach unten auf der Seite im Blog scrollen, sollten wir jetzt eine Seite hier bekommen, weil wir nur fünf Beiträge haben. Das geht wie der „Ältere Post“ -Button und es gibt die sechs Post dort. Dann klicken Sie auf „Newer Posts“, wir werden die ersten fünf erhalten. Herzlichen Glückwunsch dazu, so weit zu kommen und die Blog-Beiträge funktionieren zu lassen. Danke fürs Zuschauen. Wenn du mir im nächsten Video beigetreten bist, erstellen wir eine PHP-Anweisung „if else“, die den Funktionstext oben auf der Seite ändert , je nachdem, auf welcher Seite wir gerade sind. Ich seh dich dort. 26. Dynamischer Beitragstext: Also, wenn wir auf unsere Website gehen, alle Seiten, wie es steht, sagen Full Responsive Premium Spa-Theme für WordPress an der Spitze, und das gilt für die Homepage, die Blog-Seite, und alle anderen Seiten, die wir werden erstellen wie die neuesten Nachrichten, die Kontaktieren Sie uns und Über uns. Daher möchte ich sicherstellen, dass der Feature-Text oben auf der Seite widerspiegelt, auf welcher Seite wir sind, anstatt nur statischer Text zu sein. Der Grund, warum es der gleiche Text auf jeder Seite ist, weil, wenn wir in die header.php gehen, wir haben gerade statische HTML. Also werde ich das in diesem Video ändern, indem ich eine PHP-Funktion hinzufüge. Wenn wir also den gesamten Text zwischen den P-Tags löschen, aber sicherstellen, dass die Tags noch vorhanden sind, und dann das PHP öffnen und dann die schließenden Klammern, werden wir unsere eigene benutzerdefinierte Funktion hinzufügen, und Ich werde diese FeatureText aufrufen, und dann die Klammern und Semikolon. Das ist alles, was wir im Header-Abschnitt tun müssen. Wir werden diese Funktion Textfunktion in der functions.php erstellen. Dann, wenn Sie zum Ende der Funktionsseite gehen, direkt unter der letzten Funktion, aber immer noch innerhalb der PHP-Tags. Lassen Sie uns ein wenig Platz für diese Zellen machen. Also das Funktionsschlüsselwort, dann ein Funktionsname, der FeatureText war, und dann die Klammern und dann ein Paar geschweifter Klammern. Also innerhalb dieser Funktion wird eine if-else-Anweisung sein. So wird WordPress überprüfen, ob eine bestimmte Seite angezeigt wird. Wenn eine bestimmte Seite angezeigt wird, werden wir die korrekte Textanzeige im FeatureText einstellen. Also beginnen wir mit einer if-Anweisung. Also, wenn is_front_page. Also, wenn wir derzeit die Titelseite sehen, dann wollen, um den Browser Echo, den Text, den wir gerade aus der Kopfzeile Abschnitt, die vollständig Responsive Premium Spa Theme für WordPress ist. Also voll reaktionsschnell, und dann ein Break-Tag, und PREMIUM SPA THEME, gefolgt von der break-Tag, FOR WORDPRESS, und speichern Sie das dann. Dann gleich nach der geschweiften Klammer dort, werden wir anders verwenden, wenn anstatt sonst weil wir so viele andere wenn verwenden können, wie wir wollen. Wenn wir also über die Website gehen, erstellen wir jedes Mal, wenn wir eine neue Seite erstellen, die die Kontaktseite ist , eine neue Bedingung für diese Seite und drucken dann den entsprechenden Text aus. So elseif, und die geschweiften Klammern. Die Bedingung für den Blog ist also, dass wir is_home überprüfen. Also WordPress Klasse ist die Homepage als der Bereich, in dem die wichtigsten Blogbeiträge angezeigt werden. Also haben wir die Titelseite, und dann haben wir is_home, für die Heimat der Blogbeiträge, dieser wird den Browser ausEcho, und ein Semikolon am Ende des ersten auch. Also Echo aus dem Browser. Wenn es der Blog ist, wollen wir, dass dies Tranquil Spa Official Blog sagen. Also lassen Sie uns das speichern und werfen Sie einen Blick, ob das funktioniert. So aktualisieren Sie die WordPress-Website. Das scheint bisher zu funktionieren, wir haben die Blog-Seite ausgewählt und der Text wird in Tranquil Spa Official Blog geändert. Wenn wir zurück zur Homepage gehen, erhalten wir den ursprünglichen Text, den wir so eingestellt haben, dass alles gut funktioniert. Also werden wir das für jetzt verlassen und wir werden die Funktionen jedes Mal hinzufügen, wenn wir eine neue Seite zum Blog hinzufügen. Also danke fürs Zuschauen. Im nächsten Video erstellen wir die Seitenvorlage, um die vollständigen einzelnen Blogbeiträge anzuzeigen. 27. Blogvorlage: Also in unserer Blog-Seite haben wir die verkürzten Beiträge bekommen, und in diesem Video wollen wir sicherstellen, dass, wenn wir auf den Read More Button oder auf den Titel klicken, dass diese Links zu einer Seite, die den Beitrag in voller Länge zeigen wird, und wir tun dies, indem wir eine Vorlage namens single.php erstellen. Gehen Sie also zu Ihrem Texteditor und erstellen Sie eine neue Seite, und speichern Sie diese als single.php, mit den restlichen PHP-Dateien. WordPress hat zwei verschiedene Arten von Seitenvorlagen, die wir verwenden können. Es gibt die Single-Use-Vorlage, die wir für die Seite „Kontakt“ und „Über uns“ verwenden , und das wird nur auf einer bestimmten Seite verwendet werden, oder es gibt auch eine globale Vorlage, die ein bisschen allgemeiner ist -Vorlage. Wir müssen einen Kommentar oben auf der Seite setzen. Die einzelne Seite wird also locker auf unserer Blog-Seite basieren. Wir können einen Großteil der Inhalte wiederverwenden. Kopieren Sie den Inhalt von der Index-Seite und fügen Sie ihn dann in die single.php Da dies eine globale Vorlage sein wird, müssen wir oben einen Kommentar hinzufügen. Noch WordPress ist der Name der Vorlage. Fügen Sie die Kommentare hinzu. Es wird der Name der Vorlage sein, also wird es Single Post Template sein. Dies wird einige der gleichen Funktionen wie die Blog-Seite haben, aber mit nur ein oder zwei kleinen Änderungen. Zum Beispiel haben wir auf der Blog-Seite den Titel, der auf den vollständigen Beitrag verlinkt, aber wir wollen das nicht, weil wir bereits auf dem vollständigen Beitrag sind. Lassen Sie uns den Hyperlink um den Titel entfernen, entfernen Sie den Hyperlink, so dass die Schließung eines Tags. Wir können auch das Titelattribut, den Permalink und den ganzen Weg zum Öffnen eines Tags entfernen . Speichern Sie das und gehen Sie zum Blog und klicken Sie auf einen der Blog-Beiträge. Dies ist die einzelne Seite, an der wir jetzt arbeiten, und wir müssen den Titel noch oben auf der Seite hinzufügen. Jetzt können Sie sehen, wenn wir auf den Link oben klicken, es ist nicht mehr ein Link, es ist nur der Blog-Titel. Wir müssen die verkürzte Version des Beitrags so ändern, dass sie die volle Länge hat. Wir tun dies, indem wir die Auszüge zurück in den Inhalt ändern. Speichern Sie das, und aktualisieren Sie es dann. Dann haben wir die volle Länge der Post. Als nächstes möchte ich nur zum Stylesheet gehen und ein wenig Zeilenhöhe hinzufügen, nur um etwas Abstand zwischen den Tags, der Kategorie und dem unten stehenden Text zu schaffen . Wenn wir gehen über die style.css und kopieren Sie einen Kommentar, Ich möchte dies direkt unter der Blog-Sidebar einfügen, die Über uns, die Kontaktieren Sie uns. Ich werde es kurz vor dem mobilen Styling setzen. Fügen Sie das in und wir nennen dies den Blog Single Post. Werfen wir einen Blick auf die Klasse, die wir hier anvisieren müssen. Wenn wir auf die Indexseite gehen, möchte ich Styling zu den Tags und der Kategorie hinzufügen. Die Klasse, die diese umgibt, ist blog-posts-meta. Mir ist gerade aufgefallen, dass es da einen kleinen Fehler gibt. Wir müssen das schließende P-Tag verschieben, um tatsächlich vor den Tags und der Kategorie zu beginnen, und dann kurz danach enden. Sonst wird das nicht funktionieren. Lasst uns das einfach reinlegen und das speichern. Zurück zum Stylesheet, und fügen Sie dann die Klasse ein. Vergessen Sie nicht, einen Punkt davor zu setzen, weil es eine Klasse ist, und fügen Sie dann einfach einen Zeilenabstand mit der Zeilenhöhe Eigenschaft von zwei M hinzu, und lassen Sie uns den Browser aktualisieren und sehen, wie das aussieht. Ok. Das hat sich immer noch nicht geändert, also gibt es irgendwo immer noch ein Problem. Wenn wir nur einen Blick werfen. Es liegt daran, dass wir das schließende Absatz-Tag auf der Index-Seite geändert haben, aber wir haben es nicht in der single.php getan. Gehen Sie also zu single.php, und verschieben Sie dann einfach das schließende p-Tag, und setzen Sie dies nach der Kategorie, und speichern Sie das. Mal sehen, ob das jetzt funktioniert. Ich denke, das funktioniert, wir fehlen nur die Tags da draußen, nur weil ich nicht denke, dass dieser Beitrag irgendwelche Tags hat, was er nicht tut. Wenn wir versuchen, den August Newsletter eins, wir haben die Tags, wir müssen nur eine Pause Tag hinzufügen. Unmittelbar nach dem Autor und nach dem Schließen eines Tags, das Break-Tag. Hoffentlich sollte das jetzt alles lösen. Großartig. Das sieht viel besser aus. Wir haben jetzt eine gewisse Zeilenhöhe zwischen den Tags und den Kategorien. Das sieht jetzt gut aus. Wenn wir dann die Seite ein wenig mehr hinuntergehen, können wir auch den Read More Button entfernen, weil wir das nicht brauchen. In der Tat können wir den gesamten Link verschieben und ihn einfach ein wenig mehr hochziehen und speichern, und dann aktualisieren, und da gehen wir. Das ist die Schaltfläche „Mehr lesen“ entfernt. Eine Sache, die wir beim Aufbau von WordPress-Themes bewusst sein müssen , ist, dass manchmal Benutzer Beiträge hochladen können, die wirklich lang sind. Das waren nur fünf Absätze, so dass es auf der Seite ziemlich gut aussieht, aber wenn jemand einen Lese-Along Beitrag hochlädt, möchte er ihn vielleicht in verschiedene Seiten aufteilen. Wir möchten vielleicht Pager mit vorherigen und nächsten am Ende des Beitrags hinzufügen, teilen Sie es einfach ein wenig auf. Die Art und Weise, wie wir das tun können, ist, dass wir Benutzern erlauben könnten, ein Break-Tag einzufügen. Wenn wir uns für einen Blogbeitrag entscheiden, wählen wir einfach einen, auf dem wir jetzt sind, nämlich den August-Newsletter, und wenn wir nur einen Punkt wählen, an dem Sie einen Pager hinzufügen möchten, können wir dort einen Kommentar hinzufügen, Dies ist das gleiche wie ein HTML-Kommentar, der „Nächste Seite“ sagt. Ich werde das nur kopieren und es in einer weiteren Zeit einfügen und dann diesen Beitrag aktualisieren und zurück auf die Website. Werfen wir einen Blick darauf. Jetzt haben wir unseren Blogbeitrag erscheinen, und er wird nach zwei Absätzen abgeschnitten, wo wir den nächsten Seitenbruchpunkt setzen, was großartig ist. Als nächstes müssen wir einfach einen Pager am unteren Rand der Beiträge hinzufügen , der es uns ermöglicht, zur nächsten Seite zu springen. Wir können das in der single.php tun und fügen Sie dies direkt unter dem Inhalt, so öffnen Sie die PHP, und dann die WordPress-Funktion, dass wir eine wp_link_pages, Klammern und Semikolon hinzufügen , und dann speichern und aktualisieren Sie die Blog-Seite. Jetzt können wir unten sehen, wir haben die Anzahl der Seiten, also haben wir 1, 2 und 3, und sie alle scheinen korrekt zu funktionieren. Das letzte, was wir tun möchten, ist, einen Pager am unteren Rand des Beitrags hinzuzufügen, damit wir zum nächsten oder vorherigen Beitrag springen können, wenn Sie möchten. Zurück in single.php, gehen Sie zum Pager, und anstatt die nächsten Beiträge zu sagen, nehmen wir einfach das S des Endes und das wird auf den vorherigen oder den nächsten Beitrag verlinken, und wir brauchen den Text in den Klammern nicht, da der Name des Beitrags dynamisch mit WordPress eingefügt wird. Speichern Sie das und aktualisieren Sie dann den Browser. Da gehen wir. Jetzt haben wir den August-Newsletter bekommen und wir können auf den vorherigen oder den nächsten Beitrag verlinken , indem Sie einfach auf die Schaltflächen am unteren Rand klicken. Wir machen gute Fortschritte, und das Letzte, was wir tun müssen, ist nur am Text oben auf der Seite für den einzelnen Beitrag. Wir tun das wieder auf der Seite Funktionen und wir fügen eine weitere Elseif-Anweisung hinzu. Elseif, in der Tat, anstatt eine neue Anweisung hinzuzufügen, können wir es einfach auf die is_home hinzufügen. Nur weil wir den gleichen Text von Tranquil Spa Official Blog verwenden werden. Also kurz nach is_home, wir verwenden die beiden Rohre, was alle bedeutet, also, wenn wir auf der Homepage sind oder die Seite ist Single, dann druckt den Text Tranquil Spa Official Blog. Speichern und aktualisieren. Ok. Gut. Das ist also die Vorlage, die für den einzelnen Blogbeitrag fertig ist, und wenn Sie mich im nächsten Video beitreten, werden wir es Benutzern ermöglichen, Kommentare zu den Beiträgen hinzuzufügen. 28. So fügst du Kommentare zum Blog hinzu: Willkommen zurück. In diesem Video werden wir die Möglichkeit erstellen, damit Benutzer Beiträge kommentieren können. Die Art und Weise, wie wir das tun, ist, dass wir eine neue Seite erstellen. Dies wird eine Seitenvorlage sein. Speichern Sie diese Datei als comments.php und speichern Sie diese im selben Verzeichnis wie alle Ihre PHP. Dann dafür werden wir nicht das Rad neu erfinden, wir werden nur die Kommentarseite aus dem 2014-Theme kopieren, die mit WordPress-Download enthalten ist. Wenn Sie zu Ihrer WordPress-Installation in htdocs gehen und dann trunquil-wp öffnen. Wenn Sie dann in den Inhalt zu Themen gehen, werde ich das 2014-Thema verwenden und dann die comments.php öffnen. Wählen Sie alle aus und kopieren Sie, fügen Sie den Inhalt in comments.php ein und speichern Sie ihn. Wir können so ziemlich alle comments.php lassen, wie es ist. Wir werden nur die WordPress 2014 Referenzen nur von dort zu verschieben. Einige Vorteile der Verwendung der Vorlage von einem der enthaltenen Themen, es hatte einige nette Funktionen wie Überprüfung, ob ein Beitrag ist passwortgeschützt. Es gibt nur ein oder zwei kleine Dinge, die wir ändern müssen. Wenn wir nach unten zur printf-Zeile scrollen, und wir werden dies leicht anpassen, indem Sie einen Gedanken ändern, um zu kommentieren, und dann in der nächsten Zeile ändern Sie Gedanken zu Kommentaren, und speichern Sie das dann. Um dies dann wieder in unser Thema aufzunehmen, müssen wir zur Vorlage single.php gehen. Dann werde ich das unter den Pager legen. Wir brauchen Stil WordPress Aufenthaltsort in der Blog-Post, wir wollen, dass die Kommentare erscheinen und es ist in der Regel am Ende des Beitrags. Also lasst uns das direkt unter den Pager setzen. Wenn ich einen Kommentar nur hier hinzufüge, werde ich sagen, laden Sie die Kommentarvorlage. Öffnen Sie danach die PHP-Tags und verwenden Sie dann die Kommentarvorlagenfunktion. Dann speichern. Es wird zu einem Blog-Post gehen und aktualisieren. Sie sollten am Ende des Beitrags sehen wir die Möglichkeit haben, Kommentare zu hinterlassen. Lassen Sie uns voran und fügen Sie ein paar Beispielkommentare hinzu, und überprüfen Sie, dass alles in Ordnung ist. Da sind unsere ersten Kommentare. Wir können auch auf die Bemerkungen antworten. Du sagst hallo da drin und postest dann die Kommentare und überprüfst, dass alles funktioniert. Da sind unsere beiden Kommentare, also ist das gut. Als nächstes möchte ich nur in das CSS gehen, etwas benutzerdefiniertes Styling hinzufügen und sicherstellen, dass die Kommentare etwas mehr mit dem Rest der Website passen. Gehen Sie also zu unserer style.css. Dann möchte ich unten auf der Seite etwas Stil hinzufügen. Kopieren Sie die Kommentare und fügen Sie diese direkt unter dem Plug Single Post und ändern Sie den Kommentar, um den Kommentar Abschnitt zu sein. Um loszulegen, möchte ich sicherstellen, dass der Kommentarbereich unten einen ähnlichen Stil in den Sidebar-Modulen und auch in den Blog-Posts hat . Die Art und Weise, wie ich das tun werde, besteht darin, das gleiche Styling zu kopieren , wie wir es im Sidebar-Modul verwendet haben. Kopieren Sie einfach diesen Abschnitt und finden Sie dann den Selektor. Also öffnen wir die Chrome-Entwicklertools mit inspect-Element. Wir müssen die ID des Containers finden, der den gesamten Kommentarabschnitt umgibt. Klicken Sie auf die Lupe und suchen Sie dann den umgebenden Behälter. Es ist das div mit der ID der Kommentare und dann die Klasse des Kommentarbereichs. Lassen Sie uns das jetzt hinzufügen. Das div mit einer ID von Kommentaren, und dann die Klasse der Kommentarbereich, und fügen Sie dann das Styling ein. Mal sehen, wie das aussieht. Gut, das Styling passt jetzt zum Rest der Seite. Als nächstes möchte ich nur die Kommentare hervorheben , nur damit sie ein wenig mehr vom Rest des Hintergrunds abheben. Wir geben diesem einen dunkelgrauen Hintergrund und fügen auch ein Brett Runde und auch ein wenig einen Rand hinzu, nur um sie zu trennen. Also die Klasse, die wir brauchen, ist Kommentarkörper. Also zuerst werden wir mit dem Hintergrund beginnen und die Hintergrundfarbe ist eee. Dann beträgt der Rahmenradius 10 Pixel, um dem Rest der Website zu entsprechen. Dann der Rand, 30 Pixel oben und unten, 0 auf der linken und rechten. Also lassen Sie uns speichern und aktualisieren. Als nächstes möchte ich das Teilungsbild zwischen der Kopfzeile und den Kommentaren hinzufügen. Lassen Sie uns das selektive [unhörbar] herausfinden. Klicken Sie auf die Lupe und die Kopfzeile. Das nennt man eine Klasse von h2 Kommentaren Titel. Lassen Sie uns das jetzt hinzufügen. Also h2 und dann die Klasse der Kommentar-Titel. Dann wird es das gleiche Styling zugeschnitten, das wir im Blogbeitrag Titel verwendet haben. So scrollen wir nach oben zum Blog-Abschnitt und suchen nach dem Blog-Post-Titel. Wir können das exakt gleiche CSS kopieren, was uns das Bild und auch das Styling gibt. Fügen Sie dies in den Kommentartitel Abschnitt ein und speichern Sie, und werfen Sie einen Blick. Das sieht also gut aus. Als nächstes möchte ich ein wenig Rand am unteren Rand der Kommentare und auch eine gestrichelte Linie hinzufügen , um den Antwortabschnitt zu trennen. Um dies zu tun, müssen wir die Klasse der Kommentarliste verwenden. Lassen Sie uns einen Rand hinzufügen, Ränder am unteren Rand von 60 Pixeln und dann Rand auf den unteren Rand von 1 Pixel und die gestrichelte Linie. Werfen wir einen Blick. Da gehen wir. Dann, was wir jetzt tun müssen, lassen Sie uns ein wenig Stil in den Antwort-Abschnitt machen. Ich werde den Textbereich so machen, dass er die volle Breite hat. Lasst uns die Klasse dafür holen. Das selektive dafür ist Textbereich mit der Idee von Kommentaren. Geben Sie also den Textbereich ein, dann die ID der Kommentare. Legen Sie die Breite des Textbereichs auf 100 Prozent fest, und fügen Sie am unteren Rand von 20 Pixeln einen Rand hinzu. Aktualisieren Sie dann. Also, jetzt ist das volle Breite. Das letzte, was ich tun möchte, ist die Submit-Button zu stylen. Wir werden es das gleiche wie die Submit-Button machen, die wir auf Bootstrap-Website verwendet haben. Es hat die gleiche blaue Farbe wie der Rest der Website. Lassen Sie uns herausfinden, was das Selektive ist. Die Eingabe hat die ID „submit“. Wir können einfach die Submit-ID auf die Schaltfläche Standardwerte im globalen Abschnitt hinzufügen. Kurz nach Taste Standard durch ein Komma getrennt, fügen Sie auch die ID von senden. Führen Sie dann dasselbe im Hover-Zustand aus. Senden Sie den Mauszeiger, und kehren Sie dann zurück zum Kommentarbereich. unter dem Textbereichsabschnitt Fügen Sieunter dem Textbereichsabschnitt auch die Sende-ID hinzu und lassen Sie uns die Schaltfläche mit dem Textbereich übereinstimmen, indem Sie eine Breite von 100 Prozent angeben. Also lassen Sie uns das speichern und sehen, wie das aussieht und erfrischt. Wir brauchen die Entwickler-Tools nicht mehr. So sieht das jetzt viel besser aus, das sieht gut aus. Eine Sache, die Sie vielleicht nicht wissen, ist so weit, wenn wir die Kommentare hinzugefügt haben und wir auf den Antwort-Button klicken. Sobald du auf Antwort klickst, werden wir bei der Antwort zum unteren Bildschirmrand weitergeleitet. Dies ist in Ordnung für jetzt, wenn wir ein oder zwei Kommentare gehen wollen. Aber auf einer Seite hat es Dutzende oder Hunderte von Kommentaren. Wir wollen nicht direkt nach unten auf der Seite gebracht werden. Wir möchten, dass das Kommentarfeld direkt unter dem Beitrag erscheint, den wir kommentiert haben. Zum Glück hat WordPress etwas JavaScript, um dies zu tun. Die Art und Weise, wie wir das JavaScript in hinzufügen können, ist durch Kopfnote zu der functions.php. Wenn wir nach dem Enqueue-Skript Abschnitt in der Theme-Setup direkt unter dem Bootstrap JavaScript suchen, werden wir das allgemeine Antwortskript hinzufügen. Also werden wir zuerst überprüfen, ob der Beitrag singular ist. Jetzt werden wir das Skript wie oben mit wp_enqueue_script in die Warteschlange stellen. Der Skriptname ist Kommentarantwort und ein Semikolon am Ende davon. Also, sparen Sie das. Wenn Sie gehen über WordPress und aktualisieren, jetzt, wenn Sie auf die Antwort-Schaltfläche klicken, und es ist nicht aus irgendwelchen Gründen funktionieren. Also überprüfen wir einfach, warum. Dadurch gelangen Sie zum Ende der Seite. Werfen wir einen Blick darauf. Wir müssen sicherstellen, dass es innerhalb der geschweiften Klammern ist. So schneiden Sie diesen Abschnitt jetzt, wo wir gerade fertig sind, und fügen Sie ihn in die geschweiften Klammern oder innerhalb der Funktion ein. Speichern Sie das und lassen Sie uns sehen, ob es jetzt funktioniert. Klicken Sie auf die Antwort, und da gehen wir. Jetzt anstatt ganz unten auf der Seite gebracht zu werden, haben wir jetzt das JavaScript aktiviert, und das macht Sie, dass das Feld direkt unter den Kommentaren erscheint, die in ihnen antworten. Damit wir so einen voll funktionsfähigen Kommentarbereich gehen. Danke fürs Zuhören, und wir sehen uns im nächsten Video. 29. So machst du deine Seitenzeile dynamisch: Willkommen zurück, Leute. In diesem Video werden wir einen Blick auf die Seitenleiste werfen. Wir werden sicherstellen, dass es voll funktionsfähig ist. Wir werden sicherstellen, dass das Archiv-Modul und die Kategorie Abschnitt wird dynamisch sein, was bedeutet, dass WordPress wird die Kategorien und die Monate des Jahres durch die Blog-Posts, die verfügbar sind füllen . Also filtern wir sie nach unten, wie wir möchten, dass sie angezeigt werden. Der Text, der in den Archiven ist, befindet sich in Kategorie Abschnitt. Es ist nur momentan statisches HTML. Es ist genau das, was wir von der Bootstrap-Site herangezogen haben. Ich werde das jetzt ändern. Wir werden dies in der sidebar.php ändern. Geh rüber zu dem. Wir fangen mit dem Monat des Jahres an. Wenn wir nur alle Listenelemente für jetzt löschen, werde ich dies durch eine WordPress-PHP-Funktion ersetzen. Öffnen Sie die PHP-Tags. Dann werden wir es in diesem ersetzen durch wp_get_archive, durch die Klammern und ein Semikolon, und dann speichern, und gehen Sie zurück zum Blog und aktualisieren. Jetzt werden wir alle Bootstrap-Monate des Jahres verwenden, die wir früher eingelegt haben. Jetzt sind wir nur noch mit dem WordPress generierten Monaten links. Momentan habe ich nur Beiträge im Monat August. Nur um es ein wenig mehr Inhalt zu geben, werde ich nur einen weiteren Beitrag hinzufügen. Ich kopiere einfach den Beispieltext. Fügen Sie also einen weiteren Beitrag hinzu. Ich werde das die Septembernachrichten nennen und dann ein wenig Text einfügen. Dies kann in die Nachrichtenkategorie gehen, und ein Tag der Nachrichten, und dann veröffentlichen, dass. Gehen Sie dann zurück zum Blog-Abschnitt. Jetzt haben wir Beiträge aus zwei verschiedenen Monaten. Wir können sehen, dass WordPress fügt diese automatisch. Wir werden genau das Gleiche mit dem Kategoriebereich machen. Zurück zur sidebar.php und finden Sie den Kategorieabschnitt, sich direkt unter den Archiven befindet, und löschen Sie dann die kostenlosen Listenelemente, die wir dort haben. Öffnen Sie das PHP, und die PHP-Funktion, die wir verwenden ist wp_list_categories und speichern Sie das, und aktualisieren Sie dann den Blog. Nun hat das Sidebar-Modul unter den Kategorien die WordPress-Kategorien, die wir eingeben, wenn wir die Blogposts erstellen. Wir haben einen zusätzlichen Kategorie-Titel darin, den wir nicht wollen, so dass der Weg zu entfernen, der wieder in sidebar.php ist, innerhalb der Funktion WP Lists Categories, innerhalb der Klammern, können wir den Titel zwischen den Zitaten entfernen, indem Sie in title_li ist gleich, wir können einfach das leer lassen, so dass kein Titel erscheint. Wir werden speichern und aktualisieren. Wir sind nur mit unserem Level für die Überschrift, das wir in uns selbst gesetzt haben. Jetzt hat WordPress die Monate und die Kategorien in. Wir können diese Links jetzt tatsächlich auswählen. Dies sollte es auf der Blog-Seite ausfüllen, um Beiträge nur nach der Kategorie des Monats anzuzeigen , den wir auswählen. Wir haben Nachrichten dort ausgewählt und wir werden einfach überprüfen, dass alles funktioniert, indem wir nach unten scrollen. Wir haben gerade zwei Beiträge dort, beide für die Kategorie der Nachrichten. Wenn wir also September wählen, sollten wir nur den einen Beitrag bekommen, den wir heute gemacht haben. Jetzt versuchen wir es noch mal. Lassen Sie uns den Abschnitt Angebote ausprobieren. Wir haben gerade den einen Blogbeitrag mit der Kategorie Angebote erhalten. Das scheint alles gut zu funktionieren. Wenn du mir im nächsten Video beitrittst, erstellen wir die archive.php, die das Layout dieser Ansicht steuert. 30. Archivvorlage: Willkommen zurück. Im letzten Video haben wir die Sidebar-Module repariert. Wenn wir den Monat des Jahres oder die Kategorien auswählen, WordPress und [unhörbar] ist unten in den Blog-Beiträgen, was wir ausgewählt haben. In diesem Video werden wir die archive.php erstellen, die die Vorlage sein wird, die das Aussehen des Blogs steuert , wenn wir auf einem dieser Archive auswählen. Um zu beginnen, gehen Sie in Klammern oder Ihren Texteditor, erstellen Sie dann eine neue Seite und speichern Sie diese Seite als archive.php. Stellen Sie sicher, dass sich das im Projektverzeichnis befindet. Wir werden die single.php als Ausgangspunkt verwenden. Wählen Sie alle aus, kopieren Sie und fügen Sie diese dann wieder in unsere neue Seite, die das Archiv ist, und speichern Sie sie. Dann zurück zum Anfang der Seite, werden wir die Kommentare erstellen. Der Kommentar, den wir brauchen, nennen wir diese Die Vorlage für die Anzeige Archivseiten, und speichern Sie das. Die Seite wird ziemlich gleich aussehen, wenn wir auf die Archive klicken, als wir auf den Blog-Beitrag geklickt haben. Werfen wir einen Blick auf die volle Ansicht. Wir brauchen nichts in der Archivvorlage zu tun, aber wir wollen auf die Funktionsseite gehen und sicherstellen, dass der Text über den vorgestellten Bereich zurück zu Tranquil Spa Official Blog geändert wird. Aber diesmal werden wir etwas etwas anderes machen. Wir werden ein wenig mehr PHP hinzufügen, das direkt unter dem Text angezeigt wird. Es zeigt uns, welche Kategorie wir ausgewählt haben oder welchen Monat wir anzeigen. Zurück in den Texteditor, und gehen Sie zu functions.php, und dann sollte es am Ende Ihrer Funktionsseite sein. Wir sollten die Feature-Text-Funktion haben. Wir werden diesen Abschnitt mit einer weiteren elseif-Aussage fortsetzen, kurz nach der letzten. Geben Sie elseif ein, und dann die Bedingung und die geschweiften Klammern. Die Bedingung, die wir überprüfen möchten, ist, ob die Seite Archiv ist, und wenn es ist, werden wir auf den Browser Echo aus , um mit dem gleichen Text von Tranquil Spa Official Blog zu starten. Wir werden das kopieren und einfügen. Wie bereits erwähnt, wir unter dem Text eine neue Zeile setzen. In dieser Zeile wird der Monat oder die Kategorie angezeigt, die wir anzeigen. Stellen Sie also sicher, dass es in der nächsten Zeile angezeigt wird. Ich werde nur ein Break-Tag Echo ausgeben und sicherstellen, dass dies in Zitaten geht, genau so. Zu Beginn werden wir die Kategorie oder den Tag-Namen widerspiegeln. Wir werden dies tun, indem wir single_term_title eingeben, und dann den Text, den wir vor dem Titel erscheinen möchten, durchsuchen, und dann einen Doppelpunkt und ein Leerzeichen. Lass uns das speichern und sehen, wie das aussieht. Aktualisieren Sie den Browser. Jetzt haben wir den Tranquil Spa Official Blog-Text, dann den Break-Tag, und direkt danach haben wir den Browsing-Text, den wir gerade eingefügt haben. Dem Browsing-Text folgt dann die Kategorie, die derzeit Angebote ist. Lassen Sie uns auf Nachrichten klicken und überprüfen, dass funktioniert. Jetzt haben wir den Nachrichtenbereich. Ich werde nur noch einen ausprobieren. Promotionen. Gut. Nun, das war ziemlich einfach, das da drin zu bekommen, aber es wird ein bisschen schwieriger, im Monat der Post zu ziehen, aber ich werde Ihnen zeigen, wie man das jetzt macht. Zunächst einmal müssen wir in eine andere if-Anweisung setzen, die überprüft, ob das Archiv durch den aktuellen Monat gefiltert wird. Wir setzen die Klammern ein, wenn es Monat ist, und dann die Klammern danach und erstellen dann die geschweiften Klammern. Um loszulegen, müssen wir herausfinden, welcher Monat des Jahres es sich derzeit befindet. Ich werde das in einer Variablen speichern, also das $ Zeichen. Ich werde diese Variable die MonthNum nennen, und lassen Sie uns dies gleich get_query_var setzen, und dann in Klammern und die Klammern und die Zitate. Wir werden die Monatsnummer und dann ein Semikolon am Ende dort. Als nächstes werden wir zwei Variablen erstellen, eine für den Monat und eine für das Jahr. Wir fangen mit dem Monat an. Wir werden das gleich dem PHP-Datum setzen, und der erste Parameter, in dem wir es übergeben werden, ist das Format. Die Formate, die wir zurückgeben möchten, ist ein F, das den aktuellen Monat in der langen Form zurückgibt, wie Januar oder Februar, und dann durch ein Komma getrennt. Als nächstes möchten wir den Zeitstempel der Einheit zurückgeben. Wir werden das tun, indem wir mktime eingeben, und dann müssen wir einige Parameter übergeben. Der erste ist die Stunde. Wir müssen da nichts reinlegen. Die zweite ist die Minute. Wieder, das ist Null. Der dritte ist der zweite. Das wird Null sein. Der vierte ist für den Monat. Da wir eine Variable namens MonthNum erstellt haben, können wir diese einfach kopieren, und wir können sie einfügen. Das sollte den aktuellen Monat zurückgeben. Dann erstellen wir die Jahresvariable. Jahr wird gleich sein, und wir werden das gleiche wie die Monatsnummer tun, also get_query_var. Dieses Mal werden wir das Wort, Jahr und ein Semikolon am Ende übergeben . Jetzt werden wir zwei Variablen mit dem Monat und dem Jahr erstellen. Wir müssen dies dem Browser widersprechen. Echo, vor allem, der Text, der sein wird, posten von, mit einem Leerzeichen direkt nach, und dann Perioden an der Variablen. Der erste wird der Monat sein, und dann fügen wir ein Leerzeichen hinzu. Setzen Sie die einfachen Anführungszeichen mit einem Leerzeichen dazwischen, und dann fügen wir die letzte Variable hinzu, die das Jahr war, mit dem Semikolon, und drücken Sie „Speichern“. Dann gehen Sie zu WordPress und aktualisieren. Wir wählen eines der Archive aus und sehen, ob das funktioniert. Das sieht gut aus. Wir haben den Beitrag aus Text bekommen, und dann haben wir auf die Monatsvariable und dann die Variable für das Jahr hinzugefügt . Schauen wir uns einfach die August- an und sehen, ob das funktioniert. Alles scheint korrekt zu funktionieren. Wir haben den Beitrag aus dem aktuellen Monat angezeigt. Wir haben auch die Kategorien des aktuellen Tags angezeigt. Nun, wenn Sie mir im nächsten Video beitreten, werden wir mit der Website fortfahren, indem Sie die neueste Nachrichtenseite hinzufügen. 31. Aktuelle Seite: Willkommen zurück. In diesem Video erstellen wir die Seite „Neueste Nachrichten“. Nun wird die Seite „Neueste Nachrichten“ ziemlich ähnlich wie die Blog-Seite sein. Aber wir werden nur einen WordPress-Filter hinzufügen , den wir in der Spalte Post füllen, um nur diejenigen anzuzeigen , die mit der Nachrichtenkategorie getaggt sind. Um zu beginnen, gehen Sie zu Klammern und erstellen Sie eine neue Seite, und speichern Sie diese Seite als page-news.php. Dann, weil es ziemlich ähnlich wie die Blog-Seite sein wird, können wir einfach die Indexseite kopieren. Wählen Sie den gesamten Inhalt aus, kopieren Sie ihn und fügen Sie ihn in die Nachrichtenseite ein, und speichern Sie ihn. Im Gegensatz zu den letzten Vorlagen, die wir erstellt haben wird dies eine Einweg-Vorlage sein, so dass wir diese nur mit der Seite Neueste Nachrichten verknüpfen. Um sicherzustellen, dass wir dies mit einer WordPress-Seite verknüpfen können , werden wir einen Kommentar hinzufügen, der ihm einen Vorlagennamen gibt. Fügen Sie also die Kommentare oben hinzu, und fügen Sie dann einen Vorlagennamen hinzu. Dies wird im Dashboard angezeigt, und dies wird als die neuesten Nachrichten bezeichnet, und speichern Sie das. Nun geben wir diesem einen Vorlagennamen. Wenn wir zu WordPress gehen und dann zum Dashboard gehen, wählen Sie die Seiten auf der linken Seite, und gehen Sie dann zu Neu hinzufügen, und lassen Sie uns die neuesten Nachrichten erstellen. Dieses Mal, wenn wir zu den Seitenattributen auf der rechten Seite gehen, können wir eine Vorlage auswählen, die verwendet werden soll. Dieses Mal können wir die Vorlage Neueste Nachrichten auswählen , da wir den Vorlagennamen oben hinzugefügt haben. Wählen Sie die neuesten Nachrichten und dann Veröffentlichen aus, und diese sollte automatisch zur Startseite hinzugefügt werden. Also haben wir das Zuhause, den Blog und jetzt die neuesten Nachrichten. Ich glaube, wir haben da einen Rechtschreibfehler. Wir werden diesen Titel einfach dort bearbeiten. Fügen Sie das „t“ am Ende hinzu und aktualisieren Sie es. Toll, jetzt haben wir die Homepage, den Blog und die neuesten Nachrichten. Jetzt haben wir die Indexseite als Vorlage für die neuesten Nachrichten verwendet. Wir müssen diese jetzt nach unten filtern, um nur die Beiträge anzuzeigen, die die Kategorie der Nachrichten haben. Gehen Sie zurück zu der page-news.php. Um den Kategoriefilter hinzuzufügen, öffnen Sie das PHP, und dann verwenden wir die WordPress-Funktion, die query_posts ist, und dann in den Klammern, sagen wir WordPress, welche Beiträge abfragen; diejenigen mit dem Kategorienname. Also category_name gleich News und ein Semikolon am Ende, und speichern. Wenn wir zurück auf die Website gehen und aktualisieren, also jetzt, wenn wir auf den Abschnitt „Neueste Nachrichten“ klicken, sollten wir nur mit den Beiträgen angezeigt werden, die die Kategorie der Nachrichten haben. Das funktioniert gut, also ist das gut. Möglicherweise haben Sie bemerkt, dass wir den Text oder den Feature-Text oben hinzufügen müssen. Wir werden dies dynamisch in der functions.php tun. Diesmal machen wir es ein bisschen anders. Wir werden WordPress dazu bringen, den Namen der Website zu ziehen, die Tranquil Spa sein wird, und dann fügen wir ein Break-Tag hinzu. Dann unten fügen wir den Titel der Seite hinzu, die „ Neueste Nachrichten“ sein sollte. Gehen Sie zu der Funktionsdatei. Wir fügen eine weitere else-if-Anweisung hinzu. Stellen Sie sicher, dass Sie else-if der schließenden geschweiften Klammer für die if-Anweisungen nicht hinzufügen. Geh zum nächsten runter. Else-if, in Klammern ist Seitenvorlage. Die Seitenvorlage wird die page-news.php sein. Diesmal überprüft die else-if-Anweisung den Namen der tatsächlichen Vorlage, dann die geschweiften Klammern. Wenn es sich um eine Seitenvorlage mit Seitennachrichten handelt, fügen wir den Website-Namen hinzu, indem wir die Blog-Informationen erfassen. In den Klammern, geben Sie einfach einen Namen ein, und das wird in den Namen der Website ziehen, und dann werden wir dem Browser ein Break-Tag Echo, lassen Sie uns dies auf eine separate Zeile setzen, und dann werden wir den Seitentitel der neuesten Nachrichten erhalten. Geben Sie einfach die_title ein und speichern Sie und aktualisieren Sie sie. Da gehen wir hin. Jetzt haben wir in den Titel der Website und dann den Titel der Seite gezogen. Wenn wir jemals eine dieser Informationen ändern wollen, wird sie jetzt automatisch angezeigt. Da gehen wir hin. Also, das ist der Abschnitt „Neueste Nachrichten“ fertig. Vielen Dank für das Ansehen, und wir sehen uns im nächsten Video. 32. So fügst du Beitragsbilder zu deinen Beiträgen hinzu: Willkommen zurück. In diesem Video werden wir Theme-Unterstützung für Post Thumbnails hinzufügen und dies wird Benutzern beim Erstellen eines neuen Beitrags erlauben , auch ein vorgestelltes Bild hochzuladen , um den Beitrag ein wenig schöner aussehen zu lassen, so dass es nicht nur einfacher Text ist. Der Weg, das zu tun ist, müssen wir zu unserer functions.php gehen, und dann müssen wir Theme-Unterstützung für Post Thumbnails hinzufügen. Gehen Sie zu functions.php, und sichern Sie dann nach oben innerhalb des Setups. Wir tun dies in ähnlicher Weise wie die Feeds und das Titel-Tag, die wir am Anfang hinzugefügt haben. Also in der Einrichtung fügen Sie Theme-Unterstützung hinzu. Dann werden wir in die Klammern die Post-Tumbnails und das Semikolon einfügen und das speichern. Jetzt haben wir Theme-Unterstützung eingeschlossen. Wenn wir gehen über zum WordPress-Dashboard, und dann, wenn wir in den Blog-Bereich gehen. Wählen Sie einen der Blogbeiträge aus, und wählen Sie dann „Beitrag bearbeiten“. Scrollen Sie dann nach unten. Sie sollten sehen, dass es jetzt ein vorgestelltes Bildfeld erscheint. Wir können dies verwenden, um ein Bild zu setzen, das an den Beitrag angehängt werden soll. Wählen Sie einfach das aus, wir können einen Upload Files haben oder wir können die Mediathek verwenden. Moment gehe ich nur zum Select Files im Upload-Bereich, und dann auf dem Desktop im Bootstrap-Ordner und den Bildern habe ich ein Bild namens thumbnail.jpg eingefügt. Wir können das verwenden, wenn Sie wollen, oder Sie können eine Ihrer eigenen wählen. Dann werde ich nur einige Alt-Texte des See-Bildes setzen und dann das vorgestellte Bild einstellen und dann den Beitrag aktualisieren. Dann gehen wir zurück in den Blog und machen noch einen. Dieses Mal werde ich den zweiten Beitrag auswählen dann das vorgestellte Bild auf die gleiche Weise hinzufügen. Dieses Mal gehen wir nur zur Medienbibliothek und verwenden die gleiche, wenn Sie möchten, und dann setzen Sie das und aktualisieren. Wenn Sie in den Blog in der Minute gehen, sich keine Sorgen, dass Sie das Bild noch nicht sehen können. Es gibt ein paar kleine Schritte, die wir zuerst machen müssen. Gehen Sie zu der index.php und dann müssen wir nach dem Auszug suchen, der der Text ist. Scrollen Sie mit dem Auszug nach unten zu den PHP-Tags. Um das Bild direkt über dem Auszug zu zeigen, öffnen Sie die PHP-Tags und dann setzen wir die Post-Miniaturansicht, die Klammern und das Semikolon, und speichern Sie das. Wenn Sie den Browser jetzt aktualisieren, sollten Sie die Bilder erscheinen lassen. Da gehen wir hin. Das sind die ersten beiden Bilder, die wir vorher gemacht haben. Dies lässt den Beitrag nur viel besser aussehen. Wir können ein wenig mehr Farbe zu der Post hinzufügen. Das wurde zur Indexseite hinzugefügt, aber wir haben auch Blogbeiträge, die auf der News-Seite erscheinen und auch in der single.php. Wechseln Sie zur Indexseite und kopieren Sie die Miniaturansicht des Beitrags. Dann, wenn Sie in die single.php gehen, und dieses Mal statt den Auszug, wird dies direkt über den Inhalt gehen. Vergiss nicht, zu retten. Auch in den Seitennachrichten wird dies knapp über dem Auszug gehen. Kleben Sie das hinein und sicher. Das sollten nun unsere Bilder sein, die auf dem Beitrag in den Nachrichten, im Index und auch auf der einzelnen Seite angezeigt werden. Wenn Sie die Standardgröße des angezeigten Bildes ändern möchten, können wir dies auf dem Dashboard tun. Gehen Sie also zum Dashboard, zu den Einstellungen und dann zu den Medien. Sie können die Standardbilder für die Miniaturansicht (mittel oder groß) festlegen. Wenn Sie zum Beispiel die Miniaturansicht als Standardbild im Blog festlegen möchten , gehen Sie zum Blog und dann auf der Indexseite würde dann die Miniaturansicht in die Klammern setzen und dann speichern. Wenn Sie dann den Blog aktualisieren, sollten wir jetzt das kleine Miniaturbild standardmäßig erhalten. Sie können das Gleiche für mittlere oder große tun. Aber ich werde das nur für den Moment löschen und einfach die Standardbildgröße belassen. Diese Seite ist beinahe fertig. Nur ein wenig CSS hinzuzufügen. Ich möchte nur etwas Rand am unteren Rand des Bildes hinzufügen und auch das Bild zu 100 Prozent des Containers machen. Wenn wir in die style.css gehen, und dann werden wir dies im Blog-Abschnitt hinzufügen. Werfen wir einen Blick auf den Blog-Bereich. Dann am Ende dieses Abschnitts können wir die Blog-Post-Klasse wiederverwenden, aber dann wählen Sie das Bild. Ich werde etwas Rand am unteren Rand des Bildes hinzufügen. Nur 20 Pixel und stellen Sie die Breite des Bildes auf 100 Prozent. Speichern Sie den Blog, und aktualisieren Sie ihn dann. Da gehen wir hin. Das ist, um viel besser aussehen und lassen Sie uns jetzt mit dem Blog-Bereich fertig. Ich sehe Sie im nächsten Video, wo wir das WordPress-Menü in die Fußzeile einfügen. 33. WordPress Fußzeilenmenü: Willkommen zurück. In diesem Video werden wir das WordPress-Menü für den Fußzeilenbereich erstellen. Wenn wir derzeit zur Fußzeile scrollen, die die ungeordnete Liste hat , die wir in der Bootstrap-Vorlage eingefügt haben, möchten wir das Fußzeilenmenü dynamischer machen, wie das Menü oben in der Navigationsleiste. Gehen wir also in das Dashboard und erstellen Sie ein neues Menü. Wechseln Sie zu Erscheinungsbild und dann Menüs, und wählen Sie dann Neues Menü erstellen aus. Ich werde dieses Menü das Footer Menu aufrufen und dann das Menü erstellen. Auf der linken Seite, unter der Registerkarte Seiten, können wir auswählen, welche Links wir zu diesem Menü hinzufügen möchten. Wir haben die Seite „Über uns“ oder „Kontaktieren Sie uns“ noch nicht erstellt, aber wir können den Blog und die neuesten Nachrichten hinzufügen. Wählen Sie diese beiden aus, und wählen Sie Zum Menü hinzufügen, und der Blog geht einfach über die neuesten Nachrichten. Speichern Sie das, und wenn wir dann zur functions.php gehen, können wir das Menü registrieren. Also zurück in functions.php, und suchen Sie dann nach dem Abschnitt register_nav_menus, den wir früh im Kurs gemacht haben. Dann darunter müssen wir das Fußzeilenmenü hinzufügen. Wir kopieren einfach das primäre Menü und fügen es dann direkt unten ein. Der Spitzname ist die Fußzeile, und dann der Menüname ist das Footer Menu. Speichern Sie die Datei wieder im Dashboard, und aktualisieren Sie die Seite des Menüs. Jetzt wird die Seite aktualisiert, vergewissern Sie sich, dass Sie sich noch im Fußzeilenmenü befinden, und wählen Sie dann unter den Themenspeicherorten die Registerkarte Fußzeilenmenü aus, und speichern Sie diese. Dann fügen wir den Navigationswalker der Fußzeilendatei auf die gleiche Weise hinzu, wie wir es im Kopfbereich getan haben. Gehen Sie also zur header.php, und dann, wenn wir nach der Navigationsleiste suchen, die alles von wp_nav_menu bis hin zu den schließenden Klammern ist, die gerade da sind. Kopieren Sie also diesen Abschnitt, und gehen Sie dann zur footer.php, und suchen Sie dann nach der Navigation, die sich direkt über den Social-Media-Symbolen befindet. Wenn wir die ungeordnete Liste finden, und dann können wir alle ungeordnete Liste Abschnitt mit den Informationen, den Kontakt, den Blog und den neuesten Nachrichten Abschnitt löschen den Kontakt, den Blog . Löschen Sie sie also, aber stellen Sie sicher, dass Sie den externen Container verlassen und dann die PHP-Tags hinzufügen. Fügen Sie dann innerhalb der Tags den Navwalker ein. Dieser benötigt nicht so viele Informationen wie der Header. Für den Menünamen wird dies die Fußzeile sein. Wir können die Theme-Position und auch die Tiefe löschen , weil es nur eine Ebene ist. Ich werde das einfach ansprechen. Der Container ist die ungeordnete Liste, die zuvor gelöscht wurden. Wechseln Sie also von div zu UL. Wir müssen die Menüklasse, die Container-ID oder die Container-Klasse für diese nicht hochfahren , damit wir sie entfernen können und alles andere, was wir verlassen können, wie sie ist, und speichern Sie das dann. Nur um das Fußzeilenmenü zu beenden, werden wir die letzten beiden Seiten hinzufügen, also Gehe zu Seiten und dann Neu hinzufügen. Dann werden wir in der Über uns Seite hinzufügen, so Über uns und dann drücken Sie „Veröffentlichen“, und dann „Neu hinzufügen“. Die letzte Seite, die in das Fußzeilenmenü geht, ist die Kontaktseite Kontaktieren Sie uns und dann „Veröffentlichen“. Dann fügen Sie diese letzten beiden Seiten in die Fußzeile, so Aussehen und Menüs, und wählen Sie das Fußzeilenmenü, dann wählen Sie die Kontaktieren Seite und die Über uns Seite, die wir gerade hier erstellt haben, „Zum Menü hinzufügen“, und ordnen Sie diese dann neu in die richtige Reihenfolge. Also die oberste Seite war Über uns, dann war es Kontaktieren Sie uns, dann der Blog und die neuesten Nachrichten, dann drücken Sie „Menü speichern“, und gehen Sie dann auf die Website. Es sieht so aus, als ob wir es geschafft haben, diese Seiten hinzuzufügen, das obere Menü auch, also werden wir diese in einem Moment entfernen. Aber wenn wir nach unten gehen, können wir überprüfen, ob alles richtig funktioniert. Wählen Sie also den Blog aus, es gibt unseren Blog-Bereich und die Neuesten Nachrichten. Das sieht gut aus. Wir haben die Seite „Über uns“ oder „Kontakt“ noch nicht erstellt. Wir werden diese Menü-Links einfach von oben entfernen. Also zurück in das Dashboard, die Darstellung und die Menüs. Wählen Sie dann das Hauptmenü von oben, und wir können diese leicht aus dem Menü entfernen, indem Sie sie auswählen. Wählen Sie dann aus und entfernen Sie sie. Führen Sie dasselbe für die Seite „Kontaktieren Sie uns“ aus, und speichern Sie dann das Menü. So sieht es jetzt so aus. Nun, ich habe alle Menüs korrekt auf der Website funktionieren. Danke fürs Zuschauen. Kümmere dich um. 34. So fügst du Widgets fur die Seitenleiste hinzu: Willkommen zurück. In diesem Video werde ich Ihnen zeigen, wie Sie unsere Sidebar modularer machen können, indem Sie WordPress-Widgets hinzufügen. Ein Sidebar-Widget ist im Wesentlichen nur einer der Blöcke, die wir bereits erstellt haben, aber wir werden es in WordPress setzen. Das gibt dem Site-Administrator die Möglichkeit, Dinge in der Sidebar neu zu organisieren und zu ändern, wenn er will. Der Weg, um loszulegen, ist, wenn wir zu den Codecs gehen und wenn wir nach dem Abschnitt über Wigdetizing Themes suchen. Es ist ziemlich einfach, die Widgets in unserem Thema funktionieren zu lassen. In der Minute, wenn wir zum Dashboard gehen und dann in das Erscheinungsbild gehen, gibt es derzeit keine Option für die Widgets. Wir werden das ändern, indem wir es zu unserer Funktionsdatei hinzufügen. Wenn wir nach dem Abschnitt suchen, wie ein Widget-Bereich zu registrieren, und kopieren Sie dann den Beispielcode, und gehen Sie dann über die functions.php. Ich werde dies kurz vor der Feature-Text-Funktion einfügen. Kleben Sie das da rein. Wir brauchen die PHP-Tags nicht, da sie bereits am Ende der Funktionsdatei am Stern sind . Wir können sie entfernen. Dann ist es nur ein Fall, einige der Werte zu ändern, so dass der Name unserer Sidebar Sidebar sein wird. Dann die ID, wir können es in alles ändern, was wir wollen, weil wir die Sidebar im Block Abschnitt auf dieser Seite verwendet haben, ich werde es die Sidebar nennen. Ich werde das einen Blog nennen. Dann, wenn es ein WordPress, was geht vor und nach dem Widget. Wenn Sie in die sidebar.php gehen, und was wir im Grunde tun, ist das Ersetzen dieser Sidebar-Module. Wir müssen WordPress sagen, alle Inhalte in diesen Modulen ist von dem div mit einer Klasse von Sidebar-Modul umgeben. Lassen Sie uns das div vor dem Widget ändern, um die Klasse gleich dem Sidebar-Modul zu haben , und dies ist das schließende div. Jetzt ist das in Ordnung. Dann gehen wir vor und nach dem Titel zurück in die Seitenleiste. Der Titel als Überschrift h4 oder Level 4. Ändern Sie vor Titel in h4, und dann h4 nach dem Titel und speichern Sie diesen dann. Wenn Sie zurück zu den WordPress-Codecs gehen und dann nach unten scrollen, wie neue Widget-Bereiche angezeigt werden, müssen wir den Beispielcode kopieren und in unsere Seitenleiste einfügen. Kopieren Sie diesen Abschnitt. In der Tat werde ich nur alle ohne die PHP-Tags kopieren. Kopieren Sie und gehen Sie zu der sidebar.php, und scrollen Sie dann ganz nach oben und fügen Sie dies in kurz vor dem ganzen Rest des Codes ein. Wir geben unserer Sidebar die ID von sidebar_blog. Ändern Sie es in Bereiche, in denen sich das Hausrecht befindet. Wir werden dies in sidebar_blog ändern, und das gleiche unten, wir werden es auch zu sidebar_blog ändern. Dann speichern Sie das. Wenn wir nun wieder in das Dashboard gehen und „Aktualisieren“ drücken, sollten Sie sehen, dass wir jetzt eine Widget-Option haben, wenn wir zum Erscheinungsbild gehen . Wählen Sie das aus. Jetzt können wir eine Liste aller verfügbaren Widgets sehen, und wir können auch benutzerdefinierte erstellen. Alles, was wir tun müssen, ist, diese einfach auf die Seitenleiste zu ziehen, und die meisten Widgets, die wir hinzufügen, werden die benutzerdefinierten sein, so dass sie die gleichen wie unsere Bootstrap-Site sind. Aber das erste, das wir hinzufügen möchten, ist ein Suchfeld. Wir haben noch kein Suchfeld auf der Website, also warum nicht ein vorgefertigtes Widget verwenden? Ziehen Sie einfach das Suchfeld auf die Seitenleiste, und ich werde das Widget „Über uns“ erstellen. Wir machen das mit dem Textfeld. Ziehen Sie den Text in die Seitenleiste. Der Titel dafür war „Über“. Für den Inhalt können wir den Text aus der sidebar.php kopieren. Kopieren Sie alle Tags und fügen Sie sie dort ein. Wir brauchen das p-Tag nicht, damit wir diese entfernen können. Ich möchte dort p Tag schließen. Speichern Sie diese und wählen Sie „Absätze automatisch hinzufügen“. Wir können das jetzt schließen, und auch das Suchfeld. Bevor wir weiter gehen, schauen wir uns einfach die Seite an und sehen, ob alles in Ordnung ist. Geh rüber zum Blog. Es sieht so aus, als hätten wir einen Fehler in der sidebar.php. Geh rüber zur sidebar.php und es ist in Zeile 5. Das sieht aus, dass wir nur einige PHP-öffnende, schließende Tags verpassen. Oben, öffnen Sie die PHP, und dann ist so viel das geschlossene drinnen. Mit dem Start des Tags, Schließen und Starten des Tags dort. Wir müssen das nur abschließen und speichern, und das sollte jetzt in Ordnung sein, also aktualisieren. Gut. Jetzt haben wir das Suchfeld in der Seitenleiste. Wir haben den Abschnitt „Über uns“ zweimal gezeigt. Gehen Sie in die Seitenleiste und löschen Sie das Sidebar-Modul für den Abschnitt Über uns und speichern Sie es. Jetzt sind wir nur noch mit dem Widget „Über uns“ übrig. Als nächstes machen wir die Archive und die Kategorien. Zurück in WordPress, in das Dashboard, Erscheinungsbild und Widgets. WordPress macht es wirklich einfach für uns in den Archiven und Kategorien. Sie können auf der linken Seite sehen, die Archive und Kategorien wurden bereits für uns erstellt. Ziehen Sie in den Archiven und geben Sie ihm Titel. Speichern Sie dann, und machen Sie dasselbe mit den Kategorien. Lass das Ende knapp darunter fallen. Geben Sie ihm einen Titel von Kategorien, und speichern Sie. Dann können wir diese jetzt aus unserer Fußzeile löschen. Das Sidebar-Modul für Archive, ich kann gehen und auch für die Kategorien, wir werden das auch tun. Schließlich werden wir den Follower-Abschnitt machen, dies wird ein Text-Widget wie der Abschnitt Über uns sein. Während wir in der Seitenleiste sind, lassen Sie uns den Inhalt kopieren. Wir müssen die Schriftart einiger Symbole für Facebook, Google, Pinterest und YouTube kopieren . Schneide sie aus. Ich kann das Modul jetzt einfach löschen und speichern. in die Seitenleiste zurück in die Widgets Ziehen Sie ein weiteres Textfeldin die Seitenleiste zurück in die Widgets. Der Titel ist Follower. Fügen Sie den Inhalt ein und drücken Sie „Speichern“. Dann zurück in den Blog und überprüfen, es funktioniert alles. Gut mit der Suche, dem About, den Archiven, Kategorien und dem Social Media Bereich. Großartig. Viele dieser Sidebar sieht so ziemlich wie zuvor aus, es ist jetzt viel modularer und ermöglicht es dem angemeldeten Benutzer oder dem Site-Administrator, die über zu ändern oder neue Widgets hinzuzufügen. Das ist so ziemlich alles, was getan wird. Ich möchte nur ein wenig CSS hinzufügen, besonders für das Suchfeld nur weil die Schaltfläche Suchen ein wenig Platz benötigt. Ich werde auch das Suchfeld eher wie die Eingabebuttons aussehen lassen, die wir auf der Bootstrap-Website verwendet haben. Lassen Sie uns zur style.css gehen, und kopieren Sie dann einen Kommentar. Dann machen wir einen Sidebar-Abschnitt. Direkt über dem mobilen Styling ändern Sie den Kommentar in Sidebar. Jedes der Sidebar-Module hat eine Klasse von Sidebar-Modul. Wir fangen damit an. Die Klasse der Sidebar-Modul, und dann werden wir mit der Eingabe beginnen. Um auszuräumen, werden wir einen Rand von 10 Pixeln haben. Ich setze die maximale Breite auf 100 Prozent. Speichern und werfen Sie einen Blick. Jetzt gibt es ein wenig Abstand um die Eingänge. Als nächstes müssen wir die ID der Klasse für die Eingabe-Schaltfläche erhalten. Gehen Sie in die Entwicklertools und wählen Sie dann die Lupe aus, und klicken Sie dort. Wir können sehen, dass wir die ID von searchsubmit haben, und dann zurück zum Stylesheet. Erstellen Sie die ID. In der Tat, anstatt die Stile zu platzieren oder die Stile in der Seitenleiste zu duplizieren, fügen wir diese einfach hinzu, öffnen Sie den globalen Abschnitt. Wenn wir nach den Stilen für die Schaltfläche suchen, Standard, werden wir genau die gleichen Stile dafür verwenden. Wir können dies auch am Ende hinzufügen. Die ID wurde searchsubmit, und speichern Sie sie dann. Wir fügen auch den Hover hinzu. ID von searchsubmit, und bewegen Sie dann den Mauszeiger. Speichern Sie das, und aktualisieren Sie es. Jetzt funktioniert das, also haben wir das gleiche Styling für die Schaltfläche, und Hover funktioniert auch. Das geht, das ist alles funktioniert und das ist, wie Sie benutzerdefinierte Widgets zu WordPress-Themes hinzufügen. 35. Informationsseite: In diesem Video werden wir die Seite „Über uns“ erstellen. Wir haben bereits die Vorlage dafür im Bootstrap-Design, also wird es ziemlich einfach zu machen sein. Gehen Sie in Ihren Texteditor, erstellen Sie eine neue Seite, und speichern Sie diese Seite als page-about.php, und um zu beginnen, werden wir die Seite News-Vorlage kopieren. Kopieren Sie also den Inhalt und fügen Sie ihn in die Info Vorlage ein. Wir brauchen nicht die Sidebar oder den Blog-Bereich, so dass wir so ziemlich alles von dieser Seite löschen können. Wir löschen das und ändern die Kommentare oben für den Vorlagennamen auf „Über uns“. Dann gehen Sie zum WordPress-Dashboard, und dann als nächstes werden wir diese Vorlage zu der Seite hinzufügen, die wir erstellt haben. Gehen Sie also zu den Seiten und suchen Sie dann nach der Seite „Über uns“ und klicken Sie auf „Bearbeiten“. Dann können wir die Vorlage in die Vorlage „Über uns“ ändern und diese Seite aktualisieren. Jetzt können wir auf die Bootstrap-Site gehen. Wenn wir den Ordner öffnen und dann die Seite Über uns im Texteditor öffnen. Ich werde das verkleinern und dann about.html in den Texteditor ziehen, und dann können wir den gesamten Abschnitt kopieren und den gesamten Abschnitt über uns kopieren. Wir brauchen den Header nicht. Das haben wir schon. Wir brauchen keinen Feature-Abschnitt. Das ist in WordPress getan. Kopieren Sie den Abschnitt „Über uns“ bis zum Tag des abschließenden Abschnitts. Kopieren Sie das, und gehen Sie dann zurück auf die Seite Über uns und fügen Sie diese zwischen Kopf- und Fußzeile ein. Als nächstes müssen wir nur den Bilddateipfad korrigieren, also werde ich nur das PHP von der Index-Seite kopieren. Suchen Sie einfach nach einem Bild. Dafür brauchen wir die Titelseite. Kopieren Sie also den PHP-Dateipfad und gehen Sie dann auf die Seite Über uns. Wir fangen von oben an. Wir beginnen mit dem Trennbild. Fügen Sie das also ein, und stellen Sie sicher, dass Sie den Schrägstrich vor dem Bilderordner haben. Scrollen Sie dann nach unten. Fügen Sie dies allen restlichen Bildern hinzu. Klicken Sie dann auf Speichern, und gehen Sie dann zur Seite Über uns, um zu sehen, ob das funktioniert. So unten im Fußzeilenmenü, der Abschnitt Über uns. Das scheint alles zu funktionieren. Wir müssen nur den Text auf dem vorgestellten Bild ändern und wir tun die in den Funktionen, die gleiche Weise wie alle anderen. Suchen Sie also die Feature-Text-Funktion. Wir werden WordPress erlauben, den Seitentitel auf die gleiche Weise zu ziehen , wie wir es mit der Nachrichtenvorlage getan haben. Also werden wir den Website-Namen Tranquil Spa haben, und dann wird die nächste Zeile der Seitentitel sein. Wenn wir dies zur gleichen elseif-Anweisung hinzufügen, kopieren Sie also die Seitenvorlage. Kopieren Sie jede Seitenvorlage und dann die Klammern, und fügen Sie das Symbol „Alle“ ein, das die beiden Pipes ist, und fügen Sie es dann ein. Aber dieses Mal ist die Seitenvorlage für die Seite-Info. Speichern Sie diese und aktualisieren Sie die Seite. Das funktioniert alles. Wir haben den Seitentitel und dann den Seitentitel unten. Das ist jetzt alles fertig mit der „Über uns“ -Seite. 36. Kontaktseite: Dies ist die Seite „Kontaktieren Sie uns“, die wir in der Bootstrap-Vorlage erstellt haben. Jetzt werden wir dies auf WordPress in einer ähnlichen Art und Weise wie die Bogenseite konvertieren , die wir im letzten Video erstellt haben. Es wird also ziemlich einfach sein, jetzt in die meiste harte Arbeit in Bootstrap zu konvertieren. So wie üblich, werden wir eine neue Seite und Dienste page-contacts.php erstellen. Dann werden wir die Seite News-Vorlage verwenden, um mit zu beginnen. Kopieren Sie also den gesamten Inhalt und fügen Sie ihn dann ein. Sichern Sie dann zu den Kommentaren. Wir werden das gleiche tun wie zuvor, aber diesmal mit Änderungen an Kontaktieren Sie uns. Dann speichern Sie das. Wenn Sie gehen über WordPress und dann in das Dashboard, und suchen Sie dann nach der Seite, die wir erstellt. Also die Kontaktieren Sie uns und bearbeiten. Ändern Sie dann die Vorlage, die wir verwenden werden, um Kontakt zu sein , und dann erhalten Sie diese Seite. Dann sichern Sie das Backup im Texteditor. Also werden wir den gesamten Blockabschnitt und auch die Seitenleiste löschen, bis zur Fußzeile. So lassen Sie die Kopfzeile und die Fußzeile in. Dann müssen wir die Kontakt-Us-Seite finden, die wir in Bootstrap erstellen. Also geh zurück in den Traquil-bs Ordner. Ziehen Sie dann den Kontakt oder HTML in Ihren Texteditor. Dann werden wir diesen Abschnitt kopieren, der die Kontaktleiste ist. Suchen Sie also nach den Kommentaren des Abschnitts „Kontakt“. Kopieren Sie dann bis zum Close- und Abschnitt-Tag, das sich kurz vor der Fußzeile befindet. Also kopieren Sie das. Fügen Sie diese dann zwischen der Kopf- und der Fußzeile ein. Dann zurück zum Seitenanfang. Also ein paar kleine Änderungen, die auf dieser Seite zu machen. Zuallererst haben wir die Überschrift der Ebene zwei, die nur statischer Text ist. Also werden wir dies ändern, um WordPress php zu sein. Also php, der Unterstrich-Titel. Dann schliessen Sie es ab. Verwenden Sie jetzt php, es ist ziehen Sie in den Seitentitel. Wir müssen die Bilddateipfade reparieren. Also gehe ich zurück auf die Titelseite und kopiere auch den gleichen Teil, den wir letztes Mal gemacht haben, nämlich die PHP. Vergessen Sie auch nicht den Schrägstrich. Also zurück in die Kontaktseite und fügen Sie diese vor dem Divid-Bild ein. Ich sehe die nicht mehr. Nein, ich denke, das ist okay. Also lass uns sehen, dass funktioniert. Also geh zurück auf die Seite. Sie dann im Fußzeilenmenü die Option Kontaktseite aus. Ok, gut. Das einzige, was zu tun ist, ist die Feature-Tech-Abteilung. Also sollten wir wissen, wie das jetzt zu tun ist, wenn Sie zu Functions.php gehen, und wir werden den gleichen Blog-Info-Namen und auch den Seitentitel verwenden. Es ist also ziemlich einfach hinzuzufügen. Wir können dies zur gleichen Funktion hinzufügen. Kopieren Sie also diese Seitenvorlage und fügen Sie sie dann unten ein. Wir müssen den großartigen Link setzen und Seite über die Seitenkontakte ändern. Ok. Also speichern und dann aktualisieren. Also, das ist die Kontaktieren Sie uns Seite jetzt fertig, und kommen Sie mit mir in das nächste Video, wenn wir die Falloff-Seite erstellen. 37. Benutzerdefinierte Seite 404: In diesem Video geht es darum, eine benutzerdefinierte 404-Seite zu erstellen. Eine 404-Seite ist, wo Sie gehen, wenn die Seite nicht gefunden wird. Also im Wesentlichen, wenn Sie ein wenig verloren auf der Website. Wenn wir auf die URL in der oberen Leiste gehen und wir geben in unbekannte Seite, wie eine Menge von A, und dann drücken Sie „Enter“, so ist dies die Seite, die Sie weitergeleitet werden. Wir haben die WordPress-Schleife und einige der Sidebar-Informationen, die eine der Backup-Vorlagen ist. Aber wir wollen etwas Schöneres und vielleicht auch einige Optionen und einige Links, um den Benutzer wieder auf LKW zu bekommen. Wenn wir zum Texteditor gehen und wie üblich, erstellen Sie eine neue Seite und speichern Sie diese Seite als 404.php, und kopieren Sie die Seite Info. Wir verwenden dies als Basis für unsere 404-Seite. Fügen Sie das in ein und speichern Sie es. Ändern Sie den Vorlagennamen oben. Wir werden diese 404-Seite nennen. Aktualisieren Sie das. Jetzt haben wir die Vorlage „Über uns“ verwendet, wenn wir die 404-Seite gefunden haben. Zunächst werde ich im Feature-Textbereich beginnen. Fügen Sie einfach ein wenig Text hinzu, damit der Benutzer weiß , dass er verloren geht und er wieder auf die Spur kommen muss. Gehen Sie zur function.php, und fügen Sie dann in der schließenden geschweiften Klammer nach dem Titel eine weitere elseif-Anweisung hinzu. Aber dieses Mal wird es sein, wenn die Seite 404 ist und dann die Klammern. Wenn die Seite also die 404-Seite ist, werden wir nur etwas Text ausgleichen. Du kannst in jeden Text schreiben, den du willst, aber ich werde sagen: „Whoops, wir sind ein wenig verloren.“ Dann sehen Sie, ob das gut funktioniert. Wir haben ein kleines Problem, schauen wir uns das an und sehen, was es ist. Ich glaube, es fehlt am Ende nur ein Semikolon. Jetzt erscheint der Text da drauf. Was ich erstellen werde, ist, dass ich den Beispieltext löschen werde, und dann werden wir vier separate Divs erstellen, die Sie mit einigen Links teilen werden. Die Links werden zu Archiven, Kategorien, Letzte Beiträge, alle durch die Tags sein. Wir werden diese Links mit den Widgets in ähnlicher Weise wie wir sie in der Sidebar verwendet haben. Gehen Sie zur 404-Vorlage. Anstelle von Über uns als Level-2-Überschrift, werden wir nur einen Text einfügen, um zu sagen: „Lasst uns wieder auf den Weg gehen“. Öffne das PHP_Echo und schließe das PHP ab. Der Text wird lauten : „Lasst uns wieder auf die Spur' mit einem Doppelpunkt am Ende. Da gibt es ein Problem. Werfen wir einen Blick. Da wir ein einfaches Anführungszeichen verwendet haben, müssen wir die umgebenden Anführungszeichen in doppelt ändern und dann das Semikolon am Ende nicht vergessen. Es sieht jetzt aus, wir haben die, Lassen Sie uns wieder auf Track Level 2 Richtung. Wir können den Beispieltext nach dem Lorem ipsum löschen. Löschen Sie den ersten Absatz und auch den zweiten Absatz, aber behalten Sie die umgebende Zeile, die wir wiederverwenden. Wir werden vier separate divs für die Widgets erstellen. Fügen Sie also ein div mit einer Klasse hinzu, die Bootstrap-Klasse von col-sm-6. Dann kopieren Sie einfach dieses div und fügen Sie drei weitere Male ein. Also haben wir vier Abschnitte. Wir haben Widgets früher im Kurs in der Sidebar Bereich berührt. Wir können auch Widgets in verschiedenen Angebotsteilen des Zeichens verwenden. Fügen wir sie hier hinzu. Öffnen Sie das PHP und dann zieht es das Widget. Wir verwenden die_widgets, und dann in Klammern verwenden wir den Namen des Widgets, das wir ziehen möchten. die Archive zu erhalten, verwenden wir zunächst WP_Widgets_Archives und dann ein Semikolon am Ende von dort. Die Kategorien sind genau die gleichen. Aber anstelle von Archiven sind es Kategorien, und dann werden wir einen Link für die letzten Beiträge zur Verfügung stellen. Also kleben Sie das hinein. Aber dieses Mal in Klammern, es ist WP_Widgets, dann Letzte Beiträge oder Recent_Posts. Um dann eine Liste der verfügbaren Tags anstelle von Archiven zu erhalten, ist es Tag_Cloud. Also Tag_Cloud und speichern Sie das, dann aktualisieren Sie den Browser. Es sieht so aus, als gäbe es ein Problem mit den letzten Beiträgen. Das muss neu sein, also entfernen Sie die s am Ende dort. Da gehen wir. Jetzt kann der Benutzer auf eine Arbeitsseite zurückkehren, indem er einige der Links unten auswählt. Übrigens, wenn Sie verschiedene Widgets oder verschiedene Links verwenden möchten, finden Sie diese in den Codecs unter dem Widget-Abschnitt. Du brauchst die vier, die ich dort gezeigt habe, nicht zu benutzen. Nun, das funktioniert alles, ich möchte nur ein wenig Styling hinzufügen, nur um es in den Rest der Website passen. Wir werden den gleichen Rahmen mit einem Pixel mit den abgerundeten Ecken um jeden der vier Abschnitte setzen. Gehen Sie zur style.css und es wird einen 404-Abschnitt erstellen. Kopieren Sie einen der Kommentare und gehen Sie dann direkt nach unten. Ich werde die Kommentare auf der 404-Seite machen. Also die Widgets, Sie haben eine Klasse von Widgets. Um das Styling konsistent zu halten, werden wir die gleichen Stile verwenden, die wir für die Sidebar oder die Sidebar Module verwendet haben. Wenn Sie zum Abschnitt Sidebar gehen, suchen Sie nach der Sidebar Modulklasse, und kopieren Sie dann alle diese. Fügen Sie diese dann wieder in den Widget-Bereich ein. Speichern Sie das, dann werfen Sie einen Blick. Also brauchten wir das jetzt, das sieht viel besser aus, und es sieht einfach ein bisschen alt aus mit den Boxen auf geraden Höhen. Also, nur um das ein bisschen besser aussehen zu lassen, werde ich eine minimale Höhe von 300 Pixeln hinzufügen und das dann aktualisieren. Stellen Sie nun sicher, dass die Abschnitte mit wenig Inhalt etwas mehr Höhe einnehmen. Danke fürs Anschauen, und das ist das Ende unserer 404-Seite. 38. So organisierst du deinen mit einer Vorlage: Beim Erstellen von Websites oder bei jeder Art von Codierung im Allgemeinen möchten wir versuchen und vermeiden, den gleichen Code immer wieder neu zu tippen. Wenn wir auf unsere Homepage gehen, haben wir den Bereich „Einrichtung“. Wir haben verwendet, ist ein paar Mal auf der Website jetzt. Also haben wir den gleichen Code wiederverwendet. Also müssen wir auf der Titelseite. Wenn wir auch auf die „Über uns“ -Seite gehen, verwenden wir den gleichen Abschnitt unten. Es ist auch auf der 404-Seite, die wir im letzten Video erstellt haben. Eine Möglichkeit, die Anzahl der Codezeilen auf unserer Website zu reduzieren und unsere Website ein wenig organisierter zu machen, besteht darin, den Get-Template-Teil zu verwenden. Dies ist im Grunde nur ein Abschnitt unserer Website , den Sie auf eine eigene Datei setzen. Wir können es dann genauso wie mit der Kopfzeile und der Fußzeile auf unsere Seite aufrufen . Um den Code für diesen Abschnitt zu erhalten, werden wir eine neue Seite erstellen. Ich werde das die content-facilities.php nennen. Beginnen wir, indem wir auf die Titelseite unserer Website gehen. Wenn wir für die Einrichtung Abschnitt suchen, das ist dieser Teil hier. Es ist das div mit der Klasse der Zeile auf Einrichtungen. Suchen Sie nach dem schließenden und Zeilen-Tag. Also schneiden Sie diesen Inhalt aus. So schneiden Sie das, um sicherzustellen, dass Sie den Behälter immer noch an Ort und Stelle lassen. Dann können wir in der Datei, die wir gerade erstellt haben, dies einfügen und dann speichern. Gehen Sie dann zurück auf die Titelseite, und öffnen Sie in demselben Abschnitt, in dem wir gerade diesen Inhalt entfernt haben, die PHP-Tags. Dann verwenden wir gets_templates_part. Dann verwenden wir in den Klammern den Namen der Vorlage, die wir gerade erstellt haben. Seine Content-Einrichtungen. Lass uns das speichern und auf die Titelseite gehen und sehen, ob es gut funktioniert. Ja, das ist also alles da. Nur um zu zeigen, dass es es aus der Vorlage zieht. Wenn wir dort nur einen Rechtschreibfehler machen und dann aktualisieren. Sie werden jetzt sehen, dass das entfernt wird. Lassen Sie uns das korrigieren und sparen. Kopieren Sie diesen Abschnitt von PHP, und wir werden das gleiche in 404 Seite auf der Bowers-Seite tun. Also beginnen wir mit der Seite über, dann suchen Sie nach dem div mit der Klasse der Einrichtungen. Suchen Sie in den Tags close und row und löschen Sie diesen Abschnitt, und fügen Sie ihn dann in PHP ein. Das gleiche mit der 404-Seite, so wie die Zeile Einrichtungen schließen Tag. Legen Sie die Paste in den Get-Template-Teil und drücken Sie „Speichern“. Gehen wir auf die Website und sehen, ob es funktioniert. Wir wissen, dass alles von Seite funktioniert gut. Gehen wir zur „Über uns“ -Seite und es ist gerade dort. Lassen Sie uns eine Adresse eingeben, die wir erkennen werden, und wir überprüfen auf die 404-Seite. Da ist wieder der Gebäudeabschnitt unten. Wir können dies mit jedem Abschnitt der Website verwenden, den Sie möchten oder wenn Sie in Ihrem eigenen benutzerdefinierten Design erstellen. Wenn Sie finden, dass Sie im gleichen HTML immer und immer wieder erstellen, legen Sie es einfach in eine eigene Vorlage und ziehen Sie nach innen Sie erhalten Template-Teil. Es macht Ihre Website wirklich viel organisierter. Also, das ist es, und ich werde Sie im nächsten Video sehen, wo wir die benutzerdefinierte Vorlage für die Suchseite erstellen. 39. Benutzerdefinierte Suchvorlage: Willkommen zurück Jungs. In diesem Video geht es darum, die Suchvorlage zu erstellen. Vor ein paar Videos, als wir das Sidebar-Widget erstellt haben, haben wir auch ein Suchfeld hinzugefügt. Wenn Sie im Suchfeld nach etwas suchen, wie zum Beispiel Nachrichten, können Sie sehen, dass es ziemlich direkt außerhalb des Feldes funktionieren sollte. Es gibt nichts, was wir wirklich tun müssen, damit das funktioniert. Aber eine Sache, die wir tun können, ist, unserem Thema eine benutzerdefinierte Suchvorlage zu geben, weil es im Moment nur Standard zurück auf die Indexseite ist. Deswegen haben wir das ziemlich ähnliche Layout wie der Blog. Was für jetzt in Ordnung ist, weil wir wollen, dass die Suchseite wie der Blog aussieht. Aber wir erstellen eine benutzerdefinierte Vorlage, damit wir den Feature-Text oben hinzufügen können . Außerdem zeigen wir den Begriff im Feature-Abschnitt an, nach dem der Benutzer recherchiert hat, und drucken Sie auch eine Anweisung aus, falls keine Suchergebnisse gefunden wurden. über den Texteditor, neue Seite, speichern Sie als search.php. Es sieht ziemlich ähnlich wie die Blog-Seite. Kopieren Sie den Inhalt der Indexseite, um zu beginnen, und fügen Sie ihn in ein. Nur um zu überprüfen, ob die Suchvorlage tatsächlich funktioniert und die Indexseite überschreibt , geben Sie einfach einen zufälligen Text ein und speichern Sie und aktualisieren Sie dann. Da geht's. Wir können nur sehen, dass der Text, den wir erstellt haben, an der Spitze ist und das bedeutet, dass die Vorlage wirksam wird. Das werden wir jetzt umziehen. So ziemlich die ganze Arbeit, die wir jetzt für diese Vorlage tun müssen, ist auf der Funktionsseite, da wir im Header-Abschnitt arbeiten werden, um den Feature-Text zu erstellen. Gehen Sie zu der functions.php und dann unterhalb der 404, fügen wir eine weitere elseif-Anweisungen nur auf der geschweiften Klammer dort hinzu. Also elseif ist_search. Ganz oben auf dem Text, werden wir einfach einen Tranquil Spa offiziellen Blog machen. Kopieren Sie das und fügen Sie es dann ein und lassen Sie uns sehen, ob das funktioniert. Darunter fügen wir ein break-Tag und ein Semikolon am Ende dort hinzu. Dann werden wir unten die Suchergebnisse oder den Suchbegriff ausdrucken, nach dem der Benutzer gesucht hat, und anstatt dies an den Browser zu wiederholen, werden wir printf verwenden und dann in den Klammern sind wir gehen, um zu beginnen, indem Sie einige Klartext eingeben. Suchergebnisse für und dann den Doppelpunkt. Um dann in den Ergebnissen der Suchabfrage anzuzeigen, verwenden Sie den Prozentsatz und die s und setzen Sie dann ein Komma nach diesem Abschnitt, und verwenden Sie dann die get_search_query Funktion, also get_search_query und diese ganze Sache muss von Klammern umgeben sein. Also eine vorher, eine ganz am Ende mit einem Semikolon. Der Grund, warum wir printf anstelle des Echos verwenden, ist, weil wir es in Formatierung in den Suchergebnissen verwenden und printf ermöglicht es uns, dies zu tun. Speichern Sie das und überprüfen Sie, ob es funktioniert, indem Sie auf „Aktualisieren“ klicken. Sie können dies noch ein paar Mal versuchen, um zu überprüfen, ob es funktioniert. Wir haben die Nachrichten als aktuellen Suchbegriff, also lasst uns dies in Haare ändern und das scheint gut zu funktionieren. Ich werde noch einen machen. Ich werde das nicht posten, also überprüfen wir Lorem die Lorem Ipsum und wir sollten viel Post dafür bekommen. Das funktioniert alles gut. Wenn Sie bemerken, wenn wir nach etwas suchen, bevor wie Haare, wir haben die Fehlermeldung, dass leider keine Beiträge Ihren Kriterien entsprechen. Wir wollen dies ein wenig spezifischer für die Suche als für die Beiträge machen. Gehen Sie zu der search.php und scrollen Sie dann nach unten, und so finden wir die Fehlermeldung dort, also löschen Sie das einfach und stattdessen fügen wir unsere eigene benutzerdefinierte Nachricht von sorry, keine Übereinstimmungen für und dann zieht es das Wort, das der Benutzer gesucht. Wir werden einfach am Ende dort die Funktion von get_search_query hinzufügen und dann den Punkt zum Verketten, kleinen Text darauf beginnen, indem Sie die Anführungszeichen erneut öffnen und ein Komma von bitte erneut suchen. Lasst uns das speichern und einen Blick werfen. Da gibt es eine Fehlermeldung, also schauen wir uns das an. Es war ein Rechtschreibfehler dort , der get_search_query sein sollte. Nun, das funktioniert, wir haben die Fehlermeldung. Entschuldigung, keine Übereinstimmungen für, Ich brauche nur das Leerzeichen nach dem Wort für und dann aktualisieren. Haaren suchen Sie bitte erneut. Vielen Dank für das Ansehen, und das ist, wie wir eine benutzerdefinierte Suchseite in WordPress erstellen. 40. Erweiterte benutzerdefinierte Felder Teil 1: Willkommen zu diesem Video über erweiterte benutzerdefinierte Felder. Bisher alle Änderungen, die wir bisher an dem Thema vorgenommen haben, haben wir im Texteditor codiert, obwohl, wenn der Endbenutzer Ihres Themas einige Informationen, etwas Text oder einige Bilder ändern möchten , müssen wir einen Weg zur Verfügung stellen , um Inhalte schnell und einfach zu ändern, ohne zu wissen, wie man kodiert, und eine gute Möglichkeit, dies zu tun, ist das Hinzufügen erweiterter benutzerdefinierter Felder. Wenn Sie auf die Website gehen, die advancedcustomfields.com ist, ist dies die Website für ein wirklich einfach zu bedienendes Plugin, das wir in unserem Thema in diesem Video implementieren werden. Da dies ein Plugin ist, können wir dies einfach im Dashboard hinzufügen. Wechseln Sie zum Dashboard, wählen Sie Plugins aus, und fügen Sie dann neue hinzu. Falls Sie noch nicht ein WordPress-Plugin verwendet haben, ist es nur eine Möglichkeit, dem WordPress-Aufruf zusätzliche Funktionalität hinzuzufügen, und es gibt Tausende von verschiedenen WordPress-Plugins zur Verfügung, und es ist wirklich eine schnelle Suche wert, um einige zu finden tolle Funktionen zum Hinzufügen. Ich werde nach erweiterten benutzerdefinierten Feldern suchen, und dann Eingabetaste. Die Version, die ich verwenden werde, ist die erste, die erscheint, das sind die erweiterten benutzerdefinierten Felder, und wählen Sie dann „Jetzt installieren“. Sobald Sie unten die Erfolgsmeldung erhalten haben, klicken Sie auf „Plugin aktivieren“. Jetzt, das aktiviert ist, erhalten wir eine neue Option im Dashboard, also gehen Sie zu benutzerdefinierten Feldern und klicken Sie darauf. Ich werde Ihnen zeigen, wie Sie dies tun, indem Sie durch die Titelseite gehen undeinige der Bereiche dort ändern, einige der Bereiche dort ändern, wie zum Beispiel den Text auf den Büroabschnitten. Ich werde eine Feldgruppe eingeben, bei der es sich um eine Gruppe von Feldern handelt, die Sie ändern möchten. Wählen Sie die Schaltfläche „Neu hinzufügen“, und halten Sie diese organisiert. Ich werde diesen Abschnitt die Titelseite nennen, dann veröffentlichen, und dann werde ich ein Feld hinzufügen, und ein Feld ist einer der Bereiche, die Sie ändern möchten. Wenn wir in unsere Titelseite gehen, so zurück in den lokalen Gastgeber und die Tranquil Website. Ich werde damit beginnen, den Feature-Text auf der Vorderseite dort zu ändern, und das wird ein Feld sein. Zurück in das Dashboard, die Feldbeschriftung ist der Name, also nennen wir dies den Feature-Text, und wenn Sie einfach Tab drücken, wird WordPress automatisch Feldnamen generieren, und dies ist der Name, der werden wir dem Code später hinzufügen. Der Feldtyp ist in Ordnung als Text, und dann können wir einige Anweisungen hinzufügen, die im Dashboard für den Benutzer angezeigt werden. Ich werde dies ändern, um dieses Feld zu verwenden, um den Haupt-Feature-Text zu ändern, und erforderlich, ja, Sie werden nicht immer da sein. Sie können einen Standardwert erstellen, wenn Sie möchten, aber weil er erforderlich ist, wird er vorerst nicht wirklich benötigt. Fügen Sie dieses Feld dort hinzu. Jetzt haben wir unser Feature-Textfeld enthalten, und wir haben den Feldnamen feature_text. Ich werde nur diesen Namen kopieren, und dann im Funktionsbereich, wenn wir nach der FeatureText-Funktion suchen, und im Titelseitenabschnitt, können wir diese voll ansprechende Premium-Spa-Nachricht löschen. Löschen Sie das, und dann setzen wir in die Funktion, the_field, und dann in Klammern setzen wir den Namen des Feldes ein, das wir gerade erstellt haben. Wir hatten das vorher kopiert, also fügen Sie feature_text ein und speichern Sie es. Wenn Sie zurück auf die Homepage gehen und aktualisieren. Es gibt vorerst nichts da, weil wir das in das Dashboard einfügen müssen. Da wir nur möchten, dass diese benutzerdefinierten Felder auf der Titelseite angezeigt werden, müssen wir den Speicherort ändern, um den Seitentyp gleich der Titelseite zu sein, und dann aktualisieren Sie das, also zurück nach oben und drücken Sie „Aktualisieren“. Wenn wir nun auf die Titelseite gehen und dann die Seite bearbeiten und dann nach unten scrollen, sollten wir den Feature-Text-Abschnitt sehen, den wir gerade erstellt haben. Jetzt haben wir das als Teil des Armaturenbretts. Der Benutzer kann verschiedene Teile der Website hinzufügen oder ändern, ohne Code zu kennen. Sie können die Überschrift wieder einfügen, also voll reaktionsschnell, und das break-Tag, PREMIUM SPA THEME und das break-Tag, FOR WORDPRESS, und aktualisieren und dann die Seite anzeigen. Da gehen wir, also ist das unser Text wieder an Ort und Stelle. Wenn wir zurück zur Seite bearbeiten, eine Sache, die ich nur entfernen möchte, ist der Content-Editor, weil unsere Seite über die Vorlage generiert wird. Um das zu entfernen, gehen Sie einfach zu den erweiterten benutzerdefinierten Feldern, und dann im Abschnitt „Auf dem Bildschirm ausblenden“, überprüfen Sie einfach den Inhalts-Editor, aktualisieren Sie dann und aktualisieren Sie den Abschnitt „Seite bearbeiten“, und jetzt ist das jetzt weg. Da gehen Sie, so ist, wie Sie ein benutzerdefiniertes Feld in WordPress hinzufügen. Wir werden die Titelseite im nächsten Video fortsetzen. Wir beginnen in benutzerdefinierten Feldern bis zum neuesten Office-Abschnitt. 41. Erweiterte benutzerdefinierte Felder Teil 2: Jetzt verstehen wir ein wenig mehr darüber, wie Sie erweiterte benutzerdefinierte Felder verwenden , indem Sie den vorgestellten Textbereich ändern. Wir werden mit der Titelseite fortfahren und ich werde Ihnen zeigen, wie es für die neuesten Angebote Abschnitt zu tun. Gehen Sie zurück in das Dashboard, und klicken Sie dann auf die Registerkarte Benutzerdefinierte Felder, und klicken Sie dann auf die „Startseite“. Da wir die Erstellung der kostenlosen Sonderangebot Aktionen, was Sie werden ziemlich ähnlich sein, werde ich eine Registerkarte hinzufügen, um Abschnitt ist aus. Fügen Sie ein neues Feld hinzu und das Label dafür kann Angebot 1 sein, und der Feldtyp wird ein Tab sein, und fügen Sie das dann hinzu. Dann eine zweite Registerkarte für das Angebot 2, und ändern Sie das Textfeld in ein Tab, und das gleiche für das Angebot Nummer 3. Ändern Sie dies erneut in eine Registerkarte, und schließen Sie dann. Beginnen wir jetzt mit dem Angebot 1. Dieses Mal fügen wir ein Feld hinzu. Dieses Feld ist der Angebotspreis. Wir wählen den generierten Feldnamen aus. Da dies der Preis ist, müssen wir es von Text ändern, um Zahl zu sein, erforderlich? Ja. Ich werde einfach das Feld schließen. Also, jetzt haben wir den Angebotspreis. Das wird für das erste Angebot sein. So können wir einfach ziehen und diese unter die Registerkarte Angebot 1 legen. Also dann erstellen wir jetzt den Angebotsnamen. Dies kann als Text in Ordnung sein, erforderlich? Ja, und dann Nahaufnahme. Dann setzen Sie den Angebotsnamen direkt unter dem Angebotspreis. Da jedes dieser Sonderangebote zwei Textzeilen hat, machen wir zwei separate Felder. Also bieten Sie Zeile 1 an, wir werden das auch nach Bedarf setzen. Dann fügen Sie auch Angebotslinie 2 hinzu, es ist in Ordnung. Ist Text erforderlich? Ja. Ich werde unsere Felder schließen und auch das schließen. Ziehen Sie diese dann in der ersten Registerkarte nach oben. Nun, weil wir die gleichen Felder für das Angebot 2 und Angebot 3 verwenden werden. Wenn wir nur in das Angebot 1 Felder gehen, könnten wir einfach auf „Duplizieren“ klicken. Ich werde den Text des Angebotspreises als gleich halten. Aber wir müssen den Feldnamen ändern , den ich anbieten müssen_price_2, dann schließen. Die, die wir gerade erstellt haben, das ist die offer_price_2, dann ziehen Sie diese nach unten unter die Registerkarte Angebot 2, die gerade da ist. Unterhalb des Angebotspreises duplizieren wir den Namen des Angebots. Ich entferne einfach die Kopie und ändere dies in offer_name_2 für den eindeutigen Feldnamen. Dann schließen Sie das. Offer_Name_2, ziehen Sie diese nach unten auf die Registerkarte Angebot 2 unterhalb des Preises. Ich muss also die Angebotslinie 1 und die Angebotsposition 2 duplizieren. Also duplizieren Sie das. Bieten Sie Linie 1 an, halten Sie es dabei. Dies werde ich den eindeutigen Namen in offer_2_line_1 ändern und dann schließen. Also offer_2_line_1, ziehen Sie dies wieder in den zweiten Abschnitt, direkt unter dem Namen, und wir können das duplizieren. Dieses Mal, seine Angebotslinie 2. Dieses Mal, seine offer_2_line_2, und schließen. Also hoffe ich, dass das bisher Sinn ergibt. Also haben wir die Registerkarte für Angebotszeile 1 und das erste Angebot hat einen Preis, einen Namen, und dann die beiden Zeilen, und dann eine zweite Registerkarte für das Angebot 2 und wieder, wir haben den Preis, Namen und die beiden Zeilen, stellen Sie sicher, dass jeder einzelne einen eindeutigen Feldnamen hat. Jetzt müssen wir nur noch ein drittes Mal für das Angebot machen 3. Duplizieren Sie also den Preis, halten Sie den Namen unter offer_price_3 gleich. Schließen Sie dann das Feld, und ziehen Sie das offer_price_3 nach unten zum Angebot 3. Nach dem Angebotspreis benötigen wir erneut den Namen des Angebots. Also duplizieren wir offer_name_3. Dann schließen Sie das und ziehen Sie den Angebotsnamen 3 unter den Preis. Dann sind wir jetzt fast fertig, wir müssen nur die Zeile 1 und Zeile 2 kopieren. Also bieten Sie Zeile 1 an und dann ist der Feldname offer_3_line_1, und dann schließen Sie, und ziehen Sie das an seine richtige Stelle und duplizieren Sie Zeile 2, diesmal ist der eindeutige Name offer_3_line_1, und ziehen Sie es dann nach unten. Jetzt haben wir den „Aufnahme“ -Button nicht getroffen. Ich zeige Ihnen, warum wir es jetzt in Tabs setzen. Wenn Sie auf die Homepage gehen und dann „Seite bearbeiten“ auswählen, haben wir jetzt das Angebot 1, Angebot 2 und Angebot 3 in einzelnen Registerkarten, während wenn wir die Tabs nicht in, wir hätten eine lange Liste von Feldern und es kann für den Benutzer verwirrend werden. Also, wenn wir in die front-page.php gehen und dann können wir die PHP hinzufügen, um zu den benutzerdefinierten Feldern zu verlinken. Also gehen Sie auf die neuesten Angebote Abschnitt , die wirklich entscheiden wird, aber um Ihnen ein kleines Zimmer zu geben. Zunächst einmal, wenn wir den Preis des ersten Angebots löschen und dann das PHP öffnen, und dann verwenden wir das gleiche wie das letzte Video, the_field, und dann in Klammern, geben Sie den Feldnamen ein. Der erste, wenn wir zurück in das Dashboard auf den benutzerdefinierten Feldern gehen, hatte der Angebotspreis den Feldnamen des Angebots auf diesem Anrufpreis. Wir verknüpfen das dort, und kopieren Sie es dann und fügen Sie es dann anstelle der Überschrift der Ebene 3 ein. Dies wird als Angebotsname bezeichnet. Ändern Sie also offer_price in offer_name. Der Family Pool, fügen Sie die PHP in, und das ist die offer_line_1. Great Day Out wird in offer_line_2 geändert. Das ist es für das erste Feld, also wenn wir das speichern und dann zur Homepage gehen und nach unten scrollen. Sie sollten jetzt sehen, dass wir einen leeren Abschnitt mit den neuesten Angeboten haben, da wir den Text nicht auf der Seite Bearbeiten eingefügt haben. Angebot 1, weil das alles leer ist, haben wir nichts auftauchen, aber wir werden das bald beheben. Gehen Sie weiter zum zweiten Angebot. Dies ist offer_price_2, dann offer_name_2. Der Text in der ersten Zeile. Wir müssen das in offer_2_line_1 ändern, dann offer_2_line_2, dann bis zum dritten. Schließlich der Preis. Also offer_price_3. Dann darunter, offer_name_3. Dann der Text. Also sein offer_3_line_1. Dann schließlich ist es offer_3_line_2. Also sparen Sie das. Nun sollte unsere Homepage leer sein oder zumindest sollte das Angebot sowieso leer sein. Alles, was jetzt noch übrig ist, ist, den Inhalt wieder in den Abschnitt „Seite bearbeiten“ zu setzen. Also, wenn Sie losgehen und das selbst tun wollen, fühlen Sie sich frei, das zu tun. Wenn nicht, dann folgen Sie mir. Zunächst einmal war der Angebotspreis $60, der Angebotsname war FAMILIENANGEBOT, Linie 1 war Family Pool, dann Great Day Out, dann gehen Sie zu bieten 2. Dies war $120, der Angebotsname war FÜR DIE BRIDE, Angebot Linie 1 war Hair & Make Up, Linie 2 war das Full Verwöhn-Paket, und dann auf Angebot 3. Der Preis war $90, und das war WEEKEND PASS, Linie 1 war Modern Facilities, dann Linie 2 war Perfektes Geschenk. Aktualisieren Sie das dann und gehen Sie zur Startseite. Werfen wir einen Blick darauf. Wir vermissen nur eines der Felder dort. Mal sehen, was das Problem ist. Offer_3_line_2, das sieht in Ordnung aus. Gehen wir in das Dashboard in Benutzerdefinierte Felder. Werfen wir einen Blick darauf und sehen, was das Problem ist. Ich glaube, wir haben zwei Unterstriche. Lasst uns das einfach aktualisieren und auf die Titelseite zurückkehren, aktualisieren. Immer noch nichts in, keine Minuten wieder hinzugefügt, ich ändere den Feldnamen. Bieten Sie Nummer 3 an, die das perfekte Geschenk hinzufügen muss und aktualisieren Sie das. Da gehen wir. Das funktioniert jetzt alles. Ich möchte nur eine weiße horizontale Regel hinzufügen, um die beiden Zeilen dort zu trennen. Fügen Sie dies einfach zwischen offer_line_1 und offer_line_2 hinzu. Offer_line_1, direkt nach dem schließenden p-Tag, fügen Sie dort eine hr hinzu. Dann kopieren. Dann das gleiche nach offer_line_2, tun Sie das gleiche im zweiten Angebot. Nach Zeile 1 und 2, das gleiche im dritten Angebot 2. Speichern und aktualisieren Sie den Browser. Da gehst du. So verwenden Sie erweiterte benutzerdefinierte Felder in WordPress-Themes. Fühlen Sie sich frei, weiterzumachen und fügen Sie so viele Felder wie Sie möchten zur Website hinzu. Aber ich werde das vorerst dort lassen. Vielen Dank für das Zuhören und sehen Sie im nächsten Video. 42. Benutzerdefinierte Kopfzeilenbilder: In den letzten Videos haben wir uns erweiterte benutzerdefinierte Felder angesehen und dem Administrator erlaubt , bestimmte Dinge wie den Text auf der Website zu ändern. In diesem Video werden wir unsere Website noch anpassbarer machen, indem wir dem Administrator oder einem bestimmten Benutzer erlauben , das Hintergrundbild zu ändern , ohne zu wissen, wie man kodiert. WordPress ermöglicht es uns, dies in dem zu tun, was wir benutzerdefinierte Header nennen. Wenn Sie zu Google gehen und nach den benutzerdefinierten Codex-Headern suchen, sollte dies das erste Ergebnis sein. Also gehen Sie zum benutzerdefinierten Header Abschnitt und dann, wenn wir die Seite nach unten scrollen, und wenn wir nach dem Beispiel suchen, so kopieren Sie dieses Beispiel und gehen Sie dann in die functions.php. Dies kann ganz nach unten gehen, aber immer noch innerhalb der PHP-Tags. Wir werden nicht die feste Breite haben, also können wir diese oder die feste Höhe entfernen. Ich werde diese beiden Zeilen nur kommentieren, und dann haben wir den Standard-Bildpfad für den Fall, dass der Benutzer kein Bild hochlädt. Das Standardbild wird also der Lakebg sein, und das war unser Bilderordner, also ist das okay. Speichern Sie das und zeigen Sie eine weitere Sache in das Array, das Uploads ist. Dies ermöglicht es dem Benutzer, ein Bild hochzuladen, so dass Uploads gleich oder größer als und das wird ein boolescher Wert von true sein. Dann, wenn wir in die header.php gehen, können wir den Speicherort des Bildes ändern. So finden Sie diese Datei und dann scrollen Sie nach unten zum Feature-Abschnitt am unteren und dann können wir die Bildquelle löschen, so dass alles zwischen den doppelten Anführungszeichen. Anstatt dieses Bild zu haben, das aus unserem Theme-Ordner gezogen wird, können wir den benutzerdefinierten Header verwenden. Also zwischen den PHP-Tags, verwenden wir die WordPress-Funktion der Header Unterstrich Bild und speichern Sie das und gehen dann über zum WordPress-Dashboard, bis zum Erscheinungsbild und dann Anpassen und wählen Sie dann die „Header Image“ und können wir ein neues Bild hinzufügen. Das ist also die Miniaturansicht der Beiträge, also laden wir ein neues Bild hoch. Also in Ihrem Bilderordner gibt es einen zweiten Hintergrund und jetzt, der lakebg2 ist. Wählen Sie das und Öffnen aus, und fügen Sie dann die alten Textile-See-Hintergründe ein, wählen Sie das aus und überspringen Sie das Zuschneiden und dann Speichern und Veröffentlichen. Also, sobald ich gespeichert habe, markieren Sie einfach das X in der Ecke und gehen Sie dann zu Visit Site und da ist unser neues Bild als Hintergrund. Das macht es nun wirklich einfach für die Websitebesitzer, das Hintergrundbild zu ändern. Sie müssen nur in das Dashboard gehen und anpassen, wie wir es gerade getan haben, und das ist das Ende dieses Videos. Also danke fürs Zuschauen. 43. Kurseinheit: so stellst du deinen Beitrag ein: Willkommen zurück. Unser WordPress-Theme fängt an, wirklich gute Form zu nehmen. In diesem Video geht es darum, die Blog-Beiträge noch anpassbarer zu machen, indem Sie die Post-Klassenfunktion hinzufügen. Wenn Sie mehr Informationen über die Postklasse erfahren möchten, gehen einfach zum WordPress Codex und suchen Sie nach der Funktion der Postklasse. Nun, im Grunde, das Hinzufügen einer Post-Klasse für unser Thema ermöglicht die WordPress-Theme Autoren eine bessere CSS Kontrolle über die Beiträge haben. So können wir zum Beispiel CSS-Werte für die Beiträge durch ihre ID oder durch den Kategorienamen festlegen. So können wir vielleicht den Blog mit verschiedenen Hintergrundfarben haben , abhängig vom Kategorienamen oder dem Tag. Als Beispiel werde ich dies in unser Thema setzen und Styling durch die ID zulassen. Also derzeit, wenn wir in unseren Blog gehen, und wenn wir in den Blog-Bereich gehen. Dann, wenn wir in die Chrome Developer Tools gehen, klicken Sie mit der rechten Maustaste auf Elemente inspizieren, und dann, wenn wir die Lupe verwenden, und wenn wir nach einem der Blogs suchen, die die Klasse von Blog-Post hat, und dann schauen, können Sie sehen Sie, dass das div eine Klasse von Blogbeiträgen hat, aber es gibt keine individuelle ID. Wenn wir also einzelne Beiträge stylen wollten, könnten wir das nicht tun, weil alle Beiträge die gleiche Klasse haben. Also lassen Sie uns eine individuelle ID zu jedem dieser Blogbeiträge hinzufügen. Also werde ich das jetzt einfach schließen, und dann, wenn Sie zurück zum Codex gehen und unter der Überschrift der Verwendung kopieren Sie das PHP. Gehen Sie dann zur Indexseite und suchen Sie dann das div mit der Klasse des Blog-Posts, und löschen Sie dann einfach diese Zeile und fügen Sie dann das PHP ein. Dadurch wird nun jedem der Blogbeiträge eine benutzerdefinierte ID hinzugefügt. Wir haben gerade die Klasse von Blog-Post gelöscht. Also lassen Sie uns das jetzt wieder hinzufügen, und dann speichern Sie das. Dann, wenn wir den Blog aktualisieren, und es wird zurück in die Entwickler-Tools gehen, wie wir zuvor getan haben, und dann die Lupe und wählen Sie den Blog-Beitrag. Wenn Sie nun auf der rechten Seite schauen, können Sie sehen, dass die Post die Klasse des Blog-Posts hat, aber direkt danach gibt es jetzt eine generierte ID. Wenn wir also diesen einzelnen Beitrag stylen wollten, haben wir jetzt eine Referenz für das CSS, und Sie können dies auf ähnliche Weise verwenden, wenn Sie den Kategorienamen oder einen der anderen Werte auf dort verwenden möchten. Wir gehen einfach zum CSS und überprüfen, dass dies in Ordnung ist. Also haben wir eine Blog-Post-ID von 50 dort, und dann schieben wir eine eindeutige unten. Also das ist der Beitrag alle 40, und Sie können sehen, dies ist 38, 36, 34. Also gehen wir einfach rüber zur style.css. Wenn Sie dann zum Blog-Abschnitt gehen, werden wir hier nur einen Stil hinzufügen. Also die ID von post-50, die die oberste ist, und um zu überprüfen, dass es funktioniert, geben wir ihm einfach eine Hintergrundfarbe. Jetzt werde ich das auf bbb setzen und das speichern, und 50 war die oberste. Also werde ich Aktualisieren drücken. Also gehen wir hin. Die Hintergrundfarben wurden also in Grau geändert, und das liegt daran, dass dies eine eindeutige ID hat. Daher findet das Styling nur für diesen Blogbeitrag statt. So hoffentlich gibt Ihnen das einige Ideen, wie Sie Ihr Thema anpassen und stylen können. Also danke fürs Ansehen und ich sehe dich im nächsten Video. 44. So machst du dein Kontaktformular funktionell: Willkommen zurück. Zu Beginn des Kurses haben wir die Seite „Kontaktieren Sie uns“ erstellt, und der Link befindet sich unten in der Fußzeile. Wenn wir auf die Seite „Kontaktieren Sie uns“ gehen, haben wir immer noch das Bootstrap-Design ganz unten für den Abschnitt „Senden Sie uns Nachricht“. Aber es funktioniert nicht wirklich in der Minute, weil es nur HTML und CSS sind. In diesem Video werden wir sicherstellen, dass dies funktioniert, indem wir ein beliebtes Plugin namens Kontaktformular 7 verwenden. Also gehen wir zum „Dashboard“ und wählen Sie die „Plugins“ und dann in das Suchfeld, also gehen wir zuerst zu „Neu hinzufügen“, dann suchen Sie im Suchfeld nach Kontaktformular 7. Kontaktformular 7 ist eines der beliebtesten WordPress-Plugins zum Erstellen von Kontaktformularen. Klicken Sie auf „Jetzt installieren“, und haben nur ein paar Momente zu installieren, dann gehen Sie zu"Activate Plugin“. Sobald Sie das installiert haben, sollten Sie nun sehen, dass es im Dashboard eine neue Option namens Kontakt gibt. Klicken Sie darauf, und standardmäßig gibt es dort bereits ein Kontaktformular als Beispiel. Klicken Sie auf „Bearbeiten“, und wenn wir einen Blick darauf werfen, wie es konstruiert ist. Also dieser Abschnitt hier wird unser Kontaktformular sein. In nur einem Moment gehen wir zu der Kontakt-Us-Vorlage und dann schneiden wir den Kontaktbereich aus und fügen ihn ein. Wir müssen einige der Werte im Formular mit der gleichen Formatierung ersetzen , die das Kontaktformular erfordert. Wenn Sie mit diesem Formular arbeiten, ist jeder einzelne der Abschnitte eine bestimmte Eingabe. Wir müssen den Eingabetyp und auch den Rest der Informationen zwischen den eckigen Klammern setzen. Lassen Sie uns zunächst einen Blick auf das erste Beispiel werfen. Dadurch wird eine Eingabe mit dem Typ des Textes erstellt, gefolgt von dem Stern. Der Stern bedeutet, dass dies erforderlich ist, also muss der Benutzer den Namen eingeben, bevor er das einreichen kann, und dann Ihren Namen, der der Name der Eingabe ist, und dann ziemlich ähnliche Beispiele unten. Wir haben den Typ des Eingabetyps von E-Mail, die ein Pflichtfeld ist, und der Name ist Ihre E-Mail. Wir können auch Werte über Eingaben wie Textbereiche und Submit-Buttons hinzufügen. Ich werde das jetzt nur löschen, und dann gehen wir zu unserer Kontaktseite. Wir müssen zur page-contact.php gehen, und dann werden wir den vollständigen Abschnitt für das Kontaktformular kopieren und dann nach dem div mit der Klasse von well suchen, die unten ist, also suchen Sie nach dem , und finden Sie dann das schließende div oder das schließende tag. Kopieren Sie diesen ganzen Abschnitt. In der Tat werde ich das ausschneiden, weil Sie es nicht mehr brauchen, und speichern Sie das, dann können wir es in das Kontaktformular einfügen. Das erste, was wir tun möchten, ist die Formular-Tags zu löschen , da diese automatisch wieder hinzugefügt werden. Löschen Sie das öffnende und das schließende Tag. Dann müssen wir unsere Eingabetypen ersetzen, also löschen Sie einfach den vollständigen Eingabeabschnitt, vor allem für den Namen. Dann setzen wir diese wieder in das gleiche Format ein, wie wir zuvor im Beispiel nachgeschaut haben. Also zwischen diesen eckigen Klammern hat der erste eine Art von Text und dies ist für den Namen, also wollen wir, dass dies erforderlich ist, also setzen Sie den Stern hinein, den Namen Ihres Bindestrichennamens, dann müssen wir setzen unsere Klassen wieder in, also die Klasse und dann einen Doppelpunkt. Dann wird das erste Form-Steuerelement sein, und wir hatten auch eine ID darin, also id mit dem Doppelpunkt von Eingabenname, und wir können auch den Platzhaltertext hinzufügen, also Platzhalter, wir brauchen keinen Doppelpunkt danach, also nur ein Raum. Sie dann zwischen den Anführungszeichen den Namen des Namens ein. Das ist alles, was wir für die Namenseingabe tun müssen. Ich werde das nur kopieren und dann zur nächsten Eingabe gehen, die E-Mail ist. Löschen Sie das also und ersetzen Sie das dann durch den Code in den eckigen Klammern. Dieses Mal, anstelle von Text, hat dies die Art von E-Mail erhalten, und wir werden dies auch bei Bedarf lassen. Der Name dieses Mal wird Ihre E-Mail sein, und wir brauchen immer noch die Klasse der Formularsteuerung. Aber dieses Mal wird die ID Eingabe-E-Mail sein. Auf dem Platzhaltertext ist einfach E-Mail. Als Nächstes ersetzen wir den Textbereich, also löschen Sie diesen Abschnitt, und fügen Sie ihn dann in den neuen Code ein. Dieses Mal wird der Eingabetyp textarea sein, wir lassen dieses Feld wie erforderlich, aber dieses Mal ändern Sie Ihren Namen in Ihre Nachricht. Die Klasse der Formularsteuerung, wir können das dort behalten, aber wir müssen die Eingabe ändern, es ist von Eingabename zu Eingabe-Nachricht. Danach müssen wir dem Formular mitteilen, wie viele Zeilen für den Textbereich als Standard angezeigt werden sollen. Also werden wir meinen auf drei setzen, also machen wir das mit einem x und dann 3. Dann änderte sich der Platzhaltertext von Name in Nachricht. Dann ist der letzte Teil des Herbstes die Eingabe, also löschen Sie den Sende-Button vom unteren Rand des Formulars und öffnen Sie dann die eckigen Klammern. Im Inneren geben wir den Typ von submit, die Klasse wird die Bootstrap-Klasse von btn sein, und dann die zweite Klasse von btn-default. Es gibt also die gleichen, wie wir in der Bootstrap-Site verwendet haben, und dann den Text in Klammern von Submit, also „Speichern“, dass. Da wir das Kontaktformular aus der Kontaktvorlage genommen haben, müssen wir dies wieder eintragen. Wenn Sie den Kurzcode kopieren, kopieren Sie diesen Teil, dann gehen Sie zurück zu der page-contact.php, und in dem gleichen Abschnitt, in dem wir gerade den Code von schneiden, öffnen Sie die PHP, und dann Echo auf die Browser, do_shortcode, dann in die Klammern und die Zitate, fügen Sie den Kurzcode ein und sagen Sie das. Nun, wenn wir zurück in die WordPress-Seiten gehen und hoffentlich, wenn wir auf die Kontaktseite gehen, sollten wir sehen, dass das Kontaktformular alles richtig funktioniert, was ist, also das ist gut. Also, das ist alles in Ordnung ist ein oder zwei kleine Dinge, die wir im „Dashboard“ ändern müssen, also gehen Sie wieder zum Abschnitt „Kontakt“. Es ist tatsächlich bekommen dieses Formular an den Website-Administrator zu senden. Wir müssen die E-Mail-Adresse eingeben, an die wir senden möchten. Dies kann im Kontaktformular unter der Registerkarte Mail erfolgen. Wir können die Standardwerte und stattdessen die E-Mail-Adresse ändern , an die die Nachrichten gesendet werden sollen. Sie können auch in den Abschnitt Nachrichten gehen, und Sie können die Nachrichten ändern, die der Benutzer erhält, sobald er E-Mails sendet, und als Standardwerte, die bereits dort festgelegt sind, aber diese können alle geändert werden. Sobald Sie sich geändert haben, drücken Sie „Speichern“, und das war's. Jetzt werden wir einen voll funktionsfähigen Kontakt zu Abschnitt haben. Vielen Dank für das Ansehen und wir sehen uns im nächsten Video. 45. So fügst du WordPress CSS hinzu: Ok, willkommen. Bisher haben wir alle unsere Bootstrap CSS hinzugefügt und wir haben auch einige benutzerdefinierte CSS hinzugefügt. Aber das wird nur ein schnelles Video sein, nur um in einigen WordPress-Kern-CSS hinzuzufügen, die für das Thema erforderlich ist. Also gehen wir über zu Google und suchen nach WordPress Core CSS. Das erste Ergebnis sollte der Codex mit dem CSS-Abschnitt sein, also wählen Sie das aus. Dann, wenn Sie nach unten scrollen, sollten Sie es Core WordPress Abschnitt finden, die wir zu kopieren und in unserem Thema zu platzieren. Nun, der Großteil davon ist für Untertitel und Ausrichten von Bildern und ein wenig für die Barrierefreiheit. Dies sind erforderlich WordPress-Kernstile. Also möchte ich den Abschnitt bis ganz unten kopieren . So auch Bildschirmlesegeräte dort. Also kopieren Sie das, und dann, über in unseren Theme-Ordner in die style.css, ich werde dies nur direkt über dem globalen Abschnitt einfügen und speichern Sie das dann. Also haben wir das CSS für Bildschirmlesegeräte. Wir haben ein benutzerdefiniertes Styling für Untertitel und den Beschriftungstext auf Bildern. Es gibt auch einen Rand zu den Beschriftungen hinzugefügt und auch etwas Styling für die Ausrichtung, für die rechte, linke, mittlere oder keine. Also werde ich das einfach retten, und das war's. Das ist alles, was ich dir in diesem Video zeigen wollte. Wir wollten nur sicherstellen, dass die Kernstile nicht aus unserem Thema verpasst wurden. Also, das ist es und wird Sie im nächsten Video sehen. 46. So bereitest du deine Thementextstränge für Übersetzungen vor: Beim Erstellen von WordPress-Themes ist es wirklich wichtig, dass wir Nicht-Englisch-Lautsprecher betrachten, die unsere Themen verwenden können. In diesem Abschnitt geht es um die Vorbereitung unseres Themas und um die Möglichkeit für Menschen, das Thema in verschiedene Sprachen zu übersetzen. Jetzt haben die meisten von uns nicht die Fähigkeit, das Thema selbst vollständig zu übersetzen. Was wir jedoch tun können, ist das ganze Thema zu entwickeln, so dass es leicht von anderen übersetzt werden kann oder mit anderen Worten, machen Sie unser Thema Übersetzung bereit. Dieser Prozess wird als Internationalisierung bezeichnet, und es gibt auch einen anderen Begriff, auf den Sie stoßen können, der als Lokalisierung bezeichnet wird. Wir werden uns das im nächsten Video ansehen. Dies ist der Prozess der eigentlichen Übersetzung der Wörter im Thema, aber in diesem Video werden wir nur die eigentliche Vorbereitung oder die Internationalisierung betrachten . Eigentlich machen wir unser Thema Übersetzung fertig. Es ist nicht so schwierig, wie es klingen mag. Es gibt ein paar Schritte zu unternehmen, wie das Hinzufügen einer Funktion zu unserer Funktionsdatei, das Erstellen des Sprachenordners, um alle Übersetzungen in zu speichern. Wir müssen auch unsere Theme-Vorlagen durchschauen, um WordPress wissen zu lassen, welche Wörter wir für die Übersetzung zur Verfügung stellen möchten. Um loszulegen, über den Texteditor oder tatsächlich können Sie zum Themen-Ordner gehen. Wir gehen in den Tranquilwp-Ordner. Dann werden wir einen neuen Ordner hinzufügen und diese Sprachen aufrufen. Dann müssen wir in die Funktionsdatei gehen und dies im Theme-Setup verknüpfen. Also rüber zur functions.php. Ich werde dies innerhalb der tranquilwp Setup-Funktion hinzufügen. Ganz oben müssen wir eine Funktion, load_theme_textdomain, und dann die Klammern verwenden. Wenn Sie sich an die Textdomäne erinnern, setzen wir das in der style.css, im Kommentar ganz oben. Wir müssen das Gleiche machen wie die Textdomäne, die wir dort einfügen. können wir kopieren. Dann zurück in die Funktionen. Der erste Parameter innerhalb der Anführungszeichen ist die Textdomäne. Dann müssen wir in den Dateipfad zu unserem Sprachenordner, den wir gerade erstellt haben, einfügen. Wir trennen es durch ein Komma, get_template_directory, dann die Klammern. Dann müssen wir an das Ende verketten, den Sprachordner. Das habe ich richtig geschrieben. Innerhalb des Vorlagenverzeichnisses haben wir dann den Sprachordner. Verwenden Sie den Schrägstrich und dann Sprachen, und beenden Sie das dann mit einem Semikolon. Nun ist der nächste Schritt, alle Texte oder Strings zu finden, die wir übersetzbar machen wollen. In diesem Video konzentrieren wir uns nur auf die Textzeichenfolgen, aber im nächsten Video werfen wir einen Blick, wie man Funktionsaufrufe übersetzt. Moment beginnen wir, indem wir auf die 404-Seite gehen. Ich möchte von oben anfangen. Also fangen wir mit dem 404 an. Wir müssen alle Textzeichenfolgen identifizieren. Auf der 404-Seite, oben Echo wir in den Browser, etwas Text dort. Wir wollen dies zur Übersetzung zur Verfügung stellen. Der Weg, das zu tun, ist direkt nach dem Text, fügen Sie ein Komma hinzu. Dann einfach zwischen Zitaten, fügen Sie die Textdomäne von tranquilwp ein und speichern Sie diese dann. Dann bis zur Archivseite müssen wir beliebige Textzeichenfolgen finden. Scrollen Sie nach unten. Dort gibt es eine Echo-Funktion, also müssen wir diesen Text übersetzen. Auch hier trennen wir den Text einfach mit einem Komma. Dann in die Zitate in der Textdomäne setzen. So WordPress kann es identifizieren, und das sollte aus sein. Jetzt schauen wir uns die Funktionen im nächsten Video an. Speichern Sie das. Dann nach unten zu den Kommentaren, weil dies die Kommentardatei für das vierundzwanzig Thema ist, werde ich nur eine Suche verwenden und ersetzen. Wir können sehen, dass einige der Funktionen, es ist bereits da sind die vierzehn Text-Domäne. Also müssen wir all diese ersetzen. Ich gehe durch und mache diese einzeln oder mache eine Suche und Ersetzung. In Klammern gehen Sie einfach zu Suchen, Ersetzen, und suchen Sie nach dem Wort twentyfourteen, und ersetzen Sie das durch tranquilwp oder Ihre Text-Domain, und drücken Sie „Batch“ Es gibt acht Übereinstimmungen ist nicht da. Drücken Sie „Ersetzen“ und speichern Sie das dann. Die nächste ist die Content-Einrichtungen. Wir müssen die Links für diese Seite tun. In der Minute haben wir gerade Klartext für die vier Links bekommen. Wir wollen das ändern, um eine PHP-Echo-Funktion zu sein. Beginnen Sie mit den PHP-Tags, und dann verwenden wir die Kurzschrift, die der Unterstrich ist, und dann e. Dann umgeben Sie den Text in die Klammern und ein Zitat, mit dem Semikolon am Ende [unhörbar] und. Jetzt haben wir den Textring. Verwenden Sie das Komma, um das zu trennen, und fügen Sie dann die Textdomäne ein. Nur um diesen Prozess zu beschleunigen, werde ich nur kopieren, und dann gehen Sie nach unten in die Spa-Einrichtungen, ersetzen Sie die Haare und machen Sie sich mit dem Text der Spa-Einrichtungen. Fügen Sie das ein und vergessen Sie nicht, die PHP-Tags dort zu schließen, und nur dort. Kopieren Sie das. Dann haben wir den Rückzug am See. Kopieren Sie erneut den Text und ersetzen Sie die Wellnesseinrichtungen durch den Rückzugstext am See. Dann machen wir dasselbe für den allerletzten Link. Schneiden Sie den Text aus, und fügen Sie den letzten Text dort ein. Das ist der letzte dort. Auch hier, da wir die Text-Domain unmittelbar nach der Zeichenfolge haben, weiß WordPress, dass wir dies übersetzen wollen. nächsten Video zeigen wir Ihnen, wie Sie das tun. Speichern Sie diese Datei, und wir gehen auf die footer.php. Beginnen wir mit der Überschrift Level 2 oben auf „Bleiben Sie in Kontakt“. Wir müssen dies in ein Echo verwandeln, also php, ich werde Kurzschrift Unterstrich e sehen, und dann den Text in Klammern. Setzen Sie dies auch in einfache Anführungszeichen. Dann direkt nach der Zeichenfolge in die Textdomäne einfügen. Also tranquilwp, und dann nach den Klammern, Semikolon und dann schließen Sie die PHP. Es ist also nur ein paar mehr auf dieser Seite zu tun. Der erste ist der Follow Us Text. Also sollten wir das jetzt erledigen. Also PHP und dann Echo, dann umgeben Sie die Zeichenfolge in den Klammern. Vergiss nicht die Zitate. Dann durch ein Komma getrennt, fügen Sie die Textdomäne tranquilwp und dann das Semikolon ein und schließen Sie es ab. In der Fußzeile befindet sich ganz unten der Name Tranquil Spa. Also werden wir einfach dieses PHP kopieren, nur um das zu beschleunigen. Fügen Sie diesen dann anstelle des Tranquil Spa-Textes ein. Dann ändern Sie den Text zurück in Tranquil Spa. Speichern Sie das, das ist der gesamte Text für den Fußzeilenbereich. Nach der Fußzeile ist es die Titelseite. Also von oben müssen wir die Überschrift der Ebene zwei ändern. Also werde ich nur die PHP einfügen. Ich werde das nur ein wenig aufräumen und einrücken und dann den Titel kopieren oder ausschneiden und den Abschnitt Follow Us ersetzen. Speichern Sie das. Also lasst uns das nochmal kopieren. dann die Seite für mehr Strings nach unten scrollen, müssen wir dasselbe mit den neuesten Angeboten tun. Also mache ich genau das gleiche wie zuvor, ich schneide einfach diese Level-2-Überschrift aus und füge diese ein. Dann gehen Sie weiter auf die Seite, so scrollen Sie weiter nach unten. Der nächste ist die zweite Rubrik von Shop Online. Also schneide ich das aus und füge das der Schnur hinzu. Dann geht es nur ein wenig weiter unten, wir haben den Shop Here Text , der Teil der Schaltfläche ist. Wieder, Einfügen der PHP und ändern Sie den Text hier Shop zu sein Dort gehen wir. Also drücken Sie Speichern und wir bewegen uns weiter auf der Seite. Wir brauchen nichts in Funktionen zu tun. Als nächstes ist es die header.php, und ich glaube nicht, dass es etwas gibt, was wir tatsächlich in der Kopfzeile ändern müssen. Wir haben den Titel, der dynamisch ist, wir haben das Navigationsmenü oben, aber alle Seitennamen werden dynamisch eingezogen. Sie werden also auf die Sprache eingestellt, die der Benutzer sowieso bevorzugt hat. Also gehen Sie weiter nach unten. Beachten Sie, dass in der Kopfzeile nichts geändert werden kann. Als nächstes ist die Indexseite. Scrollen Sie also nach unten und schauen Sie nach irgendwelchen Echo-Funktionen. Wir haben die Kategorie dort, also direkt nach dem Kategorienamen, in die Textdomäne von tranquilwp setzen. Dann gehen Sie weiter unten auf der Seite. Es gibt auch den Read more Text. Also genau das gleiche da drin, Tranquilwp. Dann ist es für die Indexseite. Als Nächstes haben wir die Seite über. Also haben wir die über uns Ebene zwei Überschrift. In der Tat, anstatt dies übersetzbar zu machen, werden wir es tatsächlich dynamisch machen, so dass wir bis zu den_title ändern, wie wir es mit einigen der anderen Abschnitte getan haben. Also, das ist in Ordnung zu gehen, wie es ist. Wir haben den Hauptabsatz des „Über uns“ -Textes. Also werde ich diesen Abschnitt einfach verlassen, weil dies wahrscheinlich besser als ein benutzerdefiniertes Feld sein wird , damit der Benutzer seine Informationen eingeben kann. Also speichern wir das vorerst und schauen uns den Seitenkontakt an. Wir haben den Titel schon da drin und ich denke, das ist in Ordnung zu gehen. Da gibt es nichts zu ändern. Also runter auf die Nachrichtenseite. Werfen wir einen Blick auf alle Strings zu übersetzen. Also haben wir die Kategorie. Ändern Sie das also, um die Textdomäne in, die tranquilwp. Auch hier, wie die Indexseite, werden wir das gleiche für den lesen mehr Text tun. So ruhig. Der Pager, der ältere und neuere Beitrag werden tatsächlich auch übersetzt werden müssen. Aber wir werden das im nächsten Video auf eine etwas andere Art und Weise tun, so dass wir einfach die News-Seite für jetzt verlassen können. Also bis zur page.php, also unsere grundlegende Seitenvorlage. Wir haben die Echo-Funktion dort, also werden wir die Text-Domain direkt nach dort hinzufügen. Also ruhig, und vergessen Sie nicht, das zu retten. Dann nächste nach der Seite ist die Suchvorlage. Also nehmen Sie einen Scroll nach unten. Wieder haben wir die Kategorie. Also ändern wir das. Wir haben das Read More. Okay, jetzt gehen wir zur Seitenleiste. Es gibt also keine Strings, die man darin übersetzen kann, also gehen wir zu der single.php und schauen uns das an. Also haben wir den dynamischen Titel. Ich denke noch einmal, wir müssen die Kategorie machen. Scrollen Sie weiter nach unten, wir haben die Fehlermeldung. Fügen Sie also die Textdomäne dort hinzu. Das ist also so ziemlich fertig. Ich möchte nur auf die Funktionsseite gehen, weil wir dort einige Strings mit unserer Funktion featured_text hinzugefügt haben . Also nur ein oder zwei Saiten, die wir da drinnen ändern müssen. Also mache ich genau das Gleiche. Fügen Sie die Textdomäne hinzu, und wenn ich diese einfach kopieren werde. Also fügen Sie das in knapp unten ein. Wir könnten das gleiche für den Browsertext tun, also fügen Sie das in. Dann nur noch ein oder zwei weitere unten. Weil diese Formatierung hat, werden wir das tatsächlich verlassen und das im nächsten Video tun. Wir werden das auf eine etwas andere Weise tun. Ich denke, das ist es für alle Textzeichenfolgen. Also speichern wir diese Seite. Wenn wir also die Software herunterladen, um dies später übersetzbar zu machen, sollten wir alle diese Textzeichenfolgen zum Übersetzen zur Verfügung stellen. Das ist es also für alle Textzeichenfolgen, aber wenn der Text Teil einer Funktion ist, müssen wir dies auf eine etwas andere Weise tun. Wenn du mir im nächsten Video beitrittst, zeige ich dir, wie du das machst. 47. So bereitest du deinen Funktionstext für Übersetzungen vor: Ok, willkommen zurück. Jetzt haben wir alle Strings zur Übersetzung zur Verfügung. Wir werden weitermachen und dasselbe für Funktionen tun. Wir haben im letzten Video die Funktionen wie den Pager für den nächsten und die vorherigen Beiträge erwähnt . Sie haben auch Text in den Klammern, also müssen wir dies auf eine etwas andere Weise tun als zuvor. Es ist immer noch sehr einfach zu tun. Wir beginnen mit einem ähnlichen Weg wie vorher. Wir verwenden das Komma und setzen dann die Textdomäne von tranquilwp ein, aber dieses Mal, davor und nachher, werden wir diese in einige zusätzliche Klammern umschließen und dann zwei Unterstriche verwenden und dann am Ende die Klammer schließen und dann tun Sie das gleiche in neueren Beiträgen. Das Komma, die Textdomäne, tranquilwp und in den öffnenden Klammern, fügen Sie die beiden Unterstriche hinzu, und schließen Sie dann unsere zweite Klammer dort. Wir haben auch einen Pager in der Nachrichtenvorlage. Geh rüber zu den Seitennachrichten und dann unten unten, machen wir genau das Gleiche. Für die älteren Beiträge, fügen Sie in der Textdomäne von tranquilwp, und dann die zusätzlichen umgebenden Klammern mit den beiden Unterstrichen, schließen Sie ab, und das gleiche für die neueren Beiträge, da gehen wir. Dann wollte ich nur die Funktionsdatei ändern. Also geh rüber zur functions.php. Jetzt müssen wir den Browsertext ändern, aber es sieht so aus, als ob wir die Waffe im letzten Video gesprungen und die Textdomäne dort hinzugefügt haben, aber das ist eigentlich eine Funktion. Wir müssen das gleiche Intervall mit den Klammern, den beiden Unterstrichen, und schließen Sie dann die zweite Klammer aus, und dann suchen wir nach der printf-Anweisung, so scrollen Sie nach unten. Die Möglichkeit, dies mit einer Variablen darin zu tun, besteht darin die beiden Unterstriche darin hinzuzufügen und dann nach der Zeichenfolge die Textdomäne von tranquilwp hinzuzufügen und diese dann zu speichern. Das ist es, das ist nur eine etwas andere Art , den Text vorzubereiten, wenn er Teil einer Funktion ist. Stellen Sie unser Thema jetzt bereit für die Übersetzung. Wir haben nun WordPress mitgeteilt, welche Wörter wir zur Übersetzung zur Verfügung stellen wollen. Das war's also. Wir lassen das Video dort. Wenn du mir