今天在大地【QQ朋友】在做網(wǎng)站的時(shí)候遇到了一個(gè)問(wèn)題,就是像給自己做的wordpress主題上加上一個(gè)自定義的幻燈片(可能有的人會(huì)說(shuō),不是有插件么,還很漂亮,不要那么漂亮怎么辦,只要簡(jiǎn)單、嚴(yán)肅),下面把解決的思路的方法和大家分享一下,感謝一下大地,咱們經(jīng)常一起交流WordPress的問(wèn)題(實(shí)干出真知,我也剛?cè)腴T).

第一步,找一個(gè)網(wǎng)站拔一個(gè)幻燈片代碼(是幻燈片嘛,用JS傳遞下變量),代碼如下:

1. <script type="text/javascript"> 
2. //<![CDATA[ 
3. var interval_time=0; 
4. var focus_width=280; 
5. var focus_height=170; 
6. var text_height=24; 
7. var text_align="center"; 
8. var swf_height=focus_height+text_height; 
9. var pics="圖片1|圖片2"; 
10. var links="地址1|地址2"; 
11. var texts="文字1|文字2"; 
12. document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">'); 
13. document.write('<param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="images/focus.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#F0F0F0">'); 
14. document.write('<param name="menu" value="false"><param name=wmode value="opaque">'); 
15. document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">'); 
16. document.write('<embed src="images/focus.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); 
17. document.write('</object>'); 
18. //]]> 
19. </script> 

注意以下代碼:

1. var interval_time=0; //切換時(shí)間 0就是默認(rèn)了 
2. var focus_width=280;//圖片的寬帶 
3. var focus_height=170;//圖片的高度 
4. var text_height=24;//文字框的高度 
5. var text_align="center";//文字對(duì)齊方式 
6. var swf_height=focus_height+text_height;//FLASH的高度 
7. var pics="圖片1|圖片2";//圖片地址用“|”豎線隔開 
8. var links="地址1|地址2";//連接地址用“|”豎線隔開 
9. var texts="文字1|文字2";//文字內(nèi)容<span style="line-height: 1.5;">用“|”豎線隔開</span> 

另外還要把:

<param name="movie" value="images/focus.swf"/> 中的images/focus.swf下載下來(lái),具體的存放地址根據(jù)自己的,只要調(diào)用時(shí)能找到即可.

第二步,既然已經(jīng)把幻燈片要用的東西都下載和準(zhǔn)備好了,接下來(lái)就開始準(zhǔn)備WordPress中取得相應(yīng)的圖片、文字、連接內(nèi)容了.

先看一個(gè)調(diào)取縮略圖的例子:

1. <?php  
2.   $thumbnails = get_posts('numberposts=5'); 
3.   foreach ($thumbnails as $thumbnail) { 
4.     if ( has_post_thumbnail($thumbnail->ID)) { 
5.       echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">'; 
6.       echo get_the_post_thumbnail($thumbnail->ID, array(100,100)); 
7.       echo '</a>'; 
8.     } 
9.   } 
10. ?> 

因此可將:

圖片、標(biāo)題、連接，先用一個(gè)數(shù)組保存起來(lái),最后使用php 的implode("|",array)的方式把數(shù)組組合成字符串.

最后準(zhǔn)備好的代碼替換成并整合到主題模板文件中去就可以了:

1. var pics='<?php echo implode('|',$img) ?>'; 
2. var links='<?php echo implode('|',$links) ?>'; 
3. var texts=<span style="line-height: 1.5;">'<?php echo implode('|',$title) ?>'; 

下面是大地弄好后“供”出的代碼:

1. <?php $links=array(); $links1='';?> 
2. <?php $texts=array(); $texts1='';?> 
3. <?php $pics=array();  $pics1='';?> 
4.  
5. <?php 
6.     $arr = array('meta_key' => '_thumbnail_id', 
7.                 'showposts' => 5,        // 顯示5個(gè)特色圖像 
8.                 'posts_per_page' => 5,   // 顯示5個(gè)特色圖像 
9.                 'orderby' => 'date',     // 按發(fā)布時(shí)間先后順序獲取特色圖像，可選：'title'、'rand'、'comment_count'等 
10.                 'ignore_sticky_posts' => 1, 
11.                 'order' => 'DESC'); 
12.  
13.     $slideshow = new WP_Query($arr); 
14.     if ($slideshow->have_posts()) { 
15.         $postCount = 0; 
16.         while ($slideshow->have_posts()) { 
17.             $slideshow->the_post(); 
18. ?> 
19. <?php if ( has_post_thumbnail()) : ?> 
20.          
21. <?php $links=get_permalink(); $links1=$links1."".$links."|";?>   
22. <?php $texts=get_the_title(); $texts1=$texts1."".$texts."|";?> 
23. <?php $pics=wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large'); $pics1=$pics1."".$pics[0]."|";?> 
24.  
25. <?php endif; ?> 
26.    <?php 
27.         } // endwhile 
28.         wp_reset_postdata(); 
29.     } // endif 
30. ?> 
31.  
32. <script type="text/javascript"> 
33. //<![CDATA[ 
34. var interval_time=0; 
35. var focus_width=280; 
36. var focus_height=170; 
37. var text_height=24; 
38. var text_align="center"; 
39. var swf_height=focus_height+text_height; 
40. var pics="<?php echo substr($pics1,0,strlen($pics1)-1);?>"; 
41. var links="<?php echo substr($links1,0,strlen($links1)-1);?>"; 
42. var texts="<?php echo substr($texts1,0,strlen($texts1)-1);?>"; 
43.  
44. document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">'); 
45. document.write('<param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="<?php bloginfo('template_url'); ?>/images/pixviewer.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#F0F0F0">'); 
46. document.write('<param name="menu" value="false"><param name=wmode value="opaque">'); 
47. document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">'); 
48. document.write('<embed src="<?php bloginfo('template_url'); ?>/images/pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); 
49. document.write('</object>'); 
50. //]]> 
51. </script>