Nutzen Sie Advanced Custom Fields Pro, um komplexe benutzerdefinierte Widgets zu erstellen. Wenn Sie mehr über die Erstellung benutzerdefinierter Widgets erfahren möchten, werfen Sie einen Blick auf die Widgets-API im WordPress Codex.

Benutzerdefinierten Widgets erstellen

Zuerst müssen wir eine neue Datei für unser benutzerdefiniertes Widget erstellen. Benennen wir es acf-custom-widget.php und fügen es in ein neues Verzeichnis hinzu, um alles schön ordentlich zu halten. Ich empfehle die folgende Verzeichnisstruktur, aber man kann die Datei auch an einer beliebigen Stelle zu platzieren:

— theme
—- inc
—— plugins
——– acf
———- acf-custom-widget.php

Als nächstes fügen wir unsere neue Datei in unsere functions.php-Datei ein. Öffnen Sie functions.php und fügen Sie den folgenden Code hinzu:

include_once( get_stylesheet_directory() . '/inc/plugins/acf/acf-custom-widget.php');

Code für benutzerdefinierte Felder hinzufügen

Jetzt können wir den benutzerdefinierten Widget-Code zu unserer neuen Datei hinzuzufügen. Öffnen Sie acf-custom-widget.php und fügen Sie den folgenden Code hinzu:

/** * Ein benutzerdefiniertes ACF-Widget. */ class ACF_Custom_Widget extends WP_Widget { /** Registrieren Sie das Widget bei WordPress. */ function __construct() { parent::__construct( 'acf_custom_widget', // Base ID __('ACF Custom Widget', 'text_domain'), // Name array( 'description' => __( 'A custom ACF widget', 'text_domain' ), 'classname' => 'acf-custom-widget' ) // Args
        );
    }

    /**
    Frontend-Anzeige des Widgets.
    *
    * Siehe WP_Widget::widget()
    *
    @param array $args Widget- Argumente.
    @param array $instance Gespeicherte Werte aus der Datenbank.
    */
    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        if ( !empty($instance['title']) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];
        }

        echo get_field('title', 'widget_' . $args['widget_id']);


        // BEGIN ACF CODE
        if ( get_field('content') ) {
            echo '</p>
<div class="content">'
                . get_field('content') . 
            '</div>
<p>';
        }
        // END ACF CODE


        echo $args['after_widget'];
    }

    /**
    * Back-End Widget-Formular.
    *
    * Siehe WP_Widget::form()
    *
    @param array $instance Zuvor gespeicherte Werte aus der Datenbank.
    */
    public function form( $instance ) {
        if ( isset($instance['title']) ) {
            $title = $instance['title'];
        }
    

_e( ‘Title’ );

Testen wir ob alles richtig funktioniert. Melden Sie sich in Ihrem Dashboard an und navigieren Sie zu Appearance > Widgets. Sie sollten nun unser neues ACF Custom Widget unter den verfügbaren Widgets sehen.

Erstellen einer ACF-Feldgruppe
Jetzt werden wir eine neue Feld-Gruppe für unser Widget mit Advanced Custom Fields zu erstellen. Eigene Felder > Erstellen .
Ich werde mein eigenes ‘Custom Widget’ benennen und ein einfaches’Textarea’-Feld zur Gruppe hinzufügen. Stellen Sie sicher, dass Sie im Standortmenü “Widget” auswählen und es dann auf die gleiche Weise einstellen wie unser neues benutzerdefiniertes Widget.

Alle benutzerdefinierten Felder, die Sie zu dieser neuen Gruppe hinzufügen, sollten nun in Ihrem Widget erscheinen.

Fazit

Das ist so ziemlich alles! Mit der Grundstruktur unseres Widgets haben wir nun die Möglichkeit, komplexe Widgets mit einer beliebigen Anzahl oder Kombination von ACF-Feldtypen zu erstellen.
Quelle: https://adambalee.com/create-custom-widgets-advanced-custom-fields/