2012-02-14 57 views
1

我有一個非常基本的「功能列表 - 圖像滑塊」上面我在我的自定義WordPress的主題內容來實現。我想知道如何將PHP中的硬編碼連接到我的'主題'。 我想「主題」滑塊,這樣的內容是通過「最近,帖子」或通過「類別」拉。以及我如何設置'精選圖像'作爲照片顯示在滑塊內並顯示在列表區域中的多個縮略圖部分中?「更換主題皮膚」我在WP滑塊與PHP

這裏是jQuery的截圖我插件我就撿起上; 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

最新的更新:仍然試圖讓圖像在拉我試過蘇尼的建議,但還是不能讓他們在滑塊內拉(他們最終填充外)

一些我已經試過如下:

<?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>'; } ?> 
+0

雖然你認爲它是基本的,但它比你想象的要多。 – 2012-02-14 21:45:47

+0

幾個小時已經證明!但仍然有建議? – 2012-02-14 21:46:39

+1

試試這個開始。 http://codex.wordpress.org/Writing_a_Plugin – 2012-02-14 21:49:54

回答

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; ?> 
+0

謝謝,但用了你的代碼在31行 – 2012-03-19 12:23:58

+0

我已經編輯解析錯誤代碼請現在檢查 – 2012-03-19 13:04:53

+1

我測試了這個解決方案,它可以工作,我儘可以測試它,即我無法測試javascript部分。唯一的小錯誤是第一個列表沒有結束ul標記。我會編輯它,但我沒有編輯權限。 – Gohn67 2012-03-22 13:47:32

2

這是我會怎麼做。

您需要在您要使用的職位主要有兩個迴路 - 一個創建選項卡,一個創建內容。爲避免執行兩次數據庫查詢,請緩存數組中一個查詢的帖子,並在該數組上使用foreach循環。

使用自定義查詢來獲取你想要在你的滑塊使用POST對象: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>