Bootstrap网格显示用户在wordpress中选择的帖子

时间:2016-09-13 12:33:52

标签: php wordpress twitter-bootstrap wordpress-theming

我正在尝试开发我的第一个wordpress主题,该主题应该显示带有4个图像的自举网格。每个图像都应链接到特定的帖子页面,用户可以在wp-admin部分中选择。

它还应该显示用户输入的一些文本和链接。

<div class="container">
    <div class="row">

        <div id ="show" class="col-xs-3 col-sm-1 col-md-1" ><img src="featured image of post user selected" alt="description of post user selected"/></div>
        <div id ="show" class="col-xs-3 col-sm-1 col-md-1" ><img src="featured image of post user selected" alt="description of post user selected"/></div>
        <div id ="show" class="col-xs-3 col-sm-1 col-md-1" ><img src="featured image of post user selected" alt="description of post user selected"/></div>
        <div id ="show" class="col-xs-3 col-sm-1 col-md-1" ><img src="featured image of post user selected" alt="description of post user selected"/></div>

        <div class="col-xs-12 col-sm-4 col-md-4"><p>some text the user specifys</p></div>
        <div class="col-xs-12 col-sm-3 col-md-3"><a href="a link the user specifys">my link</a></div>

    </div>
</div>

我已经研究过创建一个循环,但我不想简单地遍历我的帖子并显示第一个4.用户必须能够选择要在每个图像中显示哪些帖子。这可能吗?

1 个答案:

答案 0 :(得分:0)

在WP_Query

中插入HTML的解决方案

我为你做了一些快速的事情,如果你使用这段代码,你就可以把你想要的东西插入到正确的地方:

<?php

$lifestyle_cat = array(
    'category_name' => 'home',
    'showposts' => 4,
    'post_type' => 'post',
    'post_status' => 'publish',
    'orderby' => 'date',
    'order' => 'DESC'
);

$lifestyle_query = new WP_Query( $lifestyle_cat );
if ( $lifestyle_query->have_posts()) {
    $i = 0; 
    while ( $lifestyle_query->have_posts()) {
       $i++;
       $lifestyle_query->the_post(); ?>  
       <div id ="show" class="col-xs-3 col-sm-1 col-md-1" > 
       //title
       <?php  the_title();
        if (has_post_thumbnail()) { 
            // only print out the thumbnail if it actually has one
            the_post_thumbnail('thumbnail');
        }
    ?></div><?php
    } 
} 
?>

thumbnail reference

wp_query reference