PHP / WordPress – Pfeile zu übergeordneten Menüs hinzufügen

Lesezeit: 5 Minuten

Ist es möglich, eine Art Klasse wie “Pfeil” oder eine Spanne in den Menüs hinzuzufügen, die Untermenüs haben (in WordPress)? Es scheint, dass Sie dies mit Javascript tun können, aber ich möchte wissen, ob es eine PHP-Lösung gibt …

In WP 3.0 habe ich gesehen, dass aktive Menüs die Klassen “Eltern” oder “Vorfahr” enthalten, aber dies gilt nur für aktive Menüs, und ich brauche sie auch für inaktive

  • Verwenden Sie den Menü-Builder in 3.0? Oder verwenden Sie Seiten oder Kategorien für die Navigation? Bitte erläutern Sie, wie Sie Menüs erhalten, und veranschaulichen Sie dies mit Ihrem Arbeitscode, damit wir Ihnen besser helfen können.

    – Kevforelle

    24. August 2010 um 18:24 Uhr

  • Ich verwende die eingebauten benutzerdefinierten Menüs

    – Alex

    24. August 2010 um 18:40 Uhr

Benutzer-Avatar
Donald Harvey

Diese Funktionalität sollte wirklich im WordPress-Kern enthalten sein!
Wie auch immer, ich habe mir die Menüvorlagenquelle angesehen, die Sie in einem Kommentar zu der anderen Antwort gesendet haben, und eine (ziemlich hackige) Möglichkeit gefunden, eine Klasse für Menüelemente mit Kindern hinzuzufügen. Es untergliedert im Grunde den Standard-Walker, um sein Standardverhalten zu erweitern. Es ist wahrscheinlich am besten, wenn Sie es in Ihr Thema einfügen functions.php. Hier ist der Code:

<?php
class Arrow_Walker_Nav_Menu extends Walker_Nav_Menu {
    function display_element($element, &$children_elements, $max_depth, $depth=0, $args, &$output) {
        $id_field = $this->db_fields['id'];
        if (!empty($children_elements[$element->$id_field])) { 
            $element->classes[] = 'arrow'; //enter any classname you like here!
        }
        Walker_Nav_Menu::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}
?>

Um es aufzurufen, müssen Sie die hinzufügen walker Argument, wenn Sie anrufen wp_nav_menu() in deinem Thema so:

<?php 
wp_nav_menu(array('walker' => new Arrow_Walker_Nav_Menu, [other arguments...]))
?>

Hoffe, das funktioniert für Sie! Ich habe es nur oberflächlich getestet, aber es scheint zu funktionieren. Lassen Sie mich wissen, wenn es Randfälle gibt, in denen das Hinzufügen der Klasse fehlschlägt.

  • Es gibt nur eine Situation, in der es fehlschlägt: Wenn in den Argumenten (fallback_cb) eine Callback-Funktion angegeben ist, dh. Wenn Sie kein benutzerdefiniertes Menü erstellt haben, ruft wp_nav_menu Menüelemente aus der Funktion wp_page_menu() ab, die meiner Meinung nach einen anderen Walker verwendet

    – Alex

    29. August 2010 um 14:26 Uhr


  • Ja – der von wp_page_menu verwendete Walker erlaubt das Hinzufügen von Klassen nicht ganz so einfach. Ich werde nachsehen, ob mir in den nächsten Tagen eine Problemumgehung einfällt, und meine Antwort bearbeiten, wenn ich etwas finde.

    – Donald Harvey

    5. September 2010 um 10:27 Uhr

Ich kenne keine native WordPress-Unterstützung dafür, aber Sie könnten es leicht mit etwas jQuery tun.

<script type="text/javascript">
$("#menu-id ul li:has(ul)").addClass("parent");
</script>

  • danke, das wusste ich. Ich habe mich gefragt, ob es eine Möglichkeit gibt, dies mit PHP zu tun. Das Problem bei der js-Methode ist, dass man beim Laden der Seite ein kleines “Flimmern” bekommt, wenn die Menüpunkte eine variable Breite haben

    – Alex

    28. August 2010 um 13:26 Uhr


  • Sie fragen also nach einer Möglichkeit, den HTML-Code zu ändern, den WP generiert, während es ihn generiert? Dafür gibt es keine integrierte Unterstützung oder können Sie Ihre Vorlagen einfach anpassen?

    – Rup

    28. August 2010 um 13:31 Uhr

  • Nun, Sie können die gesamte Menüausgabe (eine Zeichenfolge) abrufen und ändern, bevor sie wiedergegeben wird, aber ich weiß nicht, was ich dort ändern könnte … die Menüvorlage ist hier: core.trac.wordpress.org/browser/trunk/wp-includes/…

    – Alex

    28. August 2010 um 13:39 Uhr


  • Ich habe etwas Ähnliches auf meinem WordPress-Blog. Es verwendet eine xml to array-Funktion und findet heraus, welche li-Elemente Untermenüs haben, fügt ihnen dann eine Klasse hinzu und konvertiert sie zurück in xml. Die Quelle der Funktionen sind hier: mysrc.blogspot.com/2007/02/php-xml-to-array-and-backwards.html

    – GoalieGuy6

    28. August 2010 um 16:10 Uhr

Benutzer-Avatar
klopft

Wenn Sie wie ich einen HTML-Pfeil in einer Spanne zu Ihrem übergeordneten Menüelement hinzufügen möchten, fügen Sie eine Zeile wie diese in Donald Harveys Customer Walker-Klasse hinzu:

$element->title .= '<span class="caret down-caret">&#x25BC;</span>'; 

Sie können diesen HTML-Code auch direkt zum Menü-Label auf der Seite WP-Admin > Menü hinzufügen, aber das ist keine gute Möglichkeit, dies zu tun.

Ich habe hier ein wenig darüber gebloggt http://cameronnokes.com/blog/adding-an-icon-to

Fügen Sie dies einfach in Ihren CSS-Code ein und es funktioniert wie erwartet.

.nav-menu li > a:after {
    color: #888;
    content: ' ▾';
}

.nav-menu li > a:hover:after {
    color: #444;
    content: ' ▾';
}

.nav-menu li > a:only-child:after {
    content: '';
}

PS. Vergessen Sie nicht, Ihre Seite auf UTF-8 einzustellen

Benutzer-Avatar
Suresh Kamal

Die einfache und bescheidene Art, die übergeordnete Klasse zum Hauptmenü hinzuzufügen, wenn es ein Untermenü hat

<script type="text/javascript">
jQuery(document).ready(function($) {
    $("ul.sub-menu").parents().addClass('parent');  
});
 </script>

Und der Stil ist

    <style type="text/css">
       .main-navigation .parent > a, .main-navigation .parent > a:hover {
            background-image: url("images/arrow.png");
            background-position: right center;
            background-repeat: no-repeat;
     }  

    </style>

Benutzer-Avatar
Kesar Sisodija

Ich weiß nicht, was die Frage ist, aber wir können Pfeile im Menü hinzufügen css so was:

.menu li > a:after {
    color: #fff;
    content: ' ▾';
}

.menu li > a:only-child:after {
    content: '';
}

1384010cookie-checkPHP / WordPress – Pfeile zu übergeordneten Menüs hinzufügen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy