web-dev-qa-db-fra.com

Customizer: comment ajouter du HTML pour contrôler les étiquettes?

J'ai un contrôle simple qui affiche une case à cocher dans le Customizer:

$wp_customize->add_setting( 'display_about_text', array(
    'default'           => true
) );
$wp_customize->add_control( 'display_about_text', array(
    'label'             => __( 'Display Text', 'my_theme_name' ),
    'type'              => 'checkbox',
    'section'           => 'about'
) );

Je voudrais mettre Display Text en gras dans le personnaliseur. J'ai donc modifié la ligne d'étiquette pour:

    'label'             => __( '<strong>Display Text</strong>', 'minitheme' ),

Cependant, il sort simplement les balises HTML dans le Customizer comme ceci:

<strong>Display Text</strong>

Comment l'obtenir pour qu'il s'affiche en gras au lieu de générer le code HTML? J'ai rencontré ce problème à plusieurs reprises lorsque j'essaie de générer du code HTML dans le Customizer. Même problème avec esc_html().

customizationtheme-customizer
2
Troy Templeman

Vous devriez utiliser CSS pour cela. Par exemple:

#customize-control-display_about_text label {
    font-weight: bold;
}

Mettez en file d'attente la feuille de style à l'action customize_controls_enqueue_scripts.

Si vous devez utiliser JS pour modifier un contrôle, alors notez que je ne conseillerais pas d'utiliser jQuery.ready dans l'autre réponse. Utilisez plutôt l'API Customizer JS pour accéder au contrôle une fois qu'il est prêt. Par exemple, mettez en file d'attente un script à l'aide de l'action customize_controls_enqueue_scripts qui contient:

wp.customize.control( 'display_about_text', function( control ) {
    control.deferred.embedded.done( function() {
        control.container.find( 'label' ).wrapInner( '<strong></strong>' );
    });
});

Ce modèle est visible au cœur de la manière dont la variable textarea de la fonctionnalité CSS personnalisée est étendue: https://github.com/WordPress/wordpress-develop/blob/4.8.0/src/wp-admin/js/ personnaliser-controls.js # L5343-L5346

2
Weston Ruter

Le personnaliseur exécute le texte de l'étiquette via esc_html(); par conséquent, HTML n'est pas autorisé dans les étiquettes. Vous pouvez remplacer le rendu pour le contenu de chaque contrôle pour lequel vous souhaitez utiliser une étiquette en gras, mais cela est probablement excessif.

Au lieu de cela, voici une solution qui utilise l'action customize_controls_enqueue_scripts pour mettre en file d'attente JavaScript sur l'écran Customizer. jQuery est ensuite utilisé pour cibler le contrôle souhaité et envelopper le texte de l'étiquette dans les balises <strong>.

add_action( 'customize_controls_enqueue_scripts', 'wpse_customize_controls_scripts' );
function wpse_customize_controls_scripts() {
    wp_enqueue_script(
        'wpse-customize',
        get_template_directory_uri() . '/js/wpse-customize.js',
        [ 'jquery', 'customize-controls' ],
        false,
        true
    );
}

wpse-personnaliser.js 

jQuery( document ).ready( function( $ ) {
    $( "#customize-control-display_about_text label" ).wrapInner( "<strong></strong>" );
});
1
Dave Romsey