如何使用PHP将WordPress帖子堆叠到3个单独的列中？

时间：2018-04-27 09:06:33

标签： php jquery wordpress twitter-bootstrap

我试图弄清楚如何使用PHP将帖子堆叠成三个单独的列，我已经对这个问题进行了大量的研究，但是我无法找到很多信息关于如何做到这一点。

我知道如何使用HTML获取我想要的布局，但是如何让PHP将内容输出到我的列中？

以下是我试图实现的设计图片：https://imgur.com/a/RtALRzN

这是使用帖子的标准博客页面，不涉及自定义帖子类型。

我目前的PHP代码：

<div class="container blog-page-container">
 <?php if (have_posts()) {
    $count = 0;
    echo '<div class="row">';
    while( have_posts() ) : the_post();
        if($count == 3) {
            $count = 0;
            echo '</div><div class="row blog-additional-row">';
        };
        ?>
    <div class="col-md-4">
        <div class="testimonial-background">
                <div class="testimonial-text">
            <span>
                <i class="fas fa-quote-left fa-3x"></i>
                <p><?php echo the_content(); ?></p>
                <p><strong><?php echo get_the_title(); ?></strong></p>
            </span>
                </div>
        </div>
    </div>
    <?php $count++;
    endwhile;
    echo '</div>';
}; ?>
</div>

但这就是我希望输出代码的方式：https://jsfiddle.net/wrpuu7wh/

＆＃13;
＆＃13; 
$('.testimonial-text:odd').addClass("testimonial-text-opposite");
＆＃13; 
.col-md-12 {
  width: 100%;
  float: left;
}

.col-md-4 {
  width: 33.33333333%;
  float: left;
}

.testimonial-background {
  margin-top: 0;
  margin-bottom: 20px;
  padding-left: 20px;
}

.testimonial-text {
  color: #fff;
  background-color: #4E0B1C;
  padding-top: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
  padding-right: 40px;
}

.testimonial-text-opposite {
  color: #4E0B1C;
  background-color: #fff;
  border: 1px solid #4E0B1C;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>

<div class="container blog-page-container">
  <div class="col-md-4">
    <div class="col-md-12">
      <div class="testimonial-background">
        <div class="testimonial-text">
          <span>
                    <i class="fas fa-quote-left fa-3x"></i>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. </p>
                    <p><strong>Post 1</strong></p>
                </span>
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="testimonial-background">
        <div class="testimonial-text">
          <span>
                    <i class="fas fa-quote-left fa-3x"></i>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nam velit dolor,     tincidunt cursus nisl eget, auctor vehicula sem. Aliquam eget nunclacinia, pulvinar erat eget, finibus mauris.</p>
                    <p><strong>Post 4</strong></p>
                </span>
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="testimonial-background">
        <div class="testimonial-text">
          <span>
                    <i class="fas fa-quote-left fa-3x"></i>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nam velit dolor,     tincidunt cursus nisl eget, auctor vehicula sem. Aliquam eget nunclacinia, pulvinar erat eget, finibus mauris.</p>
                    <p><strong>Post 7</strong></p>
                </span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="col-md-12">
      <div class="testimonial-background">
        <div class="testimonial-text">
          <span>
                    <i class="fas fa-quote-left fa-3x"></i>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nam velit dolor,     tincidunt cursus nisl eget, auctor vehicula sem. Aliquam eget nunclacinia, pulvinar erat eget, finibus mauris.
                    Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nam velit dolor,     tincidunt cursus nisl eget, auctor vehicula sem. Aliquam eget nunclacinia, pulvinar erat eget, finibus mauris.</p>
                    <p><strong>Post 2</strong></p>
                </span>
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="testimonial-background">
        <div class="testimonial-text">
          <span>
                    <i class="fas fa-quote-left fa-3x"></i>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nam velit dolor,     tincidunt cursus nisl eget, auctor vehicula sem. Aliquam eget nunclacinia, pulvinar erat eget, finibus mauris.</p>
                    <p><strong>Post 5</strong></p>
                </span>
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="testimonial-background">
        <div class="testimonial-text">
          <span>
                    <i class="fas fa-quote-left fa-3x"></i>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nam velit dolor..</p>
                    <p><strong>Post 8</strong></p>
                </span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="col-md-12">
      <div class="testimonial-background">
        <div class="testimonial-text">
          <span>
                    <i class="fas fa-quote-left fa-3x"></i>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nam velit dolor,     tincidunt cursus nisl eget, auctor vehicula sem. Aliquam eget nunclacinia, pulvinar erat eget, finibus mauris.
                    Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nam velit dolor,     tincidunt cursus nisl eget, auctor vehicula sem. Aliquam eget nunclacinia, pulvinar erat eget, finibus mauris.</p>
                    <p><strong>Post 3</strong></p>
                </span>
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="testimonial-background">
        <div class="testimonial-text">
          <span>
                    <i class="fas fa-quote-left fa-3x"></i>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nam velit dolor,     tincidunt cursus nisl eget, auctor vehicula sem. Aliquam eget nunclacinia, pulvinar erat eget, finibus mauris.</p>
                    <p><strong>Post 6</strong></p>
                </span>
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="testimonial-background">
        <div class="testimonial-text">
          <span>
                    <i class="fas fa-quote-left fa-3x"></i>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nam velit dolor,     tincidunt cursus nisl eget, auctor vehicula sem. Aliquam eget nunclacinia, pulvinar erat eget, finibus mauris.</p>
                    <p><strong>Post 9</strong></p>
                </span>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

这是一个标准的博客页面，并未使用任何自定义帖子类型。

非常感谢任何帮助。

解决方案： 

<?php
/* Total published posts should be returned this way: */
$count_posts = wp_count_posts()->publish;
$count_rows = round($count_posts/3);
$post_columns = array(
array(),
array(),
array()
);
?>
<div class="container blog-page-container">
    <?php if (have_posts()) {
        $count = 0;
        while( have_posts() ) : the_post();
            $post_column_number = $count;
            $post_columns[$count%3][] = array(
                'title' => get_the_title(),
                'content' => get_the_content()
            );
            $count++;
        endwhile;
        foreach( $post_columns as $pc ) {
            echo '<div class="col-md-4">';
            foreach( $pc as $pt ) {
                echo "
                <div class='col-md-12'>
                    <div class='testimonial-background'>
                        <div class='testimonial-text'>
                            <span>
                                <i class='fas fa-quote-left fa-3x'></i>
                                <p>{$pt['content']}</p>
                                <p><strong>{$pt['title']}</strong> </p>
                            </span>
                        </div>
                    </div>
                </div>
            ";
            };
            echo '</div>';
        };
    };?>

2 个答案:

答案 0 :(得分：0)

试试这段代码，

$count = 1;
<?php if (have_posts()) {
echo '<div class="row">';
while( have_posts() ) : the_post();
    if($count == 3) {
        $count = 0;
        echo '</div>';
    }else if ($count == 1){
      echo '<div class="col-md-4">';
    }
    ?>
//enter code here
<?php $count++;
endwhile;
echo '</div>';
 }; ?>

希望这会对你有所帮助。

答案 1 :(得分：0)

我用这个库做了3个coloumns https://masonry.desandro.com/

  1. 在functions.php图书馆

    中注册 
    function masonry_js() {
   wp_register_script(
       'mansonry_script', 
       get_template_directory_uri() . '-child/js/masonry.pkgd.min.js', 
       array('jquery'),
       '1.1',
       true
   );
  wp_enqueue_script('masonry_script');
  wp_register_script(
      'mansory_custom_script', 
      get_template_directory_uri() . '-child/js/masonry.js', 
      array('jquery'),
      '1.1',
      true
  );
  wp_enqueue_script('mansory_custom_script');
}
add_action( 'wp_enqueue_scripts', 'masonry_js', 999 );

  2. 在子主题目录

    3. 上添加库文件

  3. 在jquery中编写自己的代码，用于调用masonry库并将其添加到子主题文件夹masonry.js中的文件js。

    $('.grid').masonry({
   // options...
   itemSelector: '.grid-item',
   columnWidth: 200
});

  4. 使用正确的类编写wordPress循环：

     <div class="masonry">
    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>
    <?php while (have_posts()) : the_post(); ?>
        <div class="id" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
            <div class="grid-item">
                <?php if (has_post_thumbnail()) {
                    the_post_thumbnail();
                } else { ?> <img src=""> <?php } ?>
                <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

                <p class="content"><?php echo wp_trim_words(get_the_content(), 30, '...'); ?> </p>
                <h3 class="button"><a href="<?php the_permalink(); ?>"> See More </a></h3>

            </div><!--/.masonry-entry-->
        </div>

    <?php endwhile; ?>
</div>

  5. 为网格项

    6. 编写css
相关问题
最新问题