Come posso aggiungere una classe al tag HTML "body" a livello di codice?


13

Vorrei aggiungere una classe CSS personalizzata al <body>tag. Sto usando Drupal 7 / Corolla.

Come posso farlo programmaticamente dal mio modulo personalizzato?

Risposte:


13

Le funzioni di preelaborazione possono essere implementate da moduli e temi.

La funzione di preelaborazione che è necessaria è hook_preprocess_html()e la variabile da impostare è $variables['classes_array'], che è un array contenente tutte le classi impostate per l' <body>elemento. Il contenuto del file html.tpl.php utilizzato per impostazione predefinita da Drupal (se il tema non utilizza un file modello diverso) è il seguente:

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

Nel modulo è sufficiente implementare la funzione di preelaborazione come segue:

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

template_process () quindi utilizza $variables['classes_array']per popolare $variables['classes']con il seguente codice:

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

 

L'uso di una funzione di preelaborazione in un modulo è preferibile se il tuo sito utilizza più di un tema o se il set di temi per il tuo sito non è quello che hai creato. In questo caso, puoi impostare le tue classi CSS personalizzate e non perderle durante l'aggiornamento del tema o semplicemente cambiando il tema predefinito utilizzato dal tuo sito. Se il tuo sito utilizza solo un tema e tale tema è un tema personalizzato che hai creato, puoi implementare la funzione di preelaborazione nel tuo tema personalizzato. Man mano che si mantiene il tema, le classi CSS non vengono perse durante l'aggiornamento del tema.


Sì, in genere cerco il nome del modulo tramite preprocess_html in ogni modulo in modo che il tema JS possa rilevare se desiderato.
mpdonadio

9

aggiungere a MODULENAME.module e cancellare la cache

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

4

Mentre puoi farlo attraverso hook_preprocess_html, abbastanza spesso ti troverai in una parte completamente diversa del tuo codebase quando ne avrai bisogno. In tal caso, ti suggerisco di utilizzare ctools_class_addinvece:

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

Puoi chiamarlo da qualsiasi luogo fintanto che hook_preprocess_html non è ancora stato eseguito e le classi verranno aggiunte.


1

Supponendo che tu stia utilizzando il modulo pathauto per creare automaticamente percorsi semantici per le tue pagine di contenuti in base al percorso del menu, puoi utilizzare il percorso della pagina per creare le classi che stai cercando:

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);
  } 
}

1

Puoi farlo tramite template_preprocess_html(). Puoi metterlo nel tuo template.php, ovunque il tuo tema / tema di base lo ritenga più appropriato (ad esempio, cartella di preprocesso Omega ) o in un modulo personalizzato, a seconda di ciò che è più appropriato.

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

Nonostante i nomi nel riferimento API, le funzioni theme_preprocesse theme_processpossono essere chiamate dai moduli e non solo dai temi. Tutto quello che devi fare è nominare l'hook in modo che corrisponda al tuo modulo, ad es mymodule_preprocess_html().

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.