Wordpress Understrap在页面上显示帖子

Question

I'm learning how to use wordpress API. I'm a newbie with this framework, so I've decided to install Understrap to use the Bootstrap 4 framework and create a simple portfolio website. After googling a bit, I've started experimenting with the code, but there are many aspects of this wordpress theme that are unclear to me. I want to display some posts on a page and style how they will appear using the bootstrap classes markup. Is there any valid tutorial about or anyone can suggest to me the correct modifications I need to make to the template theme files?

I've tried to create a page named postpage.php with this code inside, but it will not be recognized from wordpress as a template model for a page. CODE:

<?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();
?>

Answer 1

First you need to specify that this is a page template by adding the following code to the top of your file:

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

Then it will show up in your page template dropdown. More info about page templates here.

In order to add Boostrap classes, you need to wrap the foreach statement in the Bootstrap containers and then change the ul to bootstrap columns:

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

</div>