Individueller Menü Walker

B1fr0st

Hallo Leute,

nach langer Suche im Web hat es mich doch noch mit meinem Problem hierher verschlagen.

Für ein WP-Theme möchte ich ein idiotensicheres Menü erstellen, dass sich im Administrationsbereich leicht konfigurieren lässt. Ein Menü zu registrieren und die einfacheren Sachen haben ohne Probleme geklappt.
Nun möchte ich, dass mein Menü ungefähr so aussieht:

home | store | about

und nicht so:

homestoreabout

Zwischen 2 Menüpunkten soll immer ein Strich eingefügt werden und zwar als

HTML

<li class="seperator">&nbsp;|&nbsp;</li>

Dazu muss ich einen modifizierten Menü Walker in meiner functions.php haben und übergeben.

Momentan sieht er noch ganz regulär/standart aus:

PHP

class description_walker extends Walker_Nav_Menu
{
      function start_el(&$output, $item, $depth, $args)
      {
           global $wp_query;
           $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';


           $class_names = $value = '';


           $classes = empty( $item->classes ) ? array() : (array) $item->classes;


           $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
           $class_names = ' class="'. esc_attr( $class_names ) . '"';


           $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';


           $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
           $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
           $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
           $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';


           $prepend = '<strong>';
           $append = '</strong>';
           $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';


           if($depth != 0)
           {
                     $description = $append = $prepend = "";
           }


            $item_output = $args->before;
            $item_output .= '<a'. $attributes .'>';
            $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
            $item_output .= $description.$args->link_after;
            $item_output .= '</a>';
            $item_output .= $args->after;


            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
            }// function end
}// class end

Alles anzeigen

Außerdem möchte ich, dass nur "Top-level Menüpunkte" in die finale html Ausgabe kommen und Menüpunkte mit einer "depth != 0" ignoriert werden.

Zwas kann ich ein wenig php, doch diese 2 Probleme überfordern mich, da ich auch nach langem Lesen aus den Wordpress Funktionen nicht so ganz schlau werde.

Bitte kann mir jemand helfen!! :sad:

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Marcus.Kober

Hallo!

Für die Beschäftigung mit Walkern wäre es natürlich von Vorteil, wenn die PHP-Kenntnisse schon ein wenig besser wären. Aber man lernt ja mit der Materie. :)

Der Walker, den Du dir basteln musst, braucht die Function start_el gar nicht, sondern nur end_el, weil dort das schließende </li> sitzt.

Der benötigte Walker sähe dann so aus:

PHP

class MyWalker extends Walker_Nav_Menu
{
    function end_el(&$output, $item, $depth) {
        $sep = '<li class="seperator">&nbsp;|&nbsp;</li>';
        $output .= '</li>';
        if( $depth == 0 ) {
            $output .= $sep;
        }
        $output .= "\n";
    }
}

Alles anzeigen

Dabei wird an das schließende </li> dein zusätzlicher Listenpunkt angehängt, wenn die Tiefe = 0 ist (also nur für die Elternelemente).

Mit folgendem Aufruf kannst Du das Menü anzeigen lassen. Hier stellst Du auch ein, dass Du nur Toplevel-Elemente anzeigen willst (depth => 1):

PHP

$wpnavmenu_args = array(
  'depth' => 1,
  'walker' => new MyWalker()
);
wp_nav_menu( $wpnavmenu_args );

Hoffe, das hat geholfen! :)

Gruß,
Marcus

B1fr0st

Arigatou!!

Vielen Dank für deine Hilfe!!

Oh man, man merkt echt, dass ich mich mit der Funktionsweise von Wordpress noch nicht wirklich auskenn.
Du hast mir echt ne coole Lösung Präsentiert, aber ganz ist es noch nicht das, was ich will!

Nach dem letzten Menüelement soll kein Trennstrich gesetzt werden.

Dazu nehm ich mal an, dass ich das ganz easy in das 'if' mit reinschreiben kann oder muss ich da mit dem WP_Query->post_count() irgendwas basteln?

Wenn mir nochmal kurz wer helfen könnte, wäre ich sehr dankbar!! :neutral:

B1fr0st

Closed

Dieses Thema wurde dank Marcus.Kober's Hilfe erfolgreich gelöst!! :D

Hier die Lösung für alle, die ein ähnliches Problem haben:

header.php

PHP

// legt euer Menü in eine Variable
$my_menu = wp_nav_menu(
      array( 'container_class' => 'menu-container', //CSS Klasse des Menü divs
             'theme_location' => 'main-navigation', //"php Menüname"
             'fallback_cb' => '' , //kein Menü, wenn keins im Adminbereich erstellt wurde
             'depth' => 1, //nur Top-Level Elemente 
             'after' => '</li><li class="seperator">&nbsp;|&nbsp;</li>',
             'walker' => new MyWalker(), //sehr wichtig!!
             /*!!!*/'echo' => false //stellt sicher, dass euer Menü in der Variablen landet und nicht schon als html dasteht
      ) ); 


// zerlegt euer Menü in ein Array
$my_menu = explode ('<li class="seperator">&nbsp;|&nbsp;</li>',$my_menu);
      foreach ($my_menu as $item) {
        if ($count+2 < count($my_menu)) {
          echo $item.'<li class="seperator">&nbsp;|&nbsp;</li>';
        }
        else {
          echo $item;
        }
        $count++;
      }

Alles anzeigen

functions.php

PHP

add_action( 'init', 'register_my_menu' );
function register_my_menu() {
  register_nav_menu( 'main-navigation', __( 'Main Menu' ) ); //"php Menüname und Name im Adminbereich"
}
class MyWalker extends Walker_Nav_Menu {
  function end_el(&$output, $item, $depth) {
    // leere Funktion verhindert unerwünschtes </li>
  }
}

Zur Lösung geholfen hat mir neben der Antwort von Marcus:

http://helpfulcoder.com/2768/separate-…items-tutorial/
(Bitte beachten, dass eine Zeile im Artikel über den Rand ragt!!)

und die WP Dokumentation:

http://codex.wordpress.org/Function_Reference/wp_nav_menu

CLOSED :cool:

Marcus.Kober

Sorry, das war ein Schnellschuss gestern... :)

Um zu bewerkstelligen, dass der Trenner an den Außenseiten nicht auftaucht, brauchst Du doch start_el. Damit schaffst Du es, das Ziel nur mit dem Walker zu erreichen:

PHP

class MyWalker extends Walker_Nav_Menu
{
    var $sep = '';


    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';


        $class_names = $value = '';


        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;


        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';


        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';


        $output .= $indent;


        // Hier passierts:
        if( $depth == 0) {
            $output .= $this->sep;
            if( empty( $this->sep ) ) 
                $this->sep = '<li class="seperator">&nbsp;|&nbsp;</li>';
        }


        $output .= '<li' . $id . $value . $class_names .'>';


        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';


        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;


        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

Alles anzeigen

Aufruf:

PHP

$wpnavmenu_args = array(
  'depth' => 1,
  'walker' => new MyWalker()
);
wp_nav_menu( $wpnavmenu_args );

Erklärung: der Inhalt der Variable $sep wird vor das sich öffnende <li> gesetzt. Am Anfang ist $sep noch leer, wird nach dem ersten Durchlauf aber auf den Separator-String gesetzt.

So schaffst Du es, ohne das Menü mit explode auseinander zu nehmen und nur mit einem einzigen Aufruf. :)

B1fr0st

OK, auch gut!

Hi Marcus,

wieder Danke für den Vorschlag!! Der funktioniert noch besser, als das, was ich als Lösung gefunden hab.

Die if-Verschachtelung ist übrigens richtig clever!! Man merkt, dass du länger im Geschäft bist, als ich.

Ich hab aber noch eine kleine/große Frage, die ich in ein neues Thema schreiben werde. Vielleicht kannst du dir das dann auch nochmal ansehen??
(Es geht um den selben Walker, aber im speziellen um eine WP Funktion)

DOUBLE CLOSED!! 8-) 8-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Individueller Menü Walker

Jetzt mitmachen!