简体   繁体   English

Wordpress Understrap在页面上显示帖子

[英]Wordpress Understrap display posts on a page

I'm learning how to use wordpress API. 我正在学习如何使用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. 我是该框架的新手,因此,我决定安装Understrap以使用Bootstrap 4框架并创建一个简单的产品组合网站。 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. 经过一番谷歌搜索之后,我开始尝试该代码,但是这个wordpress主题的许多方面对我来说还不清楚。 I want to display some posts on a page and style how they will appear using the bootstrap classes markup. 我想在页面上显示一些帖子,并使用bootstrap类标记来设置它们的显示样式。 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. 我试图用此代码创建一个名为postpage.php的页面,但是它不会被wordpress识别为页面的模板模型。 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();
?>

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: 为了添加Boostrap类,您需要在Bootstrap容器中包装foreach语句,然后将ul更改为bootstrap列:

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

If you want to use custom layout then you need to make a custom template and there you will add a page for using your custom templet. 如果要使用自定义布局,则需要制作一个自定义模板,然后在其中添加一个页面以使用您的自定义模板。 your custom template code will like this 您的自定义模板代码将如下所示

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM