Wordpress分类列表2列 - Wordpress Category List 2 Columns

Wordpress Category List 2 Columns

本文关键字：2列列表分类 Wordpress | 更新日期: 2023-09-27

我试图在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 } ?>

任何想法?

提前感谢!:)

当您有2个类别时，请在您的php代码<?php echo "<div class='clear'></div>"; ?>之后添加一行<?php echo "</ol>"; echo "</div>"; ?>。

您的最后四行将像这样:

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

请检查。它可能对你有帮助。谢谢。

我自己的非常简单但有效的解决方案

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