Personalisieren eines WordPress Themes mit HTML und CSS

1. Einführung: Hallo, mein Name ist Victoria Anna und ich bin eine visuelle Kommunikationsdesignerin. Ich entwerfe Logos, Corporate Identities, Website und ich Illustration. In dieser Skillshare Klasse möchte ich Ihnen zeigen, wie Sie das Standard-2019-Thema anpassen und es von diesem in dieses transformieren können. Dieser Prozess ist gültig für die Umwandlung und Anpassung anderer WordPress-Themes. Ich hoffe, Sie werden Inspiration finden und mit der Arbeit an einigen Anpassungen beginnen. Wir werden einen Blick auf die Vorlagendateien und wie sie zusammenarbeiten, um ein WordPress-Theme zu bauen, und wir werden einige Änderungen an ihnen vornehmen. Wir werden die Kopfzeile, die Fußzeile ändern , das Logo, das Menü anpassen, Inhalte erstellen, Google Maps einbetten, einige Plugins installieren. Ich nehme an, dass Sie bereits WordPress-Theme und WordPress installiert und einen Blick auf die Einstellungen genommen und dass Sie einige Erfahrung mit CSS und HTML haben. Wenn Sie Fragen haben, wenden Sie sich an mich. Sie werden die Ressourcendateien und Übungen finden, die an einige der Lektionen angehängt sind. Jetzt fangen wir an. 2. WordPress und Hierarchie: Ich habe FileZilla FTP-Client gestartet, was mein bevorzugter ist. Lassen Sie uns einen Überblick über die WordPress-Installationsdateien haben. Normalerweise laden wir von der WordPress-Website, den ZIP-Ordner mit WordPress mit der neuesten Version und ZIP es auf unseren Computer, und senden alle Dateien bis zu unserem Server, um es mit der Installation der Datenbank und alle anderen zu installieren -Einstellungen. Nun, hier im WP Content haben wir unsere Themen auch Plug-Ins. Werfen wir einen Blick. Dies ist unser 2019-Theme, und WordPress kommt in diesen Tagen mit 2017 und 2016 Theme installiert. Lassen Sie uns einen Blick in unser 2019-Thema werfen und sehen, welche Dateien es gibt. Normalerweise kann WordPress-Theme nur mit einem Index PHP-Datei und Stil CSS funktionieren. Aber Funktionen PHP ist auch sehr nett. Vielleicht möchten Sie auch ein paar nette Interaktionen und einige schöne Schriftarten haben. All diese Dateien sind grundsätzlich modulare Komponenten, die eine Sache aufbauen. Es ist wirklich wichtig, die Hierarchie der WordPress-Vorlagendateien zu verstehen. Wir haben all diese Vorlagendateien, die ich Ihnen in FileZilla gezeigt habe, und dann natürlich die Stylesheets und JavaScript-Bilder und andere Template-Dateien wie Funktionen PHP, die das gesamte Thema aufbauen. Alle diese Vorlagendateien sind wie kleine Module, die Sie kombinieren können , um das Thema zu erstellen, das Sie haben möchten. Sie geben die Struktur für die Informationen auf Ihrer Website. Zum Beispiel ist in unserem Thema die Sidebar PHP mit Widgets tatsächlich ein Teil der Fußzeile PHP. Sie können all diese kleinen Module zu einem großen Thema kombinieren, und es gibt eine spezielle Hierarchie, zum Beispiel, die spezialisierteste der Vorlagen ist, zum Beispiel, Sie haben eine Seite PHP für all die Seiten, die wir in erstellt haben unser Thema. Aber sagen wir, wir brauchen eine Kontaktseite und es wird ein bisschen anders aussehen als alle anderen Seiten. Also werde ich dann eine Seite erstellen, wenden Sie sich an PHP. Dies wird nur die Vorlage für die Kontaktseite sein. Für den Fall, dass ich zum Beispiel eine Kontaktseite erstellt, aber keine Kontaktseitenvorlage zugewiesen habe, wird WordPress auf die Seite PHP-Vorlagen zurückgreifen. So ist die spezialisiertere eine Vorlage, wie Kategorie oder Kategorie Schuhe. Kategorie Schuhe ist spezialisierter als Kategorie. Also WordPress wird immer die spezialisiertere Vorlage zeigen, und wenn es nicht findet, wird es auf die weniger spezialisierte zurückgreifen. Dann letztendlich, wenn es keine anderen Vorlagen im Theme hat, wird es die Index-PHP-Datei anzeigen. Wenn Sie also ein Design ändern, wenn Sie es anpassen, arbeiten Sie normalerweise nur mit Stil CSS, aber manchmal gibt es Teile, die Sie ändern möchten , und dafür müssen Sie einen FTP-Client zum Öffnen haben diese Dateien, bearbeiten Sie sie und erstellen Sie die neue Struktur, die Sie in Ihre Vorlagendateien haben möchten. 3. Das Child in Aktion: Um zu beginnen, unser Thema anzupassen. Wir müssen zuerst eine Kopie davon erstellen. Da von hier aus, das Standard-2019-Theme zu diesem, das ich bereits auf dieser Business-Seite versucht habe, ist nicht empfehlenswert alle Originaldateien Ihrer WordPress-Theme-Installation zu ändern. Weil Sie vielleicht etwas brechen, einen Fehler machen, oder das Thema wird aktualisiert und alle Ihre Änderungen gehen verloren. Du musst wieder von vorne anfangen. Es gibt natürlich die Möglichkeit, Customizer zu gehen und das Logo hochzuladen, die Farben zu ändern, Menüs zu erstellen, die Widgets zu ändern, und hier ist ein zusätzliches CSS-Feld, das Sie mit Ihrem CSS ausfüllen können. Sagen wir mal etwas ganz Einfaches. Hintergrundfarbe wird grün sein, großartig. Jetzt speichern Sie es und Sie haben eine grüne Website, aber 2019 wird aktualisiert und all diese Änderungen gehen verloren. Was zu tun? Es gibt eine andere Möglichkeit, bei der Sie als Administrator im Dashboard zum Erscheinungsbild Theme-Editor wechseln. Ich habe Ihnen dies bereits im anderen Video gezeigt, so dass Sie alle diese Theme-Dateien ändern und bearbeiten können. Aber natürlich könnte dies Ihr Thema brechen, Sie sind originelles Thema. Die Empfehlung ist immer, ein Kinderthema zu erstellen, und das ist wirklich großartig. Es wird untergeordnetes Thema genannt, weil das übergeordnete Thema immer noch da ist, und alle Dateien, alle Funktionen, alle JavaScript-Dateien usw. sind immer noch da. Das untergeordnete Design kann sie verwenden, aber wenn Sie Änderungen vornehmen möchten, kopieren Sie einfach eine der Dateien, nehmen Sie Änderungen vor und lassen Sie sie im untergeordneten Design. Weil es die Dateien überschreiben wird, die sich hier im übergeordneten Design befinden. Es ist weit über unseren Rahmen, um ein Kind Thema zu erstellen, und ich fand online, dass es eine große Website, die ChildThemeWP.com genannt wird und das große Team, das dort arbeitet, und einige von ihnen arbeiten für WordPress.org erstellen die untergeordneten Themen für die bekannten WordPress-Themes. Hier ist der Download-Link. Sie werden es in den Übungsdateien finden damit Sie das untergeordnete Thema für sich selbst herunterladen können. Ich habe es bereits heruntergeladen, ich muss es nur auf meinen Server schieben. Es ist entpackt, und so habe ich gerade eine Datei hier auf meinen Server gezogen, und hier ist sie. Das Kind-Thema besteht aus Funktionen PHP und Stil CSS und der Screenshot, natürlich, für das Thema, das ich glaube, ist leer, und einige JavaScript. All dies hat das großartige Team von ChildThemeWP.com erstellt. Wir müssen uns keine Gedanken darüber machen, all diese Dateien zu erstellen. Wie funktioniert das mit dem untergeordneten Thema? Wir haben hier ein übergeordnetes Thema und das Kind hier, und wie kommunizieren die Dateien miteinander? Nun, das ist kein Problem, ich werde einfach hier das WordPress auf meinem Computer öffnen nur um einen Überblick über die Dateien zu haben und zu erklären. Sie sehen, das untergeordnete Thema hat sehr wenige Dateien auf den Funktionen und Stil CSS. Zum Beispiel, wenn ich den Header ändern möchte, werde ich nur den Header PHP in mein Kind-Design kopieren und die Änderungen in dieser Datei vornehmen. Der ganze Rest wird wieder kommen, bleiben Sie gleich. Alle Vorlagendateien werden aus dem übergeordneten Design stammen. Alles, was Sie im untergeordneten Design ändern möchten, kopieren Sie einfach diese Datei und nehmen Sie Ihre Änderungen im untergeordneten Design vor. Natürlich müssen Sie auch die Struktur der Ordner behalten , um die Verknüpfung zwischen den verschiedenen Vorlagenteilen zu erhalten. Auf der Vorderseite wird die Installation eines untergeordneten Themas so aussehen. Ich werde hier in das Dashboard und Aussehen Themen gehen und denken Sie daran, Ich habe Ihnen gesagt, der Screenshot des Kind-Themas ist leer. Wir werden das in einer Weile ändern müssen. Ich werde nur dieses Thema aktivieren und wenn ich zurück zu unserer Seite gehe, ist es immer noch das gleiche. Sie sehen, es funktioniert, es ist im Grunde eine Kopie dieser Website. Aber wenn ich eine Datei ändern oder einfach in das untergeordnete Design kopieren und dort ändern möchte , anstatt das übergeordnete Originalthema zu brechen. 4. Schriftarten ändern: Zuallererst möchte ich die Typografie ändern. Ich habe bereits nach der Schriftart gesucht. Es heißt Source Sans Pro. Ich mochte es für dieses Projekt. Ich werde es hier auswählen und die Stile auswählen, die ich brauche; die reguläre, die kursiv und die fett. Wenn ich hier schaue, brauche ich diesen Link in den PHP-Dateien meiner Funktion weil wir die Schriftarten über Funktionen PHP als Stillink ändern werden. Nachdem ich diesen Link auf die Schriftarten kopiert habe, die wir ausgewählt haben, gehe ich zum Datei-Händler, um den 2019 untergeordneten Ordner zu öffnen und die Funktionen PHP-Datei zu bearbeiten, denn in der neueren Version von WordPress sind die Stile in der Warteschlange in das Theme. Sie werden nicht als Link eingefügt, sondern in der Warteschlange in die Funktionsdatei gestellt. Hier sehen Sie, dass die übergeordnete CSS-Datei in das Design integriert ist, und hier ist die Child-CSS-Datei. Wenn wir hier etwas in das Child-CSS schreiben, wird es das Eltern-CSS überschreiben. Dasselbe gilt für die untergeordnete JavaScript-Datei. Wenn wir benutzerdefiniertes JavaScript in unserem Kind-Design haben, wird es das eines des übergeordneten Themas überschreiben. Also hier werde ich nur den Link von Google-Fonts einfügen und dann diese WP auf Schlüssel-Style-Funktion hier kopieren, und meine Funktion Kind-Googlefonts nennen, ein Komma machen und dann diesen Verweis auf das CSS dieser Schriftart einfügen hier drin und setzen Sie hier ein Semikolon, und löschen Sie diesen Link natürlich. Ich werde hier nur einen kleinen Kommentar abgeben. Fügen Sie Googlefonts hinzu. Damit ich weiß, was ich geändert habe, falls etwas nicht funktioniert. Ich werde das speichern, und ja, bestätigen. Nun, mal sehen, ob sich etwas auf unserer Website geändert hat. - Nein, hat es nicht. Der Grund ist, weil, wenn wir den Web Inspector von Firefox verwenden, werden wir sehen, dass diese h1 noch die Schriftfamilie hat, die im übergeordneten Design ist. Also müssen wir dies in unserer Child-CSS-Datei überschreiben. Also lasst uns das jetzt machen. 5. Farbwechsel: Wenn ich die Farben ändern werde, brauche ich meine Datei, meine Skizze der Website, und ich habe eine kleine App, die ColorSlurp genannt wird. Es ist eine kostenlose App, die lustige Geräusche macht, wenn Sie eine Farbe wählen. Nun, ich habe das ausgeschaltet, weil ich es etwas irritierend fand , als ich damit gearbeitet habe. Ich habe hier bereits diese Hintergrundfarbe gespeichert, die ein warmes Mittelgrau ist. Ich werde nur diesen Code kopieren, meinen Inspektor öffnen und das Körper-Tag finden. Hier ist es. Es steht, Hintergrundfarbe Körper ist weiß. Ich werde das ändern. Hier ist es. Sieht ein bisschen lustig und komisch aus, aber nicht schlecht. Jetzt werde ich hier alles kopieren, weil es auch die Farbe der Schriftart enthält. Also Copy, öffne meine CSS-Stil-Datei in der Atom-App und füge sie einfach hier ein. Natürlich muss ich das hier löschen und vielleicht auch, das hat m Farbe. Ich könnte weiß setzen, aber ich glaube nicht, dass es richtig sein wird, ich denke, ich muss ein sehr, sehr Licht in Grau wählen . Ich gehe zurück hierher und benutze ColorSlurp, ich werde dieses Grau hier wählen. Das ist der leichteste Punkt, und ich werde das in meine Schriftfarbe kopieren. Das kommt hierher. Speichern und ändern Sie dann auch die Schriftfamilie. Auf dieser Website in diesem Projekt habe ich gerne so wenig wie möglich verschiedene Schriftarten. Speichern, und dann natürlich, Speichern Schriftfüllung als auch auf dem Server. Geh zurück, schließe das und lass uns sehen, was passiert ist. Sieht nett aus. Natürlich ist der Text hier unleserlich, aber das sind Blöcke und das ist der nette Teil, dass ich nur im Grunde die Körperfarbe, die Schriftfarbe ändern muss. Vielleicht in einigen anderen Gelegenheiten wie Links, muss ich ein paar Farben ändern, aber sonst kann ich den ganzen Rest einfach hier im Block bearbeiten. Lassen Sie uns das sehen. Farbeinstellungen. Ich werde die Textfarbe weiß und den Hintergrund hellgrau setzen , aktualisieren und überprüfen. Ja, das sieht etwas lesbarer aus, aber nicht wirklich schöner. Um unser Thema ein bisschen schöner zu machen und es anzupassen, werden wir natürlich eine Menge Optimierungen brauchen, und wenn ich zu all diesen Links einzeln ging, wird es eine Weile dauern, um ihre Farben zu ändern und schweben Zustände. Ich habe auf GitHub gefunden, dass der Entwickler Ann Pohl die 2019 benutzerdefinierte Farbüberschreibung da draußen gesetzt hat. Ich werde das alles kopieren und in unser Stylesheet legen. Lassen Sie mich überprüfen, ob Sie es bearbeiten. Ich habe hier bereits kommentiert, die Typografie. Ich werde nur noch einen Kommentar schreiben, um zu wissen, wo ich nach Dingen suchen soll. Farben, überschreiben und fügen Sie dann alles hier ein. Dann muss ich nach dem A suchen, nach den Links. Daran arbeiten wir im Moment. Sichern Sie es einfach für eine Sekunde. Dies ist die Farbe der Links. Ich habe das vorbereitet, das ich hier in meiner Textdatei möchte, kopieren Sie diese, gehen Sie zurück zum Code und geben Sie es hier ein. Wahrscheinlich, wenn ich hierher zurückgehe, muss ich natürlich die Datei auch auf dem Server speichern. Lassen Sie uns im Browser sehen, was passiert ist. Du siehst, dass nichts passiert. Nun, das ist der Trick beim Arbeiten mit untergeordneten Themen, dass Sie die wichtige Regel oft verwenden müssen , um viele der CSS-Einstellungen zu überschreiben. Es fühlt sich nicht gut an, es fühlt sich etwas hacky an und ich mag es nicht wirklich, aber das war's. Das ist die Arbeit mit den untergeordneten Themen. Dies ist nun das Aussehen der Links. Natürlich, wenn ich über den Mauszeiger schwebe, passiert nicht viel. Ich muss auch die Hover-Abdeckung ändern, die ich hier vorbereitet habe, und es ist diese. Ich denke, es ist ein Maisgelb oder so etwas. Mal sehen, die Hover-Zustände. Ich werde es hier setzen. Nicht vergessen wichtig, speichern, und überprüfen Sie im Browser, was passiert ist. Los geht's. Nun wollte ich auch die Animation der Grenze darunter haben. Denn hier sieht man eine Textdekoration Unterstreichung, die eigentlich nicht animiert werden kann. Ich werde die Animation jetzt im Hover-Zustand hinzufügen. Um diesen Hover-Übergang zu ändern, werde ich das unterstrichene hier entfernen und dann den Rahmen hinzufügen, den ich übergehen werde, nicht den Übergang animieren. Ich benutze immer nach Hause, und ich fand es besser, weil der Übergang einer Textdekoration zugrunde liegt, immer zu einigen Jittern führt. Ich gehe zurück zur CSS-Datei, und hier im Hover-Zustand werde ich diese Farbe nur kopieren, weil ich möchte, dass der Rahmen natürlich die gleiche Farbe wie der Text hat. Ich werde hier nur Randfarbe hinzufügen. Speichern Sie, und gehen Sie dann nach oben, um dies zu übergehen. Zuerst muss ich sagen, Textdekoration ist keine. Nachdem der Umrandungsschaltflächenübergang von zwei Pixeln transparent zu der Farbedeklariert transparent zu der Farbe , die ich im Hover-Zustand deklariert habe. Ich werde den Übergang oder linear und die einfachste setzen, dann 0,3 Sekunden. Ich fand 0,3 Sekunden, um die natürlichsten Geschwindigkeiten zu füllen. Einige werden dies hier speichern und das gleiche in FileZilla tun und überprüfen, was im Browser passiert ist. Oh, anscheinend haben alle Verbindungen jetzt denselben Übergang. Nun, die Admin-Bar ist nicht wirklich meine Sorge. Mal sehen, hier. Wir haben die darunter liegende Dekoration nicht entfernt. Erstens habe ich vergessen, wichtig zu schreiben. War das der Fall? Geh zurück. Jetzt kann ich es umstellen. Lassen Sie uns hier sehen, alle anderen Links auch. Großartig. Ich möchte auch die Farbe dieses Elements ändern. Es ist ein linker Rand. Mal sehen, welches es ist, seinen Eintrag Inhalt und Blockquote. Ich möchte dies die gleiche Farbe wie die Linkfarbe setzen, und ich gehe zur CSS-Datei. Mal sehen, hier ist die Linkfarbe, kopieren Sie sie, fügen Sie sie hier mit dem Blockquote ein, speichern, bestätigen Sie. Einchecken im Browser. Was ist passiert? Es hat die gleiche Farbe wie die Verknüpfung vor dem Hover-Status geändert. Aber wenn ich das im großen Ganzen betrachte, finde ich diese Zeilen viel zu gut, wenn man die Typografie betrachtet. Ich will sie ein bisschen klobig machen. Ich werde das hier ändern, indem ich die Rahmenbreite hinzufüge, und ich werde mit den neun Pixeln beginnen, nur um ein bisschen zu übertreiben bestätigen und zu aktualisieren. Sieht ein bisschen mehr in Harmonie mit der Topographie, aber vielleicht ein bisschen zu dick. Nur um es zu straffen, setze ich acht Pixel und frisch, das sieht ein bisschen mehr synchron aus. Wir haben die Farben des Themas bearbeitet, und jetzt gehen wir zum Fußzeilenbereich weil ich diese Widgets nicht in meiner Fußzeile haben möchte. 6. Aufnehmen: Um das Erscheinungsbild unserer Fußzeile zu ändern , möchte ich zuerst die Hintergrundfarbe ändern. Ich werde hier, überprüfen Sie in den Web-Tools, was mit der Fußzeile passiert. Da ist es, es gibt keine Deklaration der Hintergrundfarbe, und natürlich übernimmt es die Körperhintergrundfarbdeklaration. Ich werde hier eine machen, Hintergrundfarbe und überprüfen Sie mit meiner Color Slope App, weil ich mit den Farben spielte und ich einen weniger Kontrast in der Fußzeile haben wollte, so dass der Inhaltsbereich ein bisschen sichtbarer ist, nur subtil, aber mit einem kleinen Unterschied. Ja, ich gehe zurück zum Inspektor und setze die Farbe hierher. Ja, so soll es aussehen. Dann muss ich mich daran erinnern, dass eine Fußzeilen-ID colophon ist und die Klasse Site-Fußzeile ist, copy. Gehen Sie zum Stylesheet, und irgendwo hier oben, haben wir Farben überschreiben. Ich sehe, ich habe einen Fehler gemacht, ich werde das löschen und die Hintergrundfarbe hier einfügen. Machen Sie die Klammern wie so und Fuß-ID von Kolophon und die Klasse der Site-Fußzeile. Lassen Sie mich nun überprüfen, ob das funktioniert, ohne das wichtige Attribut zu deklarieren. Aktualisieren, ja, es funktioniert. Das ist großartig und jetzt können wir an den Widgets arbeiten. Jedes Mal, wenn Sie Meta in WordPress sehen, können Sie eine Wette nehmen, dass dies ein Widget ist und ich werde hier mit dem Web Inspector überprüfen. Ja, hier ist das beiseite Element, das als Widget-Bereich deklariert wird. In einigen WordPress-Themes, gab es eine Seitenleiste auf der linken oder auf der rechten Seite, die auch Widgetized ist, wo Sie diese Stücke von Code setzen können, eine sehr praktische funktionelle Elemente, die gehen, um Ihr Thema zu verbessern. Ich gehe zum Dashboard, weil ich nicht alle diese Widgets brauche. Hier in der Erscheinung gehen Sie zu Widgets, und ich werde alle diese so entfernen. Werfen Sie einen Blick auf meine Skizze, jetzt hier habe ich vier Listen, Textlisten, und einige von ihnen haben Links. Was ich im Grunde brauche, kann ich hier nicht unter diesen Widgets finden, ich werde das benutzerdefinierte HTML verwenden, das ein sehr praktisches Widget ist, wo Sie jeden Inhalt in HTML direkt für Ihre Fußzeile oder die Seitenleisten erstellen können , abhängig davon, wo sich Ihr Aside-Element befindet. Für meine Fußzeile mit Widget werde ich das benutzerdefinierte HTML und Widget einfügen, ich brauche keinen Titel dafür. Ich werde nur ein übergeordnetes Flex-Element deklarieren, Es wird sehr originell sein, Fuß-Flex. Dann werden im Inneren vier div-Elemente haben. Die erste wird Copyright sein, die zweite, Klasse, das wird die Adresse sein. Die dritte, nur gehen, um diese zu kopieren, um sie in und dann ändern Sie diesen Kontakt und Sprachen weil eines Tages diese Seite wird in Deutsch und Englisch sein, speichern Sie dies dazwischen und dann deklarieren Sie die Listen. Das ist nicht wirklich so, wie ich wollte, dass es aussieht, also habe ich nach viel Optimierung mit diesem Code und mit den Widgets gespielt. Ich habe eine Lösung gefunden, damit die Fußzeile wie eine 1 und eine 2 aussieht, und das ist hier im CSS-Code, ich muss mehrere Dinge ändern. Zum Beispiel muss ich hier für den Flex Raum zwischen schaffen und ich muss auch die Schriftgröße verringern. Ich werde es eine 0,7 EM ausdrücken. Außerdem hat das Fuß-Flex-Div eine Polsterung von 12 Prozent und es hat eine Breite. Ich werde hier 300 Pixel setzen, und auch sehr wichtig Align-selbst zum Selbst-Start. Dies wird den Text im div selbst drücken, um an der oberen Zeile ausgerichtet zu werden , und der Fuß-Flex wird eine Zeile in der Mitte haben, die vertikale Mitte der Fußzeile. Auch hier in der UL muss ich die Breite der 200 Pixel deklarieren. Ich glaube, ich habe alles erklärt, was ich vergessen habe. Ich werde das speichern, schieben Sie es auf den Server 2 und aktualisieren Sie es dann. Es braucht immer noch ein bisschen Optimierung, zum Beispiel ist es nicht mit dem Anfang des Inhalts hier auf der linken Seite ausgerichtet. Dies liegt daran, dass dieses Element auch, ich werde nur das Element hier inspizieren. Das Copyright hat auch ein Padding auf beiden Seiten, also werde ich das entfernen, indem ich zu CSS gehe und das Fuß-Flex-Div deklariere, das erste Kind darf nicht Padding haben. Erstes Kind-Polsterung 00, lasst uns aktualisieren. Nun sieht das besser aus, es gibt aber ein Problem, über das ich später nachgedacht habe, und das ist die Reaktionsfähigkeit. Wenn ich das auf dem iPhone, auf dem Smartphone, sehe ich nur zwei der Listen, also bin ich gezwungen, zwei Widgets mit benutzerdefiniertem HTML zu erstellen. Dies wird sich hier ändern, also werde ich nur ein anderes Widget, benutzerdefiniertes HTML erstellen und diese letzten beiden Listen kopieren, das heißt, ich glaube, Kontakt und Sprachen, ja. Ich muss das div schließen und das dann hier einfügen, aber ich vermisse dieses beginnende div, das der Fuß-flex ist. Der Editor mag das, keine Fehler, speichern und das ist erledigt, also werde ich hier aktualisieren. Wenn ich dies auf die Smartphone-Dimensionen schiebe, können Sie sehen, dass ich alle vier Listen hier übereinander gestapelt habe. Ich muss nur erklären, dass es eine andere Klasse zu dieser Fußzeile sein kann, und um dies zu tun, gehe ich wieder zu CSS. Deklarieren einer anderen Klasse footer-flex-1, die ich auf die erste der benutzerdefinierten Widgets anwenden werde. Ich muss das hier vorbereiten und footer-flex-1 in alle Deklarationen mit Ausnahme dieser kopieren . Dies ist der erste, der nicht die Polsterung und Fuß-Flex-1 UL haben wird. Ich glaube, ich habe jetzt alles im Footer-flex-1 abgedeckt, also werde ich dies auf dem Server aktualisieren und überprüfen, was ich hier getan habe. Ja, ich habe vergessen, die Klasse im Widget zu ändern, lass uns da rein gehen und dies hier erklären, footer-flex-1, save, done und voila. Jetzt ist das die Fußzeile so, wie ich wollte, dass es aussieht. Ich werde irgendwann Symbole für die Sprachen hinzufügen, aber im Moment möchte ich diesen Haftungsausschluss hier unten loswerden, und ich kann das nur in der Vorlage tun. Dies ist, wo wir diesen Zweck des Kind-Themas sehen. Und was ich Ihnen gesagt habe, dass Sie die Struktur des Themas ändern können, indem Sie Dateien vom übergeordneten Design in das untergeordnete Design kopieren und die Dateien dort ändern. Ich gehe zu FileZilla und öffne das 2019-Thema, das ich auf meinem Computer habe, sonst müsste ich zu meinem Elternthema auf dem Server gehen , während ich es gerne hier auf meinem Computer habe, also kann ich einfach Kopieren Sie meine Fußzeilendatei bis zum untergeordneten Thema. Ich werde das bearbeiten. Hier ist es, dies ist die Fußzeile Id, Colophon Klasse Site-Fußzeile. Wenn ich einen Blick, dieser Haftungsausschluss hier, werde ich Web-Tools einchecken, werde ich dies wieder auf die rechte Seite setzen, damit ich eine bessere Sicht haben kann. Dieses Element hier ist die beiseite, die wir gerade angepasst haben, aber das ist die Site-Info und innerhalb der Site-Info dies der Klassensite-Name und dann der Klassenimprint. Ich denke, das ist, was ich entfernen muss, also div Klasse Site-Info und das Link-Impressum, Klassen-Impressum. Hier beginnt die nächste Funktion, ich werde diese nicht berühren. Ich werde nur hier löschen, speichern Sie es auf dem Server und werfen Sie einen Blick hier im Browser, perfekt. 7. Bonus-Tipp: Footer: Hier ist ein Bonus-Tipp für diejenigen, die wie ich Ikonenflags oder Flaggensymbole neben diesen beiden Links oder irgendwo anders im Code implementieren müssen . Ich habe im Internet gesucht und hier auf GitHub gefunden, ein großartiges Repository von lipis, der Webentwickler bei Wire App und Google ist, und er hat dieses Paket erstellt, das flag-icon-css genannt wird. Sie können dieses Paket mit Ihren Task-Management-Tools installieren , wenn Sie ein großes Projekt haben und wenn Sie mit JavaScript arbeiten, aber wir werden dies wirklich zu Fuß implementieren, weil unser Projekt nicht so riesig ist und wir es nur mit eine Zeile HTML-Code. Ich habe diese Datei heruntergeladen, die ZIP-Datei. Es ist hier. Ich habe es entpackt, und drinnen gibt es das CSS, das ich brauchen werde, und die Flags. Da ich nur die Rechtecke benötigen werde, werde ich nicht den ganzen Ordner hochladen. Ich werde hier eine Kopie erstellen und es Flags nennen, öffne und lade dann ein Rechteck, Flag-Symbole, SVGs dort hoch . In der Zwischenzeit werde ich einen Blick auf das CSS werfen, und da ist es. Dies sind die Symbole, die SVGs, die quadratischen und die Rechtecke. Diese Zeile berücksichtigt anscheinend nur die quadratischen Symbole, also werde ich nur das kopieren. Kopieren Sie es und fügen Sie es in meine untergeordnete Theme-CSS-Datei ein. Natürlich werde ich das kommentieren, wenn ich es später finden und hier einfügen und speichern kann. Dann brauche ich die US-Flagge, ich werde sie hier finden, und ich brauche nicht die quadratische, ich brauche das Rechteck. Kopieren Sie das hier. Nun, SVG Link und fügen Sie es in mein CSS ein. Dann brauche ich eine deutsche Flagge, und ich werde sie hier finden, das Rechteck eins, kopieren und einfügen. Dies ist die CSS-Stildatei, die ich bestätigen muss, dass ich geändert habe. - Ja. Jetzt haben wir hier die Flaggen. Das CSS ist in unserem Stil, und jetzt brauchen wir die HTML-Codezeile, die hier ist. Der untere, der darunter liegende ist für die quadratischen Flaggen. Ich brauche die Rechteck-Flags. Ich gehe zu Widgets und zu meinem zweiten Widget, wo die Links zu den Sprachen sind, zu den Sprachversionen. Ich werde den HTML-Code hier einfügen und hier die Herrschaft in DE für Deutschland ändern. Fügen Sie wieder und wechseln Sie zu US für USA, weil die Leser dieser Seite werden auch in den Vereinigten Staaten von Amerika sein, speichern, fertig. Lass uns sehen. Aktualisieren. Sie sollten hier sein. Sie sehen, wie sich der Link erstreckt, aber sie werden nicht angezeigt. Was ist passiert? Ich werde dir zeigen, was ich vergessen habe zu tun. Ich kann es Ihnen hier zeigen. Siehst du die URL? Hier ist es das Gleiche. Der Pfad zu der Datei. Natürlich muss ich hier aus dem Ordner raus und zum Flag-Ordner hier gehen, der Stil ist in der Wurzel, ich muss nur zum Flag-Ordner gehen. Löschen Sie diese beiden, speichern Sie, setzen Sie auf den Server und aktualisieren Sie, und voila, hier sind sie. Ich könnte die Mühe machen, diesen Link zu unterstreichen, aber das wäre ein bisschen zu über den Umfang dieses kurzen Tipp. Ich hoffe, Sie haben gesehen, wie Sie mit dem Kind-Design optimieren können und das Aussehen entweder durch Bearbeiten der PHP-Dateien, die übergeordneten Theme-Dateien, die Sie in Ihr Kind-Design oder über den Widget-Bereich kopieren, und natürlich in Ihrem CSS-Stil Dateien. Dies ist unsere Website jetzt, und die nächste müssen wir uns mit dem Header und dem Inhalt beschäftigen. 8. Anpassen: Um unsere Titelseite weiter anzupassen, wir einen Blick auf die Skizze. Hier ist es. Hier ist die Kopfzeile, dann der Inhalt und die Fußzeile, die wir gerade angepasst haben. Denken Sie daran, wir haben über die Template-Dateien, den Header php, und dann alle diese Vorlagen für den Inhalt gesprochen . Unser Beitrag wurde auf dem Index php gezeigt. Jetzt verwenden wir die Seite php, weil wir die Lese-Einstellung als statische Seite für unsere Titelseite und das Website-Element mit den Widgets in diesem Thema ist in die Fußzeile php integriert. Nun, woher wissen wir, dass wir die Seite PHP-Vorlage für unsere Titelseite verwenden? Werfen wir einen Blick in den Browser. Dies ist unsere WordPress-Installation, unser Dashboard und die Seite, die wir erstellt haben. Wir sehen uns die Vorschau an und hier oben auf dem Dashboard gibt es die Schaltfläche „Seite bearbeiten“. Es sagt nicht, Post bearbeiten, nur Seite. Auch können wir hier in der Quelle überprüfen. Wenn wir einen Blick auf die body-Klausel nehmen, heißt es home, Seitenvorlage Standard, Seite und Seiten-ID. Jetzt kann ich sicher sein, dass ich eine der Seite PHP-Vorlagen verwende. Normalerweise gibt es mehrere, aber jetzt haben wir nur eine. Es ist eine Seite php, ich bin sicher. Wenn Sie sich unsere Skizze ansehen, können Sie feststellen, dass wir hier keinen Titel haben. Es sieht gar nicht wie unsere Skizze aus. Lassen Sie uns das im Gutenberg-Editor bearbeiten. Hier ist der Titel und ich kann ihn so entfernen, aktualisieren und einen Blick werfen. Es ist weg. Großartig. Was ich jetzt tun kann, ist einfach weiter diese Seite ohne den Titel zu bearbeiten. Dafür brauche ich ein paar Bilder. Der erste Block war ein Bild mit etwas Text. Ich gehe zum Dashboard und ich werde die Bilder hochladen, die ich für diese Website vorbereitet habe und das ist hier in der Medien-Schaltfläche. Ich werde nur sagen, neue Bilder hinzufügen, wählen Sie die Dateien. Es wird diese eine sein, all diese und eine andere Seite offen. Wunderbar. Jetzt können Sie hier warten, ich komme zurück, wenn diese hochgeladen werden. Es wird eine Weile dauern. Großartig. Unsere Bilder sind jetzt hochgeladen, wir können sie hier in der Bibliothek finden. Hier werden Ihre Mediendateien alle organisiert. Monat für Monat können Sie sie in einer Liste oder im Raster sehen. Nun, ich gehe zurück auf die Seite. Lassen Sie mich hier nachsehen. Seite bearbeiten und ich erstelle den ersten Block. Es wird eine Kombination aus Medien und Text sein. Ich werde diesen und diesen entfernen. Alle von ihnen. Klicken Sie hier auf die kleinen Punkte, entfernen Sie Block. Ich erstelle ein neues und brauche Medien und Text. Ich möchte, dass es in voller Breite auf der Seite ist. Hier in der Bibliothek brauche ich dieses Foto. Wählen Sie aus. Dann möchte ich die Hintergrundfarbe ändern und hier wird mein Absatz sein. Zuerst wird eine Überschrift sein, und es wird so sein. Ich werde Biocomputing sagen, so etwas. Dann brauche ich noch einen Dollar, der ein Absatz sein wird und ich brauche nur einen Dummy-Text. Hier im Text-Generator, kopieren, einfügen und aktualisieren. Werfen wir einen Blick. Dies ist unser erster Block, ein Bild mit einem Absatz und einem Titel, vielleicht setzen Sie den Titel größer. Aber jetzt weiß ich nicht, wie groß der Abstand zwischen diesem und dem Header ist. Wenn Sie sich in der Skizze erinnern, sind sie direkt hinter einander. Lassen Sie mich versuchen, es mit dem Webinspektor zu testen. Ich werde das überprüfen. Es wird ein Header sein und ich werde ihm eine Hintergrundfarbe geben. Siehst du hier immer diese Lücke, die ein Ort für den Titel sein soll. Jetzt kann ich gehen und Höhe des Headers tun, setzen Sie es acht rem. Aber es gibt immer noch diese Lücke. Natürlich kann ich etwas Hacking machen und hier in den Mottos der Bearbeitungsseite zurückgehen und sagen: „Ich möchte, dass dieser Block eine CSS-Klasse hat“, kein Titel wie so. Dann rufen Sie eine CSS-Klasse im Stylesheet auf und sagen Sie, setzen Sie den oberen Rand von minus fünf rem oder so etwas.“ Aber ich möchte dies nicht jedes Mal ändern, es eine ansprechende Seite gab oder dass es einen anderen Header gab. Ich möchte eine komplette neue Vorlage für die Titelseite haben, wo ich mir keine Sorgen machen muss, wenn es einen Titel gibt, wenn ich ihn gelöscht habe, und wenn ich genug minus Einheiten am oberen Rand dieses ersten Absatzes gesetzt habe. Das werde ich nicht tun. Ich werde eine völlig neue Vorlage erstellen. So werden wir das machen. Für Demo-Zwecke, Ich setze zurück in einen Titel Biocomputing, das ist, worum es auf dieser Website geht. Aktualisieren, Seite anzeigen. Hier ist es. Der Titel, den wir nicht brauchen. Ich überprüfe die Web-Tools. Es ist nicht das H1, es ist der Header, das ganze Element, das wir nicht brauchen. Es hat einen Klasseneintrag Header. Ich nehme an, da wir die Seite PHP-Vorlage verwenden, werfen wir einen Blick. In unserem FTP-Client ist es nicht hier in unserem Kinderthema. Wir müssen auf das Elternthema 2019 gehen. Hier sind alle unsere Vorlagen. Hier ist die Seite php, Ansicht in unserem Editor und hier ist es. Es heißt: „Die Vorlage für die Anzeige aller einzelnen Beiträge.“ Nun, ein Seiteninhalt wird als ein einzelner Beitrag behandelt, weil er sich nicht ändern wird, es wird keine Liste von chronologischen Beiträgen sein, es ist nur dieser eine Post, der eine statische Seite sein soll, die sich nicht ändern wird. Dann ist es einfach, bekomme den Header, zeige mir den Header. Dann hier ist der Abschnitt Inhalt Bereich, unsere wichtigsten Website-Inhalte. Dann ist die berühmte WordPress-Schleife, es sagt, Während haben Post, die Post. Es bedeutet, wenn Sie irgendwelche Beiträge haben oder während Sie einen Beitrag zu zeigen haben, irgendwelche Inhalte, dann zeigen Sie mir. Hier finden wir unseren Titel nicht, wir finden diesen Get-Template Teil. Es bedeutet, mir diesen Teil, der im Ordner, Vorlagenteile, Unterordnerinhalt, in der Datei Inhalt Slug Seite ist , und dann zeigen Sie die Kommentare. Aber wir werden es nicht auf unserer Website verwenden und diese Darstellung des Inhalts und erhalten die Fußzeile. Das war's. Dies ist eine einfache Seitenvorlage. 9. Anpassen: Was werden wir jetzt tun? Wir erhalten diesen Template-Teil wieder in unserem FTP-Client. Hier ist die Ordnervorlage Teile und hier ist der Inhalt. In diesem Inhalt heißt es, dies ist für die Darstellung des Ausschnitts. Dies ist für den Fall, dass wir keinen Inhalt auf dieser Seite haben. Dies ist die Inhaltsseite, die für uns interessant ist für unsere Seite php. Dies ist der Inhalt eines einzelnen Beitrags, eines einzigen Artikels, den wir geschrieben haben, und dies ist der allgemeine Inhalt. Dies ist zum Beispiel, wenn wir 20 Beiträge haben, wird es 20 Beiträge zeigen. Werfen wir einen Blick auf diese Inhaltsseite, die für uns so interessant ist. Wir jagen den Header und hier ist er. Es sagt hier Template-Teil für die Anzeige von Seiteninhalt in Seite php. Dies bedeutet, Inhalt Seite php ist ein kleines Modul der Seite php. Es ist wie ein kleiner Lego Teil dieses ganzen Seite Haus, das wir mit Legos bauen. Hier ist der Header, den wir nicht brauchen. Ich werde es hier nicht löschen, weil ich es dann für die anderen Seiten ruinieren werde , die einen Header haben möchten. Ich werde das einfach kopieren. Dafür erstelle ich hier eine neue Datei und nenne sie eine. Ich bin damit nicht sehr einfallsreich. Ich kopiere und expandiere nur. Dann werde ich es öffnen und hier ist es leer. Nun, ich kann das alles ruhig auswählen, kopieren und hier reinlegen. Es ist im Grunde die gleiche Inhaltsseite, nur Inhaltsseite 1. Ich brauche diesen Header hier nicht. Deswegen werde ich es entfernen. Sparen. Wir haben dieses kleine kleine Modul geändert, schließen es und gehen zurück hierher, bestätigen, dass wir es erstellt haben. Jetzt haben wir dieses kleine Modul, das wir für die Seiten erstellt haben , die diesen Titel nicht haben, diese Kopfzeile mit dem Titel darin. Jetzt müssen wir zurück zu dieser Seite php und erstellen Sie eine Kopie davon. Ich ziehe diese Seite nach unten auf meinen Computer, um sie zu speichern und damit zu arbeiten. Ich öffne es in meinem Editor und erstelle eine völlig neue Datei, die unsere neue benutzerdefinierte Seitenvorlage für die Seiten ohne Titel sein wird. Das einzige, was ich dafür brauche, ist ein Kommentar , der Template-Name sagt. Ich werde diese Seite anrufen, keine Titelseite. Tut mir leid, Tippfehler wie gewohnt. Schließen Sie den Kommentar und schließen Sie die Klammern. Nun, ich werde das hier speichern und es keine Titelseite nennen, denn jetzt könnten wir das später ändern. Ich speichere es auch hier und das einzige, was ich jetzt tun muss , ist, all das von der Seite zu kopieren, zu kopieren und es hier so einzufügen. Nun, da hier die schließenden Klammern sind, muss ich es hier löschen und jetzt habe ich diese Vorlage. Aber es geht auf die Inhaltsseite und ich brauche nur die Inhaltsseite 1, so. Ich werde all das schließen und laden Sie einfach die, sorry, ich muss hier aktualisieren. Die keine Titelseite, muss es nur hier in mein Chart-Thema hochladen. Ich möchte nur noch eine Sache hier mit der Vorlage überprüfen, Seite 1, die einen Inhalt hat. Ja, das tut es. Jetzt schauen wir uns an, was im Browser passiert ist. Whoops. Das ist unsere Seite. Lassen Sie uns auffrischen. Jetzt können Sie hier in den Seitenattributen sehen wir eine Vorlage zur Auswahl haben. Der zweite ist der, den wir erschaffen haben. Es heißt „Keine Titelseite“. Wenn ich hier aktualisiere und die Seite ansehen, wow, ich habe es jetzt ohne den Titel. Das ist wunderbar. So erstellen Sie eine benutzerdefinierte Seitenvorlage und laden sie in Ihr Diagrammdesign hoch. Sie müssen sich nur um die Template-Teile kümmern, die Sie ändern müssen , wenn sie sich in Ihrem Code der Standard-PHP-Datei befinden. Jetzt bauen wir ein paar Blöcke. Ich klicke hier auf Seite bearbeiten und mache diesen Anzeigentitel nichts aus. Es ist nur da. Ich kann es vorerst nicht entfernen. Ich nehme an, dass das Dashboard und der Editor ihre separaten CSS-Stylesheets haben und ich werde mich dadurch jetzt nicht belästigt. Ich brauche nur einen neuen Block, der Überschrift sein wird, Produkte, und dann wird es zentriert und aktualisiert werden. Dann brauche ich einen neuen Block mit drei Spalten. Ich habe den Spaltenblock erstellt und ich muss ihn hier auswählen und die Anzahl der Spalten auf drei erhöhen. Ich möchte auch, dass es die volle Breite über der Seite ist. Ich habe hier einen Text vorbereitet, werde ihn nur kopieren. Kopieren und einfügen und dann brauche ich ein Bild. Hier, nein, hier. Es ist ein bisschen schwierig, Blöcke in diesem Gutenberg-Editor auszuwählen. Ich hoffe, sie werden sich etwas Optimierungen einfallen lassen. Aber für jetzt habe ich nur ein Bild hier und Sie sehen es eingefügt das Bild über dem Absatz und ich brauche es unten. Ich klicke auf diesen Pfeil. Ich wähle eine aus der Mediathek aus. Sie sind nicht hübsch, aber sie sind einfach gut für die Demo-Zwecke, fügen Sie die Beschriftung hinzu, kopieren und einfügen. Sie können hier sehen, dass ich ein Bild mit einer Mediendatei, einer anderen Mediendatei und einer Anhangseite und einer benutzerdefinierten URL verknüpfen kann . Natürlich kann ich immer eine zusätzliche CSS-Klasse hinzufügen, aber ich werde das einfach so belassen und dann auch für den nächsten Block tun. Wir sehen uns, wenn wir mit diesem Block fertig sind. 10. Anpassen: Das ist also unser Produkt, drei Säulen Block. Wie Sie sehen können, kann ich diese Beschriftung kaum lesen, also werde ich das ändern. Ich gehe hier, um Seite zu bearbeiten, und wählen Sie dieses Bild wie so, und fügen Sie eine erweiterte CSS-Klasse hier, werden wir sagen, Produktbild, aktualisieren. Nur um hier zu überprüfen, sollte dieses Element ja sein, Feigenunterschrift wie gewohnt. Ich gehe zu meiner CSS-Datei und füge dann dieses Klassenproduktbild hinzu, und dann Fig Beschriftung, natürlich, und sagen Farbe weiß, speichern, aktualisieren Sie auf dem Server und überprüfen Sie den Browser. Siehst du, ich habe nur dieses bestimmte Bild verändert. Also muss ich eine Ebene nach oben gehen, und das ist der ganze Block. hier gehe und diesem Block eine zusätzliche CSS-Klasse zuweise, werde ich es Produktblock nennen, aktualisieren. Gehen Sie zu meinem CSS-Stil und sagen Sie dann Produktblock. Speichern, aktualisieren und checken Sie den Browser ein. Ja, jetzt sind alle drei Untertitel in der Farbe Weiß sichtbar. Dieser Titel gefällt mir nicht. Es ist ein bisschen zu links, also muss ich in diesem Block überprüfen, ob ich eine zusätzliche Marge auf der linken Seite setzen kann. Also wählen wir dieses aus. Ich füge hier eine Klasse von Produkt, Block, Titel hinzu. Man muss ziemlich spezifisch über dieses Update sein. Gehen Sie zu meinen Stylesheets und dann rechts, Produkt-Block-Titel. Sagen wir margin-left, es wird fünf rem sein, speichern und aktualisieren und im Browser einchecken. Nichts ist passiert, weil ich wahrscheinlich vergessen habe, hier die wichtige Regel zu setzen. Es muss ein anderes Urteil geben, das diesen Editor-CSS-Stil außer Kraft setzt , also aktualisieren. Los geht's. Es ist in der Mitte. Ich könnte auch den CSS-Stil tun, um diese Zeile hier zu entfernen. Es ist wahrscheinlich vor dem Element. Es ist dieser hier. Ich werde nur den Stil kopieren und sagen „Kopie“. Sagen Sie hier, zeigen Sie keine an. Vielleicht besser gesagt. Nein, ich möchte diese Zeilen nirgendwo auf meiner Website. Also ja und aktualisieren, ist weg. Sie sehen, dass es ziemlich großartig ist, wie Sie einfach eine zusätzliche Klasse in ein Element eines Blocks oder den Block selbst hinzufügen können. Dann gehen Sie einfach zum Stylesheet und stylen Sie diese Klasse. Das war's. 11. Anpassen: Der folgende Block ist ziemlich einfach. Wir brauchen nur zwei Spalten, eine ist mit dem Text, eine andere mit dem Knopf. Hier werde ich neue hinzufügen, und zwei Spalten. Lassen Sie mich überprüfen, ob sie zwei sind. Ja, das sind sie. Ich will, dass es in voller Breite ist, und hier werde ich eine Überschrift setzen, H3. Es wird sagen: „Wollen Sie mehr über unser Unternehmen wissen.“ Hier brauche ich einen Knopf und im Text werde ich Learn More setzen. Ich möchte, dass die Hintergrundfarbe mehr zu Türkis und heller ist, also aktualisieren. Sie mögen diese Kombination nicht, sie denken, der Kontrast ist zu alt, um zu lesen, aber ich werde es vorerst verlassen. Hier möchte ich den Link zu unserer About Seite setzen. Ich habe eine Dummy-Seite über uns erstellt, nur um einen Platzhalter zu haben, sehen, dass nichts darin ist. Aber ich brauche diese URL hier, kopieren, zurück zur Titelseite, bearbeiten. Wo ist der Knopf? Hier, gehen, um den URL-Link setzen, so aktualisieren. Ich möchte, dass dieser Block eine hellgraue Hintergrundfarbe hat, und ich kann das hier tun. Ich muss eine erweiterte CSS-Klasse setzen, ich werde mehr Block setzen, aktualisieren, zu meinem Stylesheet gehen. Im Stylesheet werde ich die Klasse mehr Block hinzufügen, und sagen Hintergrundfarbe, hellgrau, speichern und aktualisieren, und überprüfen Sie die Browseransichtsseite. Was ist passiert? Es ist hellgrau, aber ich kann nichts lesen und der Knopf ist weit oben. Also gehen Sie zurück zu diesem Stylesheet und sagen, mehr Block muss auch eine Farbe von Grau haben, aktualisieren Sie das und überprüfen, ja. Aber ich wollte auch eine Polsterung oben, oben und unten, aber oben haben. Rubrik 2.2, Lauf. Mal sehen, wie das aussieht. Ja, bewegen Sie sich zu schnell, aktualisieren Sie. Ja, das sieht ein bisschen besser aus, aber vielleicht etwas weniger Polsterung, und ich möchte, dass dieser Knopf mehr auf der rechten Seite ist. Ich brauche diese Klasse hier. Ich denke, es wird, ja, WP-Block-Taste sein. Ich werde nur sagen, bearbeiten als HTML, und kopieren Sie diese WP-Block-Taste, kopieren, gehen Sie zurück zu Stylesheet und dann sagen, dass Padding oben 2.1 sein wird, und Padding unten wird 1rem sein. Dann brauche ich diese mehr WP-Block-Button-Klasse. Es muss eine Marge übrig haben, sagen wir 4rem. Mal sehen, wie das jetzt aussieht. Aktualisieren, das sieht ein bisschen akzeptabler aus. Aber weißt du, es gibt eine Menge Detailarbeit zu tun, hätte einen Zustand und all diese netteren Dinge wie ich möchte mehr Betonung in diesem Block haben usw. Nächster Block ist nur eine Kopie dieses. Es hat einen Text auf der linken Seite und ein Bild auf der rechten Seite. Genau das werden wir tun. Hier ist unser erster Block. Ich werde es hier auswählen, und in diesem Menü werde ich Duplizieren auswählen. Das war's. Ich muss die Medien ändern, um auf der rechten Seite zu zeigen, und ich muss auch dieses Bild hier ändern, auswählen, ziemlich einfach, und dann möchte ich es den ganzen Weg unter diesen mehr Block schieben. Ich vergaß hier, ich wollte übereinander auf Handy stapeln, so dass die Leute die Ansicht Seite lesen können. Wie ich schon erraten habe, haben wir diesen schönen neuen Block, aber dieser Block hier ist dieser hier. Dieses div hat eine Marge. Außerdem hat dieses div einen Rand, dieses hat einen Boden und dieses hat ein Top. Jetzt ist das obige der mehr Block, wir haben es bereits in unserem Stylesheet. Ich werde nur hier mehr Block sagen, ich brauche die Marge unten Null zu sein, und nur für den Fall, dass ich wichtig setzen werde. Ich will nicht, dass irgendetwas damit verwirrt. Jetzt muss ich zurück, zuerst werde ich das retten, ja, und ich muss zurückgehen. Du wirst sehen, ob ich mich erneuere, es ist immer noch da. Aber ich kann Ihnen hier im Inspect-Element zeigen. Dieses div hat keinen unteren Rand mehr, aber dieses hat einen Rand oben. Was machen wir denn? Wir fügen nur eine Klasse zu dieser letzten Zeile hinzu, die wir gerade gemacht haben, also wähle ich sie hier aus und sage, wird sein, aktualisieren. Im Stylesheet, setzen Sie die Anemone zu arbeiten, und sagen, Rand oben wird Null sein und es wird wichtig sein. Lasst uns nachsehen. Ja, FileZilla wir haben nicht vergessen, Seite anzeigen, ja. So soll es aussehen, großartig. Wir müssen nur ein wenig zwischen dem Erstellen von Blöcken und dem Erstellen zusätzlicher CSS-Klassen für sie und der Arbeit an ihnen in Ihrem Stylesheet anpassen, und vergessen Sie nicht die wichtige Regel. Jetzt wird der letzte Block der Kontakt und die Google Maps sein. 12. Anpassen: Um unsere letzte Zeile von Inhalten auf der Titelseite zu erstellen, benötigen wir ein Kontaktformular und Google Maps. Wir machen einen kleinen Ausflug hier, wir fügen ein Plugin, das es heißt, Kontaktformular 7. Ein sehr beliebtes Plugin, weil es mit so vielen anderen Diensten integriert ist. Sie können eine Rückeroberung haben. Sie können es mit PayPal und Stripe verwenden. Sehr, sehr vielseitiges Plugin. Also werde ich es aktivieren. Hier gehen Sie zu den Einstellungen, Ich habe Kontaktformular 1, ich kann diesen Namen hier lassen, weil ich nur ein Kontaktformular für jetzt haben werde. Ich kopiere den Kurzcode hier und baue ihn in meine Titelseite in der linken Spalte ein. Also füge ich hier einen neuen Block hinzu, zwei Spalten, und ich werde nur den kurzen Code hier in der linken Spalte eingeben und dann überprüfen, weil ich möchte, dass es ganzseitig sein soll, natürlich, volle Breite, sorry, und Update. Wenn ich einen Blick hier schaue, hier ist unsere Form, großartig. Es ist nur ein bisschen, wissen Sie, die Felder sind zu groß und diese Etiketten normalerweise müssen Sie sie oben lassen. Es ist sehr hilfreich für die Zugänglichkeit für Menschen, die Tastatur verwenden, um die Website zu navigieren, nur um dieses Label oben zu verlassen. Aber für diese Website, ich denke, es wird in Ordnung sein, wenn ich es einfach als Platzhaltertext hineinlege. Um dies zu tun, gehe ich wieder zum Dashboard hier in Kontakt, Kontaktformularen und Bearbeiten. Ich möchte, dass dieser Text hier in diesem Bereich als Platzhalter ist, ich kann diesen löschen und dann Text als Feldformular verwenden. Es wird heißen, dein Name. Dein Name. Standardwert, die Texte, die ich von oben kopiert habe. Verwenden Sie diesen Text als Platzhalter des Felds. Ich werde ein ID-Attribut hinzufügen, denn später, wenn ich ein anderes Kontaktformular auf dieser Website erstelle, möchte ich die Möglichkeit haben, nur dieses spezifische Feld aufzurufen. Es wird sein, Ihr Name, „Tag einfügen“. Hier ist es, ich kann diesen löschen. Für die E-Mail ist es ziemlich dasselbe. Kopieren, ich kann dies löschen und E-Mail setzen. Erforderliches Feld, es wird Ihre E-Mail sein. Standardwert, derjenige, den ich von oben kopiert habe. Verwenden Sie diesen Text als Platzhalter. ID, Ihre E-Mail, „Tag einfügen“. Ich kann das löschen. Die Form besagt, dass es eine Art Konflikt hat. Ich weiß nicht, alles ist in Ordnung. So, Formular speichern, wir sind zurück. Subjekt, so. Ja, ich muss tun, ist auch hier. Text, und es wird kein Pflichtfeld sein. Es wird nur Subjekt sein. Standardwert, Betreff. Verwenden Sie diesen Text. Betreff, „Tag einfügen“ und hier löschen. Dann ist die letzte, Ihre Nachricht. Ich werde hier nur löschen. Textbereich, genau. Ich werde es hier lassen. Standardwert, Ihre Nachricht. Benutze das. Ich werde kein Text-ID-Attribut verwenden. Das ist also unser neues Formular Speichern, und werfen Sie einen Blick auf die Seite. Lassen Sie mich sehen. Es sieht jetzt anders aus und ich muss es nur hier stylen. Um dieses Feld zu stylen, werde ich nur meine Web-Tools hier öffnen und überprüfen. Das ist meine Form, Formklasse, wcpf7-Form, wirklich nett. Jedes der Elemente ist hier in einem Absatz, der Beschriftung und der Span-Klasse, und innerhalb der Span-Klasse ist das Eingabeelement, das ich stylen möchte. Also gehe ich hierher, ich werde das nur hochschieben, damit es leichter zu lesen ist. Eingabetyp Text und et cetera. Ich möchte, dass der Hintergrund grau ist, also werde ich nur aaa schreiben. Ich will keine Grenze hier, keine. Das war's. Ich werde diesen ersten [unhörbaren] Text kopieren. Achten Sie darauf, alles auszuwählen. Gehen Sie zurück zum Stylesheet, geben Sie dies ein, und kopieren Sie diese Klasse dann aus dem Formular. Bearbeiten Sie HTML, und die Klasse ist hier. Ich kopiere das, lege es in mein Stylesheet als Klasse, und natürlich ist es ein Tippfehler wie so. Ich werde es hier speichern und dann zurückgehen, weil ich auch diese Farbe hier ändern möchte . Es wird auch grau sein. Ich ziehe es einfach ein bisschen nach oben, vielleicht ein bisschen mehr nach oben. Ja. Dann wollte ich, dass es Source Sans Pro und serif sind, und die Zeilenhöhe fünf. Ich muss das alles kopieren. Nun, nicht alles, aber, ja, ich versuche es hier. Kopieren und bearbeiten Sie hier und fügen Sie die Klasse hinzu. Okay, speichern Sie es. Bestätigen. Gehen Sie zurück zum Browser. Außerdem möchte ich die Schriftgröße ändern. Es wird 8,8rem sein. Ich werde das hier kopieren. Kopieren und fügen Sie es hier, wpcf7-form als Klasse. Natürlich muss ich es vor jedes dieser Elemente stellen. Lassen Sie sich von niemandem anders erzählen. Was natürlich, es ist einfacher, das in SAS zu tun, aber wir tun die Dinge manuell hier. Ja, ich muss das hier nicht nochmal schreiben, ich werde nur Schriftgröße, rem und alles hinzufügen , was nicht erscheint, wahrscheinlich eine wichtige Regel sein. Mal sehen, was wir bis jetzt getan haben. Aktualisieren. Es sieht im Grunde so aus, als wollte ich, dass es aussieht. Okay, vielleicht nicht der Knopf, aber du verstehst den Punkt. Sie müssen nur Ihre Webtools öffnen, die Elemente auswählen, ihre Klassen anzeigen und sie dann in Ihrem Stylesheet bearbeiten. Gehen wir zu Google Maps, unserer zweiten Spalte. Um Google Map hier in unsere Website einzubetten, gehen wir einfach zu Google Maps, geben Sie die Adresse des Unternehmens ein, das wir zeigen möchten, und klicken Sie dann vielleicht auf diese Markierung und dann auf Teilen. Lassen Sie mich einfach überprüfen, ob das funktioniert, manchmal nicht und ich weiß nicht warum. Wir können keine Karte einbetten, es hat jetzt nicht funktioniert. Ich werde dies so aktualisieren, und klicken Sie dann auf „Teilen“, betten Sie eine Karte ein, und jetzt hat es funktioniert. Also hier kann ich sogar wählen, ich werde diese kopieren, „Kopieren Sie HTML“ und dann wählen Sie sogar die Größe. Ich werde die Größe setzen, die ich gesehen habe, die ich brauche. Es ist 650 Breite und 595 Höhe, und dann „Copy HTML“ wieder mit den Abmessungen. Gehen Sie zu Unsere Seite, Seite bearbeiten, und bearbeiten Sie die Spalte. Also hier klicke ich auf diesen Block hinzufügen Button und habe eine Spalte ausgewählt und ich möchte sofort eine zusätzliche CSS-Klasse hinzufügen, ich werde es Google Map nennen, nur um die Möglichkeit zu haben, diese Karte zu stylen. Ich werde hier aktualisieren. Dann werde ich hier den benutzerdefinierten HTML-Block auswählen. Geben Sie also den Code von der Google Maps-Seite ein und dann Aktualisieren. Seite anzeigen, und das ist unsere Karte. Wir können es wieder mit unserer zusätzlichen CSS-Klasse stylen, aber im Grunde haben wir jetzt Google Maps mit der Adresse des Unternehmens hinzugefügt. Das war es mit der Content-Anpassung, wir bewegen uns auf den Header. 13. Anpassen: Um unseren Header anzupassen, benötigen wir hier natürlich ein Logo. Ich habe hier eine kleine Demo des Standardlogos für dieses Thema vorbereitet. Ich werde eine Site-Identität anpassen und hier werde ich ein Logo aus der Mediathek auswählen. Ich habe ein Bild hochgeladen, wo sie als Vorlage im Internet gefunden werden, und ich werde es auswählen. Hier steht „Bild zuschneiden“, veröffentlichen, schließen Sie den Customizer, und dies ist das gesamte Logo für das 2019-Thema. Wie ich verstanden habe, hat das Thema einen Schwerpunkt auf Text und Schreiben, also ist es großartig für Journalisten, Blogger und Autoren, aber für meine Website und die Branding Zwecke, brauche ich wirklich ein größeres Logo. Ich gehe zurück zum Customizer, um dieses zu entfernen, das Logo zu entfernen, erneut zu veröffentlichen, und dann gehe ich zur Medienbibliothek, um neue Datei, mein SVG-Logo, hinzuzufügen. Ich mag SVG, es ist vektorisierte Datei und es verliert keine Qualität während der Skalierung, aber WordPress mag es hier nicht. Es sagt, es ist aus Sicherheitsgründen nicht erlaubt, was großartig ist, weil jemand sich um die Dateisicherheit in WordPress kümmert, aber dann bedeutet es, dass ich in einem Plugin verwenden muss, und ich fand eine, die SVG-Unterstützung genannt wird. Hier ist es. Gehen, um es zu installieren und zu aktivieren. Gehe zu den Einstellungen, wenn ich einen Blick schaue, werde ich nichts ändern. Es heißt: „Auf Administratoren beschränken“, was gut ist, nur ich darf mit SVGs umgehen und sie hochladen, also, das war's. Ich gehe zurück zur Mediathek und füge wieder mein SVG-Logo hinzu, offen, und hier ist es, es hat funktioniert. Das ist gut. Gehen Sie zurück zum Customizer, Site-Identität, wählen Sie „Logo“, hier ist es, wählen Sie, und es sagt, „Bild zuschneiden “, aber es sagt: „Es ist ein Fehler aufgetreten. Uns gefällt es noch nicht.“ Nun, ich habe nach dem Grund dafür gesucht und habe festgestellt, dass im 2019 Elternthema, in der PHP-Funktion, es eine Funktion gibt, die dieses benutzerdefinierte Logo berücksichtigt, ich werde es hier finden, benutzerdefiniertes Logo. Es sagt: „Die Höhe beträgt 190 Pixel, die Breite beträgt 190 Pixel“, also ist es ein Quadrat, und dann gibt es Flex Breite auf false gesetzt, es gibt keine flexible Breite, und es gibt keine flexible Höhe, also muss ich ändern Sie dies. Ich habe durch die WordPress-Org-Foren geschaut und in den Codecs gefunden, es gibt diesen Code hier, den ich kopieren werde, und ich habe es als Antwort auf viele Fragen der Anpassung des 2019-Logos ausgedrückt, also gehe ich zu meinen Funktionen PHP Datei im Kind-Design hier, und ich werde diesen Code hinzufügen und ihn an mein Thema anpassen. Also hier unter dieser Enqueue-WP-Kind-Theme-Funktion, die hier mit diesen Klammern endet, werde ich diese Funktion einfügen und dann den Namen ändern, ich werde es L-Yaks benutzerdefiniertes Logo nennen, und es wird 100 sein Pixel hoch und 400 Pixel breit. Die flexible Breite ist auf true gesetzt und ich möchte, dass auch die flexible Höhe auf true gesetzt wird. So, und das war's. Ich glaube, ich werde das löschen. Oh, ich muss das hier natürlich ändern. Es ist meine L-Yaks benutzerdefinierte Logo-Funktion. Präfix, ja, ich glaube, das war's. Ich werde das speichern und auf den Server hochladen, und werfen Sie einen Blick hier. Auch hier anpassen, Site-Identitäten, wählen Sie „Logo“, „SVG-Datei“, und ich werde nur das Zuschneiden überspringen. Das war's, veröffentlichen, schließen, und hier sind wir. Wir haben hier dieses kleine Logo, das gar nicht das ist, was wir brauchen. Wir haben auch den Website-Titel, den ich hier nicht erscheinen möchte. Aber jetzt weißt du, wie wir das ändern werden. Wir werden auf die Style-CSS-Datei gehen und den Header an unsere Bedürfnisse anpassen. Wir brauchten nur die Möglichkeit einer flexiblen Größe des Logos in unseren Funktionen PHP zu schaffen. So sehen wir uns in ein bisschen in unserem Stil CSS. Kurz bevor wir in unser Stylesheet eintauchen, fehlt ein wesentliches Strukturelement. Es ist unsere Speisekarte hier. Ich gehe hier zu den Menüs und gebe meiner Speisekarte einen Namen. Ich werde es Top-Menü nennen. Es wird oben auf einer Seite sein, Menü erstellen. Es wird ein Hauptmenü sein. Speichern Sie es. Dann füge ich alle diese Seiten hinzu, die ich als Platzhalter erstellt habe , zum Menü hier und ziehe sie dann einfach in der Reihenfolge ab, in der sie in den Menüs sein sollen. Das kommt hierher, wie so, und speichern Menü, werfen Sie einen Blick, es ist hier. Es übernimmt das Styling der Links, aber wir wollen, dass es hier auf der rechten Seite ist und kleinere Typografie hat. Also werde ich meine Web-Tools öffnen und einen Blick werfen. Dies ist die Navigation der Navigationsnummer. Ich werde das als HTML-Kopie bearbeiten, es in mein Stylesheet einfügen. Ich muss hier ein neues Kapitel namens Headers Styling erstellen und diese ID einfügen, und sagen, ich möchte, dass Sie rechts schweben und ich möchte auch, dass Sie eine Schriftgröße von 0,7 RM haben , speichern. Natürlich kehren Sie auch auf dem Server zum Browser zurück. Ich überprüfe das und etwas ist hier passiert. Wir haben die richtige Typografie, aber wir wollen dieses minimierte Menü hier nicht. Dies ist für die mobile Website und nur in einer Minute, werde ich Ihnen erklären, was passiert ist. Als nächstes möchte ich den Website-Titel hier entfernen und diesen Klassensite-Titel kopieren, zu meinem Stylesheet gehen, es hier hinzufügen und Klassensite-Tippfehler sagen. Bitte keines anzeigen. Speichern und prüfen. Es ist weg und jetzt haben wir unser winziges rundes Logo, das absolut nicht seine Arbeit für unsere Website macht. Lassen Sie mich überprüfen, dass es das Website-Logo hier ist. Ja, das ist die Positionierung des div. Innerhalb des div ist die Verbindung, die den Grenzradius Übergangsbox-Schatten all dies hat, ich werde es nur kopieren, in mein Stylesheet einfügen und sagen, ich möchte, dass der Grenzradius Null ist. Okay, das ist in Ordnung. Ich möchte keine Kastenschatten und zeigt Block und Breite und Höhe an. Ich glaube nicht, dass es 50 Pixel gibt, wird in Ordnung sein. Übergang, bitte keines. Speichern Sie und überprüfen Sie, was wir getan haben. Hier. Es ist winzig und natürlich der Schwebezustand, ich muss das auch ändern. Hier im Inspektor, werde ich einen Blick auf den Hover-Zustand hier werfen und es sagt, das Website-Logo hat einen Kastenschatten schwarz. Es hat auch eine Grenze, die gelbe Grenze, die wir auf allen Links auf unserer Seite haben. Also muss ich es hier in meinem Stylesheet ändern. Ich werde sagen, das hier einzufügen und sagen, Kastenschatten keine, Übergang keine und Rahmenfarbe muss transparent sein. Aber das ist eine wichtige Regel, weil es eine allgemeine Regel für alle Links ist. Das muss konkreter sein. Speichern Sie auf dem Server und überprüfen Sie den Browser und den Hover-Zustand, ist jetzt weg. Das ist gut. Wir müssen uns gerade mit der Größe dieses Logos beschäftigen. Wenn ich hier setze, überprüfen Sie einfach, dass das 50 Pixel ist. Wenn ich 400 setze. Dann ist das Logo weg und das liegt daran, dass die Position dieses Site-Logo-div weit zurück nach rechts ist. Also muss ich sagen auto und ja, die Höhe muss auch geändert werden. Es wird 100 Pixel sein. Ja, und die Position muss sich natürlich auch ändern. Das werde ich nicht tun. Das ist viel zu groß. Also gehe ich zu den Stylesheets und sage das Stylesheet, ich brauche vielleicht 80 Prozent dieser Breite, Höhe. Also, und wenn ich einen Blick, das Logo ist weg, also muss ich diese Website Logo-Position ändern, und dann ist auch, was wichtig ist, dass das Geschäft eine Medienabfrage für große Bildschirme ist , die alles, was oben ist 768 Pixel. Ich muss mich auch darum kümmern, und hier werde ich das kopieren. Ich werde sagen, richtig auto und wichtig, aber auch ich muss die Medienabfrage hinzufügen und min-width ist 768 Pixel. Ja dann, und ich brauche ein paar Klammern hier und hier speichern und überprüfen und hier ist unser Logo. Jetzt müssen wir dies nur in der richtigen Position mit Padding und Marge positionieren und ich muss auch die Farbe dieses Headers ändern, dass dies der Header, ID Masthead ist. Ich werde das nur kopieren. Legen Sie es in das Stylesheet. Es ist eine ID und ich denke, die Hintergrundfarbe, ich habe es hier auf Notiz geschrieben. Die Hintergrundfarbe ist 353942. Ich habe das etwas weiter gestylt. Also für den Header habe ich hier die Höhe erhöht, nicht nur die Farbe und für die Navigation geändert, die nur eine Schaltfläche ist. Jetzt habe ich auch den Rand oben geändert, so dass es mit dem Logo aufgeklärter ist. Und es gibt keine Grenzen für das CSS-Styling in Ihrem Stylesheet. Ich wollte Ihnen nur zeigen, welche Funktion in der Funktionsdatei für die Anzeige der Größe dieses Logos verantwortlich ist, und dann haben wir ein bisschen das CSS geändert, um den Radius zu entfernen, die Grenzen und die Position entfernt, so dass wir zeigen können das gesamte Logo. Hier sind wir nun auf dem Weg zu sehen, was mit der Navigation passiert ist. Ich habe auch ein bisschen für die mobile Version angefangen. Aber was ich dir zeigen wollte, ist eigentlich ein kleiner Trick. Ich war verrückt über diese Anzeige der Schaltfläche auf der Desktop-Version auf großen Bildschirmen und ich ging durch ganze Wort makellose Dateien. Was ich gefunden habe, ist eigentlich das hier im Jahr 2019 selbst in JavaScript-Dateien, es gibt eine Datei namens Prioritätsmenü JS. Als ich einen Blick nach innen, um zu sehen welche Funktion tatsächlich mit diesem Navigationsmenü spielt, fand heraus, dass es einen Tippfehler gibt und es sagt Navivation statt Navigation. Ich weiß nicht, ob das ein zielgerichteter Name war. Ich habe es gerade ausgecheckt, applaudierte die korrigierte Version und jetzt sehen Sie , ob ich unser Hauptnavigation Menü aktualisieren ist hier. Das war im Grunde, dass wir die Stange fertig haben, die erste Kreation oder Anpassung des 2019 um es wie das Thema aussehen zu lassen, an dem wir arbeiten sollen und jetzt natürlich werden die kleinen Details passieren, die die Topographie Bilder schön, etcetera. Das sind keine Grenzen gesetzt. Ich wollte Ihnen nur zeigen, wie Sie mit den Funktionsdateien, mit den Vorlagendateien, mit dem CSS arbeiten mit den Vorlagendateien, , um das Thema zu erstellen, das Sie für Ihre Website haben möchten. 14. Schlussbemerkung: Jetzt haben wir gesehen, wie die Template-Dateien, die Funktionen PHP, das CSS-Stylesheet, die Widgets und die Plugins zusammenarbeiten können, um das 2019 oder die anderen Themen für diese Angelegenheit anzupassen und wie man es an unser eigenes Design anpassen kann. Ich hoffe, Sie haben einige wertvolle Tipps für Ihre eigenen Anpassungen gefunden, und ich freue mich wirklich darauf, Ihre WordPress-Website zu sehen und was Sie getan haben, um es anzupassen. Happy Customizing.