En WordPress menu er den del af et tema, der styrer navigationen på et website – altså de menupunkter, brugeren klikker på for at bevæge sig rundt mellem siderne. For at gøre det muligt at tilpasse, hvordan denne menu bliver vist i frontenden, bruges der ofte en walker WordPress menu. En walker fungerer som en “oversætter” mellem WordPress’ interne menustruktur og det output, der bliver vist i browseren.
Når WordPress henter en menu fra databasen, indeholder den kun selve strukturen – altså information om, hvilke sider og links der findes, og hvordan de hænger sammen. Walker-klassen går derefter ind og bygger selve menuens opbygning, så hvert menupunkt får de rigtige tags, klasser og hierarkier.
En walker WordPress menu er især nyttig, hvis du bruger frameworks som Bootstrap. Bootstrap kræver en bestemt struktur for at dropdowns, aktive links og hover-effekter virker korrekt. Med en tilpasset Navwalker-klasse kan man nemt få WordPress menuen til at følge Bootstraps opbygning uden at skulle skrive det hele manuelt.
Walkeren sørger for, at menupunkter med underpunkter automatisk får den rette klasse. Den tilføjer også de nødvendige Bootstrap-klasser som nav-link, dropdown-item og active, så alt ser rigtigt ud fra start. Derudover pakker den undermenuer ind på den rigtige måde, så alt opfører sig præcist, som det skal.
Det betyder, at du kan opbygge og redigere din WordPress menu direkte i WordPress’ kontrolpanel, og walkeren klarer resten. Resultatet bliver en fuldt responsiv navigation, hvor dropdowns og animationer fungerer med det samme.
Kort sagt: En walker WordPress menu gør det let at integrere en avanceret navigationsstruktur med moderne frameworks som Bootstrap. Den automatiserer arbejdet med klasser og struktur, så udvikleren slipper for at kode menuens opbygning i hånden.
I din header.php kan du så kalde menuen med funktionen wp_nav_menu og tilføje din walker som parameter. På den måde bliver din WordPress menu både dynamisk, let at vedligeholde og klar til professionel styling med Bootstrap.
<!-- NAVIGATION START -->
<nav id="mainNavbar" class="navbar navbar-expand-lg fixed-top py-3">
<div class="container">
<a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>">
<?php bloginfo('name'); ?>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
wp_nav_menu([
'theme_location' => 'headerMenu_location',
'container' => false,
'menu_class' => 'navbar-nav ms-auto mb-2 mb-lg-0',
'walker' => new Bootstrap_Hover_NavWalker(),
'depth' => 10
]);
?>
</div>
</div>
</nav>
her har du bootstrap nav walker class
<?php
class Bootstrap_Hover_NavWalker extends Walker_Nav_Menu
{
function start_lvl(&$output, $depth = 0, $args = null)
{
$indent = str_repeat("\t", $depth);
$submenu_class = 'dropdown-menu';
$output .= "\n$indent<ul class=\"$submenu_class depth_$depth\">\n";
}
function start_el(&$output, $item, $depth = 0, $args = null, $id = 0)
{
$indent = ($depth) ? str_repeat("\t", $depth) : '';
// <li> classes
$li_classes = ['nav-item'];
if (in_array('menu-item-has-children', $item->classes)) {
$li_classes[] = 'dropdown';
if ($depth > 0)
$li_classes[] = 'dropdown-submenu';
}
if (in_array('current-menu-item', $item->classes))
$li_classes[] = 'active';
$li_class_string = implode(' ', $li_classes);
$output .= $indent . '<li class="' . esc_attr($li_class_string) . '">';
// <a> classes
if ($depth === 0) {
$link_classes = ['nav-link'];
if (in_array('menu-item-has-children', $item->classes)) {
$link_classes[] = 'dropdown-toggle'; // giver standard Bootstrap 5 pil
}
}
else {
$link_classes = ['dropdown-item'];
if (in_array('menu-item-has-children', $item->classes))
$link_classes[] = 'dropdown-toggle';
}
$link_class_string = implode(' ', $link_classes);
// Data-attribut til dropdown på alle niveauer (mobil klik)
$data_toggle = '';
if (in_array('menu-item-has-children', $item->classes)) {
$data_toggle = ' data-bs-toggle="dropdown" aria-expanded="false"';
}
$attributes = '';
$attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
$attributes .= ' class="' . esc_attr($link_class_string) . '"';
$attributes .= $data_toggle;
$title = apply_filters('the_title', $item->title, $item->ID);
$item_output = '<a' . $attributes . '>' . $title . '</a>';
$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}
function end_el(&$output, $item, $depth = 0, $args = null)
{
$output .= "</li>\n";
}
}
?>
og her har vi css koden til walker menuen
@media (min-width: 992px) {
.dropdown:hover > .dropdown-menu,
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-left: 1px;
}
.dropdown-toggle i {
margin-left: 1px !important;
font-size: 0.8em;
}
.dropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-left: 0.3em solid transparent;
}
husk at aktivere menu i functions.php og kald på nav walker også
<?php
require get_template_directory() . '/walker-menu.php';
function test2Files()
{
wp_enqueue_style('bootstrap-css-cdn', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css');
wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_style('walker-css', get_theme_file_uri('css/walker.css'));
wp_enqueue_style('custom-css', get_theme_file_uri('css/custom.css'));
wp_enqueue_script('bootstrap-js-cdn', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js', [], null, true);
}
add_action('wp_enqueue_scripts', 'test2Files');
//tilføj menu til wordpress samt thumbnail
function features()
{
register_nav_menu('headerMenu_location', 'Hoved menu');
register_nav_menu('Footer_location_one', 'Footer menu 1');
add_theme_support('post-thumbnails');
}
add_action('init', 'features');
?>