前几天发布了一个使用自定义字体的文章《通过自定义字段让你的文章链接到外部资源》
有朋友想要在主题isblog里面添加一个幻灯的效果,于是就查了一些资料找到了决定使用
orbit来实现首页幻灯的效果.
首先从orbit下载实现WordPress幻灯效果的源文件orbit-1.2.3.zip ,我们使用的文件只是其中的3个文件,一个jquery.orbit-1.2.3.min.js ,一个jquery-1.5.1.min.js ,一个是demo-style.css ,好了,找到这三个文件以后,把他们加入到相应主题目录的js和CSS文件夹内,同时把orbit文件夹放入img文件夹里面，然后在header.php的<head></head>之间,添加如下代码:
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/orbit-1.2.3.css" />
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.orbit-1.2.3.min.js" ></script>而这个jquery-1.5.1.min.js库文件,主题本身就有,不用再加载了.
还得在头部加一个调用代码:
<script type="text/javascript">
$(document).ready(function(){
$('#featured').orbit();
});
</script>好了,这几个文件加载完毕以后,在你需要调用幻灯的地方加入如下代码:
<!--幻灯开始-->
<div id="featured">
<?php
// The Query
$the_query = new WP_Query('meta_key=show');
// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post();
include('includes/thumb.php');
endwhile;
// Reset Post Data
wp_reset_postdata();
?>
</div>我把它们加入在index.php中的开头,在<?php get_header(); ?>下一行.(Note:id=“featured”,这个id的值一定是featured,否则无法调用.),
把.mar_bot{margin-bottom:5px; } 加入到css的样式中,是为了添加一个5px的下边距.
意思就是给文章添加了一个自定义字段show ,幻灯处显示的文章为添加了自定义字段show,(note:置顶的文章,也会在此处显示) , include('includes/thumb.php'); 这个代码是为了调用文章的图片.这个文件我也添加到压缩包里了,自行下载就OK了.记得把它放入到主题的includes文件夹下面.
对于thumb.php里面的代码我有必要说两句.代码如下:
<?php if ( get_post_meta($post->ID, 'thumb', true) ) : ?>
<?php $image = get_post_meta($post->ID, 'thumb', true); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>"/></a>
<?php else: ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<?php if (has_post_thumbnail()) { the_post_thumbnail('thumbnail'); }
else { ?>
<img src="<?php echo catch_first_image() ?>" width="940px" height="450px" alt="<?php the_title(); ?>"/>
<?php } ?>
</a>
<?php endif; ?>Thumb也是一个自定义的字段,你在写文章的时候可以加入,添加thumb的值即是图片的url链接地址.也就是要显示的图片.如果不自定义thumb这个自定义字段,它会默认调用幻灯处要显示文件的第一张图片.最好把图片做成940*450大小,当然这个值你自己可以把握.
显示幻灯片的代码大体就这样了. 如果你有不同的想法,可以一起讨论,当然还有更多的幻灯插件供大家选择.
所需文件下载：实现幻灯效果的文件
Ps:加入幻灯会对网站的速度有一定的影响,请自己权衡.
