web-dev-qa-db-fra.com

Accéder au DOM du customizer - jQuery

Comment puis-je accéder au personnalisateur par le DOM?
Je vais m'expliquer pour être clair.
J'ai récemment appris les bases de jQuery en travaillant sur un plugin.
Ok, donc dans l'aperçu du personnalisateur, si j'écoute le DOM,
Je peux obtenir une réponse à n’importe quel élément extérieur au panneau du client,
mais je ne parviens pas à accéder au personnalisateur par le DOM, la réponse est toujours 0!
Par exemple, dans l'aperçu du personnaliseur:

alert($('#sidebar').length);

renverra une réponse de 1 puisque j'ai une zone de widgets qui ont sidebar comme id.
Mais dans l’aperçu du personnalisateur, si j’essaie d’atteindre un panneau, une section, un contrôle ou même le personnaliseur lui-même, rien ne se passe, la réponse est toujours 0!
Par exemple :

alert($('.wp-customize').length);

retournera 0! .wp-personnaliser est la classe "la plus élevée" du personnaliseur

J'espère que ma question est claire et que quelqu'un peut m'expliquer la raison et m'aider à accéder au personnaliseur avec jQuery.

Merci beaucoup d'avance pour votre aide.

jquerytheme-customizer
2
LebCit

L'aperçu du personnaliseur se trouve dans une fenêtre différente de celle contenant les contrôles du personnaliseur. Plus précisément, l'aperçu du personnaliseur est contenu dans une variable iframe. C'est pourquoi vous ne pouvez pas utiliser directement jQuery pour sélectionner des éléments. Une façon de contourner ce problème consiste à utiliser parent.jQuery à partir de l'aperçu, mais cela n'est pas recommandé, car l'aperçu du personnaliseur peut en fait appartenir entièrement à un domaine distinct et un tel appel violerait la stratégie de même origine dans le navigateur. Par conséquent, si vous souhaitez interagir avec les contrôles de l'aperçu, vous devez passer des messages de l'aperçu au volet. On peut en voir des exemples dans le noyau, en particulier dans customize-selective-refresh.js où il envoie le message focus-control-for-setting, puis dans customize-controls.js où il reçoit ce message. Voici un exemple autonome et comment obtenir le conteneur racine jQuery pour un contrôle donné lorsque vous survolez le titre du site.

Mettez ce script en file d'attente à l'action wp_enqueue_scripts si is_customize_preview(), et laissez-le avoir le script customize-preview comme dépendance:

// customize-preview-example.js
(function( api, $ ) {
    api.bind( 'preview-ready', function() {

        $( '.site-title' ).on( 'mouseover', function() {
            api.preview.send( 'site-title-mousedover', 'some optional message value' );
        } );

    } );
}) ( wp.customize, jQuery );

Et puis ce script qui s'exécute dans la fenêtre des contrôles (parent) qui dépend de customize-controls et est mis en file d'attente à l'action customize_controls_enqueue_scripts:

// customize-controls-example.js
(function( api ) {
    api.bind( 'ready', function() {

        // Wait for the site title control to be added.
        api.control( 'blogname', function( siteTitleControl ) {
            api.previewer.bind( 'site-title-mousedover', function( message ) {
                console.info( 'Message sent from preview:', message );
                console.info( 'The jQuery container element for the site title control:', siteTitleControl.container );
            } );
        } );
    } );
}) ( wp.customize );

Ceci étant dit, méfiez-vous de l'utilisation de jQuery pour manipuler les contrôles. Les contrôles du personnaliseur sont liés aux paramètres de personnalisation associés. Si vous souhaitez modifier la valeur affichée dans l'entrée d'un contrôle donné, vous devez modifier le paramètre qui lui est associé et non pas modifier directement l'entrée du contrôle. De même, si vous souhaitez masquer un contrôle, vous recherchez le active_callback sur le contrôle ajouté.

2
Weston Ruter