Mr.Bssn’s WeBlog

之前讲过关于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的日志按照以下的方式排列即可：

<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” 来解决图片，用日志摘要来实现文字调用，就好了。

已经如此明了，我的调用这样写：

<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区。

全文完。

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

随机日志

• QQ2008正式版会员涂鸦表情破解及方法
• Linux指令大全 - 1
• X4extender Penis Enlarger
• 回家，祝武晓惠同学新婚快乐。
• 茴香豆的茴字有34种鞋带的系法