it-swarm.com.de

Theme Customizer lädt JS nicht für die Live-Vorschau

Ich arbeite derzeit daran, dem Theme-Customizer Optionen hinzuzufügen. In den letzten zwei Stunden habe ich versucht, die Live-Vorschau zum Laufen zu bringen, und ich versuche herauszufinden, warum in meinem Design die für die Live-Vorschau erforderliche theme-customizer.js-Datei nicht geladen wird.

Alle Optionen, die ich dem Theme-Customizer hinzugefügt habe, funktionieren, wenn ich sie speichere und dann die Seite aktualisiere. Ich weiß also, dass es kein Problem mit den Einstellungen gibt.

Ich habe derzeit den Haken, die JS-Datei in der customize.php-Datei zusammen mit allen Einstellungen für den Customizer aufzurufen. Ich habe auch einen separaten theme-enqueue.php, in den ich die anderen JS-Dateien für mein Thema einreihe.

Hier ist ein Beispiel für den Hook, den ich versuche, die JS-Datei aus meiner customize.php-Datei aufzurufen:

function mytheme_customize_preview_js() {
wp_enqueue_script( 'mytheme-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120187', true );
}
add_action( 'customize_preview_init', 'mytheme_customize_preview_js' );

Wenn ich die geladenen Javascript-Dateien in Chrome überprüfe, werden anscheinend alle Dateien geladen, die ich benötige, mit Ausnahme dieser. Kann jemand etwas Licht in die Situation bringen?

1
user1632018

ich denke, Ihr Skript ist korrekt geladen. Dieselbe Funktion wird in den Zwanzigern verwendet (aber Ihr Skript befindet sich im Iframe), aber ich kann mich irren.

enter image description here

um die Änderung ohne Aktualisierung zu sehen, müssen Sie die 'transport'-Argumente in add_setting und get_setting in Ihrer customize_register-Funktion verwenden

$wp_customize->add_setting( 'my_setting', array( 'default' => 'setting_value', 'transport' => 'postMessage', ) );

Dies kann entweder "Aktualisieren" (Standard) oder "PostMessage" sein. Setzen Sie diese Option nur auf 'postMessage', wenn Sie benutzerdefiniertes Javascript schreiben, um die Live-Vorschau des Theme Customizers zu steuern.

$wp_customize->get_setting( 'my_setting' )->transport = 'postMessage';
1
Tribalpixel

Wahrscheinlich, weil Sie es aus dem init- oder admin_init-Wordpress-Hook aufrufen, wohingegen Sie es aus dem after_setup_theme-Hook aufrufen sollten.

Zum Beispiel:

function mytheme_customize_preview_js() {
    wp_enqueue_script( 'mytheme-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120187', true );
}
function my_after_setup_theme(){
    add_action( 'customize_preview_init', 'mytheme_customize_preview_js' );
}

add_action( 'after_setup_theme', 'my_after_setup_theme' );
0
Mauro Colella

Dies ist möglicherweise nicht die genaue Antwort auf das Problem. Aber es hat mir geholfen, genau das Problem zu lösen, über das wir diskutieren.

Da ich 'transport' => 'postMessage' verwende, konnte ich die Vorschau nicht lebendig sehen. Also habe ich neue Dateien mit dem folgenden Code bei Github erstellt

Ich habe diesen Code einfach kopiert und eingefügt. Überprüfte es und optimierte es dann gemäß meinen Anforderungen. Ich weiß, dass dies nicht die Lösung ist, aber es war die beste verfügbare Lösung für mich.

Vielen Dank an Tom McFarlin für den Code.

0
JDP