Question

我在自定义Wordpress主题中的内容上方实现了一个非常基本的“精选列表 - 图像滑块”。我想知道如何在两者之间硬编码PHP以将我的滑块连接到我的'主题'。我正在尝试'主题'滑块，以便通过“Recent-Posts”或“类别”来提取内容。我如何设置'Featured Imgs'作为滑块内的照片显示并显示在列表区域中我的缩放缩略图部分？

这是我选择的jQuery I插件的屏幕截图; enter image description here
（他们的演示已经破了，所以。）

以下是我已实施的标记。

  <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>

Updated Q here, with up to date attempt, still not solved

最新更新： 仍然试图让图片进入。我已经尝试了Suni的建议，但仍然无法让他们在滑块内拉入（他们最终填充在外面）

我在下面尝试了一些：

<?php
$i = 1;
foreach ($posts_array as $post) :  setup_postdata($post); 
<?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >'; the_post_thumbnail('thumbnail'); echo '</a>'; } ?>
?> 


<?php
$i = 1;
foreach ($posts_array as $post) :  setup_postdata($post); 
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');    
?> 


 <?php
    $i = 1;
    foreach ($posts_array as $post) :  setup_postdata($post); 
    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); <a  href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >  
?> 

    <?php
        $i = 1;
        foreach ($posts_array as $post) :  setup_postdata($post); ?> 

<?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >'; the_post_thumbnail('thumbnail'); echo '</a>'; } ?>

Answer 1

我就是这样做的。

您要使用的帖子基本上需要两个循环 - 一个用于创建标签，一个用于创建内容。为避免执行两个数据库查询，请从一个查询中缓存数组中的帖子，并在该数组上使用foreach循环。

使用自定义查询获取要在滑块中使用的帖子对象：http://codex.wordpress.org/Class_Reference/WP_Query

免责声明：这不会逐字逐句，但应该为您提供所需的框架

<?php

$post_data = array();

// Use a custom query to get the posts you want for your slider
$the_query = new WP_Query( $args );

// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post();

    $post_data[] = $post;

endwhile;

// Reset Post Data
wp_reset_postdata();

?>

<div id="featured" >

    <ul class="ui-tabs-nav">  

    <?php 
    foreach($post_data as $key => $post){

      // Out put the markup + data from the $post object that you need for your tabs

    } 
    ?>

    </ul>

    <?php 
    foreach($post_data as $key => $post){

      // Out put the markup + data from the $post object that you need for your slider fragments

    } 
    ?>

</div>

Answer 2

Hi, you can user get_posts to fetch posts.

以下是代码..未经测试..

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme'

 */

//get_header(); ?>        
<div id="content"> 

<?php if (have_posts()) : ?>

<!--Your slider code goes here-->

<?php 
$args = array(
              'numberposts'     => 5,
              'orderby'         => 'post_date',
              'order'           => 'DESC'
);
$posts_array = get_posts( $args ); 
?>       

<div id="featured" >  
<ul class="ui-tabs-nav">

<?php
$i = 1;
foreach ($posts_array as $post) :  setup_postdata($post); 
?> 

<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-<?php echo $i; ?>">
  <a href="#fragment-1"><img src="" alt="" style="display:none;"/>
    <span>
      <?php the_title(); ?><br />
      <p class="info" style="padding-left:10px;"><?php the_excerpt(); ?></p>
    </span>
  </a>
</li> 
<?php $i++; 
endforeach; ?>
</ul>
<?php
$i = 1;
foreach ($posts_array as $post) :  setup_postdata($post); 
?>

<!-- First Content -->  
<div id="fragment-<?php echo $i; ?>" class="ui-tabs-panel" style="">
  <img src="<?php the_post_thumbnail('slider_image'); ?>" alt="" />  
  <div class="info">
    <h2><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h2>
    <p><?php the_excerpt(); ?><a href="<?php the_permalink(); ?>" >read more</a></p>  
  </div>  
</div>  
<?php $i++; endforeach; ?>


</div>  

<!--Your slider code goes here-->
<!-- End Featured Lists Image Slider -->        

<?php endif; ?>

使用PHP在WP中'主题'我的滑块

2 个答案: