当前位置:首页 > CMS教程 > WordPress > 列表

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

发布:smiling 来源: PHP粉丝网  添加日期:2014-05-24 10:41:37 浏览: 评论:0 

今天在大地【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> 

Tags: WordPress 幻灯片

分享到: