This is the site that I am working with. 我需要将绿色图像制作成最近帖子的缩略图，以便能够让内容作者/作者（非开发人员）指定一个缩略图显示在最近帖子的旋转木马中。我在wordpress中通过一个我正在设计的主题来实现这一点。我已经实现了旋转木马，但我不知道如何让绿色图像显示最近的帖子“缩略图”。
这是代码
<div class="jumbotron" >
<div class="container-fluid">
<div class="row" id="spacer"></div>
<div class="row" id="btn-row">
<div class="col-md-3"></div>
<div class="col-md-6" class="splash-btn-col">
<a href="http://52.35.5.149/content/content/" class="splash-btn">Content</a>
<a href="http://www.fractured-gaming.com/forums/" class="splash-btn">Forums</a>
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
<div class="item"><h1>16</h1></div>
</div>
<script>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger(\'owl.next\');
})
$(".prev").click(function(){
owl.trigger(\'owl.prev\');
})
$(".play").click(function(){
owl.trigger(\'owl.play\',1000); //owl.play event accept autoPlay speed as second parameter
})
$(".stop").click(function(){
owl.trigger(\'owl.stop\');
})
});
</script>
</div>
</div>
</div>
所以我在下面尝试了这个，它使屏幕变白了，当我用谷歌chrome检查时，由于某种原因，身体是空的。
<div class="jumbotron" >
<div class="container-fluid">
<div class="row" id="spacer"></div>
<div class="row" id="btn-row-fluid">
<div class="col-xs-3"></div>
<div class="col-xs-6" class="splash-btn-col">
<div class="col-xs-5">
<a href="http://52.35.5.149/content/content/" class="splash-btn" id="content-btn">Content</a>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-5">
<a href="http://www.fractured-gaming.com/forums/" class="splash-btn">Forums</a>
</div>
</div>
<div class="col-xs-3"></div>
</div>
<div class="row">
<div id="owl-demo" class="owl-carousel owl-theme">
<?php
$args = array(
\'post_type\' => \'post\', //this tells WP what type of posts you want to get (post, page, etc..)
\'posts_per_page\' => 1, // this is the number of posts you want to get
\'order\' => \'DESC\' // this is the order you want it to use
\'orderby\' => date // you want to order by date if you want the latest ones
);
// Custom query.
$query = new WP_Query( $args ); // creating the query
// Check that we have query results.
if ( $query->have_posts() ) {
// Start looping over the query results.
while ( $query->have_posts() ) {
//get the post
$query->the_post();
$id=get_the_ID(); //getting post id (not neccessary here)
$url=wp_get_attachment_image_src( get_post_thumbnail_id( $id ), \'full\' ); //getting the url of the post image
?>
<div class="item">
<a href="<?php the_permalink();?>"><img src="<?php echo $url;?>"></a>
</div>
<?php
}
}
// Restore original post data.
wp_reset_postdata();
?>
</div>
<script>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 6, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger(\'owl.next\');
})
$(".prev").click(function(){
owl.trigger(\'owl.prev\');
})
$(".play").click(function(){
owl.trigger(\'owl.play\',1000); //owl.play event accept autoPlay speed as second parameter
})
$(".stop").click(function(){
owl.trigger(\'owl.stop\');
})
});
</script>
</div>
</div>
</div>
:
