在主题定制器侧边栏中放置消息

时间:2018-09-09 作者:MarsAndBack

如何在主题定制器侧栏中创建自定义消息?

最好在顶部,在下面可以看到活动主题标题和更改主题的按钮。

原因:对于项目,由于各种原因,所有自定义程序部分都已隐藏。用户可能希望在此处看到控件,因此我想放置一条消息,解释如果他们想更改网站上的某些内容,应该怎么做。

1 个回复
最合适的回答,由SO网友:Tim Elsass 整理而成

要做到你所要求的,有两种解决方案是最佳的。

解决方案#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\'.

以下是每种类型的显示方式以供参考:

Notification Types

我继续说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_scriptcustomize_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中讨论的所有上述内容,供您进一步试验。

结束

相关推荐