Ich habe in letzter Zeit mit der Theme-Customizer-API gearbeitet und festgestellt, dass Pseudoelemente nicht live aktualisiert werden, wenn die Vorschau verwendet wird. In meinem Projekt habe ich ein Bild mit einem transparenten Overlay mit Pseudoelementen.
.hero-section:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: #000000; opacity: 0.5; } Während dies nicht funktioniert Update:
// Update targeting a pseudo element. wp.customize( 'image_color', function( value ) { value.bind( function( newval ) { $('.hero-section:before').css('background', newval ); } ); } );
Dies wird live aktualisiert:
// Update targeting a class. wp.customize( 'image_color', function( value ) { value.bind( function( newval ) { $('.hero-section').css('background', newval ); } ); } );
Alle Einstellungen werden mit postMessage .
$wp_customize->add_setting('image_color', array( 'default' => '#000000', 'transport' => 'postMessage', ) ); $wp_customize->get_setting( 'image_color' )->transport = 'postMessage';
Wenn ich Änderungen speichere (refresh) funktioniert alles einwandfrei, die Farbe wird aktualisiert. Wie kann es sein, dass Pseudoelemente beim Live-Update nicht funktionieren?