### [wordpress怎么制作banner](https://www.prosaas.cn/article/6659)

**Published:** 2019-07-16T02:55:53

**Author:** 5201314

**Excerpt:** wordpress网站制作banner切换图的方法其实很多，有通过wordpress插件来制作的。但对于做网站…

wordpress网站制作banner切换图的方法其实很多，有通过wordpress插件来制作的。但对于做网站的新手来说，能制作出wordpress网站自动调用后台网站内容的banner切换图却不是一件容易的事情。

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212125222494.jpg)

下面分享一个制作wordpress 添加banner切换图方法。先看下效果吧！

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212125222909.jpg)

相关推荐：《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的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** css, http, JS, php, WordPress

**Categories:** WordPress

---