WP Offload Media

Ich bin schon seit langem ein Fan von Advanced Custom Fields (ACF). Es wird auf fast jeder Website verwendet, die ich in den letzten Jahren erstellt oder an der ich gearbeitet habe.

Für die Unwissenden: ACF ist ein Plugin, das Ihnen mehr Kontrolle über Ihre Inhalte gibt. Es verwendet benutzerdefinierte Post-Meta, um Ihre Inhalte mit strukturierten Daten anzureichern. Außerdem können Sie die Datenfelder in Meta-Boxen erstellen und konfigurieren, wenn Sie Beiträge, Seiten, benutzerdefinierte Beitragstypen und vieles mehr aktualisieren.

In der Vergangenheit habe ich das Plugin im Rahmen eines Projekts auf der Delicious Brains-Website verwendet. Dieser Blogbeitrag hat mir jedoch gezeigt, wie wichtig die Lösung eines Drittanbieters für die WordPress-Entwicklung ist. Lassen Sie mich erklären…

Wie ACF funktioniert

Es hat eine Weile gedauert, bis ich verstanden habe, was ACF macht, deshalb hier ein kurzes Beispiel. Ich habe es auf einer Website zur Rettung von Hunden eingesetzt, auf der Benutzer neue Hunde zur Vermittlung als benutzerdefinierten Beitragstyp hinzufügen. Neben dem Namen des Hundes, der Beschreibung, dem Titel des Beitrags und dem Inhalt sollen auch die Rasse und das Geschlecht des Hundes, ein Link zu einem Video und einige Fotos gespeichert werden.

Dazu habe ich eine Feldgruppe für diese Daten aus dem Menü Benutzerdefinierte Felder > Feldgruppen > Neu hinzufügen:

Sie können Felder verschiedener Typen hinzufügen. Hier habe ich Auswahlfelder, Textfelder, ein einfaches boolesches Kontrollkästchen und ein Galeriefeld verwendet. Letzteres ist eine ACF Pro-Option, auf die ich später noch näher eingehen werde.

So konfigurieren Sie ein Auswahlfeld mit Benutzeroptionen:

Als Nächstes habe ich gesagt, dass diese Gruppe nur auf Bearbeitungsbildschirmen für den Dog benutzerdefinierten Beitragstyp erscheinen soll. Es gibt alle möglichen Logiken, die Sie hier verwenden können, wie z.B. Beitragstypen, Vorlagen, Kategorien und Benutzerrollen:

Die wahre Stärke von ACF liegt jedoch im Hinzufügen von Daten.

Hinzufügen von Daten zu ACF-Feldern

Der Bearbeitungsbildschirm sieht anders aus, wenn Sie an einem Dog Beitrag arbeiten. Es zeigt eine benutzerdefinierte Meta-Box mit den definierten Feldern:

Das macht das Hinzufügen aller zusätzlichen Daten für Inhaltsredakteure einfach. Außerdem können Sie mit dem get_field-Funktionscode genau festlegen, wo die Daten im Theme angezeigt werden sollen:

<div class="columns small-12 medium-9"> <a href="<?php get_permalink(); ?>"> <h2 class="icon paw"><?php get_the_title(); ?> <span class="dog-data"> <?php printf( ‘%s %s, get_field( 'gender' ), get_field( 'breed' ) ); ?> </span> </h2> </a></div>

Ohne das Plugin müsste ich entweder die standardmäßigen benutzerdefinierten WordPress-Metakästen verwenden, meine eigenen, reichhaltigeren Metakästen von Grund auf neu programmieren oder die Rasse und das Geschlecht des Hundes in benutzerdefinierte Taxonomien einbauen. Vielleicht müsste ich sogar die in den Beitrag eingebettete Galerie verwenden.

ACF verbessert WordPress

ACF ist genau das, was WordPress als Content Management System (CMS) bisher gefehlt hat, wenn es darum geht, mehr Kontrolle über seine Inhalte zu haben. Mit über einer Million aktiver Installationen hat es dazu beigetragen, die WordPress-Plattform leistungsfähiger zu machen und vielleicht sogar zu ihrem Wachstum beizutragen.

Außerdem haben Entwickler und Agenturen es genutzt, um ihren Kunden die Kontrolle über ihre Inhalte zu geben, ohne Shortcodes, Page Builder oder überhaupt post_content zu benötigen. Die Entwickler haben die vollständige Kontrolle darüber, wo die Daten im Frontend der Website erscheinen, und vermeiden so die unvermeidlichen Änderungen durch den Kunden, die das Bildmaterial zerstören.

In der Tat ist ACF bei unseren Kunden so beliebt, dass wir eine Integration mit WP Offload Media hinzufügen mussten. Jetzt funktionieren Bilder und Zuschneiden mit Medien, die auf Amazon S3, DigitalOcean Spaces oder Google Cloud Storage ausgelagert sind.

Hinzufügen von zusätzlichen Feldoptionen zu ACF

Die kostenlose Version des Plugins hat viele Funktionen. Die Premium-Version ist jedoch unerlässlich, um Zugang zu Feldern wie Repeatern, flexiblen Layouts und Galerien zu erhalten.

Beispielsweise verwenden wir das Repeater-Feld, um Benutzern die Möglichkeit zu geben, ausgewählte Testimonials in einem Slider auf Produktseiten anzuzeigen. Der Repeater enthält ein verschachteltes Post-Objekt-Feld:

Dieses erscheint dann bei der Bearbeitung der Seite, so dass wir steuern können, welche Testimonials angezeigt werden:

Mit Aktionen und Filtern, die über die gesamte Codebasis verteilt sind, war ACF schon immer ein äußerst entwicklerfreundliches und erweiterbares Tool. Es priorisiert auch Verbesserungen, die für seine Benutzer wichtig sind.

Verwendung der lokalen JSON-Funktion

Eines der wenigen Probleme, die ich in der Vergangenheit gefunden habe, war die Speicherung von Feldkonfigurationen in der Datenbank, insbesondere von benutzerdefinierten Beitragstypen für Feldgruppen und Felder.

Das bedeutete, dass, wenn man die Felddefinition auf einer Entwicklungsseite änderte, man seine Datenbank nicht mit einer Lösung wie WP Migrate DB Pro zurück in den Live-Betrieb schieben konnte. Sie würden feststellen, dass sich die Beitragstabelle ändert und Sie die neuen Daten verlieren würden.

Das ist das uralte Problem der Datenbankzusammenführung (lassen Sie mich nicht damit anfangen…). Früher habe ich dieses Problem umgangen, indem ich Feldänderungen zuerst auf der Live-Site vorgenommen habe. Dann habe ich die Datenbank auf meine lokale Website gezogen, um mit der Entwicklung fortzufahren. Nicht ideal.

Glücklicherweise hat ACF die Funktion Local JSON eingeführt. Damit lassen sich Feldkonfigurationen als JSON-Dateien speichern, die mit der Datenbank synchronisiert werden können.

Dieses großartige Feature löst das Problem der Datenbankzusammenführung für ACF-Daten. Es bedeutet auch, dass Sie die JSON-Dateien unter Versionskontrolle halten können und die Konfiguration zu einem Teil Ihres typischen Dateiverteilungsprozesses machen können. Bei der Arbeit mit dem Plugin auf unserer Website habe ich einige Änderungen vorgenommen, um es noch besser in unsere Git- und Multi-Umgebungs-Konfiguration zu integrieren:

• Ich habe das JSON-Verzeichnis in unserem app/data-Verzeichnis außerhalb des Themes definiert (da es sich ändern kann).
• Der Menüpunkt „Benutzerdefinierte Felder“ wird nur in Entwicklungsumgebungen angezeigt.
• JSON-Dateien mit einer veralteten Datenbankkonfiguration auf admin_init werden automatisch synchronisiert.

Auch wenn wir jetzt den WordPress-Block-Editor (früher bekannt als Gutenberg) haben, würde ich argumentieren, dass ACF immer noch unerlässlich ist, um eine großartige Bearbeitungserfahrung zu schaffen.

Nutzung des Block-Editors neben ACF

Der Block-Editor bietet eine andere Richtung für die Bearbeitung von Inhalten als ACF. Sie erstellen Inhalte mit Hilfe von Blöcken, anstatt sie als Beitrags-Metadaten zu speichern, was Ihnen eine gewisse Design-Flexibilität bietet.

Zunächst unterstützte der Block-Editor keine Meta-Boxen. Sie wurden sogar aus dem Bildschirm „Beitrag bearbeiten“ entfernt, was zu einer Menge Empörung führte. Jetzt gibt es Unterstützung für Metaboxen. Sie erscheinen unterhalb des Block-Editors mit einer minimalen, weniger ausgefeilten Benutzeroberfläche.

Durch die Verwendung von Blöcken anstelle von Feldern für benutzerdefinierte Daten hat der neue Editor das Potenzial, einen großen Einfluss auf die Zukunft von ACF zu haben. Außerdem wird es für neue Websites viel unwahrscheinlicher, ein Tool eines Drittanbieters zu installieren, da es jetzt eine native Lösung gibt.

Es ist jedoch nicht das erste Mal, dass vorgeschlagene grundlegende Änderungen die Zukunft von ACF bedrohen. Vor ein paar Jahren wurde ein neues Team für Post Meta zusammengestellt. Zunächst hörte es sich so an, als würde dies den verschiedenen Lösungen für benutzerdefinierte Felder von Drittanbietern den Garaus machen:

Es gab eine ganze Reihe von Bibliotheken/Frameworks/Plugins (CMB, SCB, WPAlchemy, ACF, Pods), die diese Rolle für den Moment übernommen haben. Wir werden diese als spirituelle Vorläufer eines neuen Core-würdigen Plugins betrachten.

Zum damaligen Zeitpunkt schrieb ich darüber, dass diese Entscheidung, neue konkurrierende Funktionen einzuführen, einige Plugins überflüssig machen könnte. Letztendlich wurde das Post-Meta-Projekt nicht weitergeführt, der neue Editor kam, und ACF überstand den Sturm.

ACF hat sich nicht nur erholt, sondern auch angepasst. Das Ergebnis war etwas, das die Leistungsfähigkeit von ACF und die Flexibilität von benutzerdefinierten Blöcken kombiniert. Lassen Sie uns als nächstes darüber sprechen.

Wie man Blöcke mit ACF erstellt

Es ist offensichtlich, dass benutzerdefinierte Blöcke von Vorteil sein können. Allerdings ist der technische Prozess zu ihrer Erstellung sehr komplex. ACF-Blöcke schließen die Lücke.

ACF-Blöcke lassen sich in Ihre aktuellen benutzerdefinierten Felder integrieren, sind dynamisch und anpassbar und ermöglichen Ihnen zwei Dinge:

• Sie können Ihre aktuellen benutzerdefinierten Felder in das Blockeditor-Ökosystem übernehmen.
• Sie können benutzerdefinierte Inline-Lösungen erstellen.

Sie werden mit einer PHP-Vorlagendatei oder einer callback-Funktion gerendert – es ist also genau wie bei der Entwicklung eines Themes. Sie sind auch mit dem WordPress-Kern kompatibel, so dass Sie sogar wiederverwendbare Blöcke über das Framework erstellen können.

Während ACF-Blöcke keine Krücke sind, würde ich sagen, dass Sie sie auf jeden Fall näher untersuchen sollten, wenn Ihre React-Kenntnisse noch lückenhaft sind. Sie ermöglichen es Ihnen, die Möglichkeiten des Block-Editors zu nutzen und dabei in der vertrauten functions.php-Datei zu bleiben.

Erstellung eines ACF-Blocks

Lassen Sie uns zeigen, wie Sie einen ACF-Block erstellen. Die Pro-Version des Tools enthält diese Funktion seit ACF 5.8, sie ist also seit etwa zwei Jahren dabei. Hier ist der supereinfache Beispielcode für die Blockregistrierung:

add_action('acf/init', 'my_acf_init');function my_acf_init() { // check function exists if( function_exists('acf_register_block_type') ) { // register a testimonial block acf_register_block_type(array( 'name' => 'testimonial', 'title' => __('Testimonial'), 'description' => __('A custom testimonial block.'), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'render_callback' => 'my_acf_bock_render_callback', 'category' => 'formatting', 'icon' => 'admin-comments', 'keywords' => array( 'testimonial', 'quote' ), )); }}

Von hier aus müssen Sie eine Feldgruppe erstellen und den Block rendern. Ersteres geschieht über den Bildschirm „Benutzerdefinierte Felder“> Feldgruppen in WordPress:

Hier fügen Sie Ihre Feldgruppe hinzu und füllen sie wie gewohnt aus. Im Metafeld „Standort“ müssen Sie jedoch die Regel „Block“ verwenden, um (in diesem Fall) den Testimonial-Block auszuwählen.

Schließlich müssen Sie den Block darstellen. Dies geschieht nach dem gleichen Verfahren, das Sie vielleicht schon von benutzerdefinierten Feldern kennen:

• Erstellen Sie eine Vorlagendatei für Ihr Thema auf der Grundlage des Parameters, der in der render_template-Einstellung bei der ersten Registrierung des Blocks angegeben wurde.
• Choose the right method for rendering the Block.
• Enqueue your styles and scripts.

Note that the acf_register_block_type() function offers enqueue_styleenqueue_script and enqueue_assets settings.

On the whole, Blocks shouldn’t replace every custom field meta box where they’re needed, but they will let you take advantage of crafting content in the editor.

‚InnerBlocks‘ Support

The Block Editor also has functionality that helps you work with ACF Blocks. InnerBlocks essentially let you insert any new Block into your ACF Block.

They can be custom or core Blocks, and you’re able to use the current „Title“, „Content“, and „Button“ fields in your own ACF Blocks.

Here’s a quick tutorial to get up and running. Um mit InnerBlocks zu beginnen, fügen Sie 'jsx' => true in das supports-Array ein:

acf_register_block_type( array( 'name' => 'testimonial', 'title' => __( 'Testimonial' ), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'mode' => 'preview', 'supports' => ));

Dann müssen Sie echo den <InnerBlocks /> HTML-Tag in Ihre Blockvorlage einfügen:

 echo '<div class="block-about__content">'; echo '<InnerBlocks />';

Dies ist nur ein einfaches Beispiel, aber es gibt noch viel mehr, was man mit InnerBlocks machen kann.

Alternativen zu ACF-Blöcken

Natürlich wird ACF nicht die einzige Lösung für die Erstellung von Blöcken sein. Daher wird Ihr erster Instinkt wahrscheinlich ein benutzerdefinierter Aufbau sein.

Wir haben in der Vergangenheit beschrieben, wie man einen „Vanilla“-Block erstellt, aber bevor Sie beginnen, benötigen Sie Kenntnisse in React.

Es gibt auch WordPress-Plugins, mit denen Sie Blöcke aus verschiedenen Komponenten zusammenstellen können, aber ich würde sagen, dass sie nicht wirklich für Entwickler, sondern für „Endbenutzer-Bastler“ sind. Lazy Blocks wird regelmäßig aktualisiert, so dass dies eine gute Option ist, wenn Sie mit den Möglichkeiten experimentieren möchten.

Die Zukunft von ACF

Seit seiner Veröffentlichung ist ACF ein wichtiges ergänzendes Plugin für WordPress. Es erweitert, bereichert und macht die Plattform benutzerfreundlicher. Ich glaube nicht, dass ich ohne es Websites erstellen könnte.

Die Kombination von Block-Editor und ACF-Blöcken ist jedoch das Tüpfelchen auf dem i – eine hervorragende Investition in die Zukunft des CMS. Sie wird dazu beitragen, die Einstiegshürde für Entwickler zu senken, die den Block-Editor erweitern wollen, ohne die steile Lernkurve von React zu durchlaufen. Langfristig könnten diejenigen, die sich so sehr für die Weiterentwicklung des Block-Editors einsetzen, dies als einen Gewinn betrachten.