web-dev-qa-db-fra.com

Comment ajouter une classe à la balise HTML "body" par programme?

Je voudrais ajouter une classe CSS personnalisée au <body> tag. J'utilise Drupal 7/Corolla.

Comment puis-je le faire par programme à partir de mon module personnalisé?

7theming
12
giorgio79

Les fonctions de prétraitement peuvent être implémentées à partir de modules et de thèmes.

La fonction de prétraitement dont vous avez besoin est hook_preprocess_html() et la variable à définir est $variables['classes_array'], qui est un tableau contenant toutes les classes définies pour le <body> élément. Le contenu du fichier html.tpl.php utilisé par défaut par Drupal (si le thème n'utilise pas un fichier de modèle différent) est le suivant) :

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

Dans votre module, vous implémentez simplement la fonction de prétraitement comme suit:

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

template_process () puis utilise $variables['classes_array'] peupler $variables['classes'] avec le code suivant:

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

L'utilisation d'une fonction de prétraitement dans un module est préférable si votre site utilise plus d'un thème, ou si l'ensemble de thèmes pour votre site n'est pas celui que vous avez créé. Dans ce cas, vous pouvez définir vos classes CSS personnalisées et ne pas les perdre lors de la mise à jour du thème, ou simplement changer le thème par défaut utilisé par votre site. Si votre site utilise uniquement un thème et que ce thème est un thème personnalisé que vous avez créé, vous pouvez implémenter la fonction de prétraitement dans votre thème personnalisé. Lorsque vous gérez le thème, les classes CSS ne sont pas perdues lors de la mise à jour de votre thème.

12
kiamlaluno

ajouter à MODULENAME.module et vider le cache

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

Bien que vous puissiez le faire via hook_preprocess_html, vous serez souvent dans une partie complètement différente de votre base de code lorsque vous en aurez besoin. Si tel est le cas, je vous suggère d'utiliser ctools_class_add au lieu:

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

Vous pouvez l'appeler de n'importe où tant que hook_preprocess_html n'a pas encore été exécuté et que les classes seront ajoutées.

4
Angry Dan

Vous pouvez le faire via template_preprocess_html() . Vous pouvez le placer dans votre template.php, Là où votre thème/thème de base le juge le plus approprié (par exemple, Omega dossier de prétraitement), ou dans un module personnalisé, selon ce qui est le plus approprié.

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

Malgré les noms dans la référence API, les fonctions theme_preprocess Et theme_process Peuvent être appelées à partir de modules, et pas seulement de thèmes. Tout ce que vous avez à faire est de nommer le hook correspondant à votre module, par exemple mymodule_preprocess_html().

1
mpdonadio

En supposant que vous utilisez le module pathauto pour créer automatiquement des chemins sémantiques pour vos pages de contenu en fonction du chemin de menu, vous pouvez utiliser le chemin de la page pour créer les classes que vous recherchez:

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
Iqbal