Cómo inyectar contenido después de <body> en WordPress

Question

Cómo inyectar contenido después de <body> en WordPress

20 nov 2012, 23:56:47

Vistas: 17.7K

Votos: 4

Me gustaría inyectar algunos elementos directamente después de la etiqueta <body>.

¿Es posible hacer esto usando solo los hooks de WordPress?

Nippysaurus

145

ganchos

Comentarios

Por favor, Nippysaurus, hazlo sin hackear todo lo que no necesite ser hackeado... la respuesta correcta es la de @kaiser :)

brasofilo

21 nov 2012 05:45:35

Tendré que creerte en esto... terminé usando una plantilla hija así que no implementé ninguna de estas soluciones :) Soy muy nuevo en el desarrollo de WordPress (este es mi segundo sitio) así que es interesante ver cómo resolver este tipo de problemas.

Nippysaurus

21 nov 2012 06:45:13

Todas las respuestas a la pregunta

WordPress 5.2.0 introdujo el hook wp_body_open (detallado en el codex de WordPress)

// Agregar código después de la etiqueta de apertura del body.
add_action( 'wp_body_open', 'wpdoc_add_custom_body_open_code' );
 
function wpdoc_add_custom_body_open_code() {
    echo '<!-- código personalizado -->';
}

katiedev

71

9 mar 2021 14:45:37

Después de leer esta respuesta he creado esto.

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">Mi Contenido</div>';
    return $after_body;
});

Los primeros dos filtros "shutdown" y "final_output" son las funciones principales. Podrían ser parte de un plugin. Una vez creados, puedes usar el nuevo filtro after_body para añadir lo que quieras después del body.

En este caso he añadido un simple div, por lo que el resultado final fue:

<body><div class="content">Mi Contenido</div>

Y lo que también es interesante es que con esta expresión regular no necesitas preocuparte por dañar lo que está dentro del body. Una clase, por ejemplo, o cualquier otra cosa.

Pablo S G Pacheco

357

23 nov 2016 20:15:17

No pude encontrar ningún ejemplo funcional en línea, pero obtuve una solución y espero que pueda ayudar a alguien.

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

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

Sabir Abdul Gafoor Shaikh

41

5 oct 2014 21:59:52

Comentarios

Solo para hacerte saber que, con esa ayuda hice este plugin http://woocomercescratchdiscount.themefantasy.com/

Sabir Abdul Gafoor Shaikh

10 mar 2015 15:14:18

Si estás usando Genesis de StudioPress, hay un hook que puedes usar como el que yo utilizo para los plugins de Facebook:

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;
}

Eso parece funcionar para mí. Básicamente es exactamente lo mismo que agregar tu propio hook, como la respuesta #1 (con la cual estoy de acuerdo que es la mejor).

Sin embargo... si eres como yo y armas sitios usando cualquier plantilla que el cliente eligió, no me gusta agregar mis propios hooks de esa manera. Mantengo todo mi código en un directorio separado y lo enlazo al functions.php. Entonces, usaría la solución de jQuery para simplemente agregarlo al DOM después de la carga.

Sin embargo, probé la idea del buffer de salida de Ralf912. Eso es muy interesante. Diría que, si necesitas asegurarte de que tu código se ejecute correctamente y en la misma página, y que al 100% debe estar ahí, y no quieres meterte con la plantilla, esa es una buena idea.

Daniel Morris

111

18 nov 2016 02:11:41

Puedes crear un plugin basado en JavaScript que utilice prependTo para colocar una etiqueta justo después de la etiqueta de apertura del body. Mira este ejemplo como referencia.

Mario Peshev

466

21 nov 2012 00:28:59

Comentarios

¿Y si el visitante del sitio deshabilitó JavaScript?

Ralf912

21 nov 2012 01:38:21

Este es el truco más truculento de todos :p

Nippysaurus

21 nov 2012 01:53:21

@Nippysaurus De hecho (+1), pero el buffering de salida no es mucho mejor.

kaiser

21 nov 2012 02:41:40

@kaiser Piensas en el almacenamiento en búfer de salida anidado. Esto a veces es un poco complicado. Usar el almacenamiento en búfer de salida con una devolución de llamada no es tan complicado porque la devolución de llamada se ejecutará en cada llamada a ob_ y antes de la llamada a ob_.

Ralf912

21 nov 2012 21:56:37

Sí, es bastante 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);

}

La primera función registrará un callback para el buffer de salida. La segunda función es el callback y modificará y retornará el HTML. Por favor lee el manual de PHP sobre el buffer de salida para más información.

Ralf912

5.31K

21 nov 2012 01:34:10

kaiser 50.8K · Accepted Answer · 2012-11-21T02:42:37Z

Simplemente agrega un hook personalizado a tu plantilla:

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

kaiser

50.8K

21 nov 2012 02:42:37