WordPress : La importancia de usar wp_head() y wp_footer() en tus plantillas
Si has trabajado con templates de terceros en tus WordPress verás que todos tienen en sus archivos header.php y footer.php las funciones wp_head() y wp_footer() respectivamente. Ahora, que si no los has visto has estado usando plantilla de gente que no sabe muy bien armar plantillas.
Esas dos funciones no pueden faltar en una plantilla si es que tienes pensado usar plugins o si quieres crear tus propios códigos. Lo que pasa es que estas funciones sirven para que mediante código desde el functions.php o plugins se pueda meter código directamente en el tema. Si las funciones no están presentes, plugins como contact form 7 no podrá funcionar correctamente ya que no tendrían forma de insertar el código CSS y JS en tu plantilla para su respectivo funcionamiento.
Para usarlos correctamente basta que en tu archivo header.php agregues la función dentro de la etiqueta <head></head>. Yo prefiero ponerlo debajo de la etiqueta <title></title> para que mediente mi propio CSS pueda «chancar» alguno de esos estilos:
<?php wp_head(); ?>Y para el footer es igual, solo que aquí casi siempre es mejor ponerlo justo antes de cerrar el </body>:
<?php wp_footer(); ?>Si en algún momento vez que un plugin no te responde bien en el front (plantilla) revisa si están estas funciones, si esa no es la solución puede ser la compatibilidad con tu propio código, ahí si tendrás que comentar algunos archivos JS y ver cuál esta haciendo conflicto.
Hook wp_head
wp_head ← Hook de WordPress Imprescindible!
Mediante este Hook podemos añadir código a la parte superior de la web, es decir, la cabecera , el codigo se insertara dentro de las etiquetas “<head></head>”.
Como poner el código de analitycs con wp_head
Sintaxis :
<?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.
Introducir el código de verificación de Analytics dentro de la función
<?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.
¿como meto el Hook en mi WordPress?
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.
Referencia : https://juanmcastro.es/tutoriales/wp-head-hook-wordpress/