web-dev-qa-db-ja.com

カスタマイザ：コントロールラベルにHTMLをどのように追加しますか？

カスタマイザにチェックボックスを表示する簡単なコントロールがあります。

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

カスタマイザでDisplay Textを太字にしたいので、ラベル行を次のように変更しました。

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

ただし、カスタマイザ内のHTMLタグは次のように出力されるだけです。

<strong>Display Text</strong>

HTMLを出力する代わりに太字で表示させるにはどうすればいいですか？カスタマイザでHTMLを出力しようとすると、この問題に何度か遭遇しました。 esc_html()と同じ問題。

customizationtheme-customizer
2
Troy Templeman

これにはCSSを使用する必要があります。例えば：

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

customize_controls_enqueue_scriptsアクションでこのためのスタイルシートをキューに入れます。

JSを使用してコントロールを変更する必要がある場合は、他の回答でjQuery.readyを使用することはお勧めしません。代わりに、カスタマイザーJS APIを使用して、準備ができたらコントロールにアクセスする必要があります。たとえば、次を含むcustomize_controls_enqueue_scriptsアクションでスクリプトをエンキューします。

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

このパターンは、実際には、カスタムCSS機能のtextareaがどのように拡張されるかをコアで見ることができます。 https://github.com/WordPress/wordpress-develop/blob/4.8.0/src/ wp-admin/js/customize-controls.js＃L5343-L5346

2
Weston Ruter

カスタマイザはesc_html()を介してラベルテキストを実行するので、HTMLはデフォルトでラベルで許可されていません。太字のラベルを使用する各コントロールのコンテンツのレンダラーをオーバーライドすることもできますが、おそらくやり過ぎです。

代わりに、customize_controls_enqueue_scriptsアクションを使用してカスタマイザ画面にJavaScriptをエンキューするソリューションがあります。その後、jQueryを使用して目的のコントロールをターゲットにし、ラベルのテキストを<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-customize.js 

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