web-dev-qa-db-ja.com

メインメニューの<a> </a>タグ内に<span> </ span>タグを挿入する方法

Stack Overflowで正確にこの質問をしましたが、ここで質問する方が理にかなっています。

タグで囲んだテキストをaで囲み、スタイルを設定して表示しないようにしています。

Template.phpファイルに次の関数を追加しましたが、フロントエンドで違いを確認できません。スパンは表示されません。 （キャッシュをクリアしました。）

適切な機能を使用していますか？何が悪いのですか？

function my_theme_link($variables) {
  return '<a href="' . check_plain(url($variables['path'], $variables['options'])) . '"' . drupal_attributes($variables['options']['attributes']) . '><span>' . ($variables['options']['html'] ? $variables['text'] : check_plain($variables['text'])) . '</span></a>';
}
routestheming
4
Martin Duys

アンカータグを作成し、url()の結果をcheck_plain()に渡すのではなく、タグを作成する l（） を呼び出す必要があります。
_$options['html']_をTRUEに設定することを忘れないでください（_$options_は、最初の引数として渡す文字列の場合、l()に渡される最後のパラメーターです）。 to l()にはHTMLタグが含まれます。デフォルトでは、関数は_$options['html']_がFALSEであることを前提としています。

8
kiamlaluno

http://drupal.org/node/45774 / http://drupal.org/node/988842 を見てください。devel/テーマ開発者モジュールはあまりにも便利。

あなたが使用している機能は一般的にリンク用であり、どのメニューにも固有ではないと思います。

function THEMENAME_links__system_MENUNAME_menu($variables) {
  $output = '';
  foreach ($variables['links'] as $link) {
    $output .= l('<span>'. check_plain($link['title']) .'</span>', $link['href'], $link);
  }
  return $output;
}

編集：含まれたスパン。

4
WestieUK

何度も検索した結果、この問題の解決策が見つかりました。ちなみに、これは特定のメニューのリンクの出力をカスタマイズするために機能します。

最初に、メインメニューリンクまたはメインメニューリンクをカスタマイズすることは、すべてのテーマに不可欠なことであると言います。なぜDrupalプログラマーがそれほど難しくしなかったのかを考えることができる唯一の理由は、 Drupal themersは仕事を続けることができます！

Theme_link関数を使用したソリューションを見た：これはすべてのリンクの出力を変更し、サイトのレイアウトを壊してしまうため、悪い考えです。

したがって、私のアプローチは、theme_menu_link関数をオーバーライドすることです。必要な特定のメニューでのみオーバーライドを使用する条件を追加します。この例では、プライマリリンクを選択しました。テーマにしたいメニューの名前を知るには、dsm（$ variables）を配置してDevelモジュールを使用する必要があります。

function yourtheme_menu_link(array $variables) {

  $element = $variables['element'];
  $sub_menu = '';

// Replace 'menu_link__menu_block__1' with the name of the menu you want to theme.
if ($element['#theme']['0'] == 'menu_link__menu_block__1') {
  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }

  $title = $element['#title'];

// I put the span tags in the title.
  $element['#title'] = '<span class="yourclass1"></span><span class="yourclass2">' . $title . '</span><span class="yourclass3"></span>';
// I tell the l() function to keep the HTML tags.
  $element['#localized_options'] += array(
    'attributes' => array(), 
    'html' => TRUE,
  );
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}
// The function renders the links from all the other menus without modification.
if ($element['#below']) {
  $sub_menu = drupal_render($element['#below']);
}
$output = l($element['#title'], $element['#href'], $element['#localized_options']);

return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}
2
Taesto

これは、Taernoによって示されたコードと同じ結果を出力し、Drupal 7.12で正常に動作します。

function yourtheme_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }

  $element['#localized_options']['html'] = TRUE;
  $linktext = '<span class="your_class">' . $element['#title'] . '</span>';

  $output = l($linktext, $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

次のコードを追加できます。「menu_link__menu_block__1」はメニューの名前です。

if ($element['#theme']['0'] == 'menu_link__menu_block__1') {

}

メニューの$element['#theme']['0']を印刷して、メニューの名前を見つけました。

親リンクのみにスパンを追加しようとしているので、完了したら投稿します。

2
Original Scott

以前に追加のスパンが必要であったほとんどの場合は、cssのみで解決できます。

li {
  position: relative;
  padding-left: 25px;
}

li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: url('../images/icons.png') no-repeat;
  background-position: 0 0;
}
1
Hans Rossel

Theme Developer モジュールに興味があるかもしれません。 Drupalページの要素をクリックして、それらを生成したテーマ関数/テンプレート、渡された引数、使用可能な代替手段などを見つけることができます。

1
thsutton