Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Zurück zur Übersicht
Wordpress: Menu als Select/Dropdown für Mobile Seiten
#Tutorials#Wordpress
Für mobile, bzw. responsive Webseiten bieten sich Menüs in einem Standard Select-Feld an, da jeder mobile Browser diese Menüs darstellen kann und die Umsetzung deutlich beschleunigt wird.
Um das Ganze in Wordpress zu benutzen benötigt ihr einen sogenannten Walker. Im Folgenden ist einmal der Code, den ihr in euer Template einfügen müsst und einmal der Walker, der in die functions.php eures Templates gehört.
Menücode
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'walker' => new Walker_Nav_Menu_Dropdown(),
'items_wrap' => '<div class="mobile-menu"><form><select onchange="if (this.value) window.location.href=this.value">%3$s</select></form></div>',
) );
?>
functions.php
class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu {
function start_lvl(&$output, $depth){
$indent = str_repeat("\t", $depth); // remove children opening tag (`<ul>`)
}
function end_lvl(&$output, $depth){
$indent = str_repeat("\t", $depth); // remove children closing tag
}
/**
* Start the element output.
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. May be used for padding.
* @param array $args Additional strings.
* @return void
*/
function start_el(&$output, $item, $depth, $args) {
$url = '#' !== $item->url ? $item->url : '';
$deptsign = '-';
$level = str_repeat($deptsign,$depth);
$output .= '<option value="' . $url . '">' . $level.$item->title;
}
function end_el(&$output, $item, $depth){
$output .= "</option>\n"; // replace closing </li> with the option tag
}
}
Kommentare
ich bin gerade über die Lösung das WP-Menü als Auswahlbox darzustellen gestpoßen! Läuft sogar :)
Vielen herzlichen Dank.
Eine wichtige Frage: ist es möglich, dass nach der Auswahl wenn die Seite gewechselt wurde die aktuelle Seite in der Box steht? Außerdem kommt man wenn man einmal gewechselt hat nicht zurück zur ersten Seite... woran kann das liegen?
Wäre für Hilfe echt dankbar!
Liebe Grüße
der Jo
Hinterlasse einen Kommentar