Laden…

WordPress Theme Entwicklung:
ACF Pro vs Page Builder

Um ein intuitiv administrierbares WordPress Theme zu entwickeln ist aus meiner Sicht die Verwendung einer der beiden Tools definitiv nötig. In diesem Beitrag möchte ich die beiden Vorgehensweisen bzw. Tools gegenüberstellen und dir die wichtigsten Vor-und Nachteile aufzeigen.

ACF Pro

(= Advanced Custom Fields Pro)

Die kostenlose Variante:

Advanced Custom Fields

Die Pro Version: https://www.advancedcustomfields.com/pro/

Wie ich in anderen Beiträgen schon erwähnt habe, bin ich ein großer Fan von ACF Pro. In nahezu jedem WordPress Theme, das ich entwickelt habe, kam es bisher zum Einsatz.

Ich möchte hier nicht weiter auf die Funktionsweise des Plugins eingehen und setze voraus, dass du das Plugin kennst, oder zumindest davon gehört hast. Dennoch möchte ich kurz darauf eingehen, wie ich es für die Entwicklung meiner Themes verwende.

Theme Entwicklung mit ACF Pro

  • Flexible Content: Ich lege mir ein Template an, welches dafür sorgt flexible Inhalte auszugeben. In meinem Fall sind das Module/Sektionen/Template Parts, die im WordPress Backend beliebig jeder Unterseite in der gewünschten Reihenfolge hinzugefügt und mit Inhalten bestückt werden können.
  • Sektionen: Im Laufe der Zeit habe ich etliche Sektionen für ACF entwickelt, die ich in neuen Projekten natürlich immer wieder verwenden kann. Darunter Swiper-, Galerie-, Kontakt-, Latest-Post-, Google-Maps-,… Sektionen.
  • Repeater Fields: Diese nutze ich vor allem innerhalb einer Sektion um Bereiche zu schaffen in denen die maximale Anzahl an Elementen nicht definiert ist. Sprich Swiper/Slider, Download-Listen,…
  • Options Page: Diese nutze ich hauptsächlich um meinem Kunden eine zentrale Einstellungsseite zu bieten, über die er alles verwalten kann, was nicht zu einer Unterseite oder einem Beitrag gehört. Hier kann man dann z.B. das Header- und das Footer-Logo hochladen, Schrifttypen und -größen auswählen, Farben definieren, usw.

Im Grunde habe ich mir mit ACF über die letzten Jahre meinen eigenen Page Builder geschaffen 😉

In naher Zukunft werde ich hierzu einen mehrteiligen Beitrag verfassen um meine typische Vorgehensweise bei der Theme Entwicklung mit ACF Pro Schritt für Schritt aufzuzeigen.

Die Vorteile

  • Volle Kontrolle: Da ich ACF immer in Kombination mit meinem eigenen Basis Bootstrap Theme verwende, habe ich die komplette Kontrolle darüber, wie meine Markup später aussehen wird, welche Klassen und IDs gesetzt werden und welche JS Libraries eingebunden werden.
  • Ladezeit: Durch diese volle Kontrolle finde ich es wesentlich leichter Pagespeed Optimierungen vorzunehmen, da ich problemlos im ganzen System eingreifen kann, falls irgendetwas die Ladezeit verschlechtert.
  • DSGVO: Auch hier ist es von Vorteil auf einfach Weise selbst bestimmen zu können, ob z.B. eine Google Font vom eigenen Server geladen wird oder nicht.
  • Erweiterbarkeit: Es können problemlos und nach Kundenwunsch neue Module hinzugefügt oder bestehende Module erweitert werden.

Die Nachteile

  • Aufwand: Trotz meines großen Fundus an vorgefertigten ACF Sektionen, die mir automatisiert die Datenbankeinträge anlegen und für die Ausgabe im Frontend sorgen, ist die Entwicklung natürlich etwas aufwendiger als mit einem Page Builder. Viele Page Builder bieten auch die Möglichkeit gleich noch Animationseffekte zu den verwendeten Elementen hinzuzufügen, was du selbst natürlich erst einmal über eine JS Library oder CSS Animations lösen müsstest.
  • Freiheit: Wenn mein Kunde eine Anpassung an einer Sektion wünscht, die das Modul bisher leider nicht vorsieht, bin ich gezwungen die Sektion auf Datei-Ebene und gegebenenfalls auch die Datenbank anzupassen. Ein realitätsfernes, aber simples Beispiel: Du hast eine zweispaltige Sektion geschrieben, bei der in der linken Spalte ein Bild erscheint und rechts der Inhalt eines WYSIWYG Editors ausgegeben wird. Nun möchte dein Kunde, dass das Bild rechts statt links ausgegeben wird. Da du im Verlgleich zu einem Page Builder nicht einfach per Drag&Drop die Spalten tauschen kannst, musst du das Markup ändern.

Page Builder

Ich habe schon mit etlichen Page Buildern gearbeitet: Elementor, Fusion Builder, WPBakery, Visual Composer. Was ich jedoch gleich zu Anfang gestehen muss: Ich habe noch nie ein WordPress Theme entwickelt und dabei einen Page Builder verwendet. Diese kamen bei mir immer nur zum Einsatz wenn ein gekauftes Theme einen der Builder integriert hatte.

Theme Entwicklung mit Page Buildern

Ähnlich wie bei der Theme Entwicklung mit ACF, benötigt man zunächst einen Header, sowie einen Footer der für gewöhnlich nicht über den Page Builder administriert bzw. „zusammen geklickt“ wird. Nur im eigentlichen Content Bereich einer Unterseite, lassen sich dann die Inhalte des Builders ausgeben. Je nach Page Builder gibt es Vorgaben, wie dein Theme aufgebaut sein muss, damit du den Builder in vollem Umfang nutzen kannst.

Die Vorteile

  • Aufwand: Vor allem mit gekauften, sprich fertigen Themes, kannst du blitzschnell eine Seite zusammen klicken.
  • Freiheit: Du kannst Elemente und Module auf einfache Weise nach Kundenwunsch anpassen, ohne dafür auch nur eine Zeile Code schreiben zu müssen.

Die Nachteile

  • Fehlende Kontrolle: Mir als Entwickler geht es nur allzu oft so, dass ich bei der Verwendung von Page Buildern ein Gefühl des Kontrollverlusts verspüre 😉 Oder es zumindest sehr aufwendig ist, sich die Kontrolle zurück zu erobern. Das wirkt sich oft negativ auf die Ladezeit aus, oder macht es unnötig aufwendig dafür zu sorgen , dass z.B. Schriften oder Libraries nicht von fremden, sondern vom eigenen Servern geladen werden.
  • SEO: Oft ist das Markup dieser Page Builder extrem aufgeblasen. Das muss es natürlich auch sein, um die oben erwähnte Freiheit garantieren zu können. Allerdings wirkt sich unnötig viel Markup mit etlichen CSS Klassen und IDs negativ auf den SEO Aspekt deiner Website aus. Auch wenn nicht ganz klar ist, inwiefern sich das auf dein Ranking auswirkt, sollte die sogenannte „Code To Text Ratio“ nicht unter 25% liegen (Der für den Menschen lesbare Anteil gemessen am gesamten Quellcode).
  • Erweiterbarkeit: Ich hatte schon mehrfach den Fall, dass ich mir eigene Shortcodes schreiben musste nur um eine simple Funktion zu erhalten, die jedoch zu speziell war, als dass sie ein Page Builder von Haus aus mitbringen würde. Das ist zwar nicht weiter dramatisch, wäre jedoch mit einem ACF Pro Theme schneller und leichter möglich gewesen. Ich muss hier allerdings dazu sagen, dass es auch Page Builder gibt, bei denen man eigene Module hinzu entwickeln kann. Somit ist dies nur für manche Builder als Nachteil zu sehen.

Fazit

Wie du dir sicher schon denken kannst, werde ich keine pauschale Aussage dazu treffen, wer nun der „Gewinner“ und wer der „Verlierer“ ist.

Die Entscheidung hängt von vielen Faktoren ab:

  1. Wie lange hast du Zeit für die Entwicklung?
  2. Wie hoch ist das Budget für die Entwicklung?
  3. Ist damit zu rechnen, dass es nach Livegang noch viele grundlegende Anpassungen am Layout der Seite geben wird?
  4. Wird ein Entwickler, oder ein Rookie die Seite nach Livegang betreuen?
  5. Wird bei der Website wert auf SEO oder eine optimale Ladezeit gelegt?

Good to Know

Elementor kannst du sogar in Kombination mit Advanced Custom Fields verwenden. Ich selbst habe das noch nicht getestet, werde dies jedoch definitiv in nächster Zeit tun. Vielleicht ist genau das die Master-Lösung!!!

Teilt gerne eure Erfahrung zu dieser Thematik und lasst einen Kommentar hier! Gerade die Meinung von denjenigen unter euch, die hauptsächlich mit Page Buildern arbeiten, würde mich brennend interessieren!

Schreibe einen Kommentar