Wordpress Category List 2 Columns

Question

Я пытаюсь отображать свои категории и сообщения в этой категории в 2 столбцах.

Я попытался решить проблему с помощью CSS, но это не получилось очень хорошо.

Вот мой код:

<?php 
    $cat_id = get_query_var('cat'); 
    $catlist = get_categories('hide_empty=0&child_of=' . $cat_id); 

    foreach($catlist as $categories_item) { 
     echo "<div class='half'>"; 
     $cat_title = get_field('category_title' , 'category_' . $categories_item->term_id); 
     echo "<ol>"; 
     echo '<h3><a href="' . get_category_link($categories_item->term_id) . '" ' . '>' . $cat_title .'</a> </h3> '; 
     query_posts(array(
     'cat' => $categories_item->term_id, 
     'posts_per_page' => 9999, 
     'order' => 'ASC', //order ascending 
     'orderby' => 'title' //order by title 
     )); 

    if (have_posts()) : while (have_posts()) : the_post(); ?> 
    <li><a href="<?php the_permalink();?>"> 
     <?php the_title(); ?> 
     </a></li> 
    <?php endwhile; endif; ?> 
    <?php echo "</ol>"; echo "</div>"; ?> 
    <?php } ?> 

Любые идеи?

Заранее благодарен! :)

Answer 1

Пожалуйста, добавьте строку на свой код php <?php echo "<div class='clear'></div>"; ?> после <?php echo "</ol>"; echo "</div>"; ?> со счетчиком, если у вас есть 2 категории подряд.

Ваша последняя четыре линии будет как следующее:

<?php 
$cat_id = get_query_var('cat'); 
$catlist = get_categories('hide_empty=0&child_of=' . $cat_id); 

$counter = 0; // set counter initial value 
foreach($catlist as $categories_item) { 
    $counter++; // counter increment 
    echo "<div class='half'>"; 
    $cat_title = get_field('category_title' , 'category_' . $categories_item->term_id); 
    echo "<ol>"; 
    echo '<h3><a href="' . get_category_link($categories_item->term_id) . '" ' . '>' . $cat_title .'</a> </h3> '; 
    query_posts(array(
    'cat' => $categories_item->term_id, 
    'posts_per_page' => 9999, 
    'order' => 'ASC', //order ascending 
    'orderby' => 'title' //order by title 
    )); 

if (have_posts()) : while (have_posts()) : the_post(); ?> 
<li><a href="<?php the_permalink();?>"> 
    <?php the_title(); ?> 
    </a></li> 
<?php endwhile; endif; ?> 
<?php echo "</ol>"; echo "</div>"; ?> 

<?php 
if($counter == 2){ // check is there two columns in a row 
    echo "<div class='clear'></div>"; // this div will clear float here by css 
    $counter = 0; // now reset the counter 
} 
?> 
<?php } ?> 

Теперь добавьте следующий код CSS в файл CSS

.clear { 
    clear: both; 
} 

Пожалуйста, проверьте. Это может вам помочь. Благодарю.

Answer 2

свой очень простой, но рабочий раствор

<div class="row-fluid"> 

      <?php 
      $counter = 0; 
      $counter2 = 0; 

      $temp = $wp_query; 
      $wp_query = null; 
      $wp_query = new WP_Query(); 
      $wp_query->query('showposts=10&cat=2'.'&paged='.$paged); 
      if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post(); ?> 

      <!-- starting the loop --> 
      <div class="span6"> 

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

       <div class="row-fluid"> 
        <div class="span5"> 
         <?php $url = wp_get_attachment_url(get_post_thumbnail_id($post->ID, 'thumbnail')); ?> 
         <p><img src="<?php echo $url; ?>" /></p> 
        </div> 
        <div class="span7"> 
         <?php the_excerpt(); ?> 
         <p><a class="btn" href="<?php the_permalink(); ?>">more &raquo;</a></p> 
        </div> 
       </div> 

      </div> 

      <?php 
      $postperpage = 10; 
      $counter++; 
      $counter2++; 
      if ($counter == 2 && $counter2 <= $postperpage-1) { 
       echo '</div><div class="row-fluid">'; 
      $counter = 0; 
      } 

      if ($counter2 == $postperpage) { 
      echo '</div> <!-- the last row -->'; 
      } 
      ?> 

      <!-- loop end --> 
      <?php endwhile; ?>