So fügen Sie benutzerdefinierte Einstellungen zu einem vorhandenen Widget in WordPress hinzu

In diesem Beitrag erfahren wir, wie Sie Ihren benutzerdefinierten HTML-Code und Ihre Einstellungen zu einem der Standard-Widgets von WordPress oder anderen hinzufügen können. Anhand dieser Einstellungen lernen wir verschiedene Tricks kennen, um das Verhalten der Widgets entsprechend zu manipulieren.

Der erste Teil; Das Hinzufügen und Speichern Ihrer benutzerdefinierten Einstellungen ist ziemlich einfach. Der zweite Teil hängt davon ab, was genau Sie tun möchten, und es hängt davon ab, welches Widget Sie manipulieren. In diesem Beitrag habe ich zwei Beispiele eingefügt; Überspringen eines Widgets in Abhängigkeit von einer Einstellung (zum Hinzufügen von Einstellungen zum Steuern der Sichtbarkeit des Widgets in bestimmten Fällen) und Bearbeiten der Menüargumente des WordPress-Navigations-Widgets. Das Beispiel für den zweiten Teil sollte Ihnen einen guten Anhaltspunkt dafür geben, wie Sie mit dem umgehen können, was Sie tun möchten.

Hinzufügen von benutzerdefinierten Einstellungen zu jedem Widget

Um benutzerdefinierte Einstellungen zu bestehenden Widgets hinzuzufügen, verwenden wir eine Aktion namens [in_widget_form](https://developer.wordpress.org/reference/hooks/in_widget_form/). Diese Aktion wird auf die Funktion aller Widgets angewendet form(), die für das Rendern des Admin-Teils des Widgets verantwortlich ist.

Mit diesem Filter erhalten wir drei Parameter, aber wir interessieren uns wirklich nur für den ersten und den dritten. Die erste ist die Widget-Instanz, die wir verwenden, um die richtigen Feldnamen und IDs abzurufen und (optional) zu überprüfen, an welche Art von Widget wir angeschlossen sind. Der dritte Parameter ist ein Array der gespeicherten Einstellungen des Widgets, das wir verwenden müssen, um den vorherigen gespeicherten Zustand unserer Einstellungen zu überprüfen.

Der folgende Code fügt ein Kontrollkästchen mit dem Einstellungsnamen „ awp-custom-setting” hinzu. Passen Sie den Namen und den HTML-Code an die von Ihnen benötigte Eingabe an. Wichtig ist, dass Sie allen Ihren Eingaben $widget->get_field_name()die richtigen IDs und nameAttribute hinzufügen. Der Wert Ihrer Eingaben sollte mit dem gefüllt werden, was zuvor gespeichert wurde, und das finden Sie im Parameter $instance. Für Checkboxen können Sie die Funktion von WordPress verwenden, um [checked](https://developer.wordpress.org/reference/functions/checked/)()das aktivierte Attribut auszugeben.

Nachdem Sie dies zum Code Ihres Designs functions.phpoder Plugins hinzugefügt haben, sollten alle Widgets nun ein Kontrollkästchen am Ende ihres Formulars im Adminbereich erhalten.

Richten Sie bestimmte Widgets aus

Wenn Sie Ihre Einstellungen nur auf ein oder einige bestimmte Widgets anwenden möchten, können Sie die Eigenschaft id_baseim $widgetObjekt vergleichen. Sie müssen wissen, dass die Basis-ID lautet – wenn Sie sich nicht sicher sind, machen Sie einfach einen var_dump($widget->id_base)Haken, speichern und überprüfen Sie die Ausgabe für jedes Widget in Admin. Zum Beispiel hat das Navigations-Widget die ID-Basis nav_menuund das Archiv-Widget hat archives.

Im folgenden Beispiel prüfen wir, ob das Widget ein Navigations-Widget ist. Ist dies nicht der Fall, wird die Funktion mit einem abgebrochen return. Nur Navigations-Widgets erhalten das benutzerdefinierte Kontrollkästchen:

Sie sollten die Einstellung in Admin wie folgt erhalten:

Die Einstellung wurde also hinzugefügt, aber im Moment werden Ihre Einstellungen nicht gespeichert. Lassen Sie uns das beheben.

Speichern Ihrer benutzerdefinierten Einstellungen

Wir müssen uns in die Funktion des Widgets einklinken update(), um unsere benutzerdefinierten Einstellungen zu aktualisieren.

Dazu verwenden wir den Filter [widget_update_callback](https://developer.wordpress.org/reference/hooks/widget_update_callback/). Der Vorgang zum Speichern unserer Einstellungen ist genau so, wie Sie es tun würden, wenn Sie eine Widget-Klasse schreiben. Der Filter bietet drei Parameter; Das erste ist das Instanzarray, das gespeichert wird. Der zweite Parameter ist der Status, der beim Speichern des Widgets gepostet wurde, und der dritte ist der alte Status. Wir müssen sicherstellen, dass wir unsere neuen Werte aus dem zweiten Parameter abrufen und sie zum ersten hinzufügen.

So würden wir den Zustand unseres Kontrollkästchens aktualisieren; trueda wir einen oder falseWert speichern wollen :

add_filter('widget_update_callback', function($instance, $new_instance, $old_instance) {
    $instance['awp-custom-setting'] = isset($new_instance['awp-custom-setting']);
    return $instance;
}, 10, 3);

Denken Sie daran, die Eingabenamen an Ihre eigenen Einstellungsnamen anzupassen. Wenn Sie mehrere Eingänge hinzufügen, müssen Sie dies für jeden wiederholen.

Jetzt sollten Sie sehen, dass Ihre benutzerdefinierten Einstellungen in Admin gespeichert werden!

Verwenden gespeicherter benutzerdefinierter Widget-Einstellungen

Wie bereits erwähnt, hängt dieser Teil wirklich davon ab, was Ihre Einstellungen bewirken sollen. Es ist leider nicht so einfach, weil die meisten Widgets keine Filter oder Hooks in ihren Ausgaben hinzufügen. Beginnen wir mit etwas Einfachem; Vermeiden Sie das Rendern des Widgets je nach den Einstellungen.

Rendering-Widget je nach benutzerdefinierter Einstellung verhindern

Angenommen, Sie fügen Einstellungen hinzu, wann das Widget sichtbar sein soll; zum Beispiel das Verstecken in bestimmten Vorlagen (in der Suchergebnisvorlage verstecken, aber auf der Titelseite und einzeln anzeigen) oder auf andere WordPress-Zustände reagieren.

Dazu können wir den Filter verwenden [widget_display_callback](https://developer.wordpress.org/reference/hooks/widget_display_callback/). Alles, was wir tun müssen, ist, den bereitgestellten Instanzparameter auf unsere Einstellung zu überprüfen und zurückzukehren, falsewenn wir das Widget nicht rendern möchten.

Dieser einfache Code vermeidet das Rendern des Widgets, wenn das oben hinzugefügte benutzerdefinierte Kontrollkästchen aktiviert ist:

add_filter('widget_display_callback', function($instance, $widget, $args) {
    if ($instance['awp-custom-setting']) {
        return false;
    }
    return $instance;
}, 10, 3);

Wahrscheinlich möchten Sie andere Staaten vergleichen. Dies ist ein einfaches Beispiel, bei dem unser Kontrollkästchen ein Kontrollkästchen für „In Einzelpostansichten ausblenden” ist. Wir überprüfen einfach, ob wir uns gerade in einer Einzelpostansicht befinden, [is_singular](https://developer.wordpress.org/reference/functions/is_singular/)()und wenn das Kontrollkästchen aktiviert ist, kehren wir zurück false.

add_filter('widget_display_callback', function($instance, $widget, $args) {
    if (is_singular() && $instance['awp-custom-setting']) {
        return false;
    }
    return $instance;
}, 10, 3);

Ändern der Einstellungen oder Ausgaben vorhandener Widgets

Ein leistungsstarker Filter zum Herumspielen mit bestehenden Widgets ist [dynamic_sidebar_params](https://developer.wordpress.org/reference/hooks/dynamic_sidebar_params/). Werfen Sie einen Blick auf die Dokumentationsseite, um zu sehen, welche Parameter Sie ändern können. Beispielsweise können Sie benutzerdefinierte Klassen hinzufügen, Sie können die before_widget, after_widgetoder die before_titleund after_titleHTML-Strings ändern. Dies gilt jedoch für alle Widgets, auch Admin und Frontend. Und mit diesem Filter haben Sie keinen Zugriff auf die Widget-Instanz (gespeicherte Einstellungen) oder Widget-Einstellungen (z. B. Widget-Typ).

Offensichtlich müssen wir zumindest unsere benutzerdefinierten Einstellungen überprüfen. Wir müssen also einiges an Code ausführen, um die benötigten Werte abzurufen.

Als erstes können wir auf eine globale Variable zugreifen $wp_registered_widgets. Dies ist ein Array, das alle registrierten, verfügbaren Widgets enthält. Mithilfe dieser Registrierung können wir den Parameter des Filters verwenden, um das spezifische Widget zu finden, bei dem wir uns gerade befinden. Sobald wir das aktuelle Widget gefunden haben, haben wir Zugriff auf die Widget-Parameter, wie z. B. id_base– die uns, wie wir bereits gesehen haben, den Typ des Widgets mitteilen.

Wie Sie in der Zeile sehen #9können, können wir endlich überprüfen, bei welcher Art von Widget wir uns gerade befinden. Im obigen Code gebe ich zurück, wenn der Widget-Typ kein Navigations-Widget ist, da unsere benutzerdefinierte Einstellung nur für diese Widgets hinzugefügt wurde.

Abrufen gespeicherter Widget-Einstellungen

Aber wir müssen auch die gespeicherten Einstellungen pro Widget abrufen (einschließlich unserer benutzerdefinierten Einstellungen). Die gespeicherten Einstellungen aller Widgets werden in der Optionsdatenbank gespeichert, gruppiert nach Widget-Typ. Mithilfe einer Eigenschaft in der Widget-Registrierung können wir [get_option](https://developer.wordpress.org/reference/functions/get_option/)()die gespeicherten Einstellungen für den aktuellen Widget-Typ abrufen. Die Rückgabe ist ein indiziertes Array, in dem wir noch einen weiteren Parameter aus dem Filter verwenden müssen, um den aktuellen Index zu finden (weil Sie mehrere des gleichen Widget-Typs in der gleichen oder in verschiedenen Seitenleisten hinzufügen können). Es ist einfacher, mit Code zu zeigen, als es zu erklären:

Endlich bekommen wir die gespeicherten Einstellungen des Widgets! Im obigen Beispielcode #9prüfen wir in Zeile, ob unser benutzerdefiniertes Kontrollkästchen aktiviert ist oder nicht.

Beispiele

An diesem Punkt liegt es an Ihnen, was Sie tun möchten. Sie können beispielsweise eine Ausgabe nach dem Widget-Titel, aber vor dem Widget-Inhalt rendern:

Für realere Anwendungsfälle würden Sie normalerweise am meisten lösen, indem Sie an dieser Stelle bestimmte Filter hinzufügen, indem Sie add_filter()an dieser Stelle anrufen.

Unten sehen Sie ein Beispiel für die Änderung der Argumente des Navigationsmenüs durch Hinzufügen eines Filters, wenn unsere Einstellung aktiviert war. Wenn es deaktiviert war, stellen wir sicher, dass der Filter entfernt wird. Der Filter zum Ändern der Argumente zum Rendern eines Navigationsmenüs ist widget_nav_menu_args. Im folgenden Code habe ich eine auf diesen Filter anzuwendende Funktion definiert, die den Menüargumenten ein neues Argument hinzufügt; ein Spaziergänger:

    ...
    if ($saved_settings['my-custom-thing']) {
        add_filter('widget_nav_menu_args', 'awp_add_menu_walker', 10, 3);
    } else {
        remove_filter('widget_nav_menu_args', 'awp_add_menu_walker', 10);
    }
    return $params;
});
function awp_add_menu_walker($nav_menu_args, $nav_menu, $args) {
    $nav_menu_args['walker'] = new AWP_Custom_Walker();
    return $nav_menu_args;
}

Der obige Code ist ein Beispiel für einen Anwendungsfall, bei dem das benutzerdefinierte Kontrollkästchen steuert, ob ein Menü-Walker auf das Menü angewendet wird oder nicht. Ausgezeichnet, wenn Sie möchten, dass alle Menüs normal gerendert werden, aber die Option für bestimmte Menü-Widgets anders gerendert werden soll. Was der Walker mit der Menüausgabe macht, bleibt Ihnen überlassen.

Unten finden Sie den vollständigen Code zum Hinzufügen einer benutzerdefinierten Einstellung zu allen Navigationsmenüs, zum Aktualisieren dieser und zum Anwenden eines Menü-Walkers.

Hoffentlich reicht Ihnen das, um herauszufinden, wie Sie codieren, was Sie tun möchten. Es hängt wirklich davon ab, was Sie tun möchten und mit welcher Art von Widget Sie arbeiten. Wie oben erwähnt, können die meisten Änderungen normalerweise durch Hinzufügen von Filtern gelöst werden, um Ihr Ding in dynamic_sidebar_params.

Vollständiges Beispiel: Benutzerdefinierte Kontrollkästcheneinstellung für Navigations-Widgets zum Anwenden eines Menü-Walkers

Hier ist der vollständige Code zum Hinzufügen eines benutzerdefinierten Kontrollkästchens zu allen Navigationsmenü-Widgets von WordPress für die Verwendung eines registrierten Menü-Walkers. (Walkercode nicht enthalten)

Fazit

Hoffentlich war dieser Beitrag hilfreich, um entweder Ihre Bedürfnisse zu lösen oder Ihnen einige Hinweise zu geben, wie Sie das tun können, was Sie tun müssen!