Générer un menu qui affiche les pages à l'aide des enfants wp_list_pages () avec la fonctionnalité Nouveau menu dans WordPress 3.0?
-
16-10-2019 - |
Question
Auparavant, j'ai pu pages enfant de manière sélective de charge pour une page parent actuellement sélectionnée en utilisant la logique telle que:
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 {
}
Il ne semble pas être une façon native de le faire en utilisant la nouvelle register_nav_menus () / wp_nav_menu () fonctionnalité. Quelqu'un sait comment je pourrais patcher ensemble à ce point?
Voici une capture d'écran de ce que je suis en train de réaliser:
La solution
J'ai créé un Widget nommé Sous la page de navigation (de savoir intelligent I) qui travaille pour moi.
Si vous installez, vous pouvez simplement faire glisser le widget à un de vos zones de widget et BAM il fonctionne.
<?php
/*
Plugin Name: Page Sub Navigation
Plugin URI: http://codegavin.com/wordpress/sub-nav
Description: Displays a list of child pages for the current page
Author: Jesse Gavin
Version: 1
Author URI: http://codegavin.com
*/
function createPageSubMenu()
{
if (is_page()) {
global $wp_query;
if( empty($wp_query->post->post_parent) ) {
$parent = $wp_query->post->ID;
} else {
$parent = $wp_query->post->post_parent;
}
$title = get_the_title($parent);
if(wp_list_pages("title_li=&child_of=$parent&echo=0" )) {
echo "<div id='submenu'>";
echo "<h3><span>$title</span></h3>";
echo "<ul>";
wp_list_pages("title_li=&child_of=$parent&echo=1" );
echo "</ul>";
echo "</div>";
}
}
}
function widget_pageSubNav($args) {
extract($args);
echo $before_widget;
createPageSubMenu();
echo $after_widget;
}
function pageSubMenu_init()
{
wp_register_sidebar_widget("cg-sidebar-widget", __('Page Sub Navigation'), 'widget_pageSubNav');
}
add_action("plugins_loaded", "pageSubMenu_init");
?>
Ou si vous voulez juste les pièces juteuses ...
if (is_page()) {
global $wp_query;
if( empty($wp_query->post->post_parent) ) {
$parent = $wp_query->post->ID;
} else {
$parent = $wp_query->post->post_parent;
}
if(wp_list_pages("title_li=&child_of=$parent&echo=0" )) {
wp_list_pages("title_li=&child_of=$parent&echo=1" );
}
}
UPDATE
J'ai trouvé un autre plug-in qui fait essentiellement la même chose (et peut-être mieux fait, je ne sais pas). http://wordpress.org/extend/plugins/subpages-widget/
Autres conseils
vous pouvez faire un hack css pour le faire (2 façons que je voudrais essayer)
1 c'est la meilleure façon que je peux penser ne subordonnent l'affichage css les éléments de la sous-navigation.
.current-menu-ancestor ul {display:inline;}
.current-menu-parent ul (display:inline;}
2 en supposant que votre thème l'utilisation des classes de corps, vous pouvez créer un menu de navigation pour chaque « sous nav », et mettez-les à afficher sous la barre de navigation principale - puis modifiez votre feuille de style pour afficher uniquement à l'aide du subnav div de quelque chose comme ceci:
.child-menu-about, .child-menu-leadership {display:none;}
body.page-id-YOUR_ABOUT_PAGE_ID .child-menu-about {display:inline;}
body.category-YOUR-CATEGORY-SLUG .child-menu-leadership {display:inline;}
<nav class="site-nav children-link">
<?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>
<?php echo $children; ?>
</ul>
<?php
} else {
}
?>
</nav>
CSS
/*children-links links*/
.children-link
{
background-color: #1a5957;
color:#FFF;
font-size: 100%;
}
.children-link li
{
margin: 10px;
}
.children-link ul li a:link,
.children-link ul li a:visited
{
padding: 15px 17px;
text-decoration: none;
border: 1px solid #1a5957;
}
.children-link ul li a:hover
{
background-color: #1a5957;
color:#FFF;
font-weight: bold;
}
.children-link .current_page_item a:link,
.children-link .current_page_item a:visited
{
background-color: #1a5957;
color: #FFF;
cursor: default;
}