WordPress 自定义帖子类型自定义模板上的引导日期选择器未显示

Question

我是 WordPress 插件开发新手，我在自定义帖子类型方面遇到了一些问题，其中我有一个自定义模板：

add_filter('single_template', array($this, 'customTemplate'));

    public function customTemplate($single)
    {

        global $post;

        /* Checks for single template by post type */
        if ($post->post_type == 'bestellung') {
            if (file_exists($this->plugin_path . '/templates/shop.php')) {
                return $this->plugin_path . '/templates/shop.php';
            }
        }

        return $single;
    }

以及shop.php内部：

<?php

if (have_posts()) :
    while (have_posts()) : the_post(); ?>

    <!-- some html here... -->

    <div id="datepicker"></div>
    <input type="hidden" id="hidden_input_datepicker_shop" name="hidden_input_datepicker_shop">

    <script>
        jQuery(document).ready(function($) {
            $('#datepicker').datepicker({
                todayBtn: true,
                 clearBtn: true,
                 todayHighlight: true,
                 toggleActive: true,
                 startDate: '-d',
              });

              $('#datepicker').on('changeDate', function() {
                  $('#hidden_input_datepicker_shop').val(
                      $('#datepicker').datepicker('getFormattedDate')
                   );
               });
           });
      </script>


<?php endwhile;
endif;
?>

我已将引导日期选择器 css 和 js 放入单独的文件中

 // enqueue bootstrap datepicker
        wp_enqueue_style(
            'bootstrap_datepicker_css',
            $this->plugin_url . 'bootstrap-datepicker-1.9.0/css/bootstrap-datepicker3.min.css'
        );
        wp_enqueue_script('bootstrap_datepicker_js', $this->plugin_url . 'bootstrap-datepicker-1.9.0/js/bootstrap-datepicker.min.js', array('jquery'), '1.9.0', true);

但是，日期选择器不会显示在自定义模板上。

我尝试使用cdn直接在页面模板上入队，但没有成功。我检查了开发工具，似乎引导程序日期选择器没有加载。

// Enqueue Bootstrap Datepicker script
wp_enqueue_script('bootstrap-datepicker', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js', array('jquery'), '1.9.0', true);

// Enqueue Bootstrap Datepicker CSS
wp_enqueue_style('bootstrap-datepicker-css', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css', array(), '1.9.0');

Answer 1

您似乎在 WordPress 的自定义模板上加载 Bootstrap 日期选择器时遇到问题。让我们一步步解决这个问题：

1. 检查依赖关系：首先，确保 jQuery 已正确加载 在 Bootstrap 日期选择器脚本之前。 Bootstrap 日期选择器 依赖于 jQuery，因此必须在日期选择器脚本之前加载。
2. 验证排队：仔细检查您的排队脚本和 样式已正确注册和排队。确保没有 URL 中的拼写错误以及路径是否正确。
3. 检查控制台是否有错误：检查浏览器的开发者控制台 对于任何可能阻止日期选择器的 JavaScript 错误 在职的。这可以为您提供宝贵的见解，让您了解可能发生的情况 出了问题。
4. 尝试不同的加载方法：如果直接从 CDN 入队 不起作用，您可以尝试下载 Bootstrap datepicker 文件并将它们从插件目录中排队。有时， CDN 可能存在阻止脚本运行的问题或限制 正确加载。

这是您的代码的修订版本，其中包含以下注意事项：

// Enqueue Bootstrap Datepicker script
function enqueue_bootstrap_datepicker() {
    wp_enqueue_script('bootstrap-datepicker', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js', array('jquery'), '1.9.0', true);
}

// Enqueue Bootstrap Datepicker CSS
function enqueue_bootstrap_datepicker_css() {
    wp_enqueue_style('bootstrap-datepicker-css', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css', array(), '1.9.0');
}

add_action('wp_enqueue_scripts', 'enqueue_bootstrap_datepicker');
add_action('wp_enqueue_scripts', 'enqueue_bootstrap_datepicker_css');

// Custom template function
function custom_template($single)
{
    global $post;

    /* Checks for single template by post type */
    if ($post->post_type == 'bestellung') {
        if (file_exists($this->plugin_path . '/templates/shop.php')) {
            return $this->plugin_path . '/templates/shop.php';
        }
    }

    return $single;
}

add_filter('single_template', 'custom_template');

确保此代码放置在您的插件文件或主题的functions.php 文件中。另外，请确保自定义模板（shop.php）的路径正确。

进行这些更改后，清除所有缓存插件或浏览器缓存，然后重新加载自定义模板页面以查看是否出现 Bootstrap 日期选择器。如果仍然不起作用，请检查浏览器控制台中是否有任何 JavaScript 错误并进行相应的故障排除。