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>