¿Cómo agrego una clase a la etiqueta HTML "cuerpo" mediante programación?

13

Me gustaría agregar una clase CSS personalizada a la <body>etiqueta. Estoy usando Drupal 7 / Corolla.

¿Cómo puedo hacerlo mediante programación desde mi módulo personalizado?

7 theming giorgio79
fuente

Respuestas:

13

Las funciones de preproceso se pueden implementar desde módulos y temas.

La función de preproceso que necesita es hook_preprocess_html()y la variable a establecer es $variables['classes_array'], que es una matriz que contiene todas las clases establecidas para el <body>elemento. El contenido del archivo html.tpl.php que Drupal usa de manera predeterminada (si el tema no usa un archivo de plantilla diferente) es el siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>>

<head profile="<?php print $grddl_profile; ?>">
  <?php print $head; ?>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
  </div>
  <?php print $page_top; ?>
  <?php print $page; ?>
  <?php print $page_bottom; ?>
</body>
</html>

En su módulo, simplemente implementa la función de preproceso de la siguiente manera:

function mymodule_preprocess_html(&$variables) {
  $variables['classes_array'][] = "new-class";
}

template_process () luego usa $variables['classes_array']para rellenar $variables['classes']con el siguiente código:

$variables['classes'] = implode(' ', $variables['classes_array']);

 

Usar una función de preproceso en un módulo es preferible si su sitio usa más de un tema, o si el tema establecido para su sitio no es el que usted creó. En este caso, puede configurar sus clases CSS personalizadas y no perderlas al actualizar el tema, o simplemente cambiar el tema predeterminado utilizado por su sitio. Si su sitio usa solo un tema, y ​​ese tema es un tema personalizado que creó, entonces puede implementar la función de preproceso en su tema personalizado. A medida que mantiene el tema, las clases CSS no se pierden al actualizar su tema.

kiamlaluno
fuente
Sí, normalmente agrego el nombre del módulo a través de preprocess_html en cada módulo para que el tema JS pueda detectar si lo desea.
mpdonadio
9

agregar a MODULENAME.module y borrar el caché

function MODULENAME_preprocess_html(&$vars) {
  $vars['classes_array'][] = 'custom-class';
}
xandeadx
fuente
4

Si bien puede hacer esto a través de hook_preprocess_html, con bastante frecuencia estará en una parte completamente diferente de su base de código cuando necesite esto. Si ese es el caso, le sugiero que use ctools_class_adden su lugar:

ctools_class_add(array('class1', 'class2', 'class3'));

Puede llamar desde cualquier lugar siempre que hook_preprocess_html aún no se haya ejecutado y las clases se agregarán.

Dan enojado
fuente
1

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ú, puede usar la ruta de la página para crear las clases que está 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);
  } 
}
Iqbal
fuente
1

Puedes hacerlo a través de template_preprocess_html(). Puede poner esto en su template.php, donde su tema / tema base lo considere más apropiado (por ejemplo, carpeta de preproceso Omega ), o en un módulo personalizado, dependiendo de lo que sea más apropiado.

function mytheme_preprocess_html(&$variables) {
  $variables['classes_array'][] = "class1";
  $variables['classes_array'][] = "class2";
  $variables['classes_array'][] = "class3";
}

A pesar de los nombres en la referencia de la API, las funciones theme_preprocessy theme_processse pueden invocar desde módulos, y no solo desde temas. Todo lo que necesita hacer es nombrar el gancho para que coincida con su módulo, por ejemplo mymodule_preprocess_html().

mpdonadio
fuente