wp_head ← Hook de WordPress Imprescindible!

Juan Antonio Munoz Castro - emoji con bus
Vamos a ver que podemos hacer con wp_head. Mediante este Hook podemos añadir código a la parte superior de la web, es decir, la cabecera “” en el código HTML de nuestra web.

Pero... ¿Qué demonios es un Hook?!

Bien, si ya sabes que son y para que sirven los Hooks o Ganchos en WordPress te puedes saltar este apartado e ir directamente al “meollo” de la cuestión, de lo contrario ¡ sigue leyendo !

Bueno pues si estas leyendo esto deduzco que no sabes que es un Hook. Los Hooks o ganchos son “sitios” repartidos por toda la estructura de cualquier WordPress que nos permiten básicamente dos cosas: Añadir código o modificar el código existente.

Está claro que esta es una definición muy corta e insuficiente para todo lo que suponen los hooks en el entorno de WordPress, en futuros post iremos desgranando poco a poco toda la información para que tengas una visión más exhaustiva del potencial de estos.

Vamos a ver que podemos hacer con el Hook wp_head

Ahora que tenemos más o menos claro que es un Hook vamos a ver que podemos hacer con wp_head.

Mediante este Hook podemos añadir código a la parte superior de la web, es decir, la cabecera “<head></head>” en el código HTML de nuestra web.

Personalmente uso este Hook para meter los códigos de AdSense, analytics, Search Console y cualquier otro código que necesite meter para verificar.

Juan Antonio Muñoz Castro

¿Vemos paso a paso como poner el código de analitycs con wp_head?

1)Lo primero es lo primero... vamos a mostrar el código en cuestión no? 😜

<?php

//Funcion que cargará nuestro código, todo lo que pongamos dentro se cargará en el Header
function nombre_funcion() {
    
    //código a cargar

}add_action('wp_head', 'nombre_funcion'); //hook que lanza la funcion y carga el contenido en el head

?>

El código habla por si mismo, creamos una función que va a contener el código que necesitamos meter en la web y posteriormente, mediante el Hook wp_head, llamamos a dicha función.

2)Ahora vamos a introducir el código de verificación de Analytics dentro de la función

Si no tienes el código de analytics basta con registrarte y cuando hayas finalizado todos los pasos de registro de dará el código a meter en tu web.

En nuestro caso el resultado una vez metido nuestro código es el siguiente

👇 👇 👇 👇

<?php

//Funcion que cargará nuestro código, todo lo que pongamos dentro se cargará en el Header
function nombre_funcion() {
    //Cerramos PHP para introducir el scritp de Analytics
    ?>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-43202836-23"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-43202836-23');
    </script>

    <?php //Volvemos a abrir PHP parra que se ejecute el Hook
}add_action('wp_head', 'nombre_funcion'); //hook que lanza la funcion y carga el contenido en el head

?>

Tal y como se puede ver en el cuadro con el código hemos metido “tal cual” el código que nos da Google Analytics.

Lo único reseñable es que si metemos el scritpt dentro de la función, al no ser código PHP no va a funcionar correctamente. Para poder meter el código primero cerramos PHP con “?>”, pegamos el código de verificación y volvemos a abrir PHP “<?php” para que siga ejecutando el código con normalidad.

3)¿Mejoramos un poco el código? ✍️

<?php

//Funcion que cargará nuestro código, todo lo que pongamos dentro se cargará en el Header
function nombre_funcion() {

    //Detectamos si el usuario está logueado y, en caso de no estarlo, mostramos el código de seguirmiento
    if ( !is_user_logged_in() ) {

        //Cerramos PHP para introducir el scritp de Analytics
        ?>

        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-43202836-23"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-43202836-23');
        </script>

        <?php //Volvemos a abrir PHP parra que se ejecute el Hook

    }

}add_action('wp_head', 'nombre_funcion'); //hook que lanza la funcion y carga el contenido en el head

?>

Si dejamos el código tal cual lo teníamos en el punto 2 SIEMPRE que se cargue la web lo hará también el código y, por lo tanto, contabilizará una visita.

Si queremos tener una visión real de la visitas en nuestra web deberíamos filtrar bien en Analytics por IP para que nosotros mismo no generemos visitas falsas en nuestra propia web.

En el ejemplo que nos ocupa lo que hemos hecho para no tener que “toquetear” demasiado en analytics es cargar el script solamente cuando no haya ningún usuario logueado. Con esto conseguimos no generar visitas mientras estamos logueados y navegando por nuestra web 😝.

Ya tenemos el código!!! 🎉 🎊

!?)Pero... Un Momento! ¿como meto el Hook en mi WordPress? 🤔

Ya se me olvidaba lo más importante 😜

En realidad esta pregunta tiene un varias respuestas, a groso modo las posibilidades son:

  • Modificar los archivos del theme (nada recomendable).
  • Modificar el functions.php del theme. Esta es una buena fórmula siempre y cuando tengamos creado un child-theme. Lo malo de esta opción es que si alguna vez cambiamos de plantilla en nuestra web se perdería todo el contenido de este archivo. En nuestro caso sería solamente el código de seguimiento de Analytics.
  • Crear un plugin de funciones. Esta es sin duda la mejor opción para utilizar nuestros hooks y cualquier código que tengamos que usar en nuestro WordPress.

En el ejemplo del post, como analizar estos puntos a fondo no es el objetivo, lo ideal es meter el código que acabamos de generar en el archivo functions.php de nuestro theme.

Juan-Antonio-Munoz-Castro---Alerta

Pues ya sabes como meter este tipo de código en tu instalación de WordPress sin necesidad de usar ningún plugin y sin grandes complicaciones.

¿Tienes alguna duda? Para cualquier consulta puedes contactarme en el siguiente correo:

contacto@juanmcastro.es

Vamos con algunas dudas frecuentes (FAQ)

📌 ¿Para que sirve el hook wp_head?

Este hook sirve para añadir código al head de nuestra web. 👉 Normalmente se usa para introducir el código de adsense, search console, etc.

📌 ¿Donde se puede introducir este código?

Básicamente tenemos 3 opciones 👀 Si quieres tener más detalles te invito a leer el post, aqui sólo puedo indicarte que la mejor opción es, sin duda, un plugin de funcionalidades.

📌 ¿Hace falta saber programación para usar el hook?

Si y...... No al mismo tiempo! 😆 Si quieres meter los códigos típicos de search console y demás no hace falta pero si quieres hacer algo más avanzado sin duda necesitarás saber algo de PHP.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable Juan Antonio Muñoz Castro .
  • Finalidad Moderar los comentarios. Responder las consultas.
  • Legitimación Tu consentimiento.
  • Destinatarios SERED.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.

Ir arriba
Esta web utiliza cookies, puedes ver aquí la Política de Cookies