Loop attraverso le categorie e crea tab per ciascuna

Question

Loop attraverso le categorie e crea tab per ciascuna

17 lug 2014, 00:19:09

Visualizzazioni: 20K

Voti: 2

Sto cercando di creare una pagina che contenga tutte le categorie del mio custom post type come tab, con un contenuto per ogni tab.

Riesco a visualizzare tutti i nomi delle categorie come tab, ma ho bisogno di eseguire una query nell'area del contenuto di ogni tab per la categoria corrispondente.

Quindi quando clicco sulla tab chiamata "1", l'area del contenuto della tab dovrebbe mostrare solo i post appartenenti alla categoria della tab chiamata "1".

Il mio codice finora:

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

 $args = array(
 'hide_empty'=> 1, // nascondi categorie vuote
 'orderby' => 'name',
 'order' => 'ASC'
 );

$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>';
     ?>

Il problema è che ogni area di contenuto mostra tutti i post di ogni categoria.

L'output 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>

Qualche suggerimento?

TietjeDK

147

tipi di post personalizzati wp query categorie

Tutte le risposte alla domanda

Commenti

Ho aggiunto wp_reset_postdata(); e ho cambiato il nome in slug. Sto ancora ottenendo tutti i post sotto ogni scheda. Come ho capito, questo dovrebbe aggiungere solo i post della categoria specifica per ogni categoria. Mi sto arrovellando qui.

TietjeDK

17 lug 2014 01:48:29

Ho aggiornato la mia risposta. Ho notato un altro piccolo bug che ripeteva semplicemente la stessa categoria. Anche se questo non spiega perché carica tutti i post. Potresti fornirci un link all'output?

deflime

17 lug 2014 01:53:47

Sfortunatamente sto lavorando in locale, quindi non posso fornire un link. Ho anche applicato le tue modifiche. Ancora nessun risultato.

TietjeDK

17 lug 2014 02:04:07

Puoi modificare la tua domanda e pubblicare l'output HTML?

deflime

17 lug 2014 02:13:57

Si è scoperto che mancava un tag di chiusura. Non posso credere di aver perso 5 ore per questo. Mi dispiace per aver sprecato il tuo tempo - e apprezzo il tuo aiuto. Grazie mille!

TietjeDK

17 lug 2014 02:28:42

Prova questo codice

<?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

Commenti

Per favore aggiungi una spiegazione alla tua risposta: perché potrebbe risolvere il problema?

fuxia

9 nov 2014 02:38:47

ciao! ho modificato il codice organizzandolo in un formato migliore, ho solo aggiunto $category->slug in alcune parti del codice. sono sicuro che questo codice funzioni al 100%, lo uso nella mia navbar tab

Shwan Namiq

9 nov 2014 22:56:32

Per favore spiega nella tua risposta (non in un commento), cosa fa il tuo codice e perché funziona.

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 mag 2021 14:18:27

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

Prova 'category_name' => $category->slug invece di 'category_name' => $cat_name.

Ti manca anche wp_reset_postdata(); subito dopo endwhile;.

deflime

943

17 lug 2014 01:39:17