Beschreibung der Menüpunkte?Benutzerdefinierter Walker für wp_nav_menu ()

Question

Beschreibung der Menüpunkte?Benutzerdefinierter Walker für wp_nav_menu ()

- 108
- 100630 2011-04-05
Dasnormale Wordpress-Menü siehtfolgendermaßen aus:

Startseite|Blog|Über uns|Kontakt

Aberich habe viele Seitenmit Beschreibungen unter diesen Linksgesehen:

Homepage|Unsere Blogs|Über uns |Kontakt
....triff uns ...|lesen Siemehr|grundlegendeinfo|Kontaktformular

Wie wird dieserreicht?

(Ichmöchte,dasses die Kernfunktionfür allemeine Themenist,alsobitte keine Plugins,ichmöchtenur wissen,wieesgemacht wird)

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 Antworten

Stimmen

8

2012-04-18

Diesistnichtbesser oder schlechter als andere Vorschläge.esisteinfach anders.Esist auch kurz und süß.

Anstatt das Beschreibungsfeld zu verwenden,wiees @toscho vorschlägt,können Sie das Feld "Titel" unter ausfüllenjedes Menüelementmit demgewünschten Text,und verwenden Sie dann dieses CSS:

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

Es wäre aucheinfach,jQuery zum Anhängen zu verwenden,aber der Textist dekorativgenug,dass CSS angemessenerscheint.

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.

Quelle

mrwweb

2

2011-09-08

Sie können auchein  -Elementnach dem Navigationsetikettin Menüs schreiben und diefolgende CSS-Regel verwenden,um die Einstellungfür die display zu ändern (esist inline standardmäßig):

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}

Quelle

Markus

Nun,esisteine einfache Lösung,aber warum sollten Sie "span" verwenden,wenn Sieestrotzdemblockieren lassen?xhtml/html4erlaubt keine Blockelementeinnerhalb von Links,html5jedoch,alsobenutzeeinfach `div` undbrauche kein 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

Seit WordPress 3.0 benötigen Sie keinenbenutzerdefinierten Walkermehr!

Esgibt den walker_nav_menu_start_el Filter,siehe https://developer.wordpress.org/reference/hooks/walker_nav_menu_start_el/

Beispiel:

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

Quelle

Joost

Nett!Ich habe die Navi-Walker-Lösung von @toscho verwendet,aber dieseist viel sauberer undeinfacher zu warten. Dies sollte die akzeptierte Antwort sein,vielbessere Praxis.

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

Diesistnichtbesser oder schlechter als andere Vorschläge.esisteinfach anders.Esist auch kurz und süß.

Anstatt das Beschreibungsfeld zu verwenden,wiees @toscho vorschlägt,können Sie das Feld "Titel" unter ausfüllenjedes Menüelementmit demgewünschten Text,und verwenden Sie dann dieses CSS:

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

Es wäre aucheinfach,jQuery zum Anhängen zu verwenden,aber der Textist dekorativgenug,dass CSS angemessenerscheint.

Markus · Answer 3 · 2011-09-08

2

2011-09-08

Sie können auchein  -Elementnach dem Navigationsetikettin Menüs schreiben und diefolgende CSS-Regel verwenden,um die Einstellungfür die display zu ändern (esist inline standardmäßig):

 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}

Nun,esisteine einfache Lösung,aber warum sollten Sie "span" verwenden,wenn Sieestrotzdemblockieren lassen?xhtml/html4erlaubt keine Blockelementeinnerhalb von Links,html5jedoch,alsobenutzeeinfach `div` undbrauche kein 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