web-dev-qa-db-fra.com

Bouton Ajouter au personnalisateur

J'essaie d'ajouter un bouton dans le personnaliseur de thème, mais je ne parviens pas à le faire fonctionner. Jusqu’à présent, j’ai créé un panneau, puis un bouton partiel, mais je souhaiterais idéalement avoir un bouton de style WordPress bleu normal en bas du dernier panneau "CSS supplémentaire". Toute aide est appréciée.

function prefix_customizer_register( $wp_customize ) {

    $wp_customize->add_panel( 'panel_id', array(
        'priority' => 300,
        'capability' => 'edit_theme_options',
        'theme_supports' => '',
        'title' => __( 'Next Step', 'textdomain' ),
        'description' => __( 'This is the next step.', 'textdomain' ),
    ) );

    $wp_customize->add_section( 'section_id', array(
        'priority' => 10,
        'capability' => 'edit_theme_options',
        'theme_supports' => '',
        'title' => __( 'Edit Pages', 'textdomain' ),
        'description' => '',
        'panel' => 'panel_id',
    ) );

    $wp_customize->add_setting( 'url_field_id', array(
        'default' => '',
        'type' => 'theme_mod',
        'capability' => 'edit_theme_options',
        'transport' => '',
        'sanitize_callback' => 'esc_url',
    ) );

    $wp_customize->add_control( 'button_id', array(
        'type' => 'button',
        'priority' => 10,
        'section' => 'section_id',
        'label' => __( 'Edit Pages', 'textdomain' ),
        'description' => '',
    ) );

}
add_action( 'customize_register', 'prefix_customizer_register' );
theme-customizer
2
Jamie

Il y a trois choses que vous devez faire en particulier.

  1. Comme aucun paramètre n'est associé au contrôle, vous devez explicitement fournir un tableau vide pour settings, sinon le système essaiera de rechercher un ID de paramètre correspondant à l'ID de contrôle (ici button_id); étant donné que ce paramètre n'est jamais créé, le contrôle ne finit jamais l'initialisation. En savoir plus sur contrôles sans réglage .
  2. Comme le contrôle va générer un élément input avec type=button, vous devez fournir le libellé du bouton via l'attribut value de cet élément. Vous pouvez le faire en le passant via l'attribut input_attrs.
  3. De même, si vous souhaitez fournir une class personnalisée de button button-primary, vous pouvez le faire en la passant ici également.

En bref, voici ce que vous verriez:

$wp_customize->add_control( 'button_id', array(
    'type' => 'button',
    'settings' => array(), // ????
    'priority' => 10,
    'section' => 'section_id',
    'input_attrs' => array(
        'value' => __( 'Edit Pages', 'textdomain' ), // ????
        'class' => 'button button-primary', // ????
    ),
) );

Résultat:

 Button control 

Naturellement, ce bouton ne fera rien, vous devez donc le connecter à une fonctionnalité personnalisée avec JS en utilisant quelque chose comme:

wp.customize.control( 'button_id', function( control ) {
    control.container.find( '.button' ).on( 'click', function() {
        console.info( 'Button was clicked.' );
    } );
} );

À partir de WordPress 4.9-beta1, vous pourrez ajouter un contrôle avec JS de cette manière (nécessite des tests!):

var control = new wp.customize.Control( 'button_id', {
    type: 'button',
    settings: [],
    section: 'section_id',
    inputAttrs: {
        value: 'Edit Pages',
        'class': 'button button-primary'
    }
} );
wp.customize.control.add( control );
control.container.find( '.button' ).on( 'click', function() {
    console.info( 'Button was clicked' );
} );

Encore une fois, la nouvelle API JS doit être testée. Une note de développement parviendra à make.wordpress.org/core .

7
Weston Ruter