How to inject content after <body>

wordpress.stackexchange https://wordpress.stackexchange.com/questions/384784

  •  23-04-2021
  •  | 
  •  

سؤال

I would like to inject some elements directly after the <body> tag.

Is that possible using only WordPress hooks?

هل كانت مفيدة؟

المحلول

Just add a custom hook to your template:

<body>
<?php do_action( 'wpse73370_custom_hook' ); ?>

نصائح أخرى

After reading this answer I've made this.

ob_start();
add_action('shutdown', function() {
    if ( is_admin() ) {
        return;
    }
    $final = '';
    $levels = ob_get_level();
    for ($i = 0; $i < $levels; $i++){
        $final .= ob_get_clean();
    }
    echo apply_filters('final_output', $final);
}, 0);

add_filter('final_output', function($output) {  
    if ( is_admin() ) {
        return;
    }       
    $after_body = apply_filters('after_body','');
    $output = preg_replace("/(\<body.*\>)/", "$1".$after_body, $output);
    return $output;
});

add_filter('after_body',function($after_body){
    $after_body.='<div class="content">My Content</div>';
    return $after_body;
});

The first two filters "shutdown" and "final_output" are the core functions. Could be part of a plugin. After they are created you can use the new after_body filter to add what you want to the after body.

In This case i added a simple div, so it ended up like this:

<body><div class="content">My Content</div>

And what is also interesting is with this regex you don't need to worry about damaging what is inside the body. A class for instance or any other thing

I could not find any working example online, but I got one solution and I hope it might help anyone. 

 jQuery(document).ready( function($) {
  $('body').prepend('<h1>Hello world</h1>');
 });

https://wordpress.org/support/topic/add_action-right-after-ltbodygt-tag

If you are using Genesis by StudioPress, there is a hook you can use like the one I use for facebook plugins:

add_action( 'genesis_before', 'fn_AddFacebook' );
function fn_AddFacebook(){

 $script='
            (function(d, s, id) {
              var js, fjs = d.getElementsByTagName(s)[0];
              if (d.getElementById(id)) return;
              js = d.createElement(s); js.id = id;
              js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, \'script\', \'facebook-jssdk\'));';


    echo $script;
}

That seems to work for me. It is essentially the exact same thing as adding your own hook, like the #1 answer (which I agree is the best).

However.... if you are like me, and slap together sites using whatever template the client picked out, I don't like to add my own hooks like that. I keep all my stuff in a separate directory and link it to the functions.php. So, I would use the jquery solution to just add it to the dom after the load.

However, I tested Ralf912's output buffer idea. That's very cool. I'd say, if you need to make sure your code is executed correctly and on the same page and it's 100% has to be there, and you don't want to mess with the template, that's a good idea.

Wordpress 5.2.0 introduced the wp_body_open hook (detailed in the WordPress codex)

// Add code after opening body tag.
add_action( 'wp_body_open', 'wpdoc_add_custom_body_open_code' );
 
function wpdoc_add_custom_body_open_code() {
    echo '<!-- custom code -->';
}

You can create a plugin that is based on JavaScript and uses prependTo in order to place a tag right after the starting body tag. Check this out for a reference.

Yes, it's quite simple:

add_action( 'init', 'test_start_buffer', 0, 0 );

function test_start_buffer(){

    ob_start( 'test_get_buffer' );

}

function test_get_buffer( $buffer){

    return preg_replace( '#<body.+>#', '<body>', $buffer);

}

The first function will register a callback for the output buffering. The second function is the callback and will modify and return the HTML. Please read the PHP manual output bufferuing for more informations.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى wordpress.stackexchange
scroll top