PHP 和 Wordpress - 将内容放在正确的列中 [英] PHP and Wordpress - Place content in correct column

查看：12
本文介绍了PHP 和 Wordpress - 将内容放在正确的列中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个常见问题页面.由问题组成.问题的顺序无关紧要.重要的是布局.它是一个三列布局.

当你只有 3 个问题时，布局是正确的.它看起来像这样.

[问题Z] [问题A] [问题O]

问题:
当你有 4 个问题时，布局看起来像这样.

[问题Z] [问题A]
[问题X] [问题O]

它应该是这样的.

[问题Z] [问题A] [问题O]
[问题X]

它是一个 3 列布局.我希望问题填写第一行.不如从第二个开始.

我需要这样做，而无需更改 Bootstrap 网格.

网格的设置方式是，当用户单击问题上的阅读更多"时，只会扩展列而不是行.

have_posts() ) : ?><?php$计数器=0;$total_posts = $wp_query->post_count;$posts_per_column = ceil($total_posts/3);?><section class="faq content"><div class="container-fluid"><div class="container-wrapper-faq"><div class="row"><div class="col-lg-4"><div class="col-lg-12"><?php while ( $wp_query->have_posts() ) : $wp_query->the_post();$计数器++；?><div class="faq-all"><div class="faq-item"><h2><?php the_title();?></h2><文章><div class="faq-intro"><?php the_content();?>

<div class="faq-info"><?php the_content();?>

<div class="faq-link"><a href="#" class="read-more">LES HELE SVARET</a><a href="#" class="read-less">LES MINDRE</a>

</文章>

<!-- 如果计数器"除以您想要的列的每列帖子数"等于零，则关闭并打开 div --><?php if($counter % $posts_per_column == 0) echo '</div></div><div class="col-lg-4"><div class="col-lg-12">';?><?php endwhile;?>

提前致谢

解决方案

所以我确信有一种更简洁的方法可以解决这个问题，但它很早，我的大脑没有 100% 运作.这应该可以解决您的问题.基本上，如果总帖子数 = 4,7,10,13 ......我们之前的内容总是会修剪它，使其永远不会到达第 3 列.我添加了一些代码来检查它是否是这些特殊情况之一我只是做了一些基本的数学运算并将总帖子数减一，然后除以三，如果它是一个整数，我知道它是一个特例.所以我将每列的帖子数减少一个，然后在循环中我们检查它是否是第一篇帖子，并且我们不增加计数器.

have_posts() ) :$计数器=0;$columns=3;$total_posts = $wp_query->post_count;$posts_per_column = ceil($total_posts/3);$posts_per_column_test_value = ($total_posts - 1)/$columns;$is_special_case = false;if($total_posts != 1 && (intval($posts_per_column_test_value) == $posts_per_column_test_value)){$is_special_case = true;$posts_per_column = $posts_per_column - 1;}?><section class="faq content"><div class="container-fluid"><div class="container-wrapper-faq"><div class="row"><div class="col-lg-4"><div class="col-lg-12"><?php while ( $wp_query->have_posts() ) : $wp_query->the_post();if($is_special_case && $wp_query->current_post == 0){//什么都不做，所以我们在第一列中得到一个额外的帖子} 别的 {$计数器++}:?><div class="faq-all"><div class="faq-item"><h2><?php the_title();?></h2><文章><div class="faq-intro"><?php the_content();?>
<div class="faq-info"><?php the_content();?>
<div class="faq-link"><a href="#" class="read-more">LES HELE SVARET</a><a href="#" class="read-less">LES MINDRE</a>
</文章>
<?php//如果计数器"除以您想要的列的每列帖子数"等于零，则关闭并打开 divif($counter % $posts_per_column == 0) echo '</div></div><div class="col-lg-4"><div class="col-lg-12">;';?><?php endwhile;?>
</节>

I have a FAQ page. Consisiting of questions. The order of the questions does not matter. What matters is the layout. Its a three column layout.

When you only have 3 questions, the layout is correct. It looks like this.

[question Z] [question A] [question O]

The problem:
When you have 4 questions the layout looks like this.

[question Z] [question A]
[question X] [question O]

It should look like this.

[question Z] [question A] [question O]
[question X]

Its a 3 column layout. I would like the questions to fill out the fist row. Than start with the second.

I need to do this, without chaning the Bootstrap grid.

The gird was set up in such a way, that when the user clicks read more on a question, only the column expand and not the row. 

<?php if ( $wp_query->have_posts() ) : ?>
    <?php 
        $counter=0;
        $total_posts = $wp_query->post_count;
        $posts_per_column = ceil($total_posts / 3);
    ?>


<section class="faq content">
<div class="container-fluid">
  <div class="container-wrapper-faq">
    <div class="row">
    <div class="col-lg-4">
      <div class="col-lg-12">
            <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); $counter++; ?>                 
          <div class="faq-all">
            <div class="faq-item">
              <h2><?php the_title(); ?></h2>
              <article>
                <div class="faq-intro">
                   <?php the_content(); ?>
                </div>
                <div class="faq-info">
                   <?php the_content(); ?>
                </div>   
                <div class="faq-link">
                  <a href="#" class="read-more">LES HELE SVARET</a>
                  <a href="#" class="read-less">LES MINDRE</a>
              </div>
             </article>
            </div>
          </div> 
            <!-- Close and open div if the "counter" divided by the "posts per column" of columns you want equals zero -->
            <?php if($counter % $posts_per_column == 0) echo '</div></div><div class="col-lg-4"><div class="col-lg-12">'; ?>
            <?php endwhile; ?>
        </div>
    </div>
  </div>
  </div>
</div>

Thanks in advance

解决方案

So I am sure there is a cleaner way to pull this off but its early and my brain is not functioning at 100%. This should fix your problem. Basically if the total posts = 4,7,10,13... what we had before would always trim it so that it never reached the 3rd column. I added some code that checks to see if it is one of these special cases I just did some basic math and subtracted the total posts by one, then divided that by three, if it is a round number I know its a special case. So I change the posts per column to be one less, then in the loop we check if its the first post and we don't increment the counter.

<?php if ( $wp_query->have_posts() ) :
  $counter=0;
  $columns=3;
  $total_posts = $wp_query->post_count;
  $posts_per_column = ceil($total_posts / 3);
  $posts_per_column_test_value = ($total_posts - 1) / $columns;
  $is_special_case = false;
    if($total_posts != 1 && (intval($posts_per_column_test_value) == $posts_per_column_test_value)){
        $is_special_case = true;
        $posts_per_column = $posts_per_column - 1;
    }
?>
<section class="faq content">
    <div class="container-fluid">
      <div class="container-wrapper-faq">
        <div class="row">
            <div class="col-lg-4">
            <div class="col-lg-12">
                <?php while ( $wp_query->have_posts() ) : $wp_query->the_post();
                  if($is_special_case && $wp_query->current_post == 0){
                            // do nothing so we get an extra post in the first column
                            } else { 
                                $counter++
                            }: ?>                 
                  <div class="faq-all">
                    <div class="faq-item">
                      <h2><?php the_title(); ?></h2>
                      <article>
                        <div class="faq-intro">
                           <?php the_content(); ?>
                        </div>
                        <div class="faq-info">
                           <?php the_content(); ?>
                        </div>   
                        <div class="faq-link">
                          <a href="#" class="read-more">LES HELE SVARET</a>
                          <a href="#" class="read-less">LES MINDRE</a>
                      </div>
                     </article>
                    </div>
                  </div> 
            <?php
                // Close and open div if the "counter" divided by the "posts per column" of columns you want equals zero
                if($counter % $posts_per_column == 0) echo '</div></div><div class="col-lg-4"><div class="col-lg-12">';
            ?>
            <?php endwhile; ?>
        </div>
            </div>
          </div>
      </div>
    </div>
</section>

这篇关于PHP 和 Wordpress - 将内容放在正确的列中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆