Como adiciono uma classe à tag "body" do HTML programaticamente?

13

Gostaria de adicionar uma classe CSS personalizada à <body>tag. Estou usando o Drupal 7 / Corolla.

Como posso fazer isso programaticamente no meu módulo personalizado?

7 theming giorgio79
fonte

Respostas:

13

As funções de pré-processo podem ser implementadas a partir de módulos e temas.

A função de pré-processo necessária é hook_preprocess_html()a variável a ser configurada $variables['classes_array'], que é uma matriz que contém todas as classes configuradas para o <body>elemento. O conteúdo do arquivo html.tpl.php usado por padrão pelo Drupal (se o tema não usar um arquivo de modelo diferente) é o seguinte:

<!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>

No seu módulo, você acabou de implementar a função de pré-processo da seguinte maneira:

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

template_process () usa $variables['classes_array']para preencher $variables['classes']com o seguinte código:

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

 

É preferível usar uma função de pré-processo em um módulo se o site usar mais de um tema ou se o tema definido para o site não for o que você criou. Nesse caso, você pode definir suas classes CSS personalizadas e não perdê-las ao atualizar o tema ou simplesmente alterar o tema padrão usado pelo seu site. Se o seu site usar apenas um tema, e esse tema for um tema personalizado que você criou, poderá implementar a função de pré-processo em seu tema personalizado. Conforme você mantém o tema, as classes CSS não são perdidas ao atualizar seu tema.

kiamlaluno
fonte
Sim, normalmente adiro o nome do módulo via preprocess_html em todos os módulos para que o tema JS possa detectar, se desejado.
mpdonadio
9

adicione ao MODULENAME.module e limpe o cache

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

Embora você possa fazer isso através do hook_preprocess_html, muitas vezes você estará em uma parte completamente diferente da sua base de código quando precisar disso. Se for esse o caso, sugiro que você use ctools_class_add:

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

Você pode chamar isso de qualquer lugar, desde que o hook_preprocess_html ainda não tenha sido executado e as classes sejam adicionadas.

Angry Dan
fonte
1

Supondo que você esteja usando o módulo pathauto para criar automaticamente caminhos semânticos para suas páginas de conteúdo com base no caminho do menu, é possível usar o caminho da página para criar as classes que você está procurando:

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
fonte
1

Você pode fazer isso via template_preprocess_html(). Você pode colocar isso no seu template.php, sempre que seu tema / tema base considerar mais apropriado (por exemplo, pasta de pré-processo Omega ) ou em um módulo personalizado, dependendo do que for mais apropriado.

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

Apesar dos nomes na referência da API, as funções theme_preprocesse theme_processpodem ser chamadas de módulos, e não apenas temas. Tudo que você precisa fazer é nomear o gancho para combinar com seu módulo, por exemplo mymodule_preprocess_html().

mpdonadio
fonte