Neue WP_Customize API - wie funktioniert es unter der Haube?

Ich habe festgestellt, dass Änderungen, die Sie mit der neuen Funktion "Anpassen" vornehmen, beim Navigieren auf einer anderen Seite im iframe-Vorschaudokument weiterhin wirksam sind, auch wenn sie nicht gespeichert wurden.

Anscheinend speichert WP die temporären Änderungen irgendwo und wendet sie auf die Site an, wenn die Site im Modus "Anpassen" angezeigt wird.

Aber woher weiß die Site, dass sie sich im Anpassungsmodus befindet? Weil ich keine an die Links angehängten Abfrageargumente oder ähnliches sehe.

Es gibt ein paar Punkte, die zutreffen, aber kurz gesagt, dieser Code in customize-preview.js:

this.body.on( 'click.preview', 'a', function( event ) {
    event.preventDefault();
    self.send( 'scroll', 0 );
    self.send( 'url', $(this).prop('href') );
});

Der event.preventDefault verhindert, dass die Links tatsächlich funktionieren. Der folgende Code sendet dann eine Nachricht zurück nach oben, in der er a) zum Seitenanfang zurückscrollt und b) die URL ändert.

Der Grund für die Nachricht hier ist, dass es nicht nur einen iframe gibt, sondern zwei. Die Seite, auf die Sie geklickt haben, wird tatsächlich in einem anderen Iframe mit den Einstellungen des hinzugefügten Customizers geladen (über ein POSTJa). Anschließend wird ein Fade-Effekt verwendet, um die alte auszublenden und die neue Seite nahtlos einzublenden. Dadurch wird verhindert, dass der Bildschirm weiß und hässlich wird und blinkt, wenn zur neuen Seite gewechselt wird.

Außerdem müssen Sie nicht mehr nach Themencode filtern und möglicherweise das Erscheinungsbild der Seite ändern. Das Thema wird so angezeigt, wie es ist, ohne dass wesentliche Änderungen am Inhalt vorgenommen wurden.

Ein ähnlicher Code existiert dort, um zu verhindern, dass die Formularübermittlung überhaupt funktioniert (es tut einfach nichts) und so weiter.

Der Filter zum Abfangen und Behandeln der Customizer-Werte befindet sich in class-wp-customize-setting.php. Die preview()Funktion fügt die Filter hinzu, die für die Verarbeitung der eingehenden Werte benötigt werden. Die _preview_filter()Funktion ist dieser Filter. Sie nimmt einfach die Aufrufe get_option()oder entgegen get_theme_mod(), bemerkt, wann es sich um geänderte Optionen handelt, und gibt stattdessen die geänderten Werte zurück.

Sie werden feststellen, dass beim Klicken auf einen Link im Customizer-Vorschaufenster die generierte POSTAnfrage eine Anfrage ist und keine normale GET. Der Customizer überschreibt anscheinend alle Link-Klicks und verwendet POSTstattdessen die folgenden Formulardaten:

wp_customize: on
theme: themename
customized: {json-encoded-options-here}
customize_messenger_channel: preview-1

Das benutzerdefinierte Feld enthält die Optionen, die Sie geändert haben. In diesem Feld werden die Daten an Ihr Design übergeben. Der Anpassungscode fängt dann die Optionen Ihres Themas ab (über einen Filter bin ich nicht sicher, welcher genau), wenn sie angefordert werden, und ersetzt sie durch die Werte im angepassten Parameter.