WordPress i dwupoziomowe menu

Chodził za mną ostatnio problem. Wyobraźcie sobie menu jak na stronie Polskiego Związku Brydża Sportowego. Stronę kodujemy dla przeciętnego użytkownika – więc menu ma być trywialnie proste w obsłudze. Aby nie komplikować sprawy zakładamy, że te dwa poziomy wystarczają.

Przystępujemy do działania. Po pierwsze – w functions.php deklarujemy używanie naszego nowego menu:

register_nav_menu( 'upper', 'Główne menu nawigacyjne' );

Następnie wklejamy kod menu w wybrane miejsce szablonu strony, najczęściej w header.php:

<nav>
<div class="highnav">
<div class="wrapper"><?php
$args = Array (
'theme-location' => 'upper',
'menu_id' => false
);
wp_nav_menu( $args); ?> </div>
</div>
<div class="lownav">
</div>
</nav>

Dodajemy style CSS

nav {
width:100%;
position:relative;
z-index:5;
}

nav .highnav {
width:100%;
background-color:#3d5837;
color:white;
height:29px;
}

nav .lownav {
background-color: #8ea48f;
color:black;
height:29px;
width:100%;
}
nav li {
float:left;
list-style:none;
margin:0;
z-index: 10;
}

nav .wrapper {
width: 980px;
margin: 0 auto;
}

.menu li {
height: 29px;
}

.highnav li a {
display:block;
color:#eeeeee;
text-decoration:none;
padding:0 10px;
line-height:29px;
}
.highnav li a:hover {
background-color:#8ea48f;
color:white;
}
.sub-menu {
position:absolute;
top: 29px;
left: 0;
height: 29px;
display: none;
}

.current-menu-item .sub-menu, .current-menu-parent .sub-menu, .current-post-ancestor {
display: block;
}

.sub-menu li a {
display:block;
color:#000000;
text-decoration:none;
padding:0 10px;
line-height:29px;
}
.submenu li a:hover {
color:white;
}

I już prawie możemy się cieszyć działającą stroną. Pozostaje jeden problem: załóżmy, że w dolnym menu mamy archiwum kategorii wpisów. Po otwarciu dowolnego wpisu z archiwum – znika nam podmenu. Chodziłem długo z tym problemem, a uciekło mi rozwiązanie trywialnie proste – jQuery. Wklejamy powyższe gdzieś w sekcji [cci]head[/cci] strony (ale poniżej importu jQuery):

<script type="text/javascript">
$(document).ready(function() {
$("li:has(.current-post-ancestor)").addClass("current-menu-parent");
});
</script>

i już możemy cieszyć się w pełni funkcjonującym menu nawigacyjnym.

Problem jest dość ciekawy z praktycznego punktu widzenia. Takie menu widuję często na stronach dużych portali, nikt jednak (poprawcie mnie, jeśli się mylę) nie zdecydował się na opisanie jego budowy od początku do końca.