0

カテゴリとそのカテゴリの下の投稿を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 } ?>

何か案は？

前もって感謝します！:)

4

2 に答える 2

1

2つのカテゴリが連続している場合は、カウンタを使用してphpコード<?php echo "<div class='clear'></div>"; ?>に行を追加してください。<?php echo "</ol>"; echo "</div>"; ?>

最後の4行は次のようになります。

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

チェックしてください。それはあなたを助けるかもしれません。ありがとう。

于 2013-03-14T22:41:31.720 に答える
0

私自身の非常にシンプルだが実用的なソリューション

<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; ?>
于 2014-06-20T18:56:33.760 に答える