WordPress中如何加入自定义的幻灯片

今天在大地【QQ朋友】在做网站的时候遇到了一个问题,就是像给自己做的wordpress主题上加上一个自定义的幻灯片(可能有的人会说,不是有插件么,还很漂亮,不要那么漂亮怎么办,只要简单、严肃),下面把解决的思路的方法和大家分享一下,感谢一下大地,咱们经常一起交流WordPress的问题(实干出真知,我也刚入门).

第一步,找一个网站拔一个幻灯片代码(是幻灯片嘛,用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; //切换时间 0就是默认了 
2. var focus_width=280;//图片的宽带 
3. var focus_height=170;//图片的高度 
4. var text_height=24;//文字框的高度 
5. var text_align="center";//文字对齐方式 
6. var swf_height=focus_height+text_height;//FLASH的高度 
7. var pics="图片1|图片2";//图片地址用“|”竖线隔开 
8. var links="地址1|地址2";//连接地址用“|”竖线隔开 
9. var texts="文字1|文字2";//文字内容<span style="line-height: 1.5;">用“|”竖线隔开</span> 

另外还要把:

<param name="movie" value="images/focus.swf"/> 中的images/focus.swf下载下来,具体的存放地址根据自己的,只要调用时能找到即可.

第二步,既然已经把幻灯片要用的东西都下载和准备好了,接下来就开始准备WordPress中取得相应的图片、文字、连接内容了.

先看一个调取缩略图的例子:

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

因此可将:

图片、标题、连接，先用一个数组保存起来,最后使用php 的implode("|",array)的方式把数组组合成字符串.

最后准备好的代码替换成并整合到主题模板文件中去就可以了:

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个特色图像 
8.                 'posts_per_page' => 5,   // 显示5个特色图像 
9.                 'orderby' => 'date',     // 按发布时间先后顺序获取特色图像，可选：'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>