¿Generar un menú que muestre páginas secundarias usando wp_list_pages () con la nueva funcionalidad de menú en WordPress 3.0?


10

Anteriormente, pude cargar selectivamente páginas secundarias para una página principal seleccionada actualmente usando lógica como:

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 {
}

No parece haber una forma nativa de hacer esto usando la nueva funcionalidad register_nav_menus () / wp_nav_menu (). ¿Alguien sabe cómo podría arreglar esto en este momento?

Aquí hay una captura de pantalla de lo que estoy tratando de lograr:

Captura de pantalla del menú desplegable Niño


Esto es difícil, ya que wp_nav_menu no se relaciona con la jerarquía de la página (o páginas en absoluto, para el caso). No sé lo suficiente sobre menús para responder esto ahora, pero esta es una pregunta muy interesante.
John P Bloch

No entiendo completamente la pregunta. ¿Qué estás tratando de lograr? Veo el código pero no entiendo el contexto. ¿Tienes un sitio que quiere? ¿Una captura de pantalla?
MikeSchinkel

Quiere agregar elementos secundarios de elementos de menú de nivel superior condicionalmente (es decir, solo si esa estructura de árbol está activa) en la nueva API del menú de navegación.
John P Bloch

@ John P. Bloch: ¿Qué significa "solo si la estructura de árbol está activa" ? ¿Estamos hablando solo de páginas? ¿Qué pasa con las publicaciones, categorías, etiquetas, publicaciones personalizadas, etc.? ¿Quiere hacerlo en el cliente a través de jQuery o en el servidor? Supongo que preferiría no asumir y me gustaría saber más sobre el caso de uso real.
MikeSchinkel

@MikeSchinkel En este caso particular, creo que podemos estar hablando solo de páginas, pero eso no importa de todos modos; La solución seguirá siendo la misma. Creo que ZaMoose quiere que se haga del lado del servidor.
John P Bloch

Respuestas:


9

Creé un widget llamado Page Sub Navigation (inteligente, lo sé) que funciona para mí.

Si instala esto, puede arrastrar el widget a una de sus áreas de widget y BAM funciona.

<?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");
?>

O si solo quieres las partes jugosas ...

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" );
  }
}

ACTUALIZAR

Encontré otro complemento que hace esencialmente lo mismo (y tal vez lo hace mejor, no lo sé). http://wordpress.org/extend/plugins/subpages-widget/


Esto es SO, tan cerca de lo que necesito. El único problema es que se comporta mal cuando BuddyPress está activo.
ZaMoose

2

podrías hacer un truco css para hacer esto (2 formas en que lo intentaría)

1 Esta es la forma más fácil en la que puedo pensar en hacer que el CSS muestre los elementos en la subnavegación.

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

2 suponiendo que su tema admite clases de cuerpo, puede crear un menú de navegación para cada "subnavegación" y configurarlos para que se muestren debajo de la navegación principal, luego edite su hoja de estilo para mostrar solo los div subnavales usando algo como esto:

.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

ingrese la descripción de la imagen aquí 1 esta es la pantalla php.

ingrese la descripción de la imagen aquí 2 esta es la pantalla css.


Publicar respuestas como capturas de pantalla de código es la peor manera posible: vuelva a editar su respuesta. Unas pocas palabras de explicación no harían daño también.
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;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.