web-dev-qa-db-ja.com

Drupal 7でラベルのフォーマットを変更する

ノードのティーザーを表示すると、すべてのラベルが大文字で出力されます。タイトルを付けたい(すべての単語の最初の文字が大文字になっている)。これを行うための最善の方法は何ですか?現在、ラベルフィールドに影響を与えるCSSはないため、Drupalはすべての大文字を出力しているだけです。

Drupalがラベルのテキストをすべて大文字でレンダリングしている理由がわからないので、Drupal 7 APIでテーマプリプロセッサ関数を探していました。ラベルデータを掘り下げて、すべて小文字に変更しますが、具体的なものが見つかりませんでした。CSSを適用して、ラベルを希望どおりにフォーマットすることができます。ただし、HOW Drupalは、希望する効果を持つCSSを適用できないラベルをレンダリングします。

編集:私は質問をより具体的に答えることができると思うので、タイトルを「ティーザー出力のラベルを小文字に変更する」から「Drupal 7のラベルのフォーマットを変更する」に変更しました私のラベルがすべて大文字になっている理由を見つけたかもしれません。

4
Lester Peabody

これはCSSによって制御されている可能性が高いため、次のようなルールをCSSファイルに追加することで変更できます。

.node-teaser label{text-transform:capitalize}

特定の要素をもう少し正確にターゲットにする必要があるかもしれないので、Firebugを調べて、現在ラベルにtext-transformを設定しているルールを確認してください。

1
Clive

ラベルが小文字であるが、すべて大文字でレンダリングされていると言うと、これは奇妙なことです。私はそれをFirebug/Chrome Web Inspectorで表示して、CSSにすべての大文字に変換するより高いレベルのセレクターがないことを確認します。この場合、セレクタがすべて大文字にするセレクタをオーバーライドしない場合のタイトルケース。

いずれにしても、すべての大文字をタイトルケースに変換することはできませんが、jQueryを使用すると可能です。

https://stackoverflow.com/questions/3471157/css-text-transform-capitalize-on-all-caps

こちらも参照してください http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

"capitalize 
Puts the first character of each Word in uppercase; other characters are unaffected."

ただし、JQueryを追加する前に、Firebugを使用してCSSを真剣に検討し、何かがそれを最初からすべての大文字に変換していないことを確認します。

3
Danny Englander

さて、このコードが継承されたので、私は前の開発者がいくつかの怪しいことをしたのではないかと疑い始めました。これは、途方もなく巨大なtemplate.phpファイルで見つけたコードです。

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

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

  // 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;
}

strtoupper呼び出しがある行に注意してください...それが問題でした。私はそれを削除し、すべてが今あるべき姿です。

レンダリングプロセス中にラベル変数に格納されたデータを変更するために、ここで説明した他の方法がいくつかあります。私が投稿したばかりの方法を含め、それらはすべて効果的です。私が投稿した方法には、テーマにレンダリングされるときにフィールドの構造を変更できるという追加の効果があります。このばかげた質問に答える他の人の努力に報いるために、私は次に近い答えを見つけ、それを受け入れられた答えに設定します。

2
Lester Peabody

まず、どのhtmlがラベルをラップしているかを確認する必要があります。firebugを使用するか、ソースhtmlでラベルを探すだけです。

たとえば、たまたま作業しているサイトのラベルが<h3 class="field-label">で囲まれているので、テーマのスタイルシートの.field-label { text-transform: lowercase; text-transform: capitalize;}のようなcssでうまくいくはずです。

1
hutch

これはスタイルの問題であるため、CSSのtext-transformプロパティを使用してこれを行うことができます。

text-transform: capitalize;

本当に、Drupalで定義したラベルはすべて大文字にする必要はありません。目的の場合は、フォームラベルにtext-transform: uppercase;を使用することをお勧めします。 。スタイルはコンテンツとは別に保つ必要があります。

0
drmonkeyninja