给你的wordpress添加幻灯片吧!

一个精美的幻灯片,对于追求完美博客,做出精品网站的你,绝对是必不可少的!

wordpress的拓展性非常强,普普通通的页面,在程序猿、攻城狮的手上,必定是花开灿烂,光艳照人啊!

碎碎念已经痴迷上了wordpress博客设计了,放牛哥说我博客做不好就不舒服是种病,得治!我个人觉得,这不是一种病,这是一种怪病,爱上设计的怪病,一般人追求一个东西,是达到极致即可,而我,总是在达到一定的层面后,突然的一个想法,就让我把前面垒起的高塔统统推倒,从新来过,势必做到惊天地泣鬼神,结果,还没震撼到别人,碎碎念自己已经瘫倒在地,哀鸣着:“这特么,不是我要的效果呀!!不精彩,不华丽,不完美啊!!!”话毕,吐了一地的鸡血啊!然后把鸡血收拾收拾,重新开始上路了。。。。

今天给大家说说我这个图文幻灯片的结构吧。貌似,我已经很久没有出来爆代码了~~

添加后台设置

首先,在网站后台设置文件theme_options.php添加幻灯片的开关和设置选项:

array( "name" => "是否显示幻灯片",
"desc" => "默认显示",
"id" => $shortname."_slider",
"type" => "select",
"std" => "Hide",
"options" => array("Display", "Hide")),
array( "name" => "<span class='child'>显示多少篇文章</span>",
"id" => $shortname."_sliderx",
"type" => "text",
"std" => "5"),
array( "name" => "<span class='child'>选择幻灯片显示的内容</span>",
"desc" => "<span class='child'>默认显示【置顶文章】,如果你选择【特定分类的文章】,请接着设置下面的选项</span>",
"id" => $shortname."_sliders",
"type" => "select",
"std" => "置顶文章",
"options" => array("置顶文章", "特定分类的文章")),
array( "name" => "<span class='child'>幻灯片显示的特定分类ID</span>",
"desc" => "<span class='child'>输入分类ID,多个分类ID请用英文逗号","隔开</span>",
"id" => $shortname."_cat_slider",
"type" => "text",
"std" => "1,2,3,4"),

这里,我们提供了幻灯片是否开启、显示文章个数、显示文章类别(特定分类或者置顶文章)。一般来说,如果开启幻灯片,最适合的文章数量为5个,显示的为置顶文章。

构建幻灯片html文件

接着,我们在includes目录下新建一个slider.php ,输入以下代码:

<div id="box">
<div id="container">
<?php if (get_option('swt_sliders') == '特定分类的文章') { ?>
<?php include(TEMPLATEPATH . '/includes/cat_slider.php'); ?>
<?php } else { include(TEMPLATEPATH . '/includes/sti_slider.php'); } ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="item">
<div class="pic">
<a href="<?php the_permalink() ?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>">
<?php if (has_post_thumbnail()) { the_post_thumbnail('thumbnail'); } else { ?>
<img class="home-thumb" title="<?php the_title(); ?>" src="<?php echo catch_first_image() ?>" alt="<?php the_title(); ?>"/>
<?php } ?>
</a></div>
<div class="con_post"><?php echo mb_strimwidth(strip_tags(apply_filters('the_excerpt', $post->post_content)), 0, 400,"...");?></div>
<div class="slititle"><h3><a href="<?php the_permalink() ?>" rel="bookmark" target="_blank" title="猛戳畅读 《<?php the_title_attribute(); ?>》"><?php echo mb_strimwidth(get_the_title(), 0, 38, '...'); ?></a></h3></div>
</div>
<?php endwhile; ?>
<?php endif; ?> </div>
<div id="control"></div>
<div class="clear0"></div>
</div>

其中,<?php if (has_post_thumbnail()) { the_post_thumbnail('thumbnail'); } else { ?><img class="home-thumb" title="<?php the_title(); ?>" src="<?php echo catch_first_image() ?>" alt="<?php the_title(); ?>"/><?php } ?>是调用文章首张图片的缩略图,如果没有,则调用主题默认图片。可以直接替换为你自己主题的图片调用代码,这里仅针对本站主题说明。

子模块文件

幻灯片文件建立后,我们还需要两个文章,一个用来调用置顶文章,一个用来调用特定分类文章。在slider.php中,我们调用了这两个文件:

<?php if (get_option('swt_sliders') == '特定分类的文章') { ?>
<?php include(TEMPLATEPATH . '/includes/cat_slider.php'); ?>
<?php } else { include(TEMPLATEPATH . '/includes/sti_slider.php'); } ?>

特定分类文章cat_slider.php和置顶文章sti_slider.php
在slider.php所在同级目录includes下新建cat_slider.php,键入以下代码:

<?php
$cat_slider = explode(',', get_option('swt_cat_slider'));
$sliderx = get_option('swt_sliderx');
query_posts(array(
'posts_per_page' =>$sliderx,
'category__in' =>$cat_slider,
'caller_get_posts' => 10,
)
);
?>

注意,这里最多调用10篇置顶文章,相信一般也不会超过这个数的。

同样地,我们建立sti_slider.php,键入下列代码:

<?php
$sliderx = get_option('swt_sliderx');
query_posts(array(
'posts_per_page' =>$sliderx,
'post__in' => get_option('sticky_posts'),
'caller_get_posts' => 10
)
);
?>

幻灯片javascript脚本

幻灯片的内容设置完了,还差什么呢?
还差一个JS来让它动起来!我比较喜欢特别一点的效果,所以就让幻灯片从下往上渐变切换,采用的是百度有啊的广告幻灯源码,修改方向和各种参数,层叠切换,抽离的感觉啊有木有!把切换时间调小,切换超爽快!
在JS文件夹下新建一个slider.js :

function autoslider(obj)
{this.obj=$(obj);
this.container=$("container");
this.control=$("control");
this.items=$$$("item",this.container);
this.iCenter=2;
this.aSort=[];
this.timer=null;
this.oData=[
{top:-440,left:0,zIndex:3,opacity:0},
{top:-220,left:0,zIndex:3,opacity:0},
{top:0,left:0,zIndex:4,opacity:100},
{top:220,left:0,zIndex:3,opacity:0},
{top:440,left:0,zIndex:3,opacity:0}
];
this.__create__()};
autoslider.prototype.__create__=function()
{var that=this;
var oSpan=null;
var i=0;
for(i=0;i<that.items.length;i++)
{that.items[i].number=i;
that.aSort[i]=that.items[i];
oSpan=document.createElement("span");
oSpan.number=i;
that.control.appendChild(oSpan)}
for(i=0;i<2;i++)this.aSort.unshift(this.aSort.pop());
that.aSpan=$$("span",that.control);
that.control.onmouseover=function(ev)
{var oEv=ev||event;
var oTarget=oEv.target||oEv.srcElement;
if(oTarget.tagName.toUpperCase()=="SPAN")
{that.aSort.sort(function(a,b){return a.number-b.number});
if(oTarget.number<that.iCenter)
{for(i=0;i<that.iCenter-oTarget.number;i++)
that.aSort.unshift(that.aSort.pop());
that.__set__();
return false}
else if(oTarget.number>that.iCenter)
{for(i=0;
i<oTarget.number-that.iCenter;i++)that.aSort.push(that.aSort.shift());
that.__set__();
return false}
else
{that.__set__()}}}
this.__set__();
this.__switch__();
this.__autoPlay__()};
autoslider.prototype.__set__=function()
{var i=0;
for(i=0;
i<this.aSort.length;i++)this.container.appendChild(this.aSort[i]);
for(i=0;
i<this.aSpan.length;i++)this.aSpan[i].className="";
this.aSpan[this.aSort[this.iCenter].number].className="active";
for(i=0;i<this.aSort.length;i++)
{this.aSort[i].index=i;
if(i<5)
{new Animate(this.aSort[i],this.oData[i]);}
else
{new Animate(this.aSort[i],this.oData[this.oData.length-1])}}};
autoslider.prototype.__switch__=function()
{var i=0;
var that=this;
this.container.onclick=function(ev)
{var oEv=ev||event;
var oTarget=oEv.target||oEv.srcElement;
var index=findItem(oTarget);
if(index<that.iCenter)
{for(i=0;
i<that.iCenter-index;i++)that.aSort.unshift(that.aSort.pop());
that.__set__();return false}
else if(index>that.iCenter)
{for(i=0;
i<index-that.iCenter;i++)that.aSort.push(that.aSort.shift());
that.__set__();return false}
function findItem(element)
{return element.className=="item"?element.index:arguments.callee(element.parentNode)}};};
autoslider.prototype.__autoPlay__=function()
{var that=this;
that.timer=setInterval(function()
{that.aSort[3].click()},3000);
that.obj.onmouseover=function()
{clearInterval(that.timer)};
that.obj.onmouseout=function()
{that.timer=setInterval(function()
{that.aSort[3].click()},3000)}};
function $(id)
{return typeof id==="string"?document.getElementById(id):id};
function $$(tagName,oParent)
{return(oParent||document).getElementsByTagName(tagName)};
function $$$(className,element,tagName)
{var i=0;
var aClass=[];
var reClass=new RegExp("(^|//s)"+className+"(//s|$)");
var aElement=$$(tagName||"*",element||document);
for(i=0;i<aElement.length;i++)reClass.test(aElement[i].className)&&aClass.push(aElement[i]);
return aClass};
function css(element,attr,value)
{if(arguments.length==2)
{if(typeof arguments[1]==="string")
{return element.currentStyle?element.currentStyle[attr]:getComputedStyle(element,null)[attr]}
else
{for(var property in attr)
{property=="opacity"?(element.style.filter="alpha(opacity="+attr[property]+")",element.style.opacity=attr[property]/100):element.style[property]=attr[property]}}}
else if(arguments.length==3)
{switch(attr)
{case"width":case"height":case"top":case"left":case"right":case"bottom":element.style[attr]=value+"px";
break;
case"opacity":element.style.filter="alpha(opacity="+value+")";
element.style.opacity=value/100;
break;
default:element.style[attr]=value;
break}}
return element};
function Animate(element,options,fnCallBack)
{this.obj=$(element);
this.options=options;
this.__onEnd__=fnCallBack;
this.__startMove__()};
Animate.prototype.__startMove__=function()
{var that=this;
clearInterval(that.obj.timer);
that.obj.timer=setInterval(function()
{that.__doMove__()},30);};
Animate.prototype.__doMove__=function()
{var complete=true;
var property=null;
for(property in this.options)
{var iCur=parseFloat(css(this.obj,property));
property=="opacity"&&(iCur=parseInt(iCur.toFixed(2)*100));
var iSpeed=(this.options[property]-iCur)/5;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
this.options[property]==iCur||(complete=false,css(this.obj,property,iSpeed+iCur))}
complete&&(clearInterval(this.obj.timer),this.__onEnd__&&this.__onEnd__.apply(this.obj))};
window.onload=function()
{new autoslider("box")};

说明:(以上JS代码源自百度有啊,仅供开发设计参考,严禁用于商业用途,否则后果自负!)由于WP调用的是jquery库,所以把$都换成jQuery了!

(如果在进行其他wordpress调用js测试的过程中出现js失效,很有可能就是你复制过来的JS代码没有把$转换成jQuery。改变它,你会发现一切都那么顺利!)

前台调用幻灯片

幻灯片前台后台的排版和动作都设置完了,接下来,要在调用的地方来调用幻灯片,以Mystyle为例,我们在首页index.php调用幻灯片:

<?php if (get_option('swt_slider') == 'Display') { ?>
<?php include(TEMPLATEPATH . '/includes/slider.php'); //幻灯片?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/slider.js"></script>
<?php } else {echo ''; } ?>
<div class="clear"></div>

嗯,我们的准备都完成了,好像幻灯片已经准备就绪了吧,要不就直接put上去吧!No,no,no,还不能上线。纳尼!?

CSS样式

还缺少什么呀?
缺少样式呀骚年,木有样式你叫我看个XX啊?
大叔!你早点说嘛!敲得我头痛死了!
咳咳!样式表,拿去吧!从此,你就自己LU去吧!
style.css加入:

/** 幻灯片 **/
li{list-style:none;}
#box{width: 718px;margin:-18px auto 5px auto;border: 1px solid #ccc;background: #fff;-webkit-box-shadow: inset 0 -1px 10px #ddd; -moz-box-shadow:inset 0 -1px 10px #ddd; box-shadow:inset 0 -1px 10px #ddd;}
#container{position:relative;height: 222px;z-index:0;background:#FFFFFF;overflow:hidden;padding:2px 0;}
#container .item{position:absolute;top:0;z-index:0;width: 718px;height: 220px;opacity:1;background:#ffffff;}
#container .item .pic{ float:left; width: 277px; height: 220px;display:inline;}
#container .item .pic a{ color:#333333; }
#container .item .pic a:hover{ color:#0088bb; }
#container .item .pic img{width: 257px;height: 200px;vertical-align:top;padding: 10px;border: 0;}
#container .home-thumb {max-height:200px;}
.con_post {float: right;width: 417px;height: 196px;padding: 12px;line-height: 25px;text-indent: 2em;}
.slititle {padding: 10px;height: 16px;width: 400px;background: #fff;float: left;display: none;}
.slititle h3 {font-size: 16px;font-weight: normal;}
.slititle h3 a{color:#000;border-bottom: 2px solid #08B;}
.slititle h3 a:hover{color:#0088bb;}
#control{height: 18px;width: 278px;text-align: center;}
#control span{width: 20px;height: 8px;font-size:0;line-height:0;cursor:pointer;display:inline-block;background: #08b;margin-right:5px;margin-top: 3px;}
#control span.active{background: #F0586C;}
.slider_num{float:right;font-size:12px; padding:1px 5px 0 5px;line-height:20px; height:20px;}
.slider_num a:link{color:#0088bb;}
.slider_num a:hover{text-decoration:none;color:#C05732;margin:5px;}

严重声明(不是郑重声明咩?O(╯□╰)o):本幻灯片PHP代码来源于奶酪设计RayCMS主题,JS代码源自百度有啊,经碎碎念修改制作而成,本文涉及内容仅供设计参考,严禁用于商业用途!

NOOLDEY

本文作者:NOOLDEY

做一个诗情画意的码农,皮皮猪,我们走!

原文链接: http://zhuweisheng.com.cn/wordpress/wp-slider/

本站文章如无特殊声明均为原创,创作不易,转载请注明来源,谢谢!