¿Cómo agregar clases a la etiqueta BODY dinámicamente en función de la ruta / profundidad de la página?


22

¿Cómo agregar clases a la etiqueta del cuerpo dinámicamente, como este ejemplo a continuación?

-Inicio
-Ciudades      
--Melbourne       <body class="melbourne">
--- Parques temáticos       <body class="melbourne theme_parks">
--- Restaurantes       <body class="melbourne restaurants">
--Nueva York       <body class="new_york">
--- Parques temáticos       <body class="new_york theme_parks">
--- Restaurantes       <body class="new_york restaurants">
-Contáctenos       <body class="contact_us">

Drupal novato aquí y sin antecedentes de programación. Por lo tanto, agradecería mucho si pudiera ser lo más detallado posible al compartir una solución.

Respuestas:


37

Para exponer la respuesta de Nikhil Mohan, puede implementar template_preprocess_html()dentro del archivo template.php de su tema. Lea la documentación sobre Anulación de salida temática para comprender los conceptos básicos de lo que está sucediendo aquí.

Dentro de esta función, tiene acceso a la variable $vars['classes_array'], que contiene una lista de clases que se aplicarán a la <body>etiqueta HTML en la página.

Desafortunadamente, la información sobre la ubicación de la página actual en el menú no está disponible de inmediato. Podría usar menu_get_item()y luego menu_get_ancestors()obtener esta información, pero eso es una gran capacidad de procesamiento para algo que probablemente podamos obtener con un enfoque más simple.

Suponiendo que está utilizando el módulo pathauto para crear automáticamente rutas semánticas para sus páginas de contenido en función de la ruta del menú (es decir, su página de parques temáticos de Melbourne tendría la ruta 'melbourne / theme_parks'), puede usar la ruta de la página para crear las clases que desee. estan buscando:

function THEMENAME_preprocess_html(&$vars) {
  $path = drupal_get_path_alias();
  $aliases = explode('/', $path);

  foreach($aliases as $alias) {
    $vars['classes_array'][] = drupal_clean_css_identifier($alias);
  } 
}

Eso es. Drupal ahora observará el alias de ruta de la página actual y agregará una clase a la <body>etiqueta para cada fragmento del alias de ruta.


1
Si las rutas no funcionan, entonces el análisis de menu_get_active_breadcrumb también será una opción. Es probable que esté en el staticcaché en ese punto, por lo que casi no hay sobrecarga.
mpdonadio

3
¡Gracias a todos, especialmente a @sheena_d por la explicación y el código! Tuvo que hacer un poco de búsqueda sobre cómo hacer que funcione en Omega Temática y logró conseguir que funcione: D Esta es la línea para hacer que funcione en Omega Temática: $vars['attributes_array']['class'][] = drupal_clean_css_identifier($alias);
kyooriouskoala



Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.