web-dev-qa-db-fra.com

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

Je me demande s’il est possible d’étendre les méthodes de l’objet anonyme api dans wp-admin/js/customize-control.js . Je dois écraser une de ces méthodes avec ma propre logique personnalisée, mais j’imagine que ce n’est pas possible car elle est encapsulée dans une expression de fonction immédiatement invoquée:

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

Autant que je sache, je ne suis pas en mesure d'é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 question de redéfinir ceci dans la documentation/description des méthodes .toggle (): https://github.com/WordPress/WordPress/blob/master/wp-admin/js/customize-controls.js#L110 , mais je ne sais pas s'ils veulent dire simplement en forçant tout le fichier JS, en retirant la file d'attente de la version WP et en mettant la vôtre en file d'attente, ou s'ils signifient 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 que cela ne s'applique qu'aux classes/objets de base publics, pas à ceux de wp-admin/js/customize-control.js

javascriptfront-endapitheme-customizer
9
Brian

Je vais améliorer mon petit commentaire sur votre question. Mais encore une fois l'indice; Je ne suis pas un expert du JS. La source suivante, les astuces, n’était utilisée que lors de la lecture avec le Customizer pour différents contrôles, exemples, comme mon sandbox .

wp.customize

Comprendre l'interface du personnalisateur de thèmes WP est centré sur la compréhension de l'objet JavaScript wp.customize. L'objet wp.customize est important et vous devez le définir au début.

Exemple en direct

Les petits exemples suivants le montrent. Au début, je règle var api sur l'objet du personnaliseur. Après cela, je règle mes champs personnalisés sur api et les améliore 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.control et les objets de réglage dans wp.customize. Les classes de valeur ont beaucoup de fonctions, elles peuvent vous aider.

  • instance (id) - Récupère un objet de la collection avec l'ID spécifié.
  • has (id) - Renvoie true si la collection contient un objet avec l'identifiant spécifié et false sinon.
  • add (id, value) - Ajoute un objet à la collection avec un identifiant et une valeur spécifiés.
  • remove (id) - Supprime l'objet de la collection.
  • create (id) - Créez un nouvel objet à l'aide du constructeur par défaut et ajoutez-le à la collection.
  • each (rappel, contexte) - Parcourez 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]' );

Get

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' ) );

Obtenir avec le contrôle, en tant qu'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
5
bueltge