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

Posted 2023-05-09

技术标签:

【中文标题】如何使用 PHP 将 WordPress 帖子堆叠到 3 个单独的列中？【英文标题】：How do I stack WordPress posts into 3 separate columns using PHP? 【发布时间】：2018-10-08 02:19:25 【问题描述】：

我试图弄清楚如何使用 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/

$('.testimonial-text:odd').addClass("testimonial-text-opposite");

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

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

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

任何帮助将不胜感激。

解决方案：

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

【问题讨论】：

你想达到什么目的？你能分享一下预期输出的截图吗？嗨，我的 JSFiddle 应该很清楚，但如果它不起作用，这里是我想要实现的设计图片：imgur.com/a/RtALRzN 检查这个插件callmecavs.com/bricks.js 如果可能的话，我想避免使用外部库，必须有一种方法告诉 PHP 输出帖子而不需要我们的 JS。 【参考方案1】：

试试这个代码，

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

希望对你有帮助。

【讨论】：

嗨，虽然这会连续放置 3 个帖子，然后开始新的一行。我希望帖子显示在 col-md-4 中。查看我的 JSFiddle 以获得更好的示例：jsfiddle.net/wrpuu7wh 我更新了代码，请检查这是否会在第一次发布时添加 col-md-4 并在每次发布 3 次后完成。我已经更新了我的帖子，我希望它更清楚地理解，如果没有，这里是它的外观截图：imgur.com/a/RtALRzN，这比只有 3 个帖子要复杂一些每行。【参考方案2】：

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

在您的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 );

在子主题目录下添加库文件

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

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

用正确的类编写 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>

为网格项编写 css

【讨论】：

以上是关于如何使用 PHP 将 WordPress 帖子堆叠到 3 个单独的列中？的主要内容，如果未能解决你的问题，请参考以下文章

Wordpress：逐月获取帖子，布局问题

php 无论如何，获取WordPress帖子图片。必须在循环中使用。

如何从 Wordpress 页面/帖子中获取所有标签作为简码列表？

使用 Wordpress 动态加载帖子

将图片插入帖子无法在WordPress中使用

使用 PHP 按类别过滤帖子