Cómo agregar HTML al cuerpo de una publicación o página de WordPress

colorful JavaScript, CSS, and HTML code over a black computer screen background

Entonces, ¿querés agregar tu propio HTML personalizado al cuerpo de tus publicaciones y páginas de WordPress, eh? ¡Genial!

Agregar código HTML personalizado es una excelente manera de mostrar contenido único que podría ser más difícil de lograr con las características predeterminadas de WordPress. Sin embargo, la pregunta es: “¿Cómo?”

Por suerte, WordPress es muy flexible y permite a los usuarios agregar código HTML de varias maneras. Algunas implican las funciones integradas del editor Gutenberg, mientras que otras requieren algo de conocimiento de codificación. Vamos a explorar estos métodos para ayudarte a aprender a tomar control del HTML personalizado en tu sitio.

Puntos Clave

Es posible agregar HTML personalizado al cuerpo de tus publicaciones y páginas de WordPress con el bloque Custom HTML en Gutenberg.
También es posible mostrar HTML personalizado antes o después del contenido de tu publicación utilizando la etiqueta de plantilla the_content.

¿Es Posible Agregar HTML al Cuerpo de Tus Publicaciones de WordPress?

Sí, es posible agregar HTML personalizado al cuerpo de tus publicaciones y páginas de WordPress. Podés agregar HTML antes o después del cuerpo y en el propio cuerpo. Estos son los métodos más simples para cada uno de estos casos:

Si querés agregar HTML en una parte específica del cuerpo de tu publicación, usá el bloque Custom HTML en Gutenberg.
Si querés agregar HTML antes del cuerpo de tu post, usá la etiqueta de plantilla the_content.
Si querés agregar HTML después del cuerpo de tu post, también podés usar la etiqueta de plantilla the_content.

Estas herramientas y funciones te permiten controlar dónde colocar tu código HTML personalizado en WordPress.

3 Métodos para Agregar Código HTML al Cuerpo de tus Posts y Páginas de WordPress

Ahora que sabés que es posible agregar código HTML personalizado a tu sitio de WordPress, vamos a explorar los métodos que podés usar para hacerlo.

Método #1: Agregar HTML al Cuerpo de tus Posts de WordPress con el Bloque de HTML Personalizado en WordPress

El bloque de HTML Personalizado de WordPress es la forma más fácil de agregar HTML a tus posts y páginas. Es un bloque integrado que viene con todas las instalaciones de WordPress y es muy fácil de usar.

Una vez que estés editando tu post o página, pasá el puntero por el área donde querés insertar el código HTML y hacé clic en Agregar Bloque.

Un post de WordPress siendo editado en la interfaz del editor Gutenberg

Vas a ver un menú chiquito donde podés navegar por los bloques o buscarlos por nombre. Buscá “html” y hacé clic en el botón de Custom HTML (HTML Personalizado) que aparece abajo.

Una publicación de WordPress siendo editada en la interfaz del editor Gutenberg. El usuario está buscando el bloque 'Custom HTML' en la función de búsqueda de bloques.

Ahora, podés ingresar tu código HTML. Por ejemplo, vamos a poner un código HTML para una tabla que muestre la temperatura promedio de España por estación.

Una publicación de WordPress siendo editada en la interfaz del editor Gutenberg. El usuario está ingresando código HTML en el bloque 'Custom HTML'

Una vez que agregaste tu código HTML, guardá los cambios y visitá tu publicación en vivo, página o vista previa para ver tu código en acción.

Una publicación de WordPress. Al final de la publicación, hay una tabla que muestra las temperaturas promedio de España por estación

Método #2: Agregar HTML Antes del Cuerpo de Todas tus Publicaciones Editando el Archivo functions.php de tu Tema

Si querés agregar HTML a todas las publicaciones de tu sitio en vez de a una sola, podés editar el archivo functions.php de tu tema.

Este método utiliza la etiqueta de plantilla the_content para crear una función que inserta HTML en la parte superior del cuerpo de tu contenido.

the_content es una etiqueta de plantilla que muestra el contenido principal de una publicación o página. Toma el cuerpo de la publicación de la base de datos de WordPress y lo saca donde decidas colocarlo.

Podés usar esta etiqueta de plantilla para agregar HTML personalizado al principio de cada publicación o página en tu sitio si tenés un mensaje importante que querés que tus lectores sepan.

Acá tenés un ejemplo de cómo usar the_content para mostrar un cuadro de texto visualmente distinto al principio de tus publicaciones de blog:

if ( ! function_exists( 'add_welcome_text_to_posts' ) ) :
    function add_welcome_text_to_posts ($content) {
        if ( is_single() ) {
            $welcome_text = '<div style="background-color: #333333; color: #ffffff; font-size: 22px; padding: 20px; border-radius: 8px; line-height: 1.6; text-align: center;" class="welcome-box">¡Bienvenido a mi blog! Espero que la información que encuentres aquí sea útil.</div>';
            $content = $welcome_text . $content;
    }
    return $content;
}
endif;

add_filter('the_content', 'add_welcome_text_to_posts');

Así se ve en acción:

Una publicación de WordPress. Al comienzo de la publicación, hay un cuadro de texto negro que da la bienvenida a los visitantes al blog

Método #3: Agregar HTML después del cuerpo de todas tus publicaciones editando el archivo functions.php de tu tema

Podés usar the_content de manera similar al método anterior para agregar HTML personalizado al final de cada publicación o página en tu sitio de WordPress. Esto te permite cargar contenido después del cuerpo de tus publicaciones o páginas.

Acá tenés un ejemplo de cómo usar the_content para agregar un cuadro de texto al final de cada publicación de blog:

if ( ! function_exists( 'add_goodbye_text_to_posts' ) ) :
    function add_goodbye_text_to_posts ($content) {
    if ( is_single() ) {
        $goodbye_text = '<div style="background-color: #333333; color: #ffffff; font-size: 22px; padding: 20px; border-radius: 8px; line-height: 1.6; text-align: center;" class="goodbye-text">Espero que la información en este blog haya sido útil. <a href="https://www.example.com" style="color: #00bfff; text-decoration: none;">Hacé clic aquí</a> para leer más publicaciones de mi blog.</div>';
        $content = $content . $goodbye_text;
    }
    return $content;
}
endif;

add_filter('the_content', 'add_goodbye_text_to_posts');

Así se ve en acción:

Una publicación de WordPress. En la parte inferior de la publicación, hay un cuadro de texto negro que invita a los lectores a leer más publicaciones del blog.

Aunque esta guía modificó directamente el archivo functions.php, tené en cuenta que WordPress lo sobrescribirá cuando actualices a una versión más nueva.

Por eso, te recomendamos encarecidamente usar un tema hijo o un plugin de fragmentos de código como WP Code. Cualquiera de estos métodos te permitirá mantener tu código personalizado incluso después de una actualización.

Es fácil agregar HTML al cuerpo de tus publicaciones y páginas de WordPress

Como podés ver, podés agregar HTML al cuerpo de tus publicaciones y páginas de WordPress utilizando el bloque de HTML personalizado de Gutenberg. También podés agregar HTML antes o después de cada publicación en tu sitio usando código PHP, específicamente la etiqueta de plantilla the_content.

Si aprendés a usar estas herramientas, podrás mostrar HTML personalizado en cualquier parte de tus publicaciones.

Si encontraste útil esta publicación, lee nuestro blog y recursos para desarrolladores para más ideas y guías!