我是wordpress的初学者。我需要将帖子图像实现为背景图像滑块,并在该帖子上添加链接。我有这样的滑块。look at first slideshow.但我无法从所有帖子中获取所有图片,我只从第一篇帖子中获取图片,并将其作为背景,请帮助。这是标题。php
<div class="slideshow">
<div class="banner-image">
<a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail(\'banner-image\'); ?></a> <!--фотка -->
</div>
<div class="banner-image">
<a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail(\'banner-image\'); ?></a> <!--фотка -->
</div>
<div class="banner-image">
<a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail(\'banner-image\'); ?></a> <!--фотка -->
</div>
<button class="button display-right animate-opacity" onclick="plusDivs(-1)">❮</button>
<button class="button display-left animate-opacity" onclick="plusDivs(1)">❯</button>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("banner-image");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.opacity = "0"
}
x[slideIndex-1].style.opacity = "1";
}
</script>
这是函数。php<代码>
<?php
function learningCode(){
wp_enqueue_style(\'style?v=30\', get_stylesheet_uri());
wp_enqueue_style(\'fonts\', get_template_directory_uri() . \'/css/fonts/fonts.css\' , array(), \'1.0.0\');
wp_enqueue_script(\'customjs\', get_template_directory_uri() . \'/js/common.js\' , array(), \'1.0.2\');
wp_enqueue_script(\'jquery\');
}
add_action(\'wp_enqueue_scripts\', \'learningCode\');
function theme_setup(){
// navigation menu
register_nav_menus(array(
\'primary\' => __( \'Primary Menu\'),
\'footer\' => __( \'Footer Menu\'),
));
// adding images
add_theme_support(\'post-thumbnails\');
add_image_size(\'small-thumbnail\', 180, 120, true);
add_image_size(\'banner-image\');
}
add_action(\'after_setup_theme\', \'theme_setup\');
正如你所看到的,无论我点击哪里,都有2个左右按钮,我在不同的地方看到1个拾取。默认此图像位于上方,然后位于中间,在最后三个位置单击其下方。
最合适的回答,由SO网友:Porosh Ahammed 整理而成
您可以将以下代码用于查询:
<div class="w3-content w3-display-container">
<?php
$slider = new WP_Query(array(
\'post_type\' => \'post\',
\'posts_per_page\' => 5,
\'post_status\' => \'publish\',
));
if($slider->have_posts()) :
while($slider->have_posts()) : $slider->the_post();
?>
<div class="w3-display-container mySlides">
<a href="">
<?php the_post_thumbnail(\'large\'); ?>
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Trolltunga, Norway
</div>
</a>
</div>
<?php
endwhile;
endif;
?>
<button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">❯</button>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>