WordPress特效:日志slider效果(一)

wordpress-images-slider

之前讲过关于query_posts()加wp_query()所向无敌的文章。用这些,再加上一个美丽的js特效,可以将你的WordPress搞得更好看,更华丽,更好玩,更吸引人。只要你不嫌臃肿的话。

昨天有朋友问道我首页的那个slider效果是如何出来的,今天就把这个发布。既然可以结合各种js,有机会搞一个系列吧,方便喜欢的朋友直接拿来用。

先说一下,我首页的特效,演示看我首页,或者看这里

这段js特效的源代码可以在这里找到:http://www.dhteumeuleu.com/colorsyntax/viewJS.php?src=diapo-SH.html&sound=memories.mid

下面来说说如何将这个代码与WordPress相结合:

其实看了那个代码就不难看出,js东西不用管,实际上要做的事情就是把WordPress的日志按照以下的方式排列即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="slide">
			<img class="diapo" src="sf04.jpg" alt="">
			<div class="text">
				<span class="title">By close-alikes</span>
				Now I have regained hopes in someday finding...
			</div>
		</div>
		<div class="slide">
			<img class="diapo" src="sf01.jpg" alt="">
			<div class="text">
				  <span class="title">To bear</span>
				  We did not expect their surface to produce ...
			</div>
		</div>

通过这个可以看出,这个特效的实现只需要一张图片,一段描述。我们可以用一个 “custom field” 来解决图片,用日志摘要来实现文字调用,就好了。

已经如此明了,我的调用这样写:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="slider">
<?php $bssnslide = get_posts('numberposts=5&category=1'); foreach($bssnslide as $post) : setup_postdata($post); ?>
<div style="left: 0px;background:#B1E2FE" class="slide">
<a href="<?php the_permalink(); ?>">
<img alt="" style="opacity: 0.7; visibility: visible;" src="<?php $bssnslide=bssnslide; echo get_post_meta($post->ID, $bssnslide,$single = true); ?>" class="diapo">
</a>
<div style="top: 335px;" class="backgroundText"></div>
<div style="top: 200px;" class="text">
<span class="title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</span>
<p><?php the_excerpt(); ?></p>
</div></div>
<?php endforeach; ?>
<script type="text/javascript"> /* ==== start script ==== */ slider.init(); </script>
</div>

这里,我首先通过get_posts()限定调用分类与调用数目(get_posts(‘numberposts=5&category=1’)),然后分别调用标题(<?php the_title(); ?>),自定义图片(<img alt=”” style=”opacity: 0.7; visibility: visible;” src=”<?php $bssnslide=bssnslide; echo get_post_meta($post->ID, $bssnslide,$single = true); ?>” class=”diapo”>)和摘要(<?php the_excerpt(); ?>)。

这样这个日志slider效果就搞定了。我的自定义字段名用bssnslide,可以改成你想用的任何名字,发表文章是添加的自定义字段和这里调用的一样就哦了。至于你想调用多个栏目或者其他各种不同需求,参考get_posts()

另外js代码可以通过这里下载,将其插入到head区。

全文完。

复制代码的时候请注意下符号全半角的事情。

《WordPress特效:日志slider效果(一)》有11个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注