Wie füge ich dem HTML-Tag "body" programmgesteuert eine Klasse hinzu?

13

Ich möchte dem Tag eine benutzerdefinierte CSS-Klasse hinzufügen <body>. Ich benutze Drupal 7 / Corolla.

Wie kann ich das programmgesteuert von meinem benutzerdefinierten Modul aus tun?

7 theming giorgio79
quelle

Antworten:

13

Die Vorverarbeitungsfunktionen können aus Modulen und Themen implementiert werden.

Die von Ihnen benötigte Vorverarbeitungsfunktion ist hook_preprocess_html()und die zu setzende Variable $variables['classes_array']ist ein Array, das alle für das <body>Element gesetzten Klassen enthält . Der Inhalt der Datei html.tpl.php , die standardmäßig von Drupal verwendet wird (wenn das Design keine andere Vorlagendatei verwendet), ist der folgende:

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

In Ihrem Modul implementieren Sie die Vorverarbeitungsfunktion wie folgt:

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

template_process () wird dann verwendet $variables['classes_array'], um $variables['classes']den folgenden Code einzufügen:

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

 

Die Verwendung einer Vorverarbeitungsfunktion in einem Modul ist vorzuziehen, wenn Ihre Site mehr als ein Thema verwendet oder wenn das für Ihre Site festgelegte Thema nicht das von Ihnen erstellte ist. In diesem Fall können Sie Ihre benutzerdefinierten CSS-Klassen festlegen und diese nicht verlieren, wenn Sie das Thema aktualisieren oder einfach das von Ihrer Site verwendete Standardthema ändern. Wenn Ihre Site nur ein Thema verwendet und dieses Thema ein benutzerdefiniertes Thema ist, das Sie erstellt haben, können Sie die Vorverarbeitungsfunktion in Ihrem benutzerdefinierten Thema implementieren. Während Sie das Thema pflegen, gehen die CSS-Klassen beim Aktualisieren Ihres Themas nicht verloren.

kiamlaluno
quelle
Ja, normalerweise gehe ich den Modulnamen über preprocess_html in jedem Modul an, damit Theme JS auf Wunsch Features erkennen kann.
mpdonadio
9

fügen Sie zu MODULENAME.module hinzu und leeren Sie den Cache

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

Während Sie dies über hook_preprocess_html tun können, befinden Sie sich häufig in einem völlig anderen Teil Ihrer Codebasis, wenn Sie dies benötigen. Wenn dies der Fall ist, würde ich vorschlagen, dass Sie ctools_class_addstattdessen Folgendes verwenden :

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

Sie können das von überall aus aufrufen, solange hook_preprocess_html noch nicht ausgeführt wurde und die Klassen hinzugefügt werden.

Wütender Dan
quelle
1

Angenommen, Sie verwenden das pathauto-Modul, um automatisch semantische Pfade für Ihre Inhaltsseiten basierend auf dem Menüpfad zu erstellen, können Sie mit dem Seitenpfad die Klassen erstellen, nach denen Sie suchen:

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

Sie können dies über tun template_preprocess_html(). Sie können dies in Ihr template.php, wo immer Ihr Thema / Basisthema am besten geeignet erscheint (z. B. Omega- Vorverarbeitungsordner), oder in ein benutzerdefiniertes Modul einfügen, je nachdem, was am besten geeignet ist.

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

Trotz der Namen in der API-Referenz können die Funktionen theme_preprocessund theme_processvon Modulen und nicht nur von Themen aufgerufen werden. Sie müssen nur den Haken benennen, der zu Ihrem Modul passt, z mymodule_preprocess_html().

mpdonadio
quelle