it-swarm-es.com

¿Cómo inserto una etiqueta <span> </span> dentro de la etiqueta <a> </a> en mi menú principal

He hecho exactamente esta pregunta en Stack Overflow, pero tiene más sentido preguntarla aquí.

Estoy tratando de hacer que el texto entre mi etiqueta no se visualice envolviéndolo en ay luego peinándolo.

He agregado la siguiente función a mi archivo template.php, pero no puedo ver ninguna diferencia en el front-end; el lapso simplemente no aparece. (He borrado mi caché).

¿Estoy usando la función correcta? ¿Qué estoy haciendo mal?

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>';
} 
4
Martin Duys

En lugar de crear la etiqueta de anclaje y pasar el resultado de url() a check_plain(), debe llamar a l () , que crea la etiqueta por usted.
Recuerde configurar $options['html'] En TRUE (donde $options Es el último parámetro pasado a l()), cuando la cadena que pasa como El primer argumento de l() contiene etiquetas HTML; por defecto, la función asume que $options['html'] es FALSE.

8
kiamlaluno

Eche un vistazo a http://drupal.org/node/45774 / http://drupal.org/node/988842 y el módulo de desarrollador de desarrollo/tema podría ser útil también.

Creo que la función que está utilizando es para Enlaces en general y no es específica de ningún menú.

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

EDITAR: tramo incluido.

4
WestieUK

Encontré la solución a este problema después de muchas búsquedas. Por cierto, esto funciona para personalizar la salida de los enlaces de cualquier menú específico.

Permítanme decir primero que personalizar los enlaces del menú principal o principal es algo esencial para cualquier tema, y ​​la única razón por la que puedo pensar por qué Drupal lo hicieron tan difícil de hacer es que profesional Drupal themers pueden mantener sus trabajos!

Vi soluciones usando la función theme_link: mala idea porque esto alterará la salida de TODOS sus enlaces, lo que romperá el diseño de su sitio.

Entonces, mi enfoque es anular la función theme_menu_link. Agrego una condición para usar la anulación solo en el menú específico que quiero. En este ejemplo, elegí los enlaces principales. Para conocer el nombre del menú al que desea asignarle un tema, debe colocar dsm ($ variables) y utilizar el módulo 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

Esto genera el mismo resultado que el código mostrado por Taerno, y funciona bien en 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";
}

Puede agregar el siguiente código, donde "menu_link__menu_block__1" es el nombre de su menú.

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

}

Encontré el nombre del menú imprimiendo $element['#theme']['0'] para mi menú.

Estoy tratando de agregar el lapso solo al enlace principal, por lo que publicaré cuando lo haya hecho.

2
Original Scott

La mayoría de los casos en los que antes habría necesitado un espacio adicional ahora se pueden resolver solo con 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

Puede que le interese el módulo Desarrollador de temas . Le permite hacer clic en elementos de una página Drupal) para descubrir qué función/plantilla de tema los generó, qué argumentos se pasaron, qué alternativas están disponibles, etc.

1
thsutton