WooCommerce实现非活跃标签页时修改页面标题的方法

你这段JS代码不能直接丢进functions.php里，因为PHP文件会直接解析内容，JS得通过WordPress的脚本加载机制来添加，不能直接嵌在PHP文件里。下面是正确的实现步骤：

1. 单独存储JS文件 #

把你的代码保存成独立的JS文件，比如tab-title-change.js，放到主题的js文件夹里（没有就新建一个）。注意要兼容WordPress的jQuery无冲突模式，把$换成jQuery，或者用自执行函数包裹，代码改成这样：

jQuery(function($) {
  var message = "Don't forget us";
  var original;

  $(window).focus(function() {
    if (original) {
      document.title = original;
    }
  }).blur(function() {
    var title = $('title').text();
    if (title != message) {
      original = title;
    }
    document.title = message;
  });
});

2. 在functions.php中加载脚本 #

打开主题的functions.php，添加这段代码来注册并加载刚才的JS文件，同时确保依赖jQuery：

function enqueue_tab_title_script() {
    // 可选：只在WooCommerce相关页面生效，比如商品页、购物车、结算页
    if ( is_woocommerce() || is_cart() || is_checkout() ) {
        wp_enqueue_script(
            'tab-title-change',
            get_stylesheet_directory_uri() . '/js/tab-title-change.js',
            array( 'jquery' ),
            wp_get_theme()->get('Version'),
            true // 放在页面底部加载，提升性能
        );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_tab_title_script' );

可选调整 #

要是想让全站都生效，直接删掉代码里的if ( is_woocommerce() || is_cart() || is_checkout() )判断就行。

为啥原代码不能直接用？ #

• functions.php是PHP文件，直接写JS会被PHP解析，要么报错要么无法正常执行。
• WordPress有专门的脚本加载规则，用wp_enqueue_script能保证jQuery这类依赖正确加载，也符合主题开发规范。

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