プログラムでHTMLの「body」タグにクラスを追加するにはどうすればよいですか？

13

カスタムCSSクラスを<body>タグに追加したいと思います。Drupal 7 / Corollaを使用しています。

カスタムモジュールからプログラムでプログラムを実行するにはどうすればよいですか？

7 theming

— giorgio79
ソース

13

前処理機能は、モジュールおよびテーマから実装できます。

必要な前処理関数はhook_preprocess_html()で、設定する変数はです$variables['classes_array']。これは、<body>要素に設定されたすべてのクラスを含む配列です。Drupalがデフォルトで使用するhtml.tpl.phpファイルのコンテンツ（テーマが別のテンプレートファイルを使用しない場合）は次のとおりです。

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

モジュールでは、次のようにプリプロセス関数を実装するだけです。

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

次に、template_process（）を使用$variables['classes_array']し$variables['classes']て、次のコードを入力します。

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

サイトで複数のテーマを使用する場合、またはサイトに設定されたテーマが作成したテーマではない場合、モジュールでプリプロセス関数を使用することをお勧めします。この場合、カスタムCSSクラスを設定することができ、テーマを更新したり、サイトで使用されているデフォルトのテーマを単に変更したりしても、それらを失うことはありません。サイトでテーマのみを使用しており、そのテーマが作成したカスタムテーマである場合、カスタムテーマにプリプロセス機能を実装できます。テーマを維持するときに、テーマを更新するときにCSSクラスが失われません。

— キアムルノ
ソース

はい、私は通常、すべてのモジュールでpreprocess_htmlを使用してモジュール名を追加します。これにより、テーマJSが必要に応じて検出できるようになります。

— mpdonadio

9

MODULENAME.moduleに追加してキャッシュをクリア

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

— ザンデッド
ソース

4

hook_preprocess_htmlを介してこれを行うことができますが、非常に頻繁にこれが必要になったときにコードベースの完全に異なる部分になります。その場合は、ctools_class_add代わりに使用することをお勧めします。

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

hook_preprocess_htmlがまだ実行されておらず、クラスが追加される限り、どこからでも呼び出すことができます。

— 怒ったダン
ソース

1

pathautoモジュールを使用して、メニューパスに基づいてコンテンツページのセマンティックパスを自動的に作成すると仮定すると、ページのパスを使用して、探しているクラスを作成できます。

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

これはを介して実行できますtemplate_preprocess_html()。これは、template.phpテーマ/ベーステーマが最も適切であると判断した場所（例：Omegaプリプロセスフォルダー）、または最も適切なものに応じてカスタムモジュールに配置できます。

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

APIリファレンスの名前にもかかわらず、theme_preprocessおよびtheme_process関数はテーマだけでなくモジュールから呼び出すことができます。あなたがする必要があるのは、あなたのモジュールにマッチするようにフックに名前を付けることですmymodule_preprocess_html()。

— mpdonadio
ソース