HTML output von wp_nav_menu verringern, somit das Verhältnis Text und HTML verbessern

den HTML output von wp_nav_menu verringern

den HTML output von wp_nav_menu verringern, aber die wichtigen CSS Klassen behalten

Wer das benutzerdefinierte Menü von WordPress verwendet hat eine irre Menge an CSS Klassen in seinem Quelltext, die zu 99% vom WebDesigner nicht gestylt wurden und de facto „kein Mensch“ braucht. ;)

Daher blähen solche ungebrauchten CSS Klassen den Quellcode einfach auf. Dies kann das Verhältnis von HTML und Text wesentlich beeinflussen und manche OnPage Optimierer im SEO Bereich stellt es dabei die Haare auf.

wp_nav_menu liefert wahnsinnig viele CSS Klassen

Irgendwann kamen jede Menge Wünsche an die Entwickler von WP, die das benutzerdefinierte Menü betrafen. Für jene Aktion sollte eine CSS Klasse da sein und für jene auch und wenn es ein verlinkter Tag ist, soll der anders stylebar sein als eine Kategorie.

Selten seh ich in meiner Praxis je solche Menüs. Zumeist mag man den aktiven Menüpunkt hervorheben und dessen Elternteil, wenn grad eines da ist.

Mag ich einzelne Menüpunkte andersfarbig darstellen wäre die ID hilfreich.

Ich brauche also 2 CSS Klassen und eine ID. Mehr nicht.

Wie kann ich den html output von wp_nav_menu nun ändern

Wie immer gibt es viele Wege ich zeige einen, den ich in die functions.php gebe. Wer mag kann sich auch ein Plugin daraus machen.

//clean wp nav menu output
function cssklassen_menu_classes($classes, $item) {
    $classes = array_filter( 
        $classes, 
        create_function( '$class', 
                 'return in_array( $class, 
                      array( "current-menu-item", "current-menu-parent" ) );' )
        );
    return array_merge(
        $classes,
        (array)get_post_meta( $item->ID, '_menu_item_classes', true )
        );
    }
add_filter('nav_menu_css_class', 'cssklassen_menu_classes', 10, 2);


Was liefert dieser Code mir an html und somit CSS Klassen

Das da ;)

<ul id="menu-header" class="menu">
<li id="menu-item-45">
<li id="menu-item-63" class="current-menu-parent ">
<ul class="sub-menu">
	<li id="menu-item-48" class="current-menu-item ">
</ul>
</li>
<li id="menu-item-49">


Welche CSS Klassen wären im html von wp_nav_menu ohne diesen Code

Absolut dasselbe Menü hätte sonst diesen HTML output:


<ul id="menu-header" class="menu">
<li id="menu-item-45" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-45">
<li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-63">
<ul class="sub-menu">
	<li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-18 current_page_item menu-item-48">
</ul>
</li>
<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49">


Verringer ich den HTM output indem ich unnötige CSS Klassen eleminiere, erhöhe ich die Textdichte im Verhältnis zum HTML und dies kann mitunter auch ein Puzzlestein zu besserem Ranking sein. Einer von vielen.

Wer also jetzt mag, kann dies als „WordPress und SEO“ bezeichnen. Wer einfach bereinigtes HTML haben mag, wird damit auch glücklich.

Ich freu mich, wenns hilft und dann über ein +1
23

23 Beiträge zu “HTML output von wp_nav_menu verringern, somit das Verhältnis Text und HTML verbessern

  1. Kommentar Autor
    Martin
    Kommentar

    Danke für den Code. Sowas habe ich lange gesucht.

    Ich brauche noch nicht mal die ID-Attribute. Dafür fand ich diesen Code, um das Menu-HTML nochmal mehr zu straffen:

    function nav_id_filter( $id, $item ) {
        return '';
    }
    add_filter( 'nav_menu_item_id', 'nav_id_filter', 10, 2 );
    

    Zusammen mit deinem Filter ergibt sich endlich das Menu-HTML, das ich bevorzuge. Vielleicht mache ich daraus ein Plugin, wenn es so eines noch nicht geben sollte.

  2. Kommentar Autor
    Monika
    Kommentar

    ;) naja vor Weihnachten und dann ziemlich sicher nachher,

    ja dieses von dir vorgestellte Plugin @Tom ist super, ich kenne aber einige, die sich damit nicht auskennen, gibts ja auch,
    daher sag ich immer functions.php, da klappts denn doch dann bei vielen
    und die, die mehr können finden ihre Wege ;)

  3. Kommentar Autor
    Klaus
    Kommentar

    Die zahllosen Klassen haben mich schon lange genervt.Ich habe deine hilfreiche functions.php-Ergänzung unter dem Namen monis-html-sense.php abgespeichert. :)

  4. Kommentar Autor
    Monika
    Kommentar

    rotfl Klaus das ist gut ;)
    das muss ich direkt als „Branding“ nutzen, wenn mir sowas unter die Finger //Gedanken kommt ;);)

  5. Kommentar Autor
    Martin
    Kommentar

    Meine Ankündigung eines Plugins habe ich in die Tat umgesetzt: „Purify WordPress Menues“.

    Es löscht alle unerwünschten CSS-Klassen und IDs aus Navigationsmenüs und Seitenmenüs. Der ausgegebene HTML-Code von Menülisten wird deutlich schlanker.

    Standardmäßig wird nur die Klasse für das akuell aktive Menüelement angegeben. Auf einer eigenen Konfigurationsseite kann eingestellt werden, welche Klassen zusätzlich ausgegeben werden und welche nicht. Die Konfiguration wird gespeichert. Sie liegt auf Englisch und Deutsch vor.

    Informationen, Bilder und Download unter:

  6. Kommentar Autor
    Michael
    Kommentar

    Hallo Monika,
    hallo Martin,

    danke für die Idee und Umsetzung in ein Plugin. Das Plugin “Purify WordPress Menues” Version 1 problemlos eingebaut und es funktioniert.

    Mir war gar nicht bewußt wie viel unnötige Daten im Menü produziert werden.

    Michael

  7. Ping Checklisten, ein neues Plugin und sonst noch ein paar Links

  8. Kommentar Autor
    Viktor
    Kommentar

    Hallo Monika,
    Danke für hilfreiche funktion, einfach super.
    Hab nach einbau Speed gemässen, laut google habe ganze 2% mehr gekriegt.
    Ich persönlich mag auch lieber funktionen einbauen als Plug-ins installieren.
    MfG
    Viktor

  9. Kommentar Autor
    Monika
    Kommentar

    HI Viktor das freut mich sehr für dich :-)
    2% sind 2% bessere Leistung :-)

  10. Kommentar Autor
    Bernhard
    Kommentar

    Hallo Monika,

    gefällt mir und funktioniert perfekt!

    Allerdings suche ich mir gerade einen Wolf nach dem Gegenteil: ich bräuchte auf Attachment-Seiten die Klassen der dazugehörigen Eltern-Seiten, so dass ich da den Pfad im Menü kenntlich machen kann, also sozusagen ‚post_parent->current-menu-item‘ und ‚post_parent->current-menu-ancestor‘.
    Hast Du eine Idee, ob das überhaupt machbar ist und vielleicht auch noch einen weitergehenden Tipp?

    Grüße
    Bernhard

  11. Kommentar Autor
    Monika
    Kommentar

    Hallo @Bernhard
    ich habe das soeben nachgemacht
    eine statische Seite hat ein Bild das auf die AttachmentSeite verlinkt
    ist man auf der AttachmentSeite hat die Elternseite folgende css Klassen zur Verfügung

    current_page_ancestor current_page_parent
    bei mir erscheint sie daher einfach „fett“ :-)

  12. Kommentar Autor
    Bernhard
    Kommentar

    Hallo Monika,

    danke für Deine schnelle Antwort!

    Bei mir will das nicht.
    Daher habe ich den Code-Schnippsel eben mal auskommentiert, um zu sehen, ob die Attachment-Seite überhaupt irgendwelche Klassen ins Menü schreibt:
    Binde ich das Menü mit wp_nav_menu ein, gibt es keine einzige Klasse, die „current“ oder ähnlich heißt.
    Verwende ich stattdessen wp_list_pages oder wp_page_menu, habe ich tatsächlich die beiden Klassen „current_page_ancestor“ und „current_page_parent“ zur Verfügung.

    Bei der Suche nach einer Lösung bin ich auf das Plugin Extra Classes gestoßen.
    Das werde ich jetzt mal testen und mir die Dateien ansehen, ob ich da die Lösung finde.

    Grüße
    Bernhard

  13. Kommentar Autor
    Bernhard
    Kommentar

    Hallo Monika,

    Plugin Extra Classes getestet und für gut befunden!
    Funktioniert einwandfrei mit wp_nav_menu und Deinem Code-Schnippsel.

    Da das Plugin nur aus einer einzigen kleinen PHP-Datei besteht, mache ich mir da jetzt nicht die Arbeit, zu schauen, ob ich es schlanker hinbekomme, wenn ich nur den Teil den ich brauche, in die functions.php schreibe.

    Grüße
    Bernhard

  14. Kommentar Autor
    Monika
    Kommentar

    freut mich Bernhard, wenn du es doch hinbekommen hast,
    eventuell ändert irgendwas im Theme diese css Klassen :-)
    lg Monika

  15. Kommentar Autor
    Frank
    Kommentar

    Danke @Monika für diesen Artikel. Und selbstverständlich großen Dank an @Martin für das Plugin.
    Zuerst hatte ich den Code in der functions.php drin – dann las ich weiter und hab das Plugin installiert.

    Bleibt die Frage an euch beide bitte: Welche Lösung ist vorzuziehen – funktionieren tut beides?
    Danke schon mal vorweg.

  16. Kommentar Autor
    Monika
    Kommentar

    grüß Dich Frank
    wenn du es in der functions.php drin hast, wird das auch alles im Backend geladen, wo man es nicht braucht,
    d.h. daher wäre die Plugin Lösung „schneller“
    und beides tät ich nicht nutzen , das ist doppelt gemoppelt

  17. Ping Wie du CSS zusammenführen und dabei richtig guten Performancegewinn erreichst | Texto.de - Mein WordPress Magazin

  18. Kommentar Autor
    Heinz-Günther
    Kommentar

    @Monika: Mach einfach folgendes um das Code-Snippet in der functions.php herum, dann wird es nicht im Admin geladen:
    if ( !is_admin() ) {
    // code-snippet
    }

  19. Kommentar Autor
    Monika
    Kommentar

    da stimmt Heinz-Günther, nichts desto trotz muss ich eine Abfrage drumherum bauen,
    und es hat auch was mit der Reihenfolge des Abarbeitens zu tun.

  20. Kommentar Autor
    Felis
    Kommentar

    Danke, danke, danke! Ich hatte eine ähnliche Bereinigung versucht, habe mich aber in dem Gefussel total verfahren. :) Ein Segen jetzt nicht mehr diesen Overhead zu haben!