Est-il possible d'étendre les méthodes JS de personnalisation de WP?

9

Je me demande s'il est possible d'étendre les méthodes de l' apiobjet anonyme dans wp-admin/js/customize-control.js. J'ai besoin d'écraser l'une de ces méthodes avec ma propre logique personnalisée, mais je soupçonne que ce n'est pas possible car elle est enveloppée dans une expression de fonction immédiatement invoquée:

/* globals _wpCustomizeHeader, _wpMediaViewsL10n */
(function( exports, $ ){
// code
})( wp, jQuery );

Pour autant que je puisse voir, je ne peux pas étendre le prototype à partir de l'objet window car il est exécuté de manière anonyme et n'est pas disponible à partir de window.wp.customize. Une idée si une telle chose est possible? Il est même fait mention de la substitution dans la documentation / description des méthodes .toggle (): https://github.com/WordPress/WordPress/blob/master/wp-admin/js/customize-controls.js#L110 , mais je Je ne sais pas s'ils veulent dire simplement bifurquer tout le fichier JS, retirer la version WP et mettre en file d'attente la vôtre ou s'ils signifient ou quelque chose de différent.

Notez qu'il semble que cela devrait être possible avec wp.customize.{method}.extend({ foo: // replace method foo here })mais cela ne s'applique qu'aux classes / objets de la base publique, pas à ceux dewp-admin/js/customize-control.js

Brian
la source
3
Bien qu'il apisoit anonyme, c'est juste un synonyme de wp.customize(voir ligne 3) qui est accessible à l'échelle mondiale. Cependant, il semble que le modèle Yet Another Object utilisé pour les contrôles appelle la readyfonction initializeafin de ne pas avoir la chance (c'est-à-dire toujours trop tard) d'écraser les méthodes - qu'essayez-vous d'étendre?
bonger
En théorie, cela a du sens - suggestion appréciée. Dans mon cas, j'ai senti que cette approche était assez hacky et j'ai réussi à trouver une autre solution appropriée pour mon cas d'utilisation. Cependant, une réponse avec un code de travail peut toujours être utile à quelqu'un qui n'a pas d'autre option pour son cas d'utilisation. La performance avec ce que je prévoyais aurait été horrible de toute façon.
Brian
1
Je ne suis pas l'expert JS. Mais j'ai un ajout dans un petit thème le script de personnalisation pour rafraîchir toujours mes extensions. Je travaille avec wp.customizeet ajoute des fonctions à cet objet. voir ici pour un exemple source - github.com/bueltge/Documentation/blob/master/js/…
bueltge

Réponses:

5

J'améliorerai mon petit commentaire sur votre question. Mais encore une fois l'indice; Je ne suis pas un expert JS. La source suivante, hints, n'a été utilisée que pour jouer avec le Customizer pour différents contrôles, exemples, comme mon bac à sable .

wp.customize

La compréhension de l'interface de personnalisation du thème WP se concentre sur la compréhension de l'objet javascript wp.customize. L' wp.customizeobjet est important et vous devez le définir dès le départ.

Exemple en direct

Le petit exemple suivant le démontre. Au début, j'ai défini la var apisur l'objet du personnalisateur. Après cela, j'ai défini mes champs personnalisés sur le apiet amélioré avec une petite source jQuery pour actualiser le résultat pour un aperçu en direct.

( function( $ ) {
    var api = wp.customize;

    // Site title and description.
    api( 'blogname', function( value ) {
        value.bind( function( to ) {
            $( '#header h1 a, #footer a.site-name' ).html( to );
        } );
    } );

    api( 'blogdescription', function( value ) {
        value.bind( function( to ) {
            $( '#header p.site-description' ).html( to );
        } );
    } );

} )( jQuery );

Paramètres et contrôles

Les objets de contrôle sont stockés dans wp.customize.controlet les objets de configuration sont stockés dans wp.customize. La classe de valeur a beaucoup de fonctions, elle peut vous aider.

  • instance (id) - Récupère un objet de la collection avec l'id spécifié.
  • has (id) - Retourne vrai, si la collection contient un objet avec l'id spécifié et faux sinon.
  • add (id, value) - Ajoute un objet à la collection avec un id et une valeur spécifiés.
  • remove (id) - Supprime l'objet de la collection.
  • create (id) - Créez un nouvel objet, en utilisant le constructeur par défaut et ajoutez-le à la collection.
  • each (callback, context) - Itère sur les éléments de la collection.

Paramètres personnalisés

Avec ces fonctions, nous pouvons améliorer nos paramètres personnalisés.

var api = wp.customize,
    mysetting = api.instance( 'my_custom_setting' );

également utilisable pour un tableau

var api = wp.customize,
    mysetting = api.instance( 'my_custom_settings[my_custom_setting_field]' );

Avoir

Voir le résultat dans la console.

console.log( api.instance( 'my_custom_settings[my_custom_setting_field]' ).get() );

Ensemble

Vous pouvez également modifier les valeurs de réglage via la fonction set.

api.instance( 'my_custom_settings[my_custom_setting_field]' ).set( 'my new value' ) );

Obtenez avec le contrôle, comme objet

console.log( api.control.instance( 'my_custom_setting_field' ) );

Source utile

  • wp-admin / js / personnaliser-controls.js
  • wp-includes / js / personnaliser-preview.js
  • wp-includes / js / personnaliser-base.js
bueltge
la source