WordPress自定义文章类型模板中Bootstrap Datepicker不显示问题

问题概述 #

作为WordPress插件开发新手，在自定义文章类型bestellung的单页模板中使用Bootstrap Datepicker时遇到问题：

• 通过add_filter('single_template', ...)设置了自定义模板shop.php
• 在模板中添加了Datepicker的HTML和JS代码
• 尝试通过插件内资源和CDN两种方式加载Datepicker的CSS/JS，但开发者工具显示资源未加载，Datepicker无法正常显示

核心问题分析 #

资源未加载的主要原因是脚本/样式的注册时机不对，或者没有针对自定义文章类型的页面进行加载判断。

解决步骤 #

1. 确保脚本/样式在正确钩子中加载 #

WordPress中必须使用wp_enqueue_scripts钩子加载脚本和样式，不要直接在模板内调用加载函数。修改资源加载代码如下：

add_action('wp_enqueue_scripts', 'enqueue_datepicker_assets');
function enqueue_datepicker_assets() {
    // 仅在自定义文章类型bestellung的单页加载资源
    if (is_singular('bestellung')) {
        // 加载Datepicker CSS
        wp_enqueue_style(
            'bootstrap_datepicker_css',
            plugin_dir_url(__FILE__) . 'bootstrap-datepicker-1.9.0/css/bootstrap-datepicker3.min.css'
        );
        // 加载Datepicker JS，依赖jQuery
        wp_enqueue_script(
            'bootstrap_datepicker_js',
            plugin_dir_url(__FILE__) . 'bootstrap-datepicker-1.9.0/js/bootstrap-datepicker.min.js',
            array('jquery'),
            '1.9.0',
            true
        );
    }
}

2. 修正自定义模板路径判断 #

使用plugin_dir_path确保插件路径绝对正确，避免相对路径错误：

public function customTemplate($single) {
    global $post;

    if ($post->post_type == 'bestellung') {
        $template_path = plugin_dir_path(__FILE__) . '/templates/shop.php';
        if (file_exists($template_path)) {
            return $template_path;
        }
    }

    return $single;
}

3. 修复Datepicker初始化代码错误 #

JS中startDate: '-d'是无效写法，改为合法的相对日期格式：

jQuery(document).ready(function($) {
    $('#datepicker').datepicker({
        todayBtn: true,
        clearBtn: true,
        todayHighlight: true,
        toggleActive: true,
        startDate: '0d', // 改为0d代表今天，或'-1d'代表昨天
    });

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

4. 验证资源加载状态 #

• 按F12打开开发者工具，切换到「网络」标签
• 刷新页面，搜索datepicker，确认CSS和JS是否返回200状态
• 若显示404，检查插件目录下的资源文件是否存在，URL是否包含正确的路径分隔符

5. 补充Bootstrap核心依赖 #

Bootstrap Datepicker依赖Bootstrap核心样式，若主题未加载，需添加：

wp_enqueue_style('bootstrap_css', 'https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css');
wp_enqueue_script('bootstrap_js', 'https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js', array('jquery'), '3.4.1', true);

内容的提问来源于stack exchange，提问作者Random Creature