一个精美的幻灯片,对于追求完美博客,做出精品网站的你,绝对是必不可少的!
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代码源自百度有啊,经碎碎念修改制作而成,本文涉及内容仅供设计参考,严禁用于商业用途!