web-dev-qa-db-ja.com

CSSクラスをコンテンツタイプのフィールドに追加する

Drupalを初めて使用するので、コンテンツタイプのカスタムフィールドにカスタムCSSクラスを追加したいと思います。

「カスタムページ」というコンテンツタイプを作成しましたが、「custom_page_main_title」というフィールドがあります。これには、カスタムCSSクラスまたはiDを追加するだけです。

どうすればこれを実行できますか？ありがとう！

entitiesthemingnodes
2
user990463

これについて少し前に ブログ投稿 を書きました。これは主に、テーマのディレクトリに保存されているtemplate.phpのテーマ関数を使用して、特定のコンテンツタイプの特定のフィールドのマークアップをターゲットにする方法を理解するためのリファレンスとして機能します。

ぜひチェックしてください。それを理解できれば、将来、生成されたクラスを含む特定のフィールドのHTMLを変更することは簡単になります。

私のブログ投稿からこのスレッドに適切なコンテンツを取り込むために、template.phpに次の関数があります。

function theme_field($variables) {
  $output = '';

  // Render the label, if it's not hidden.
  if (!$variables['label_hidden']) {
    $output .= '<div class="field-label"' . $variables['title_attributes'] . '>' . $variables['label'] . ':&nbsp;</div>';
  }

  // Render the items.
  $output .= '<div class="field-items"' . $variables['content_attributes'] . '>';
  foreach ($variables['items'] as $delta => $item) {
    $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');
    $output .= '<div class="' . $classes . '"' . $variables['item_attributes'][$delta] . '>' . drupal_render($item) . '</div>';
  }
  $output .= '</div>';

  // Render the top-level DIV.
  $output = '<div class="' . $variables['classes'] . '"' . $variables['attributes'] . '>' . $output . '</div>';

  return $output;
}

関数名のWord themeをテーマの名前に置き換えることになります。特定のコンテンツタイプの特定のフィールドを対象としているため、関数名のWord fieldに__custom_page_main_title__custom_pageを追加します。 。したがって、関数は次のようになります。

function themename_field__custom_page_main_title__custom_page($variables) {
  $output = '';

  // Render the label, if it's not hidden.
  if (!$variables['label_hidden']) {
    $output .= '<div class="field-label"' . $variables['title_attributes'] . '>' . $variables['label'] . ':&nbsp;</div>';
  }

  // Render the items.
  $output .= '<div class="field-items"' . $variables['content_attributes'] . '>';
  foreach ($variables['items'] as $delta => $item) {
    $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');
    $output .= '<div class="' . $classes . '"' . $variables['item_attributes'][$delta] . '>' . drupal_render($item) . '</div>';
  }
  $output .= '</div>';

  // Render the top-level DIV.
  $output = '<div class="' . $variables['classes'] . '"' . $variables['attributes'] . '>' . $output . '</div>';

  return $output;
}

次に、フィールドの構造のどこにクラスを追加する必要があるかを決定する必要があります。おそらく、それを元の質問への追加として追加してください。

1
Lester Peabody

まさにこれを行う Field Formatter CSS Class と呼ばれる非常にシンプルなモジュールがあります。有効にすると、コンテンツタイプのManage displayタブを介してCSSクラスをフィールドに追加できます。

0
mix

最善の方法は、独自のテーマを作成し、生成されたhtmlを確認してテーマのCSSを更新することです。Fusionテーマを使用することから始めてください。

別のオプションは、CSSインジェクターと呼ばれるモジュールを使用することです。

0
ropic

インストールできます Display Suite カスタムコンテンツタイプの各フィールドにクラスを追加するオプションを提供します。

0
aerozeppelin