如何为我的 Wordpress 博客创建帖子滑块，例如 theverge.com 上的产品滑块 [关闭]

Question

我想在我的Wordpress blog（德语）上的所有博客文章显示在一个水平滑块中，类似于The Verge 上的“产品”滑块（主页的一半）。我的博客是基于论文主题的。

我为每个帖子定义了一个缩略图和帖子的短标题作为自定义字段。

我找到了各种插件，例如“WP Featured Content Slider”或“WP Coda Slider”，但它们都不是我要找的滑块。看起来很有希望的是“移动框”jQuery 滑块，但由于我对 jQuery（和 Javascript）的了解有限，我没能成功。

有人知道如何制作这样的滑块吗？或者是否有我还没有遇到的可用插件或工具？

感谢任何帮助！

Answer 1

菲利普，我可以帮你。

您需要创建两个循环，一个用于处理滑块视图的主要内容，另一个用于填充缩略图以对应相关帖子。

这个例子很松散，但你可以在网上找到更好的例子 - 请注意，你会想要使用 $wp_query 函数，以便获得更准确的帖子列表

我强烈推荐使用jQuery Cycle

<!-- loop for slider -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div id="slider">
<!-- format your posts-->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>

<!-- loop for thumbnails -->

<div class="nav">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<!-- format your thumbnails -->

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>


// then call your slideshow

$('#slider').after('<ul id="nav">').cycle({ 
    fx:     'scrollHorz', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav', 

    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
    } 
});