Bagaimana cara menambahkan kelas ke tag "body" HTML secara terprogram?

13

Saya ingin menambahkan kelas CSS khusus ke <body>tag. Saya menggunakan Drupal 7 / Corolla.

Bagaimana saya bisa melakukannya secara terprogram dari modul khusus saya?

7 theming

— giorgio79
sumber

13

Fungsi preprocess dapat diimplementasikan dari modul, dan tema.

Fungsi preprocess yang Anda butuhkan adalah hook_preprocess_html()dan variabel untuk diatur adalah $variables['classes_array'], yang merupakan array yang berisi semua kelas yang ditetapkan untuk <body>elemen. Konten file html.tpl.php yang digunakan secara default oleh Drupal (jika tema tidak menggunakan file template yang berbeda) adalah sebagai berikut:

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

Dalam modul Anda, Anda hanya menerapkan fungsi preprocess sebagai berikut:

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

templat_process () lalu gunakan $variables['classes_array']untuk mengisi $variables['classes']kode berikut:

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

Menggunakan fungsi preproses dalam modul lebih disukai jika situs Anda menggunakan lebih dari satu tema, atau jika tema yang ditetapkan untuk situs Anda bukan yang Anda buat. Dalam hal ini, Anda dapat mengatur kelas CSS khusus Anda, dan tidak kehilangan mereka saat memperbarui tema, atau hanya mengubah tema default yang digunakan oleh situs Anda. Jika situs Anda hanya menggunakan tema, dan tema itu adalah tema khusus yang Anda buat, maka Anda dapat menerapkan fungsi preproses dalam tema khusus Anda. Saat Anda mempertahankan tema, kelas CSS tidak hilang saat memperbarui tema Anda.

— kiamlaluno
sumber

Ya, saya biasanya menempel pada nama modul melalui preprocess_html di setiap modul sehingga tema JS dapat menampilkan fitur jika diinginkan.

— mpdonadio

9

tambahkan ke MODULENAME.module dan hapus cache

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

— xandeadx
sumber

4

Sementara Anda dapat melakukan ini melalui hook_preprocess_html, cukup sering Anda akan berada di bagian basis kode yang sama sekali berbeda ketika Anda membutuhkannya. Jika itu masalahnya maka saya sarankan Anda menggunakanctools_class_add :

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

Anda dapat memanggilnya dari mana saja selama hook_preprocess_html belum berjalan dan kelas akan ditambahkan.

— Marah Dan
sumber

1

Dengan asumsi Anda menggunakan modul pathauto untuk secara otomatis membuat jalur semantik untuk halaman konten Anda berdasarkan jalur menu, Anda dapat menggunakan jalur halaman untuk membuat kelas yang Anda cari:

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
sumber

1

Anda dapat melakukannya melalui template_preprocess_html(). Anda dapat menempatkan ini di dalam Anda template.php, di mana tema / tema dasar Anda anggap paling sesuai (misalnya, folder preprocess Omega ), atau dalam modul khusus, tergantung pada apa yang paling tepat.

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

Terlepas dari nama-nama dalam referensi API, fungsi theme_preprocessdan theme_processdapat dipanggil dari modul, dan bukan hanya tema. Yang perlu Anda lakukan hanyalah memberi nama pengait agar sesuai dengan modul Anda, mis mymodule_preprocess_html().

— mpdonadio
sumber