如何使用JavaScript获取当前post type 实现按文章类型切换背景色

核心问题说明 #

• 你调用的get_post_type()是WordPress服务端PHP函数，不存在于前端JS环境中，无法直接调用，需要先将Post Type值从后端传递到前端。
• 你原有代码中通过document.querySelectorAll('.color')获取到的是元素集合，不能直接操作未定义的element变量，需要遍历所有匹配元素执行修改。

步骤1：将Post Type传递到前端，二选一即可 #

方法1：通过PHP注入全局变量 #

在WordPress主题的functions.php中添加如下代码，将Post Type注入到前端全局变量：

add_action('wp_enqueue_scripts', 'inject_post_type_to_frontend');
function inject_post_type_to_frontend() {
    // 此处替换为你实际注册JS脚本时的句柄
    wp_localize_script('你的JS脚本注册句柄', 'wp_page_data', array(
        'post_type' => get_post_type()
    ));
}

方法2：写入DOM属性 #

修改主题header.php中的body标签，添加自定义属性：

<body data-post-type="<?php echo esc_attr(get_post_type()); ?>">

步骤2：修复后的JS代码 #

如果使用方法1注入全局变量，JS代码如下：

(function() {
    var elements, posttype;

    function init() {
        elements = document.querySelectorAll('.color');
        posttype = wp_page_data.post_type;
    }

    function checkColor() {
        elements.forEach(function(element) {
            if (posttype === 'veranstaltung') {
                element.classList.add('pink');
                element.classList.remove('color');
            } else if (posttype === 'ausstellung') {
                element.classList.add('green');
                element.classList.remove('color');
            } else if (posttype === 'digitale-events') {
                element.classList.add('red');
                element.classList.remove('color');
            }
        });
    }

    init();
    checkColor();
})();

如果使用方法2读取DOM属性，将init函数中posttype的赋值语句替换为posttype = document.body.dataset.postType;即可。

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