web-dev-qa-db-de.com

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.

Es sieht so aus, als ob WP die temporären Änderungen irgendwo speichert und sie auf die Site anwendet, 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.

15
Alex

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 und teilt ihr mit, a) zum Seitenanfang zu scrollen und b) die URL zu ändern.

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 einen anderen Iframe geladen, und die Einstellungen aus dem Customizer werden hinzugefügt (in der Tat über eine POST). Dann wird ein Fade-Effekt verwendet, um die alte auszublenden und die neue 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.

Dort gibt es einen ähnlichen Code, um zu verhindern, dass das Absenden von Formularen überhaupt funktioniert (es macht einfach nichts) und so weiter.

Der Filter zum Abfangen und Behandeln der Customizer-Werte befindet sich in class-wp-customize-setting.php. Die Funktion preview() fügt die Filter hinzu, die für die Verarbeitung der eingehenden Werte erforderlich sind. Die Funktion _preview_filter() ist dieser Filter. Es werden einfach die Aufrufe get_option() oder get_theme_mod() entgegengenommen, und es wird bemerkt, wann es sich um geänderte Optionen handelt. Stattdessen werden die geänderten Werte zurückgegeben.

9
Otto

Sie werden feststellen, dass beim Klicken auf einen Link im Customizer-Vorschaufenster die generierte Anforderung eine POST -Anforderung anstelle einer normalen GET -Anforderung ist. Der Customizer überschreibt anscheinend alle Linkklicks und führt stattdessen die POST mit den folgenden Formulardaten aus:

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

Das Feld customized enthält die von Ihnen geänderten Optionen, sodass die Daten dort an Ihr Design übergeben werden. 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 Parameter customized .

1
Andy Adams