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

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

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

第一步, 找一个网站拔一个幻灯片代码(是幻灯片嘛,用JS传递下变量),代码如下:

<script type= "text/javascript" >  //<![CDATA[   var  interval_time=0;  var  focus_width=280;  var  focus_height=170;  var  text_height=24;  var  text_align= "center" ;  var  swf_height=focus_height+text_height;  var  pics= "图片1|图片2" ;  var  links= "地址1|地址2" ;  var  texts= "文字1|文字2" ;  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 + '">' );  document.write( '<param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="images/focus.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#F0F0F0">' );  document.write( '<param name="menu" value="false"><param name=wmode value="opaque">' );  document.write( '<param name="FlashVars" value="pics=' +pics+ '&links=' +links+ '&texts=' +texts+ '&borderwidth=' +focus_width+ '&borderheight=' +focus_height+ '&textheight=' +text_height+ '">' );  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" />' );  document.write( '</object>' );  //]]>   </script> 

注意以下代码:

var  interval_time=0;  //切换时间 0就是默认了   var  focus_width=280; //图片的宽带   var  focus_height=170; //图片的高度   var  text_height=24; //文字框的高度   var  text_align= "center" ; //文字对齐方式   var  swf_height=focus_height+text_height; //FLASH的高度   var  pics= "图片1|图片2" ; //图片地址用[|]竖线隔开   var  links= "地址1|地址2" ; //连接地址用[|]竖线隔开   var  texts= "文字1|文字2" ; //文字内容<span style="line-height: 1.5;">用[|]竖线隔开</span>  

另外还要把:

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

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

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

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

因此可将:

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

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

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

下面是大地弄好后[供]出的代码:

<?php  $links = array ();  $links1 = '' ;?>  <?php  $texts = array ();  $texts1 = '' ;?>  <?php  $pics = array ();   $pics1 = '' ;?>    <?php       $arr  =  array ( 'meta_key'  =>  '_thumbnail_id' ,                   'showposts'  => 5,         // 显示5个特色图像                    'posts_per_page'  => 5,    // 显示5个特色图像                    'orderby'  =>  'date' ,      // 按发布时间先后顺序获取特色图像，可选：'title'、'rand'、'comment_count'等                    'ignore_sticky_posts'  => 1,                   'order'  =>  'DESC' );         $slideshow  =  new  WP_Query( $arr );       if  ( $slideshow ->have_posts()) {           $postCount  = 0;           while  ( $slideshow ->have_posts()) {               $slideshow ->the_post();  ?>  <?php  if  ( has_post_thumbnail()) : ?>            <?php  $links =get_permalink();  $links1 = $links1 . "" . $links . "|" ;?>    <?php  $texts =get_the_title();  $texts1 = $texts1 . "" . $texts . "|" ;?>  <?php  $pics =wp_get_attachment_image_src( get_post_thumbnail_id( $post ->ID),  'large' );  $pics1 = $pics1 . "" . $pics [0]. "|" ;?>    <?php  endif ; ?>     <?php          }  // endwhile           wp_reset_postdata();      }  // endif   ?>    <script type= "text/javascript" >  //<![CDATA[   var  interval_time=0;  var  focus_width=280;  var  focus_height=170;  var  text_height=24;  var  text_align= "center" ;  var  swf_height=focus_height+text_height;  var  pics= "<?php echo substr($pics1,0,strlen($pics1)-1);?>" ;  var  links= "<?php echo substr($links1,0,strlen($links1)-1);?>" ;  var  texts= "<?php echo substr($texts1,0,strlen($texts1)-1);?>" ;    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 + '">' );  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">' );  document.write( '<param name="menu" value="false"><param name=wmode value="opaque">' );  document.write( '<param name="FlashVars" value="pics=' +pics+ '&links=' +links+ '&texts=' +texts+ '&borderwidth=' +focus_width+ '&borderheight=' +focus_height+ '&textheight=' +text_height+ '">' );  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" />' );  document.write( '</object>' );  //]]>   </script> 

查看更多关于WordPress中如何加入自定义的幻灯片 - WordPress的详细内容...