Recorrer categorías y crear pestañas para cada una

Question

Recorrer categorías y crear pestañas para cada una

17 jul 2014, 00:19:09

Vistas: 20K

Votos: 2

Estoy tratando de crear una página que contenga todas las categorías de mi tipo de publicación personalizada como pestañas, con un contenido para cada pestaña.

Puedo mostrar todos los nombres de las categorías como pestañas, pero necesito ejecutar una consulta en cada área de contenido de la pestaña correspondiente a cada categoría.

Así que cuando hago clic en la pestaña llamada "1", el área de contenido de la pestaña solo debería mostrar publicaciones de la categoría perteneciente a la pestaña llamada "1".

Mi código hasta ahora:

<?php
echo '<ul class="nav nav-tabs" role="tablist">';

 $args = array(
 'hide_empty'=> 1, // Ocultar categorías vacías
 'orderby' => 'name', // Ordenar por nombre
 'order' => 'ASC' // Orden ascendente
 );

$categories = get_categories($args);

  foreach($categories as $category) { 

    echo '<li><a href="#' . $category->name.'" role="tab" data-toggle="tab">' .      
    $category->name.'</a></li>';
    $cat_name = $category->name;

    } 
    echo '</ul>';
    echo '<div class="tab-content">';
      foreach($categories as $category) { 
        echo '<div class="tab-pane" id="' . $category->name.'">';


        ?>

 <?php 

     $the_query = new WP_Query(array(
      'post_type' => 'acme_product',
      'posts_per_page' => 100,
      'category_name' => $category->slug
        )); 
     while ( $the_query->have_posts() ) : 
     $the_query->the_post();
     ?>

            <h1><?php the_title(); ?></h1>

                   <?php 
    endwhile; 
   wp_reset_postdata();
   ?>   


    <?php } 
    echo '</div>';
     ?>

El problema es que cada área de contenido muestra todas las publicaciones de todas las categorías.

La salida HTML:

<div class="container">

               <ul class="nav nav-tabs" role="tablist"><li><a href="#Audi" role="tab" data-toggle="tab">Audi</a></li><li><a href="#Skoda" role="tab" data-toggle="tab">Skoda</a></li></ul><div class="tab-content"><div class="tab-pane" id="Audi">

        <h1>fffffffffffff</h1>




<div class="tab-pane" id="Skoda">

        <h1>qqqqqqqqqqqqqqqqqqq</h1>




</div>                       
    </div>

¿Alguna sugerencia?

TietjeDK

147

tipos de entradas personalizadas wp query categorías

Todas las respuestas a la pregunta

Comentarios

He agregado wp_reset_postdata(); y cambié el nombre por el slug. Todavía obtengo todas las publicaciones en cada pestaña. Según entiendo, esto debería agregar las publicaciones de la categoría correspondiente para cada categoría. Me estoy rompiendo la cabeza aquí.

TietjeDK

17 jul 2014 01:48:29

Actualicé mi respuesta. Me di cuenta de otro pequeño error que simplemente repetiría la misma categoría. Aunque eso no explica por qué carga todas las publicaciones. ¿Podrías compartirnos un enlace al resultado?

deflime

17 jul 2014 01:53:47

Desafortunadamente estoy trabajando en localhost, así que no puedo proporcionar un enlace. También apliqué tus cambios. Sigue sin funcionar.

TietjeDK

17 jul 2014 02:04:07

¿Puedes editar tu pregunta y publicar el resultado HTML?

deflime

17 jul 2014 02:13:57

Resultó ser una etiqueta de cierre faltante. No puedo creer que haya perdido 5 horas en esto. Lamento haber hecho perder tu tiempo - y agradezco tu ayuda. ¡Muchas gracias!

TietjeDK

17 jul 2014 02:28:42

Prueba este código

<?php
echo '<ul class="nav nav-tabs" role="tablist">';
$args = array(
    'hide_empty'=> 1,
    'orderby' => 'name',
    'order' => 'ASC'
);
$categories = get_categories($args);
foreach($categories as $category) { 
    echo 
        '<li>
            <a href="#'.$category->slug.'" role="tab" data-toggle="tab">    
                '.$category->name.'
            </a>
        </li>';
}
echo '</ul>';

echo '<div class="tab-content">';
foreach($categories as $category) { 
    echo '<div class="tab-pane" id="' . $category->slug.'">';
    $the_query = new WP_Query(array(
        'post_type' => 'acme_product',
        'posts_per_page' => 100,
        'category_name' => $category->slug
    ));

    while ( $the_query->have_posts() ) : 
    $the_query->the_post();
    echo '<h1>';
        the_title();
    echo '</h1>';
    endwhile;

    echo '</div>';
} 
echo '</div>';
?>

Shwan Namiq

335

8 nov 2014 23:48:10

Comentarios

Por favor agrega una explicación a tu respuesta: ¿por qué podría eso resolver el problema?

fuxia

9 nov 2014 02:38:47

¡hola! edité el código y lo organicé en un formato agradable, solo agregué $category->slug a algunas partes del código. Estoy seguro que este código funciona 100/100, lo uso en mi pestaña de barra de navegación

Shwan Namiq

9 nov 2014 22:56:32

Por favor explica en tu respuesta (no en un comentario), qué hace tu código y por qué funciona.

fuxia

9 nov 2014 23:42:32

<?php
echo '<ul class="nav nav-tabs" role="tablist">';
$args = array(
    'taxonomy' => 'annualreports_category',
    'hide_empty'=>0,
    'orderby' => 'name',
    'order' => 'ASC'
);
$categories = get_categories($args);
foreach($categories as $category) { 
    echo 
        '<li>
            <span data-href="'.$category->slug.'" role="tab" data-toggle="tab">    
                '.$category->name.'
            </span>
        </li>';
}
echo '</ul>';

echo '<div class="investors-content">';
foreach($categories as $category) { 
    echo '<div class="tab-pane" id="' . $category->slug.'">';
    $catslug = $category->slug;
    $the_query = new WP_Query(array(
        'post_type' => 'annualreports_post',
        'posts_per_page' => -1,
        'tax_query' => array(
                        array(
                            'taxonomy' => 'annualreports_category',
                            'field'    => 'slug',
                            'terms'    => array( $catslug ),
                            'operator' => 'IN'
                        ),
                    ),
    ));                 
    while ( $the_query->have_posts() ) : 
    $the_query->the_post();
        echo '<h1>';
        the_title();
        echo '</h1>';
    endwhile; 
    echo '</div>';
} 
echo '</div>';
?>

jQuery

$(".investors-content .tab-pane").each(function(){
    $(this).hide();
    $('.investors-content .tab-pane:first-child()').show();
});

$('.nav-tabs li>span').on( "click", function(e) {
    e.preventDefault();
    var id = $(this).attr('data-href');
    $(".investors-content .tab-pane").each(function(){
        $(this).hide();
        if($(this).attr('id') == id) {
            $(this).show();
        }
    });
});

user206223

1

10 may 2021 14:18:27

deflime 943 · Accepted Answer · 2014-07-17T01:39:17Z

Prueba 'category_name' => $category->slug en lugar de 'category_name' => $cat_name.

También te falta wp_reset_postdata(); justo después de endwhile;.

deflime

943

17 jul 2014 01:39:17