WordPress中如何加入自定義的幻燈片

2024-09-07 00:50:45

字體：大中小

來源：轉載

供稿：網友

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