WordPress >

Navigationmenü erstellen

Ziel war es ein Navigationsmenü am linken Rand zu erstellen, welches dem einer Dokumentation entspricht.

Für die Erstellung des oben gezeigten Navigationsmenü benötigt man einen eigenen „navwalker“, also Code, der ein vorher im WordPress Admincenter erstelltes Navigationsmenü nach eigenen Wünschen ausgibt.

Der Ablauf:

  1. Eigenen „navwalker“ erstellen.
  2. „navwalker“ in functions.php registrieren
  3. „navwalker“ in Page template einbinden
  4. „navwalker“ mittels JS und CSS anpassen

Eigenen „navwalker“ erstellen

Der „navwalker“ kann in einer eigenen .php Datei erstellt werden und wird danach in functions.php registriert, also nutzbar gemacht.

Der für unsere-schule.org erstellte „navwalker“ erbt von der WordPress „Walker“ Klasse und überschreibt einige Werte wie:

public function start_lvl( &$output, $depth = 0, $args = null ) {
        if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
            $t = '';
            $n = '';
        } else {
            $t = "\t";
            $n = "\n";
        }
        $indent = str_repeat( $t, $depth );
    
        $classes = array( 'sub-menu' );

        $class_names = implode( ' ', apply_filters( 'nav_menu_submenu_css_class', $classes, $args, $depth ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
    
        $myNavIcon = '<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-caret-right-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg>';
        
        $output .= "{$n}{$indent}";
        $output .= "<div class='navSub'>$myNavIcon</div></div>"; // adds expand arrow and closes expandable div
        $output .= "<ul$class_names>{$n}";
    }

Hier wird z.B.: bei Submenus der SVG Pfeil angezeigt, der andeuten soll, dass es Elemente unterhalb der aktuellen Ebene gibt.

In der Funktion „start_el“ werden z.B.: Links mit einem DIV mit Klasse „expandable“ umspannt:

$item_output  = $args->before;
$item_output .= '<div class="expandable">';// add expandable div
$item_output .= '<a' . $attributes . '>';
$item_output .= $args->link_before . $title . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;

Nachdem der „walker“ erstellt wurde kann er in functions.php registriert werden.

„navwalker“ in functions.php registrieren

Damit der „walker“ nutzbar wird, muss man diesen in functions.php folgendermaßen registrieren:

/**
 * Register Custom Navigation Walker
 */
function register_navwalker(){
	require_once get_template_directory() . '/navwalkers/UsSidebarNavwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

„navwalker“ in Page template einbinden

Nach der Registrierung kann man den „walker“ z.B.: in einem Seitentemplate mit Hilfe von „wp_nav_menu“ einbinden:

<!-- Sidebar -->
<nav id="sidebar">
	<div id="sidebar-body">
	<!-- custom navmenu -->
	<?php
		wp_nav_menu(
			array(
				'container_class' => 'meinContainer',
				'menu_class'      => 'list-unstyled components',
				'theme_location' => 'menu-1',
				'walker'         => new usSidebarNavwalker(),
			)
		);
	?>
	</div>
</nav>

Hier wird der „walker“ aufgerufen und gibt das Menü entsprechend aus.

„navwalker“ mittels JS und CSS anpassen

Zum Schluss kann das durch den eigenen „walker“ erstellte Menü noch angepasst werden.

Mit Javascript wird die Funktion hinzugefügt, dass z.B.: alle Untermenüs am Start versteckt sind, dass die Elternelemente des aktuell ausgewählten Menüs sichtbar sind, …

jQuery(document).ready(function () {

    // display all parent elements of active nav-item
    jQuery('a[aria-current="page"]').parents().show();

    // set arrow down to all navSub of selected elements
    jQuery('.current-menu-ancestor > div > div > svg').addClass('arrowDown');

    // click nav arrow
    jQuery(document).on('click', '.navSub', function () {

        var menuToggle = jQuery(this).closest('.menu-item-has-children');

        jQuery(this).parent().siblings('.sub-menu').length
            ? jQuery(this).parent().siblings('.sub-menu').slideToggle()
            : jQuery(this).parent().siblings('.children').slideToggle();

        menuToggle.toggleClass('open');

        if (jQuery(this).find('svg').hasClass('arrowDown')) {
            jQuery(this).find('svg').removeClass('arrowDown');
        } else {
            jQuery(this).find('svg').addClass('arrowDown');
        }

    });

Mit CSS kann das Styling vorgenommen werden. Durch eine CSS Klasse wird z.B.: festgelegt, ob der Navigationspfeil nach rechts oder nach unten schauen soll.

/* arrow rotations */
.arrowRight{
    transform: rotate(0deg);
}
.arrowDown{
    transform: rotate(90deg);
}
/* submenu expand arrow icon*/    
div[class="meinContainer"] .navSub {
    position: absolute;
    right: 0;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    font-size: 20px;
    width: 40px;
    height: 100%;
    color: #8B98A6;
    border: 0;
}

Links

unsere-schule.org

×

Navigationmenü erstellen

Code: