要做到你所要求的,有两种解决方案是最佳的。
解决方案#1
最简单的方法是使用WordPress定制器的通知API,因为该API专门设计用于向定制器添加消息,用户可以在一个位置统一看到来自其主题的通知。
A.global notification 根据你的描述,这是最符合逻辑的选择。首先,您需要创建一个JS文件以在customizer中排队。这是一个很好的实践,可以确保您已经准备好了消息翻译,这可以使用wp_localize_script(). 此代码显示如何实现添加翻译后的消息和脚本:
function wpse313731_custom_notification_enqueue_scripts() {
$handle = \'wpse313731-custom-notification\';
// Register the script.
wp_register_script( $handle, plugins_url( "$handle.js", __FILE__ ), array( \'customize-controls\' ) );
// Translate the message.
$translated_msg = array(
\'msg\' => esc_html( \'This is a custom message being added to the WordPress Customizer.\', \'your-text-domain\' ),
);
// Localize script with translated data.
wp_localize_script( $handle, \'wpse313731\', $translated_msg );
// Enqueue the script.
wp_enqueue_script( $handle );
}
当
customize_controls_enqueue_scripts
调用hook,因此我们可以添加以下代码:
add_action( \'customize_controls_enqueue_scripts\', \'wpse313731_custom_notification_enqueue_scripts\' );
现在对于JS,我们希望确保定制器已经准备好,然后调用通知API来添加我们的自定义通知。在上面的PHP代码中,我们告诉WordPress我们的脚本将被称为wpse313731自定义通知。js,所以这个示例显示了wpse313731自定义通知中的js代码。js看起来像:
( function( $ ) {
\'use strict\';
wp.customize.bind( \'ready\', function () {
wp.customize.notifications.add(
\'wpse313731-custom-notification\',
new wp.customize.Notification(
\'wpse313731-custom-notification\', {
dismissible: true,
message: wpse313731.msg,
type: \'error\'
}
)
);
} );
} )( jQuery );
上面的示例JS代码创建了一个可撤销的错误通知。如果您只更改了dismissable键,则通知可能是不可撤销的(意味着用户不能仅关闭消息)
false
. 错误通知显示为红色,但您可以将类型更改为
\'none\'
,
\'error\'
,
\'warning\'
,
\'info\'
, 或
\'success\'
.
以下是每种类型的显示方式以供参考:
我继续说
put this code in a gist 因此,您可以安装。zip插件并自己测试,根据需要进行任何更改。
第二种解决方案是用JS将消息附加到区域。首先,您需要创建包含要呈现的内容的模板,例如:
function wpse313731_print_templates() {
?>
<script type="text/html" id="tmpl-wpse313731-custom-message">
<p class="wpse313731-custom-message"><?php esc_html_e( \'This is a custom message being added to the WordPress Customizer.\', \'your-text-domain\' ) ?></p>
</script>
<?php
}
然后,我们需要确保添加包含要渲染的模板的方法,以便在
customize_controls_print_footer_scripts
hook:
add_action( \'customize_controls_print_footer_scripts\', \'wpse313731_print_templates\' );
在JS中,您需要等待面板准备就绪并加载,然后使用
wp.template (确保不包括上面脚本ID中的tmpl部分)。完成后,我们只需要将您的自定义消息附加到主题面板,这是您要在下面添加消息的部分。它看起来像这样:
( function( $ ) {
\'use strict\';
wp.customize.bind( \'ready\', function () {
wp.customize.panel( \'themes\', function( panel ) {
panel.deferred.embedded.done( function() {
var customMessage;
customMessage = $( wp.template( \'wpse313731-custom-message\' )() );
panel.headContainer.append( customMessage );
} );
} );
} );
} )( jQuery );
JS文件当然需要加载到customizer中,并且应该使用
wp_enqueue_script 在
customize_controls_enqueue_scripts
hook:
function wpse313731_enqueue_scripts() {
$handle = \'wpse313731-custom-message\';
wp_enqueue_script( $handle, plugins_url( "$handle.js", __FILE__ ), array( \'customize-controls\' ) );
}
add_action( \'customize_controls_enqueue_scripts\', \'wpse313731_enqueue_scripts\' );
您可能希望添加一些样式以使其看起来更好,CSS可以加载到
customize_controls_enqueue_scripts
钩子就像JS一样,但不是使用wp\\u enqueue\\u script(),而是使用
wp_enqueue_style(). 在JS中向主题面板headContainer中添加一个类也可能很有帮助,因此如果加载了该部分,您可以更轻松地设置其样式。
我创建了this gist 此外,您还可以安装。zip插件,用于设置消息样式以更好地适应此区域,并完成解决方案#2中讨论的所有上述内容,供您进一步试验。