Советы инвалида

Если Вы отслеживаете тенденции в разработке современных профессиональных шаблонов WordPress, то не могли не заметить, что в настоящее время очень популярны связанные двухуровневые меню страничек.

Этот стиль отображения важных страничек сайта можно использовать по разному, но самый доступный способ - это отображение страничек второго уровня в верхнем меню под основными страничками.

Вот код PHP , который можно использовать для этого:

<ul id=”nav”>
<?php wp_list_pages(’title_li=&depth=1’); ?>
</ul>

<?php if($post->post_parent)
$children = wp_list_pages(”title_li=&child_of=”.$post->post_parent.”&echo=0″); else
$children = wp_list_pages(”title_li=&child_of=”.$post->ID.”&echo=0″);
if ($children) { ?>
<ul id=”subnav”>
<?php echo $children; ?>
</ul>
<?php } else { ?>
<?php } ?>

Также можно настроить стили CSS наиболее удобным для Вас способом:

* {
margin:0;
padding:0
}
#nav {
background:#577da2;
border-bottom:1px solid #FFF;
height:32px;
}
#nav li {
margin-right:25px;
}
#nav li, #subnav li {
float:left;
list-style:none
}
#nav a, #nav a:visited {
color:#FFF;
text-decoration:none;
font-weight:bold
}
#nav a:hover, #nav a:active,
li.current_page_parent a,
li.current_page_parent a:visited,
#nav li.current_page_item a,
#nav li.current_page_item a:visited
{
background:#295887
}
#subnav {
background:#e6eef7;
border-top:2px solid #577da2;
border-bottom:2px solid #cad8e6;
height:28px;
}
#subnav li {
border-right:1px solid #295887;
padding:0 7px;
}
#subnav a, #subnav a:visited {
color:#295887;
text-decoration:none;
font-weight:bold
}
#subnav a:hover, #subnav a:active,
#subnav li.current_page_item a,
#subnav li.current_page_item a:visited {
text-decoration:underline
}

Все

Вы можете спросить, почему код CSS настолько большой? Для того, чтобы теги :active и :hover отображались корректно, независимо от того, есть на нашем сайте странички второго уровня, или же их нет. Если такие странички есть, то в теге nav они отображаются как current_page_parent , если таких страничек нет, то используется обычный current_page_item .