Landing Pages in WordPress How-to – Teil 1

von | 10.11.2018 | Hilfe, Webdesign

Landing Pages in WordPress How-to – Teil 1

Teil 1: Planung einer benutzerdefinierten Landing Page für eine WordPress Website

Dies ist der erste Artikel in einer fünfteiligen Serie über die Planung und Implementierung von benutzerdefinierten Landing Pages in WordPress. Jeder Artikel soll für sich genommen nützlich sein und über die Landing Pages hinaus anwendbar sein, aber in seiner Gesamtheit führt die Serie durch den gesamten Prozess der Planung und Implementierung einer benutzerdefinierten Landing Page. 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

 

WordPress ist nicht nur für Blogging gedacht!

WordPress ist zwar am bekanntesten als Blogging-Plattform, aber es eignet sich gut für die Verwaltung jeglicher Art von Webinhalten. Mit einer kleinen Anpassung kann ein Entwickler oder Administrator die Funktionen von WordPress erweitern, damit die Benutzer die Möglichkeit haben, die für sie wichtigsten Inhalte effizient zu verwalten, ohne dass diese Benutzer selbst den Quellcode berühren müssen.

 

 

Entwerfen einer WordPressBenutzeroberfläche

Identifizierung der Benutzerrollen

Es gibt viele verschiedene Arten von Benutzern und es kann mehr als eine Art für ein einzelnes Projekt geben. Für die Zwecke dieser Serie betrachten wir die Nutzer der Website als eine von zwei allgemeinen Kategorien: Besucher und Mitarbeiter.

Zu den Website-Besuchern gehören die neuen Benutzer und potenziellen Kunden, deren Landing Pages typischerweise dazu gedacht sind, zu informieren und zu überzeugen. Daher wird das Design und der Inhalt von Landing Pages von Marketern, Designern und Textern sorgfältig geplant.

Zu den Mitarbeitern der Website gehören Entwickler und andere Personen, die Zugang haben, um den Inhalt der Website zu ändern, wie z.B. Autoren und Redakteure.

In dieser Serie geht es uns darum, eine benutzerdefinierte Landing Page auf einer Website zu implementieren, die auf WordPress basiert, so dass wir davon ausgehen werden, dass mindestens eine Landing Page bereits als statisches HTML und CSS entworfen und produziert wurde. Unsere Aufgabe wird es sein, dieses HTML und CSS so in WordPress zu integrieren, dass Autoren, Redakteure oder andere geeignete Mitarbeiter, die den Inhalt der Website verwalten, Landing Pages so einfach wie jede andere Seite auf ihrer Website veröffentlichen und bearbeiten können.

In diesem Sinne können wir die Bedürfnisse der Mitarbeiter angemessen berücksichtigen, so dass wir eine Benutzererfahrung gestalten können, die nicht nur für sie, sondern wirklich benutzerorientiert ist.

 

 

Wünsche und Bedürfnisse unserer Nutzer

Stellen wir uns vor, dass wir unsere Redakteure konsultiert haben und dass sie uns gesagt haben, was sie für die Veröffentlichung von Landing Pages wollen und brauchen.

Im Großen und Ganzen haben sie uns erklärt, dass sie die Inhalte der Landing Page mit den ihnen bereits bekannten WordPress-Standardformularen verwalten wollen, ohne den Quellcode direkt bearbeiten zu müssen. Sie wollen, dass ihre Landing Pages ganz anders aussehen als das WordPress-Design, welches auf dem Rest ihrer Website verwendet wird. Dies geschieht durch die Verwendung von separaten Seitenvorlagen und Stylesheets, auf die ihre Designer und Frontend-Entwickler zugreifen können.

Uns wird auch gesagt, dass unsere Redakteure nicht einmal HTML, CSS oder JavaScript sehen wollen, sofern sie es vermeiden können. Sie wollen diese Dinge ihrem Frontend-Team überlassen.

Als Referenz erhalten wir das folgende Modell einer Landing Page:

 

Bildergebnis für landing page scratch

 

In diesem Sinne legen wir für unser Projekt die folgenden funktionalen Anforderungen fest:

  • Hinzufügen und Bearbeiten von Titel, Haupttext und Bild auf der Zielseite mit den Standardwerkzeugen von WordPress zur Inhaltsverwaltung.
  • Hinzufügen und Bearbeiten von sekundären Inhalten mit Hilfe von Standard WordPress Text-Widgets
  • Auswahl aus mehreren Landing Page Templates

 

Was wir tun werden

In dieser Serie werden wir sehen, wie man benutzerdefinierte Landing Pages in WordPress implementiert und wie man es Redakteuren ermöglicht, diese einfach zu verwalten und zu bearbeiten.
Wir beginnen damit, wie und warum wir ein Child-Theme verwenden sollten, anstatt unser WordPress- Theme direkt zu ändern. Als nächstes müssen wir unsere Landing Page in WordPress einbinden. Danach werden wir die Inhalte für unsere Nutzer editierbar machen. Schließlich werden wir noch einige Feinheiten hinzufügen, indem wir das Seitenmenü und die Art und Weise, wie WordPress die Titel der Zielseite generiert, anpassen.

Wir haben eine Menge zu tun, aber lassen Sie sich davon nicht einschüchtern! Wir werden die Dinge langsam angehen und unseren umfangreichen Job angehen, indem wir ihn in kleinere Aufgaben unterteilen.

 

 

Unsere WordPress Umgebung

Wie bei der am häufigsten aktualisierten Software ändern sich die WordPress-Funktionen und Standardeinstellungen im Laufe der Zeit. Wir verwenden die neueste Version von WordPress und das neueste Standard-Theme für WordPress – „Twenty Seventeen“.

Bitte beachten Sie, dass WordPress.com es Benutzern nicht erlaubt, benutzerdefinierte Designs hochzuladen. Wenn du dein eigenes Child-Theme entwickeln möchtest.

 

 

Der Nächste Teil in dieser Serie

In Wie man ein Child Theme für WordPress erstellt, werden wir die Vorteile der Verwendung von Child Themes untersuchen und ein eigenes einfaches Child Theme von Grund auf neu erstellen.