Wordpress 如何通过添加额外的 html 属性来修改页面的 <body> 标签

Wordpress how to modify <body> tag of a page by adding extra html attributes

在 wordpress 中，有没有一种方法可以像这样在页面上设置 body 标签属性：

<body onBlur="window.focus()">

WP 块编辑器不允许编辑页面 html，因为它当然是可视化编辑器。

我会使用这段代码，这样我就可以制作一个弹出窗口 window 始终位于顶部。

顺便说一句，我解决了如何弹出 window 的问题，只是不知道如何让它保持在顶部

how to create Popup window

如果有其他方法请告诉我。

谢谢@ruvee

在此处编写分步说明：update body tag

您可以使用一个名为 wp_footer 的钩子。您可以使用 pure/vanilla javascript 向 body 标签添加额外的属性，如下所示：

add_action("wp_footer", "your_theme_adding_extra_attributes");

function your_theme_adding_extra_attributes(){
    ?>
    <script>
        let body = document.getElementsByTagName("body");
        body[0].setAttribute("onBlur", "window.focus()"); 
    </script>
<?php }

代码进入您活动主题的 functions.php 文件。

这个答案已经在 wordpress 5.8 上测试过并且有效。

运行 它在特定页面上：

根据您需要在哪个页面 运行 它，您可以使用不同的条件语句。例如：

  • 仅在存档页面上：
    • is_archive() 将是一个适当的条件检查
  • 仅在您博客的索引上：
    • is_home() 将是条件检查。
  • 仅在可能是也可能不是您的博客索引的首页上：
    • is_front_page() 将是条件检查
  • 等...

更新（与不属于第一个问题的第二个请求相关）

如果您有一个带有 blah 段塞的页面并且您想要修改它的 body 标记，您可以使用以下代码段：

# The following code would only get executed on yourwebsite.com/blah

add_action("wp_footer", "your_theme_adding_extra_attributes");

function your_theme_adding_extra_attributes(){
    if(is_page("blah")){ ?>
    <script>
        let body = document.getElementsByTagName("body");
        body[0].setAttribute("onBlur", "window.focus()"); 
    </script>
<?php }
}

is_pageDocs

对于需要添加额外 class 而不是额外 attributes 的人，有一个名为 body_class 的钩子并且 Whosebug 上已经有太多答案，例如:

  • Add a custom class name to Wordpress body tag?
  • body class in WooCommerce

您可以连接到主体 class 过滤器并为您的属性做回显，而不是过滤器的工作方式，但它可以在没有 js 的情况下完成工作。

add_filter('body_class', 'bt_add_attr_to_body');
function bt_add_attr_to_body ($classes) {
    echo 'onBlur="window.focus()"';
    
    return $classes;
}

我从你的评论中注意到你也想限制到特定页面。
假设您只想在首页上发生。
您需要为首页添加一个 if 条件，像这样

add_filter('body_class', 'bt_add_attr_to_body');
function bt_add_attr_to_body ($classes) {
    if (is_front_page()) echo 'onBlur="window.focus()"';
    
    return $classes;
}

根据您希望此属性出现的位置，您需要创建适当的条件。