将WordPress内容集成到jQuery Slider中

时间:2012-02-14 作者:fred randall

在我的自定义WordPress主题中,我在我的内容上方实现了一个非常基本的“特色列表-图像滑块”。如何将WordPress内容集成到滑块中,以便通过“最近的帖子”或“类别”提取幻灯片内容?此外,如何设置“特色IMG”在滑块中显示为照片,并在列表区域中的我的缩略图部分中显示?

这是我在jQuery I插件上获得的截图;enter image description here<(他们的演示程序坏了,所以。)

Below is the markup I have implemented.

  <div id="featured" >  
    <ul class="ui-tabs-nav">  
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>David King – on his True Crime thriller</span></a></li>  
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>Tips from Steve Perry</span></a></li>  
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>Tips from Chuck Berry</span></a></li>  
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>SFIRS</span></a></li>  
     </ul>  




    <!-- First Content -->  
    <div id="fragment-1" class="ui-tabs-panel" style="">  
        <img src="images/image1.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >David King – on his True Crime thriller</a></h2>  
        <p>David King is Lorem Ipsum Lorem Ipsum Lorem Ipsum...<a href="#" >read more</a></p>  
        </div>  
    </div>  
    <!-- Second Content -->  
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">  
        <img src="images/image2.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >Tips from Steve Perry</a></h2>  
        <p>Steve Perry is Lorem Ipsum Lorem Ipsum Lorem Ipsum...<a href="#" >read more</a></p>  
        </div>  
    </div>  
    <!-- Third Content -->  
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">  
        <img src="images/image3.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >Tips from Chuck Berry</a></h2>  
        <p>Chuck Berry is Lorem Ipsum Lorem Ipsum Lorem Ipsum...<a href="#" >read more</a></p>  
        </div>  
    </div>  
    <!-- Fourth Content -->  
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">  
        <img src="images/image4.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>  
        <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>  
        </div>  
    </div>  
</div>  

2 个回复
最合适的回答,由SO网友:helgatheviking 整理而成

这只是将jquery ui选项卡标记转换为适当的wordpress函数的问题。文本是\\u title()或\\u摘录()。图像是\\u post\\u缩略图等。将其放在模板中希望滑块显示的位置:

// Get any existing copy of our transient data
if ( false === ( $featured_query_results = get_transient( \'featured_query_results\' ) ) ) {
    // It wasn\'t there, so regenerate the data and save the transient
    $args = array( \'numberposts\' => 5, \'cat\' => 11 );
    $featured_query_results = get_posts( $args );
    set_transient( \'featured_query_results\', $featured_query_results );
}

global $post;
$tmp_post = $post;

//if there are posts returned then we\'ll loop through them
if($featured_query_results):  ?>

<div id="featured"> 

<?php
$i=1;
$ul = \'<ul class="ui-tabs-nav">\';
$divs = \'\';
foreach( $featured_query_results as $post ) : setup_postdata($post); 
    //create the li nav element
    $ul .= \'<li><a href="#fragment-\'.$i.\'">\'.get_the_post_thumbnail(get_the_ID(),"thumbnail").\'<span>\'.get_the_title().\'</span></a></li>\';

    //create the div tab
    $divs .= \'<div id="fragment-\'.$i.\'">\';  
    $divs .= get_the_post_thumbnail(get_the_ID(),"large"); 
    $divs .= \'<div class="info" >\';
    $divs .= \'<h2><a href="\'.get_permalink().\'" >\'.get_the_title().\'</a></h2>\';
    $divs .= \'<p>\'.get_the_excerpt().\'<a href="\'.get_permalink().\'" >read more</a></p>\';
    $divs .= \'</div>\';
    $divs .= \'</div>\';
    $i++;

endforeach; 

//close out the unordered list
$ul .= \'</ul><!--.ui-tabs-nav-->\';

//echo out the results
echo $ul;
echo $divs;

?>

</div><!--#featured-->

<?php else: ?>

No matching posts found.

<?php endif; ?>
<?php $post = $tmp_post;
这就是你的功能。php

// Create a simple function to delete our transient when posts are saved/created
function delete_featured_query_transient() {
     delete_transient( \'featured_query_results\' );
}
add_action( \'save_post\', \'delete_featured_query_transient\' );
请注意,我正在使用

    $args = array( \'numberposts\' => 5, \'cat\' => 11 );
作为我的查询的参数。你会想用你自己的。您可能想注释掉

   set_transient( \'featured_query_results\', $featured_query_results );
行当您进行设置时,b/c它将在瞬态中存储查询结果,这样就不必反复进行相同的查询。当你写一篇新文章(我说的放在functions.php中的函数)时,transient会被删除,所以它总是最新的。通过将save\\u post挂钩中的delete函数更改为始终运行的函数(如init),可以始终删除瞬态。

SO网友:schizdazzle

听起来你需要做一个循环,这样你就可以查询最近的4篇文章(如果你可以在一个类别中进行查询,并且只显示4篇文章)。

<?php query_posts( \'showposts=4\' ); ?>

然后循环并在相关的地方插入字段。由于你有两个部分,即导航和主要内容,我认为你需要做两个循环。棘手的是,你的类会随着每篇文章而变化,所以请仔细检查ie中的类值<a href="#fragment-<?php $i ?>">. 无论如何

<?php query_posts( \'showposts=4\' ); ?>
<?php while (have_posts()) : the_post(); ?>
    <?php $i = 1 ?>
    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-<?php $i ?>">
        <a href="#fragment-<?php $i ?>">
            <?php the_post_thumbnail();?><span><?php the_title(); ?>/span>
        </a>
    </li>
    <?php i++ ?>
<?php endwhile;?>
这应该有助于导航。对于这些类,我使用了$I来给出值-只需再次检查它是否正确。

然后对内容部分执行另一个循环:

<?php query_posts( \'showposts=4\' ); ?>
<?php while (have_posts()) : the_post(); ?>
    <?php $j = 1 ?>
    <div id="fragment-<?php $j ?>" class="ui-tabs-panel" style="">  
        <?php the_post_thumbnail(large);?>
        <div class="info" >  
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>  
            <p>
                <?php the_excerpt(__(\'(...read more)\')); ?>
            </p>  
        </div>  
    </div>
    <?php $j++ ?>
<?php endwhile;?>
对于特色图片,您可以像我在这里所做的那样使用wordpress功能。

结束

相关推荐

jQuery Tabs in Shortcode API

html原型的Pastebin和我对wp函数的尝试->http://pastebin.com/91zBv8sk我想要一个简单的符号,以便新用户可以轻松使用。这样的话:[选项卡]第一个选项卡的内容第二个选项卡的内容[/选项卡]我理解为什么函数的符号是错误的,但我想我会放弃我最好的尝试。