프로그래밍 방식으로 HTML“body”태그에 클래스를 추가하려면 어떻게합니까?


13

태그에 맞춤 CSS 클래스 를 추가하고 싶습니다 <body>. Drupal 7 / Corolla를 사용하고 있습니다.

사용자 정의 모듈에서 프로그래밍 방식으로 어떻게 할 수 있습니까?

답변:


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, 어디 테마 / 기본 테마하다고 판단하는 가장 적합한 (예를 들어, 오메가 가장 적합한 내용에 따라 전처리 폴더), 또는 사용자 정의 모듈.

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

API 참조의 이름에도 불구하고 the theme_preprocesstheme_process함수는 테마뿐만 아니라 모듈에서 호출 할 수 있습니다. 모듈과 일치하도록 후크의 이름을 지정하면됩니다 (예 :) mymodule_preprocess_html().

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.