成为VIPwordpress怎么制作banner
wordpress网站制作banner切换图的方法其实很多，有通过wordpress插件来制作的。但对于做网站的新手来说，能制作出wordpress网站自动调用后台网站内容的banner切换图却不是一件容易的事情。
下面分享一个制作wordpress 添加banner切换图方法。先看下效果吧！
相关推荐：《WordPress教程》
wordpress 添加banner切换图步骤
第一步：下载banner切换图幻灯片文件[下载地址：http://pan.baidu.com/s/1bnsevr5]
第二步：将下载下来的文件解压，并将JS文件夹放到主题文件夹下面。
第三步：将以下的js代码放9c3bca370b5104690d9ef395f2c5f8d1标签里面。
<script type=text/javascript src=<?php bloginfo('template_directory'); ?>/js/jquery-1.4a2.min.js type=text
/javascript></script>
<script type=text/javascript src=<?php bloginfo('template_directory'); ?>/js/jquery.KinSlideshow-1.2.1.min.js
type=text/javascript></script>
<script type=text/javascript>
$(function(){
$(#KinSlideshow).KinSlideshow();
})
</script>
第四步：在网站模板函数文件functions.php中加入以下代码，用于调用文章中的图片。
//缩略图
function get_first_image() {
global $post;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\']([^\']+)[\'].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = bloginfo('template_url')
. /images/default.jpg;
};
return $first_img;
}
第五步：将下面的代码放到需要显示banner切换图的DIV中，用于调用网站后台某个分类下的文章中的图片【cat=5 分类号可以自己修改】
<div id=KinSlideshow style=visibility:hidden;>
<?php if (have_posts()) : ?>
<?php query_posts('cat=5' . $mcatID. '&caller_get_posts=1&showposts=4'); ?>
<?php while (have_posts()) : the_post(); ?>
<a href=<?php the_permalink(); ?> target=_blank title=<?php the_title(); ?>><img src=<?php echo get_first_image
(); ?> /></a>
<?php endwhile;?>
<?php endif; wp_reset_query(); ?>
</div>
第六步：将以下的CSS样式放到style.css的最下方，用于控制banner切换图的尺寸及样式。
/*幻灯片*/
#KinSlideshow {float:left;height:300px;background:#999; margin-top:5px; margin-bottom:5px; }
#KinSlideshow img {width:1008px;height:300px;}
第七步：自己在网站后台创建一个分类目录，取名为“幻灯片”，然后在这个分类中发布四篇文章，每篇文章中发一张图片，图片尺寸应用你网站的宽度一致。然后将上面【第五步】代码中的ID号改成这个分类的ID号即可。
以上就是wordpress怎么制作banner的详细内容，更多请关注双恒网络其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
