当前位置:爱推吧 » WordPress技巧 » 为主题isblog添加幻灯效果

为主题isblog添加幻灯效果

前几天发布了一个使用自定义字体的文章《通过自定义字段让你的文章链接到外部资源

有朋友想要在主题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:加入幻灯会对网站的速度有一定的影响,请自己权衡.

用上面的方法整出来的效果不太好,故研究了一上午,根据 Nivo又弄出来了一个,效果还不错,就是本博客用的。如果诸位需要的话,随后放出此教程!

发表评论

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