Insertar HTML justo después de la etiqueta <body> en WordPress

Question

Insertar HTML justo después de la etiqueta <body> en WordPress

7 mar 2016, 10:13:56

Vistas: 89.5K

Votos: 17

Estoy usando el tema Twenty Twelve de WordPress (una versión child para ser exactos).

Quiero saber cómo insertar algo de HTML justo después de la apertura de body, usando solo functions.php y sin modificar header.php.

¿Es esto posible?

Ramanana

305

filtros tema twenty twelve

Comentarios

Para lectores futuros que estén desarrollando su propio tema o que tengan temas malos/antiguos, consulta esta nota de la documentación.

Walf

14 jun 2023 04:30:27

Todas las respuestas a la pregunta

Comentarios

Gracias. Lo intentaré.

¿Hay alguna otra forma de hacerlo sin agregar el header.php?

¿Como algo usando preg_replace?

Ramanana

7 mar 2016 11:22:23

Podrías hacerlo, por ejemplo enganchándote a template_include o similar, sin embargo se desaconseja encarecidamente hacer eso porque no solo es ineficiente, sino que podría ser muy poco fiable si algo cambia en el tema padre debido a una actualización. Extender el tema padre usando un tema hijo es la mejor práctica, es predecible y esperado, además te da un gran control, como usar el ejemplo mostrado anteriormente. Pero si quieres usar preg_replace eso depende de ti...

Adam

7 mar 2016 12:27:14

Gracias nuevamente.

Estoy usando tu código y funciona bien.

En realidad mi pregunta era desde la perspectiva de un tema hijo pero simplemente usando el functions.php del tema hijo.

Pero de todos modos, después de implementar tu código, me doy cuenta de que es sencillo, liviano y simple.

Ramanana

7 mar 2016 12:47:24

Desde WordPress 5.2, ahora hay una etiqueta estándar disponible: wp_body_open() : https://developer.wordpress.org/reference/functions/wp_body_open/

Junaid Bhura

26 jul 2019 03:53:17

@JunaidBhura gracias por tu sugerencia en este hilo antiguo. He actualizado el ejemplo anterior para ampliar información sobre la nueva función auxiliar del núcleo y el hook que puede estar presente en los temas y que, con suerte, será ampliamente adoptado en el futuro.

Adam

26 jul 2019 14:08:43

Una solución muy, muy, muy sucia sería:

/* Insertar código de seguimiento u otras cosas directamente después de que se abra el BODY */
add_filter('body_class', 'wps_add_tracking_body', PHP_INT_MAX); // asegurarse de que sea el último filtro en la cola
function wps_add_tracking_body($classes) {

  // cerrar la etiqueta <body>, insertar código, abrir alguna otra etiqueta con variable sin sentido      
  $classes[] = '"><script> /* hacer lo que sea */ </script><noscript></noscript novar="';

  return $classes;
}

Martin from WP-Stars.com

334

21 jul 2017 12:48:15

Comentarios

+1 gracias por el truco

Vaibhav Gupta

2 oct 2019 17:46:57

Añade este código en functions.php

function my_function() {
 echo'<div id="from_my_function"></div>';

}
add_action('wp_head', 'my_function');

Jatinder Kaur

123

11 jul 2016 13:05:36

Comentarios

Esto se mostrará dentro de <head> no en <body>.

cjbj

11 jul 2016 13:08:56

Bueno, WordPress parece ser lo suficientemente inteligente, ¡en realidad se agrega al body! Si es un meta tag se inyectará dentro del header, de lo contrario se mostrará en el body.

Mohamed Salem Lamiri

1 feb 2018 17:30:34

Creo que @cjbj tiene razón. Parece que es el navegador el que lo mueve al body, no WordPress. Si ves el código fuente de una página donde lo has insertado en el head, ahí es donde lo encontrarás.

Danger

29 mar 2018 20:15:42

¡No hagas esto! Esto creará HTML inválido al insertar el <div> en el <head>. El navegador intentará corregirlo cerrando el head (insertando </head>) justo antes del <div>. Esto puede romper tu página, porque todo lo que vaya después del <div> insertado ahora estará en el body y no en el head.

Daniel Morell

10 feb 2021 19:16:21

Adam 16.5K · Accepted Answer · 2016-03-07T11:11:40Z

Twenty Twelve no tiene ningún hook que se ejecute inmediatamente después de la etiqueta de apertura <body>.

Por lo tanto, en tu tema hijo que extiende el tema padre Twenty Twelve, copia el archivo header.php al directorio de tu tema hijo.

Abre el archivo header.php en tu tema hijo y justo después de la etiqueta de apertura del body añade un action hook al que luego podrás engancharte a través de tu archivo functions.php.

Por ejemplo, en tu archivo twenty-twelve-child/header.php:

<body <?php body_class(); ?>>

<?php do_action('after_body_open_tag'); ?>

Luego en tu archivo twenty-twelve-child/functions.php:

function custom_content_after_body_open_tag() {

    ?>

    <div>Mi Contenido Personalizado</div>

    <?php

}

add_action('after_body_open_tag', 'custom_content_after_body_open_tag');

Esto se renderizará en tu HTML como:

<body>
<div>Mi Contenido Personalizado</div>

Lectura recomendada:

https://developer.wordpress.org/reference/functions/do_action/

ACTUALIZACIÓN: JULIO, 2019

Como comentó Junaid Bhura, a partir de WordPress 5.2 se ha introducido una nueva función auxiliar para temas wp_body_open que está destinada a usarse de manera similar a otras funciones auxiliares como wp_head y wp_footer.

Por ejemplo:

<html>
  <head>

    <?php wp_head(); ?>
 
  </head>
  <body <?php body_class(); ?>>
 
    <?php wp_body_open(); ?>

     <!-- CONTENIDO DEL BODY AQUÍ -->
 
    <?php wp_footer(); ?>
 
  </body>
</html>

En el archivo functions.php de tu tema (o en otro lugar adecuado)

function custom_content_after_body_open_tag() {

    ?>

    <div>Mi Contenido Personalizado</div>

    <?php

}

add_action('wp_body_open', 'custom_content_after_body_open_tag');

IMPORTANTE

Debes asegurarte de que el hook exista dentro del tema en el que deseas inyectar contenido, ya que puede que aún no haya sido ampliamente adoptado por la comunidad.

Si NO existe, aún necesitarás seguir el principio de extender el tema con un tema hijo con la excepción de que TÚ usarías:

<?php wp_body_open(); ?>

...en lugar de O además de:

<?php do_action('after_body_open_tag'); ?>

Lectura recomendada:

https://developer.wordpress.org/reference/functions/wp_body_open/