Générer un menu qui affiche des pages enfants à l'aide de wp_list_pages () avec la nouvelle fonctionnalité de menu dans WordPress 3.0?


10

Auparavant, je pouvais charger de manière sélective des pages enfants pour une page parent actuellement sélectionnée en utilisant une 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 y avoir de manière native de le faire en utilisant la nouvelle fonctionnalité register_nav_menus () / wp_nav_menu (). Quelqu'un sait comment je pourrais corriger cela ensemble à ce stade?

Voici une capture d'écran de ce que j'essaie de réaliser:

Capture d'écran du menu enfant


C'est difficile, car wp_nav_menu ne se rapporte pas à la hiérarchie des pages (ou aux pages du tout, d'ailleurs). Je ne connais pas assez les menus pour y répondre maintenant, mais c'est une question très intéressante.
John P Bloch

Je ne comprends pas bien la question. Qu'est-ce que vous essayez d'accomplir? Je vois le code mais je ne comprends pas le contexte. Vous avez un site qui veut? Une capture d'écran?
MikeSchinkel

Il souhaite ajouter conditionnellement des éléments enfants des éléments de menu de niveau supérieur (c'est-à-dire uniquement si cette structure arborescente est active) dans la nouvelle api du menu nav.
John P Bloch

@John P. Bloch - Que signifie "uniquement si la structure arborescente est active" ? Parlons-nous uniquement de pages? Qu'en est-il des articles, des catégories, des étiquettes, des articles personnalisés, etc.? Veut-il le faire sur le client via jQuery ou sur le serveur? Je suppose que je préfère ne pas supposer et j'aimerais en savoir plus sur le cas d'utilisation réel.
MikeSchinkel

@MikeSchinkel Dans ce cas particulier, je pense que nous ne parlons que de pages, mais cela n'a pas d'importance de toute façon; la solution sera toujours la même. Je pense que ZaMoose veut que ce soit fait côté serveur.
John P Bloch

Réponses:


9

J'ai créé un widget nommé Page Sub Navigation (intelligent je sais) qui fonctionne pour moi.

Si vous installez cela, vous pouvez simplement faire glisser le widget vers l'une de vos zones de widget et BAM cela 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 parties 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" );
  }
}

METTRE À JOUR

J'ai trouvé un autre plugin qui fait essentiellement la même chose (et peut-être mieux, je ne sais pas). http://wordpress.org/extend/plugins/subpages-widget/


C'est tellement, si proche de ce dont j'ai besoin. Le seul problème est qu'il se comporte mal lorsque BuddyPress est actif.
ZaMoose

2

vous pouvez faire un hack css pour ce faire (2 façons que j'essaierais)

1 c'est la façon la plus simple à laquelle je peux penser pour que le css affiche les éléments dans la sous-navigation.

.current-menu-ancestor ul {display:inline;}
.current-menu-parent ul (display:inline;}

2 en supposant que votre thème prend en charge les classes de corps, vous pouvez créer un menu de navigation pour chaque "sous-navigation" et les configurer pour qu'ils s'affichent sous la navigation principale - puis modifiez votre feuille de style pour n'afficher que les div de sous-navigation en utilisant 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;}

0

entrez la description de l'image ici 1 c'est l'affichage php.

entrez la description de l'image ici 2 c'est l'affichage css.


La publication de réponses sous forme de captures d'écran de code est la pire façon possible - veuillez rééditer votre réponse. Quelques mots d'explication ne feraient pas de mal aussi.
Picard

0
<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;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.