更新答案

Question

我正在寻找一种简单的方法在WordPress插件的<body>部分顶部插入内容，并发现没有核心钩子可以做到这一点，我不能依赖修改主题。但是有一个钩子可以插入到<head>部分，我发现如果我将<div>插入<head>部分而不是<body>，所有浏览器我事实上已经过测试，会将内容从<head>移到<body>部分的顶部，这正是我想要的。

我知道这会使W3C验证失败，但另一方面大多数网站都有W3C验证错误。更重要的是，这个技巧适用于Chrome，FF，IE，Safari，Android和iPhone，Chrome移动版，Brave移动版，Ghostery移动版，仅举几个我检查过的地方。

这种代码会在实践中引起问题吗？我应该避免这样做并找到另一种方式吗？

运行此HTML代码，您将在页面呈现后在主体中看到两个DIV：

<html>
<head>
<div>This is the head</div>
</head>
<body>
    <div>This is the body</div>
</body>
</html>

以下是您在浏览器中看到的内容：

Answer 1

更新答案

所以你有一些非常严格的要求：

没有主题编辑（通过插件启动）
没有JavaScript插入（需要在初始DOM中）

如果你只需要在页面上放置元素，可以将它粘贴在相对较早的钩子上，然后在<body>之后用JavaScript移动它。

如果它必须是首先加载的东西之一，你可能可以只是将它贴在wp_head中 - 确保它的优先级非常低，所以它具有准语义意义。

但是，您也可以使用实时查找和替换将其插入PHP。你不应该遭受太多的性能损失，但这样的事情会让你开始：

function Danger_insert_iframe( $buffer ){
    // Define your iframe
    $iframe = '<iframe src="https://xhynk.com" style="width: 100%; height: 150px;"></iframe>';

    // Match the first `<body>` tag
    preg_match( '/(?:<body.*>)/U', $buffer, $matches );

    // Return our buffer with iframe appended to the body match
    return str_replace( $matches[0], $matches[0].$iframe, $buffer );
}

// An early hook with the DOM ready to fire on
add_action( 'template_redirect', function(){
    ob_start();
    ob_start( 'Danger_insert_iframe' );
});

这样做与

相符

<body [any class/js/data attributes here]>

然后将其替换为

<body [any class/js/data attributes here]><iframe></iframe>

这是 Working Demo

它不是很优雅，但它会完成工作。首先想到的是身体的正则表达式匹配，但使用DOMDocument等其他操作方法可能会更好。但就目前而言，这将帮助您入门。

原始答案：

＆＃13;

While there's not really a *perfect* way to go about this, I would avoid _hacking_ a solution together. I've seen all sorts of strange things, including hooking in a `</head>` to `wp_head`, and directly inserting content like you've mentioned.

Your best best, and the most "accepted" way to do this, is to use a [Child Theme](https://codex.wordpress.org/Child_Themes). Ultimately, it will use the parent theme like the regular theme, but you can override parts of it with the child theme. This is *mostly* future-proof, unless the parent theme structure *radically* changes.

This gist of these would be to set up a blank Child Theme, and copy the `header.php` (or equivalent file) from the parent theme, and find the opening body tag, usually `<body <?php body_class(); ?>>`

Then, insert your own [`do_action()`](https://developer.wordpress.org/reference/functions/do_action/), so the new file will start with:

    <body <?php body_class(); ?>>
    <?php do_action('Danger_after_body'); ?>

Then create a `functions.php` file in the Child Theme and use that to deal with content on that hook.

    add_action( 'Danger_after_body', 'Danger_insert_content' );
    function Danger_insert_content(){
        echo 'This Content is always after the &lt;body&gt; tag';
    }

If this won't work for you (truthfully, it should except in a few instances), and you are just inserting simple content - you could just target the `body` with JavaScript and insert content that way.

You could also find the first hook that fires in your current theme and add high priority functions to that, but depending on the theme layout that can get messy and falls under the strange hack solutions I mentioned earlier.

＆＃13;

任何现代浏览器不会将DIV元素从HEAD移动到BODY吗？

1 个答案:

更新答案

原始答案：

任何现代浏览器*不会*将DIV元素从HEAD移动到BODY吗？

1 个答案:

更新答案

原始答案：

任何现代浏览器不会将DIV元素从HEAD移动到BODY吗？