Wordpress Understrap 在页面上显示帖子答案

【问题标题】：Wordpress Understrap display posts on a pageWordpress Understrap 在页面上显示帖子
【发布时间】：2019-03-16 20:44:30
【问题描述】：

我正在学习如何使用 wordpress API。我是这个框架的新手，所以我决定安装 Understrap 以使用 Bootstrap 4 框架并创建一个简单的投资组合网站。在谷歌搜索了一下之后，我开始尝试代码，但是这个 wordpress 主题的很多方面我都不清楚。我想在页面上显示一些帖子，并使用引导类标记设置它们的显示方式。是否有任何有效的教程或任何人都可以向我建议我需要对模板主题文件进行的正确修改？

我尝试使用此代码创建一个名为 postpage.php 的页面，但它不会被 wordpress 识别为页面的模板模型。代码：

<?php

$args = array(
'posts_per_page' => 6,
'offset' => 0,
'category' => 'portfolio',
'category_name' => '',
'orderby' => 'date',
'order' => 'DESC',
'include' => '', 'exclude' => '',
'meta_key' => '',
'meta_value' => '',
'post_type' => 'post', 'post_mime_type' => '',
'post_parent' => '',
'author' => '',
'post_status' => 'publish',
'suppress_filters' => true
);

$myposts = get_posts( $args );

foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php
endforeach;
wp_reset_postdata();
?>

【问题讨论】：

标签： php wordpress bootstrap-4

【解决方案1】：

首先，您需要通过将以下代码添加到文件顶部来指定这是一个页面模板：

<?php /* Template Name: Example Template */ ?>

然后它将显示在您的页面模板下拉列表中。有关page templates here 的更多信息。

为了添加 Boostrap 类，您需要将 foreach 语句包装在 Bootstrap 容器中，然后将 ul 更改为引导列：

<div class="container">
  <div class="row">
    <?php foreach ( $myposts as $post ) : setup_postdata($post ); ?>
    <div class="col-sm-4">
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </div>
    <?php endforeach; wp_reset_postdata(); ?>
  </div>
</div>

【讨论】：

好的，谢谢，我会试试代码，让你知道。我正在查看 understrap 的各种模板页面，我注意到它将使用 col-md-12 来包装所有站点内容。如果我想添加多行，我需要复制循环或类似的东西来显示内容吗？
您需要在foreach 语句中添加一个计数器，然后使用该计数来确定何时添加行结束 div 和新的开始行 div，这有点高级。 Bootstrap 的好处是它并不总是需要分成几行。例如，如果您有 12 个帖子并且使用了 4 个列 div，它会自动将帖子分成 4 行，即使它们都在同一个“行”内。
我的页面将基于 understrap 提供的空白模板，对于我是 wordpress 新手来说，这将更加可定制。你能从这段代码中确认我只需要添加正确的 bs4 标记吗？ <?php if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } get_header(); while ( have_posts() ) : the_post(); get_template_part( 'loop-templates/content', 'empty' ); endwhile; get_footer();
抱歉，我对 Understrap 没有任何经验。
别担心，你的回答对我帮助很大，现在我的页面模板工作正常，我只需要添加引导程序自定义标记。谢谢。

【解决方案2】：

如果您想使用自定义布局，那么您需要制作一个自定义模板，然后您将添加一个页面以使用您的自定义模板。您的自定义模板代码将像这样

<?php
/* Template Name: Your custom templete */
get_header();
?><?php $the_query = new WP_Query(array(
'category_name'    => 'popular',
'posts_per_page' => '6',
'order' => 'DESC', // Show only the published posts
));?>
<?php if( $the_query->have_posts() ): ?>
<?php while( $the_query->have_posts() ) : $the_query->the_post();?>
<div class="story-info">
<a class="category-name arts texunset" href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<span class="daycolor" style="background:<?php the_field('colorpost'); ?>;">&nbsp;</span>
<span>
<?php the_title(); ?>
</span>
</a>
<div class="date">
<?php the_time('F jS, Y') ?> &nbsp;|&nbsp;
<i class="fa fa-signal"></i>
</div>
</div>
<hr>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer();?>

【讨论】：