Drupal 7: Agregar tags html en el head de nuestra web
Buenas drupaleros,
 
En esta ocasión os traigo un pequeño tutorial de como poder añadir cualquier tipo de tag html al head de nuestra pagina web hecha en drupal.
 
Para este ejemplo vamos a realizar el ejemplo mas común y fácil de entender de todos, vamos a añadir el meta viewport.
 
Cual es el problema?
 
Antes de empezar a ver código,vamos a intentar entender el problema que se nos plantea y cual es el objetivo.
 
En este caso, lo que queremos es que nuestra web sea responsive y para eso necesitamos poner en el <head> un tag de tipo meta llamado “viewport” y ademas con una configuración especifica.
 
Solución?
 
Para estos casos concretos, Drupal nos proporciona una herramienta a modo de función que nos permitirá poder añadir este tipo de tags en cualquier parte del <head>, esta función es drupal_add_html_head().
 
Del mismo modo, que Drupal posee métodos para añadir javascripts y css en nuestra web con el drupal_add_js y el drupal_add_css respectivamente, este también nos permite añadir tags concretos usando drupal_add_html_head() y pasándole un sencillo array de parámetros con la información necesaria para poder montar el tag.
 
También podriamos usar esta funcion, drupal_add_html_head_link para crear links dentro del head
 
Implementación
 
Para este caso vamos a usar en hook_preprocess_html() de drupal, y así poder añadir el metadato “viewport” en el momento de generar el html.tpl.php, veamos el codigo:
 
function NOMBRE_DEL_TEMA_preprocess_html(&$vars) {
    $viewport = array(
      '#tag' => 'meta',
      '#attributes' => array(
        'name' => 'viewport',
        'content' => 'width=device-width, initial-scale=1, maximum-scale=1',
      ),
    );
    drupal_add_html_head($viewport, 'viewport');
}
Ahora, vamos a tratar de entender que acabamos de hacer. Lo primero que hemos hecho ha sido setear un array con unos determinados valores. 
 
Fijaos, que dentro de $viewport usamos ‘#tag’ y ‘#attributes’ como keys del array, esto es porque Drupal, a la hora de renderizar, va a ir a buscar esas dos keys para poder generar el html.
 
‘#tag’ = Es nombre del tag html que queremos crear, en este caso vamos a crear un ‘meta’.
‘#attributes’ = Aquí es donde pondremos todos los atributos que necesite nuestro tag en forma de array. Donde Drupal lo que hará será introducir ‘clave’ = ‘valor’ dentro de los atributos del tag.
 
Prodiais añadir '#weight' por si quieiserais estableces algun tipo de orden.
 
El Segundo parámetro que vemos, ‘viewport’ no es mas que la clave que va usar Drupal para poder usarlo si en algún momento necesitásemos modificarlo por otro modulo con el hook_html_head_alter()
 
No es que exista una directiva a la hora de asignar claves o por lo menos yo no la he encontrado, pero por lógica usaremos una clave que sea fácil de asociar con la acción que vamos a realizar.
 
Este seria el resultado que veríais si vieseis el inspeccionar elemento y buscaseis dentro del tag <head>
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Espero que hayáis aprendido algo y os sirva de ayuda.
 
No olvideis compartir y comentar!
 
 
Total de votos: 91

Entradas relacionadas

Comentarios (3)

  • Imagen de Arturo Kaleo

    Arturo Kaleo (no verificado)

    Gracias, se entendió y fue muy claro.

  • Imagen de rafa87garcia

    rafa87garcia

    Hola, quería saber donde tenemos que introducir la función ¿es en html.tpl.php?, o tenemos que crear un módulo para implementar esa función. Saludos.

  • Imagen de admin

    admin

    Buenas Rafa, en este caso, por lo general, se añade en el template.php que podrás encontrar en tu plantilla (sites/all/themes/tu_plantilla/template.php). y tendras que reemplazar "NOMBRE_DEL_TEMA" por el nombre de tu plantilla. Verifica también que no se esté usando ya este hook para otra cosa, en cuyo caso añade solo las líneas de código y recuerda limpiar caches si creas la función para ver el efecto.

Deja un comentario