在JavaScript中如何获取WordPress页面名称？（Kadence主题场景）

你可以通过以下两种常用方法获取页面名称（slug），实现条件判断后修改指定文本：

方法一：利用WordPress自动添加的body类 #

WordPress会给页面的<body>标签自动添加包含页面slug的类名，格式为page-[页面slug]（比如页面slug是about-us，类名就是page-about-us）。直接通过JS检查body的类列表即可：

const body = document.body;
// 替换成你要判断的页面slug对应的类名
if (body.classList.contains('page-the-page-name')) {
  const targetElement = document.getElementsByClassName('header-custom');
  // 先判断元素是否存在，避免报错
  if (targetElement.length > 0) {
    targetElement[0].innerHTML = 'New Text';
  }
}

方法二：通过PHP向JS传递页面slug #

这种方法更可靠，直接从WordPress后端获取页面slug并传递给JS：

1. 在主题的functions.php文件中添加以下代码：

function pass_page_slug_to_js() {
  if (is_page()) {
    global $post;
    $page_slug = $post->post_name;
    echo "<script>var currentPageSlug = '{$page_slug}';</script>";
  }
}
add_action('wp_head', 'pass_page_slug_to_js');

2. 然后在你的JS代码中直接使用变量判断：

// 替换成你要判断的页面slug
if (currentPageSlug === 'the-page-name') {
  const targetElement = document.getElementsByClassName('header-custom');
  if (targetElement.length > 0) {
    targetElement[0].innerHTML = 'New Text';
  }
}

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