Wir haben es alle schon oft gesehen. Wovon rede ich? Der WordPress-Editor, vollgestopft mit HTML oder Shortcodes zum Erstellen eines benutzerdefinierten Seitenlayouts. Das mag in Ordnung sein, wenn Sie ein Entwickler sind und der Einzige, der an einer Seite arbeitet, aber was wäre, wenn die von Ihnen erstellte Seite für einen Kunden wäre, der Änderungen vornehmen möchte, sobald Sie fertig sind?

Katastrophe! Es genügt ein falscher Tastendruck, um Ihre ganze harte Arbeit völlig zunichte zu machen und eine dringende E-Mail von Ihrem Kunden zu erhalten, die Sie darüber informiert, dass der Himmel eingestürzt ist.

Glücklicherweise gibt es in WordPress eine Reihe von Möglichkeiten, benutzerdefinierte Layouts zu erstellen, die Ihren Kunden das Bearbeitungserlebnis erleichtern und Ihnen gleichzeitig die Flexibilität bieten, die ein Entwickler benötigt.

Benutzerdefinierte Felder

Beim Erstellen einer Seite in WordPress ist Ihnen möglicherweise das Feld für benutzerdefinierte Felder unter dem Editor aufgefallen. In diesem Feld können Sie einen Feldnamen und einen damit verbundenen Wert eingeben. Was kann man damit machen und warum ist es wirkungsvoll?

Angenommen, Sie haben eine benutzerdefinierte Seitenvorlage für die Homepage Ihres Kunden codiert und möchten einen Teil des Textes bearbeitbar machen. Der einfachste Weg, dies zu tun, wäre, den Text direkt in der Vorlagendatei zu bearbeiten, aber das ist nicht sehr benutzerfreundlich. Stattdessen können Sie durch die Verwendung benutzerdefinierter Felder Ihren Kunden Teile einer benutzerdefinierten Seitenvorlage zur Bearbeitung zugänglich machen, ohne befürchten zu müssen, dass sie das Layout beschädigen. So geht's...

Fügen Sie ein benutzerdefiniertes Feld hinzu

Als Erstes müssen Sie ein neues benutzerdefiniertes Feld hinzufügen. Wählen Sie im Feld „Benutzerdefinierte Felder“ entweder einen vorhandenen Namen aus oder geben Sie einen neuen ein und geben Sie dann den gewünschten Wert ein. In diesem Beispiel machen wir die Kopfzeile unserer benutzerdefinierten Seitenvorlage bearbeitbar. So sieht unser neues benutzerdefiniertes Feld aus.

Bearbeiten Sie Ihre Seitenvorlage

Nachdem wir nun ein benutzerdefiniertes Feld haben, fügen wir es mithilfe des folgenden Codes zu unserer benutzerdefinierten Seitenvorlage hinzu.

 <div class="my-heading"> <h1><?php echo get_post_meta( get_the_ID(), 'main-heading', true ); ?></h1> </div>

In diesem Snippet verwenden wir die Funktion get_post_meta, um unseren benutzerdefinierten Feldwert aus der WordPress-Datenbank abzurufen und ihn in einem h1-Tag wiederzugeben. Unser benutzerdefiniertes Feld trägt den Namen „Hauptüberschrift“, also stellen Sie sicher, dass Sie es im Funktionsaufruf austauschen, wenn Ihr Feld anders ist.

Diese Technik mit benutzerdefinierten Feldern kann so oft wiederholt werden, wie Sie die Bearbeitung für verschiedene Teile Ihres Layouts aktivieren möchten.

Erweitertes Plugin für benutzerdefinierte Felder

Benutzerdefinierte Felder funktionieren gut, haben aber ihre Grenzen. Zum einen verlieren Sie bei der Verwendung benutzerdefinierter Felder die Möglichkeit, grundlegende Editorfunktionen wie Fett- und Kursivschrift zu verwenden. Sie sind auch nicht sehr benutzerfreundlich, wenn Sie versuchen, etwas anderes als Text, beispielsweise ein Bild, bearbeitbar zu machen. Hier kommt eines meiner Lieblings-Plugins ins Spiel, das Advanced Custom Fields (ACF)-Plugin.

Mit ACF können Sie einige wirklich unglaubliche Dinge tun, z. B. den Standardeditor durch Ihre eigenen benutzerdefinierten Seiteneinstellungen ersetzen. Das ist es, was wir derzeit für viele der benutzerdefinierten Seiten auf der neuen WordPress-Website der Connor Group tun. Die Teamseite zeigt beispielsweise ein Raster mit anklickbaren Miniaturansichten der Mitarbeiter, die sich zu einer Mitarbeiterbiografie öffnen. Wir haben mithilfe von ACF eine einfache Schnittstelle erstellt, die es dem Marketingteam der Connor Group ermöglicht, Mitarbeiter einfach hinzuzufügen oder zu entfernen, wenn sie kommen und gehen.

Das Hinzufügen dieser Art von Funktionalität lässt sich leicht erreichen, indem Feldgruppen mithilfe der Drag-and-Drop-Schnittstelle von ACF erstellt werden. Jede Gruppe kann eine beliebige Anzahl unterschiedlicher Feldtypen haben und sogar verschachtelte Gruppen von Wiederholungsfeldern enthalten, die wie die Einstellungen für die Teamseite der Connor Group hinzugefügt oder entfernt werden können.

Feldgruppen können zu jedem Nachbearbeitungsbildschirm basierend auf einem von Ihnen definierten Regelsatz hinzugefügt werden. Beispielsweise werden die Einstellungen im obigen Screenshot nur auf den Beitragsbearbeitungsbildschirm angewendet, wenn der aktuell bearbeitete Beitrag die Teamseite ist.

Verwenden erweiterter benutzerdefinierter Felder in Ihrer Seitenvorlage

Die Verwendung von ACF-Werten in Ihren benutzerdefinierten Seitenvorlagen sollte Ihnen vertraut vorkommen, da dies der Verwendung der standardmäßigen benutzerdefinierten WordPress-Felder ähnelt.

 <div class="my-heading">
    <h1><?php the_field( 'headline' ); ?></h1>
</div>

Wie Sie im obigen Beispiel sehen können, sieht der von uns verwendete Code dem Code, den wir für die benutzerdefinierten Standardfelder verwendet haben, auffallend ähnlich. Der einzige Unterschied besteht darin, dass wir die ACF-Funktion the_field anstelle der WordPress-Funktion get_post_meta verwenden. Wenn Sie dieser Funktion den Namen Ihres Felds übergeben, wird der eingegebene Inhalt oder die URL zu einem Bild ausgegeben, wenn Sie ein Bildfeld verwenden.

Advanced Custom Fields ist ein wirklich leistungsstarkes Plugin, das Entwicklern eine Welt voller Möglichkeiten eröffnet. Wenn Sie es noch nicht getan haben, empfehle ich Ihnen dringend, es auszuprobieren. Meiner Erfahrung nach hat die Umsetzung sehr viel Spaß gemacht und die Resonanz unserer Kunden war überwältigend positiv.

Front-End-Seitenersteller

Frontend-Seitenersteller für WordPress sind eine relativ neue und interessante Option. Während Sie als Entwickler auf etwas Flexibilität verzichten müssen, gibt es viele Szenarien, in denen die Verwendung einer solchen Lösung viel Zeit sparen und die Bearbeitung einer Seite für Ihre Kunden viel intuitiver gestalten kann.

Schnelle Entwicklung

Mit einem Seitenersteller können Sie Seiten visuell und schnell gestalten. Seitdem wir unseren eigenen Page Builder entwickelt haben, gab es viele Szenarien, in denen wir Photoshop nicht einmal öffnen. Stattdessen erstellen wir unsere Mockups live im Browser, überprüfen sie mit dem Kunden und nehmen bei Bedarf Änderungen vor. Dieser Arbeitsablauf funktioniert möglicherweise nicht für jede Seite, die Sie erstellen. Es liegt also an Ihnen, zu entscheiden, welche Lösung im Kontext dessen, was Ihre Kunden erreichen möchten, am besten geeignet ist.

Intuitive Bearbeitung

Das Ziel all dessen besteht darin, Ihren Kunden die Bearbeitung zu erleichtern, und genau das kann mit einem Front-End-Seitenersteller erreicht werden. Anstatt im WordPress-Adminbereich zu arbeiten, können Ihre Kunden auf den Inhalt ihrer Seiten zeigen und darauf klicken, um ihn in einer intuitiven Front-End-Oberfläche zu bearbeiten.

Abschluss

Wenn es darum geht, benutzerdefinierte Layouts in WordPress zu erstellen, benötigen Sie manchmal nur eine einfache Lösung wie die integrierten benutzerdefinierten Felder. In anderen Fällen benötigen Sie möglicherweise etwas Robusteres wie das Plugin „Erweiterte benutzerdefinierte Felder“ oder etwas Intuitiveres, das eine schnelle Entwicklung ermöglicht, wie einen Front-End-Seitenersteller. Letztendlich trägt jede dieser Lösungen dazu bei, dasselbe zu erreichen: Ihren Kunden die Bearbeitung benutzerdefinierter Layouts in WordPress zu erleichtern.

Dies sind drei meiner Lieblingslösungen, die ich in meiner WordPress-Entwicklungs-Toolbox zum Erstellen von Client-Sites habe. Welche Lösungen haben Ihrer Meinung nach für Sie und Ihre Kunden gut funktioniert?