web-dev-qa-db-ja.com

Webフォーム要素（ラジオボタンなど）のテーマを設定する方法は？

知りたいテーマの方法Drupal 7 Webform elements？知りたいdivでフォームをラップするだけではなく、すべての要素のHTML構造を変更します。テーマの要素はそのままにしておきます。

編集：ラベルと入力タイプのラジオボタンにクラスを追加したいと思います。

7formswebformstheming
3
gregab

各webform要素には、webformモジュールフォルダーの「components」サブディレクトリに独自のファイルがあります。

これらのファイルを確認すると、_webform_theme_COMPONENTTYPE（）関数があります。たとえば、日付フィールドには _ webform_theme_date（） があります。

この関数は、そのフィールドタイプのテーマ関数を定義します。

これらのテーマ関数は、フィールドのテーマをオーバーライドするために使用できるものです。

Exmapleの場合 theme_webform_date（） はTHEMENAME_webform_date（＆$ variables）としてオーバーライドでき、出力を変更できます。

必要なフィールドラッパーやラベルなどの場合は、 theme_webform_element（） 関数のオーバーライドを確認してください。

これにより、フィールドに関連してラベルが印刷される場所を変更することができます。

$element['#type']を使用して、そのテーマ関数の特定のフィールドタイプを選択できます。

注：Webformコンポーネントは特殊なケースです。通常、MODULENAME_theme（）関数を調べることで、テーマ設定可能なものを見つけることができます。この場合は webform_theme（） です。

具体的には、ラジオボタンフィールドにクラスを設定するには：

ラジオボタンにクラスを追加するという要件は、残念ながら少し異なります。これは、webformが独自のテーマを使用していないためです。drupal core's

だからあなたが望むのは theme_radios（） や theme_radio（） や theme_form_element_label（） です。

次のようなもの（何が変更されたかを示すコメントがあります）：

/**
 * Theme a set of radio buttons.
 */
function THEMENAME_radios($variables) {
  $element = $variables['element'];
  $attributes = array();
  if (isset($element['#id'])) {
    $attributes['id'] = $element['#id'];
  }
  $attributes['class'] = 'form-radios';
  if (!empty($element['#attributes']['class'])) {
    $attributes['class'] .= ' ' . implode(' ', $element['#attributes']['class']);
  }
  if (isset($element['#attributes']['title'])) {
    $attributes['title'] = $element['#attributes']['title'];
  }

  // Add custom classes.
  // To target specific elements you can use the $element variable.
  // You can target the label using:
  // .your-custom-class label
  $attributes['class'] .= 'your-custom-class another-custom-class';

  return '<div' . drupal_attributes($attributes) . '>' . (!empty($element['#children']) ? $element['#children'] : '') . '</div>';
}

/**
 * Theme a single radio button.
 */
function THEMENAME_radio($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'radio';
  element_set_attributes($element, array('id', 'name','#return_value' => 'value'));

  if (isset($element['#return_value']) && $element['#value'] !== FALSE && $element['#value'] == $element['#return_value']) {
    $element['#attributes']['checked'] = 'checked';
  }
  _form_set_class($element, array('form-radio'));

  // Set custom classes.
  // Use $element to target specific fields.
  $element['#attributes']['class'][] = 'your-custom-class';
  $element['#attributes']['class'][] = 'another-custom-class';

  return '<input' . drupal_attributes($element['#attributes']) . ' />';
}

残念ながら、 このバグ のため、theme_form_element_label（）をオーバーライドする場合を除き、ラベルにクラスを追加することはできません。

テーマレイヤーでこれに対処するには、2つの方法があります。

1つは、クラスをフィールドラッパーに追加し、CSSまたはJSでそれを介してラベルをターゲットにすることです。

もう1つは、次のようにtheme_form_element_label（）をオーバーライドすることです。

/**
 * Theme a form element label.
 */
function THEMENAME_form_element_label($variables) {
  $element = $variables['element'];
  // This is also used in the installer, pre-database setup.
  $t = get_t();

  // If title and required marker are both empty, output no label.
  if ((!isset($element['#title']) || $element['#title'] === '') && empty($element['#required'])) {
    return '';
  }

  // If the element is required, a required marker is appended to the label.
  $required = !empty($element['#required']) ? theme('form_required_marker', array('element' => $element)) : '';

  $title = filter_xss_admin($element['#title']);

  $attributes = array();
  // Style the label as class option to display inline with the element.
  if ($element['#title_display'] == 'after') {
    // Changed to make class an array.
    $attributes['class'][] = 'option';
  }
  // Show label only to screen readers to avoid disruption in visual flows.
  elseif ($element['#title_display'] == 'invisible') {
    // Changed to make class an array.
    $attributes['class'][] = 'element-invisible';
  }

  if (!empty($element['#id'])) {
    $attributes['for'] = $element['#id'];
  }

  // Add your classes here.
  // If you are using variables to make the class use the drupal_html_class()
  // function.
  // To target specific elements you can use the $element variable.
  // For example, based on field type:
  if ($element['#type'] == '') {
    $attributes['class'][] = 'your-custom-class';
    $attributes['class'][] = 'another-custom-class';
  }

  // The leading whitespace helps visually separate fields from inline labels.
  return ' <label' . drupal_attributes($attributes) . '>' . $t('!title !required', array('!title' => $title, '!required' => $required)) . "</label>\n";
}
18
rooby