web-dev-qa-db-de.com

Customizer: Wie fügt man HTML hinzu, um Beschriftungen zu steuern?

Ich habe ein einfaches Steuerelement, das ein Kontrollkästchen im Customizer anzeigt:

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

Ich möchte Display Text im Customizer fett formatieren, daher habe ich die Beschriftungszeile folgendermaßen geändert:

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

Es werden jedoch nur die folgenden HTML-Tags im Customizer ausgegeben:

<strong>Display Text</strong>

Wie kann ich dafür sorgen, dass es fett angezeigt wird, anstatt den HTML-Code auszugeben? Ich bin mehrmals auf dieses Problem gestoßen, als ich versuchte, HTML im Customizer auszugeben. Gleiches Problem mit esc_html().

2
Troy Templeman

Verwenden Sie dazu CSS. Zum Beispiel:

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

Stellen Sie das Stylesheet dazu in der Aktion customize_controls_enqueue_scripts in eine Warteschlange.

Wenn Sie zum Ändern eines Steuerelements JS verwenden müssen, sollten Sie beachten, dass ich in der anderen Antwort die Verwendung von jQuery.ready nicht empfehlen würde. Sie sollten stattdessen die Customizer-JS-API verwenden, um auf das Steuerelement zuzugreifen, sobald es fertig ist. Beispielsweise müssen Sie ein Skript mit der Aktion customize_controls_enqueue_scripts in die Warteschlange einreihen, die Folgendes enthält:

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

Dieses Muster ist im Kern tatsächlich darin zu sehen, wie die textarea für die benutzerdefinierte CSS-Funktion erweitert wird: https://github.com/WordPress/wordpress-develop/blob/4.8.0/src/wp-admin/js/ customize-controls.js # L5343-L5346

2
Weston Ruter

Der Customizer führt den Etikettentext über esc_html() aus, sodass HTML in Etiketten standardmäßig nicht zulässig ist. Sie können den Renderer für den Inhalt jedes Steuerelements überschreiben, wenn Sie eine fett gedruckte Beschriftung verwenden möchten, aber das ist wahrscheinlich übertrieben.

Stattdessen ist hier eine Lösung, die die Aktion customize_controls_enqueue_scripts verwendet, um JavaScript auf dem Customizer-Bildschirm in die Warteschlange zu stellen. jQuery wird dann verwendet, um das gewünschte Steuerelement als Ziel festzulegen und den Etikettentext in <strong> -Tags einzuschließen.

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-customize.js

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