fbpx

Landing Pages in WordPress How-to – Teil 2

von | 1.12.2018 | Hilfe, Webdesign

Landing Pages in WordPress How-to – Teil 2

Teil 2: Benutzerdefinierte Landing Pages in WordPress

 

Wie man ein Child Theme für WordPress erstellt

Dies ist der zweite Artikel in einer fünfteiligen Serie über die Planung und Implementierung von individuellen Landing Pages in WordPress. Jeder Artikel soll für sich genommen nützlich und über die Zielseiten hinaus anwendbar sein, aber zusammengenommen durchläuft die Serie den gesamten Prozess der Planung und Implementierung einer maßgeschneiderten Landing Pages, die sich sauber in eine WordPress-basierte Website integriert. Die resultierende Seite wird mit vertrauten Formularen im WordPress-Administrationssystem leicht editierbar sein.

 

Benutzerdefinierte Landing Pages in WordPress How-to Series

 

  • Planung einer benutzerdefinierten Landing Page für eine WordPress Website
  • Wie man ein Child Theme für WordPress erstellt
  • Kommt bald: Wie man Seiten mit benutzerdefinierten Designs in WordPress erhält
  • Kommt bald: So aktivieren Sie Benutzer, benutzerdefinierte Seiteninhalte in WordPress zu bearbeiten
  • Kommt bald: Wie man Menüs und Titeltext für benutzerdefinierte Seiten in WordPress anpasst

 

Warum ein Child-Theme verwenden?

Die direkte Änderung von Dateien, die von anderen entwickelt und gepflegt werden, kann Upgrades erschweren, also lassen Sie uns ein Child-Theme erstellen, das wir als Grundlage für die spätere Implementierung benutzerdefinierter Zielseiten verwenden können. Wenn Sie bereits ein eigenes Theme entwickelt haben und Landing Pages direkt in dieses integrieren wollen, dann können Sie das sicherlich tun. Untergeordnete Themes sind keine Voraussetzung, um Landing Pages zu WordPress hinzuzufügen – nur eine Möglichkeit für uns, dies zu tun, ohne unsere anderen Theme-Dateien zu ändern.

 

 

Lasst uns ein Child Theme erstellen!

Einfacher Start

Erstellen Sie zunächst einen neuen Ordner für Ihr Design. Wenn Sie wie die meisten Menschen sind, werden Sie es wahrscheinlich so etwas wie „Ich liebe Burritos“ nennen wollen, aber die Standardkonvention von WordPress ist es, Kleinbuchstaben und Bindestriche statt Leerzeichen zu verwenden, also verwenden Sie bitte einen Namen wie „i-love-burritos“. Wir werden unser „aeosys-wordpress-custom-theme“ nennen, denn unsere Liebe zu Burritos ist selbstverständlich.

 

Um ein minimal funktionales Child Theme zu haben, müssen Sie nur zwei Dateien zu Ihrem neuen Ordner hinzufügen:

  • screenshot.png
  • style.css

screenshot.png sollte letztendlich ein 1200×900 Screenshot einer Seite sein, die Ihr Design verwendet, aber Sie können während der Entwicklung mit allem beginnen, was Sie möchten – ein zufällig ausgewähltes Bild von Ihrer Festplatte oder einer Websuche, ein Foto aus Ihrem Dating-Profil oder ein Bild Ihres Haustieres, zum Beispiel.

 

style.css ist mehr als eine Stylesheet-Datei für WordPress; es ist der Ort, an dem WordPress nach grundlegenden Informationen über Ihr Design sucht. Ja, das ist komisch, aber es ist, wie die Dinge in WordPress gemacht werden, also fügen Sie so etwas wie das folgende einfach zum Anfang der Datei hinzu:

Nicht zu verwechseln mit einer Seitenvorlage, der Wert “ Template “ für ein untergeordnetes Design bestimmt das übergeordnete Design entsprechend dem Namen des Ordners dieses Designs. Der Ordner des Twenty Seventeen Themes trägt den Namen „twentyseventeen“, also ist es das, was wir verwenden. Wenn Sie möchten, dass Ihr Kindsthema ein anderes übergeordnetes Design hat, ändern Sie einfach „twentyseventeen“ in den Namen seines Ordners.

 

Das wars! Verschieben Sie nun Ihren Ordner (oder eine Kopie davon) in das wp-content/themes-Verzeichnis innerhalb Ihrer WordPress-Installation, navigieren Sie zu Design> Themes im WordPress-Administrationssystem, und schon sollten Sie Ihr neues Design dort aufgelistet sehen und bereit zur Aktivierung oder Vorschau sein.

 

Während Sie Ihr Child-Theme verwenden, wird alles auf Ihrer Website genau so aussehen, wie es bei der Verwendung des Twenty Seventeen Themes aussehen würde, es sei denn und solange, bis wir das ändern, und sowohl das Parent- als auch das Child-Theme können unabhängig voneinander aktualisiert werden, so dass die Arbeit mit einem Child-Theme eine gute Option ist.

 

Eine weitere Standarddatei

Fügen wir nun eine weitere Standarddatei zu unserem untergeordneten Theme-Ordner hinzu: functions.php.

 

functions.php kann verschiedenen gemeinsamen Code für ein Theme beinhalten, einschließlich WordPress Hooks und Filter. Beginnen wir mit etwas Code, um WordPress anzuweisen, unsere style.css-Datei nach der style.css-Datei des übergeordneten Themes zu laden. Dadurch wird sichergestellt, dass unsere Style-Definitionen Vorrang vor allen übergeordneten Style-Definitionen mit Selektoren mit den gleichen Eigenschaften haben.

Die „add_action“ weist WordPress an, unsere benutzerdefinierte Funktion auszuführen, wenn WordPress einen bestimmten Punkt in seinen Aufgaben zur Seitenvorbereitung erreicht – wenn es Warteschlangen von Seitenelementen zusammenstellt, bevor es sie tatsächlich zur Seite hinzufügt. Machen Sie sich keine Sorgen um die

 

Die „add_action“ weist WordPress an, unsere benutzerdefinierte Funktion auszuführen, wenn WordPress einen bestimmten Punkt in seinen Aufgaben zur Seitenvorbereitung erreicht – wenn es Warteschlangen von Seitenelementen zusammenstellt, bevor es sie tatsächlich zur Seite hinzufügt. Machen Sie sich keine Sorgen, dass der Hook-Name nur Skripte erwähnt; „wp_enqueue_scripts“ ist auch für Styles.

 

Was unsere benutzerdefinierte Funktion betrifft, so teilt sie WordPress mit, dass sie die Stylesheets sowohl für das übergeordnete als auch für das untergeordnete Design in die Warteschlange stellt, und sie teilt WordPress mit, dass der untergeordnete Designstil vom übergeordneten Designstil abhängig ist. Es gibt ein paar Details, die es wert sind, hier erwähnt zu werden:

 

  • Der Handgriff im „Twentyseventeen-Stil“ ist spezifisch für unser ausgewähltes übergeordnetes Theme. Wenn Sie etwas anderes verwenden, wird WordPress wahrscheinlich zwei Instanzen desselben Stylesheets laden. Nicht umbenennen!
  • „wp_get_theme()->get(‚Version‘)“ bezieht sich auf die Versionszeichenkette im style.css Kommentarblock von zuvor. Dieser Parameter ist optional, aber wenn Sie eine Versionszeichenfolge angeben, fügt WordPress sie an Ihre Stylesheet-URL an und stellt sicher, dass Browser das Stylesheet bei jeder Änderung der Versionszeichenfolge neu laden.

 

Wir könnten eine bedingte Logik hinzufügen, um sicherzustellen, dass nur bestimmte Stylesheets mit bestimmten Vorlagen geladen werden (z.B. nur für Landing Pages und nicht für Blog Pages), aber ob Sie das tun wollen, hängt von Ihren Zielen für Ihre spezielle Website ab, also denken Sie daran, dass es möglich ist, diese zu verwenden, wenn Sie es wollen.

 

Das ist es, soweit wir in diesem Tutorial auf Child-Themes eingehen werden. Von hier aus wird alles, was wir tun, spezifisch für unsere Zielseiten sein: sie in WordPress zu bringen und es den Benutzern zu ermöglichen, ihre Inhalte anzupassen.