如何爲我的WordPress博客創建一個帖子滑塊，如theverge.com上的產品滑塊

Question

我想在類似於The Verge上的「產品」滑塊的水平滑塊中顯示我的Wordpress blog（德語）上的所有博客文章（在主頁的中途）。我的博客是基於論文主題。

對於每篇文章，我都定義了一個縮略圖和一個簡短的標題作爲自定義字段。

我發現了各種插件，如「WP精選內容滑塊」或「WP Coda滑塊」，但它們都不接近我正在尋找的滑塊。看起來非常有希望的是「移動盒子」jQuery滑塊，但由於我對jQuery（和Javascript）的瞭解有限，因此我無法使其工作。

有誰知道如何建立這樣的滑塊？還是有插件或工具可用，我沒有遇到過呢？

任何幫助表示讚賞！

Answer 1

菲利普我可以幫助你。

您需要創建兩個循環，一個用於處理sliderview的主要內容，另一個用於填充縮略圖以對應相對的帖子。

這個例子是鬆散的，但你可以在網上找到更好的 - 你要知道，你將要使用的$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>'; 
    } 
});