• By Nacho
  • 2 de agosto de 2023

Cómo añadir código dentro de las etiquetas head y body en WordPress sin plugins

Cómo añadir código dentro de las etiquetas head y body en WordPress sin plugins

Cómo añadir código dentro de las etiquetas head y body en WordPress sin plugins 1024 683 Nacho

Dificultad Media

El desarrollo a medida en WordPress es una práctica esencial para aquellos que desean un sitio web altamente personalizado y adaptado a sus necesidades específicas. A menudo, esta personalización requiere agregar código directamente en la etiqueta <head> del sitio, donde se encuentran importantes metadatos y referencias a archivos como hojas de estilo y scripts.

Para llevar a cabo las siguientes personalizaciones es importante que tengas instalado y activo un tema hijo en WordPress. ¿El motivo? En caso de no tener un child tema activo es que si haces las modificaciones directamente en el tema, cuando lo actualices se perderán todos tus cambios. Con un tema hijo, no tendrás este problema al actualizar y siempre funcionará aunque pase el tiempo. El tema padre deberías dejarlo intacto. En el caso de que no tengas activo un tema hijo, te recomiendo que leas el artículo: Cómo añadir fragmentos de código a WordPress con plugins.

Todos los códigos que te exponemos a continuación deben ser añadidos al fichero functions.php del tema de WordPress con el que trabajes.

Añadir Código en la Etiqueta <head> sin Plugins:

Para añadir código personalizado en la etiqueta <head>, no necesitas complicados plugins. WordPress ofrece una manera sencilla de hacerlo utilizando el hook wp_head. Este hook nos permite insertar contenido justo antes de cerrar la etiqueta </head>. Veamos cómo:

<!-- Código personalizado para el head -->
<?php
function mi_funcion_personalizada_head() {
    // Agregar aquí el código que deseas insertar en el head
    echo '<!-- Mi código personalizado en el head -->';
}
add_action('wp_head', 'mi_funcion_personalizada_head');
?>

Añadir Código al final de la Etiqueta <head> sin Plugins:

Si deseas añadir tu código al final de la etiqueta <head> en el archivo functions.php de tu tema de WordPress, puedes hacerlo utilizando el hook wp_head, pero en lugar de usar echo, debes almacenar tu contenido en una variable y luego imprimirlo utilizando la función wp_print_scripts o wp_print_styles. De esta manera, tu contenido se colocará al final del <head>. Aquí tienes el código:

function mi_funcion_personalizada_head() {
    // Agregar aquí el código que deseas insertar al final del head
    $mi_codigo_personalizado = '<!-- Mi código personalizado al final del head -->';

    // Imprimir el contenido al final del head
    global $wp_scripts, $wp_styles;
    if (isset($wp_scripts) && isset($wp_styles)) {
        $wp_scripts->add_data('mi_codigo_personalizado', 'group', 1);
        $wp_styles->add_data('mi_codigo_personalizado', 'group', 1);
    }
    echo $mi_codigo_personalizado;
}

add_action('wp_print_scripts', 'mi_funcion_personalizada_head');
add_action('wp_print_styles', 'mi_funcion_personalizada_head');

Recuerda que el hook wp_print_scripts imprime los scripts al final del <head>, y el hook wp_print_styles imprime los estilos al final del <head>. Ambos hooks se utilizan aquí para asegurarse de que el contenido personalizado se coloque al final del <head>. Además, es importante tener en cuenta que el nombre que asignes a la función (en este caso, mi_funcion_personalizada_head) y la variable (en este caso, $mi_codigo_personalizado) pueden ser modificados según tus preferencias, siempre y cuando sean únicos y descriptivos.

Con este código en el archivo functions.php, tu contenido personalizado se agregará al final del <head> de tu sitio web en WordPress, cumpliendo con la intención de búsqueda de los usuarios que buscan añadir código al final de la etiqueta head.

Añadir Código justo Después de Abrir la Etiqueta <body>:

Si también necesitas insertar código al inicio del body, puedes utilizar el hook wp_body_open. Veamos cómo hacerlo:

<!-- Código personalizado para el body -->
<?php
function mi_funcion_personalizada_body() {
    // Agregar aquí el código que deseas insertar al inicio del body
    echo '<!-- Mi código personalizado al inicio del body -->';
}
add_action('wp_body_open', 'mi_funcion_personalizada_body');
?>

Personalización en el Desarrollo en WordPress:

El desarrollo en WordPress te permite personalizar cada aspecto de tu sitio web, desde la apariencia hasta la funcionalidad. Puedes crear temas y plugins a medida, adaptados a tus necesidades y las de tus usuarios. Agregar código directamente en el head y body es una práctica común para optimizar y mejorar la experiencia del usuario.

La personalización es clave para destacar en la web actual. Mediante el desarrollo a medida, puedes crear diseños únicos, mejorar el rendimiento y la usabilidad, y optimizar para el SEO. No te conformes con plantillas genéricas; ¡dale a tu sitio web el toque único que merece!

El desarrollo a medida en WordPress también puede influir positivamente en el posicionamiento SEO de tu sitio. Al personalizar el código y optimizar los elementos clave, como las etiquetas <title>, metadatos y enlaces, puedes mejorar la indexación y la relevancia de tu sitio web para los motores de búsqueda.

Dejar una Respuesta