Создание вкладок для каждой категории в цикле

Question

Создание вкладок для каждой категории в цикле

17 июл. 2014 г., 00:19:09

Просмотры: 20K

Голосов: 2

Я пытаюсь создать страницу, которая содержит все категории моего пользовательского типа записей в виде вкладок с соответствующим содержимым.

Мне удается отобразить все названия категорий как вкладки, но мне нужно выполнить запрос в области содержимого каждой вкладки для соответствующей категории.

То есть, когда я нажимаю на вкладку с названием "1", в области содержимого вкладки должны отображаться только записи из категории, принадлежащей вкладке с названием "1".

Мой код на данный момент:

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

Проблема в том, что каждая область содержимого отображает все записи из всех категорий.

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>

Есть какие-нибудь предложения?

TietjeDK

147

пользовательские типы записей wp query категории

Все ответы на вопрос

Комментарии

Я добавил wp_reset_postdata(); и изменил имя на slug. Но до сих пор получаю все записи под каждой вкладкой. Насколько я понимаю, это должно добавлять записи из соответствующей категории для каждой категории. Уже голову ломаю.

TietjeDK

17 июл. 2014 г. 01:48:29

Я обновил свой ответ. Заметил ещё одну небольшую ошибку, которая просто повторяла одну и ту же категорию. Хотя это не объясняет, почему загружаются все записи. Не могли бы вы дать ссылку на вывод?

deflime

17 июл. 2014 г. 01:53:47

К сожалению, я работаю на локальном сервере, поэтому не могу предоставить ссылку. Я также применил ваши изменения. Всё равно безрезультатно.

TietjeDK

17 июл. 2014 г. 02:04:07

Можете отредактировать ваш вопрос и опубликовать HTML-вывод?

deflime

17 июл. 2014 г. 02:13:57

Оказалось, что не хватало закрывающего тега. Не могу поверить, что потратил 5 часов на это. Извините, что отнял ваше время - и спасибо за помощь. Очень признателен!

TietjeDK

17 июл. 2014 г. 02:28:42

Попробуйте этот код

<?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 нояб. 2014 г. 23:48:10

Комментарии

Пожалуйста, добавьте объяснение к вашему ответу: почему это может решить проблему?

fuxia

9 нояб. 2014 г. 02:38:47

Привет! Я отредактировал код, привел его в красивый формат и добавил $category->slug в некоторые части кода. Я уверен, что этот код работает на 100/100, я использую его в навигационной панели с вкладками.

Shwan Namiq

9 нояб. 2014 г. 22:56:32

Пожалуйста, объясните в своем ответе (а не в комментарии), что делает ваш код и почему он работает.

fuxia

9 нояб. 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 мая 2021 г. 14:18:27

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

Попробуйте использовать 'category_name' => $category->slug вместо 'category_name' => $cat_name.

Также у вас отсутствует wp_reset_postdata(); сразу после endwhile;.

deflime

943

17 июл. 2014 г. 01:39:17