Itens de menu Descrição?Walker personalizado para WP_NAV_MENU ()

Question

Itens de menu Descrição?Walker personalizado para WP_NAV_MENU ()

- 108
- 100630 2011-04-05
Normal WordPress Menuparece:

.
Home|Blog|.Sobrenós|Contato

Maseu vimuitaspáginas com descrições sobestes links:

.
homepage|Nossosblogs|Sobrenós |Contate o

.... Conheça-nos ...|Leiamais|Informaçõesbásicas|Formulário de contato

Como conseguirisso?

(eu quero que sejafundamentalfunçãoparatodos osmeustemas,entãonão háplugins,eu só quero saber como éfeito)

Normal Wordpress Menu looks like:

Home | Blog | About us | Contact

But I've seen many pages with descriptions under these links:

Home Page | Our Blogs | About us | Contact
....meet us...| read more| basic info| contact form

How to achieve this?

(I want it to be core function for all my themes, so no plugins please, I just want to know how it's done)

theme-development menus walker

3 respostas

votos

8

2012-04-18

Issonão émelhor oupior do que outras sugestões;é apenas diferente.É curtoe docetambém.

Em vez de usar o campo Descrição como @TOSCHO Sugere,vocêpodepreencher o campo "Título"emCadaitem demenu com otexto que você desejae,em seguida,useeste CSS:

.menu-item a:after { content: attr(title); }

Também seriafácil de usar jQuery para acrescentá-lo,mas otexto é ornamental o suficientepara que CSspareça apropriado.

This isn't better or worse than other suggestions; it's just different. It's short and sweet too.

Rather than using the description field as @toscho suggests, you could fill in the "Title" field on each menu item with the text you want, and then use this CSS:

.menu-item a:after { content: attr(title); }

It would also be easy to use jQuery to append it, but the text is ornamental enough that CSS seems appropriate.

fonte

mrwweb

2

2011-09-08

Vocêtambémpodeescrever umelemento > após o rótulo denavegaçãoem menuse usar a seguinte regra CSSpara alterar seu Exibição Configuração (é Inlineporpadrão):

span {display:block}

You can also write a  element after the navigation label in menus and use the following CSS rule to change its display setting (it's inline by default):

span {display:block}

fonte

Markus

Bem,é uma solução simplese fácil,maspor que usar "span" se vocêfizerbloquear de qualquermaneira?XHTML/HTML4nãopermiteelementos debloco dentro de links,noentanto HTML5,portanto,apenas use `div`,e semnecessidade de qualquer CSS!

Well its a simple and easy solution but why use `span` if you make it block anyway? xhtml/html4 not allows block elements inside links, html5 however does, so just use `div`, and no need for any css!

2

2013-03-05

James Mitch

Joost · Answer 1 · 2015-02-23

36

2015-02-23

desde WordPress 3.0 ,você nãoprecisa de um andadorpersonalizadomais!

Há o walker_nav_menu_start_el filtro,consulte https://developer.wordpress.org/reference/hooks/walker_nav_menu_start_el/

Exemplo:

function add_description_to_menu($item_output, $item, $depth, $args) { if (strlen($item->description) > 0 ) { // append description after link $item_output .= sprintf('%s', esc_html($item->description)); // insert description as last item *in* link ($input_output ends with "</a>{$args->after}") //$item_output = substr($item_output, 0, -strlen("</a>{$args->after}")) . sprintf('%s', esc_html($item->description)) . "</a>{$args->after}"; } return $item_output; } add_filter('walker_nav_menu_start_el', 'add_description_to_menu', 10, 4);

Since WordPress 3.0, you don't need a custom walker anymore!

There is the walker_nav_menu_start_el filter, see https://developer.wordpress.org/reference/hooks/walker_nav_menu_start_el/

Example:

function add_description_to_menu($item_output, $item, $depth, $args) { if (strlen($item->description) > 0 ) { // append description after link $item_output .= sprintf('%s', esc_html($item->description)); // insert description as last item *in* link ($input_output ends with "</a>{$args->after}") //$item_output = substr($item_output, 0, -strlen("</a>{$args->after}")) . sprintf('%s', esc_html($item->description)) . "</a>{$args->after}"; } return $item_output; } add_filter('walker_nav_menu_start_el', 'add_description_to_menu', 10, 4);

fonte

Joost

Legal!Euestava usando a solução Nav Walkerpor @Toscho,masisso émuitomais limpoe maisfácil demanter. Esta deve ser a resposta aceita,práticamuitomelhor.

Nice! I was using the nav walker solution by @toscho, but this is much cleaner and easier to maintain.This should be the accepted answer, much better practice.

1

2015-07-08

Ronaldt

mrwweb · Answer 2 · 2012-04-18

8

2012-04-18

Issonão émelhor oupior do que outras sugestões;é apenas diferente.É curtoe docetambém.

Em vez de usar o campo Descrição como @TOSCHO Sugere,vocêpodepreencher o campo "Título"emCadaitem demenu com otexto que você desejae,em seguida,useeste CSS:

.menu-item a:after { content: attr(title); }

Também seriafácil de usar jQuery para acrescentá-lo,mas otexto é ornamental o suficientepara que CSspareça apropriado.

fonte
mrwweb

Markus · Answer 3 · 2011-09-08

2

2011-09-08

Vocêtambémpodeescrever umelemento > após o rótulo denavegaçãoem menuse usar a seguinte regra CSSpara alterar seu Exibição Configuração (é Inlineporpadrão):

  span {display:block}

You can also write a  element after the navigation label in menus and use the following CSS rule to change its display setting (it's inline by default):

span {display:block}

fonte
Markus

Bem,é uma solução simplese fácil,maspor que usar "span" se vocêfizerbloquear de qualquermaneira?XHTML/HTML4nãopermiteelementos debloco dentro de links,noentanto HTML5,portanto,apenas use `div`,e semnecessidade de qualquer CSS!

Well its a simple and easy solution but why use `span` if you make it block anyway? xhtml/html4 not allows block elements inside links, html5 however does, so just use `div`, and no need for any css!
- 2
- 2013-03-05
- James Mitch