wordpress 添加banner切换图（wordpress怎么添加图片）

发布时间：2023-04-10 10:43:44

文章来源：快乐收录网

访问次数：

wordpress网站制作banner切换图的方法其实很多，有通过wordpress插件来制作的。但对于做网站的新手来说，能制作出wordpress网站自动调用后台网站内容的banner切换图却不是一件容易的事情。（相关知识：如何制作网站轮播图）xFL快乐收录网

下面学做网站论坛分享一个制作wordpress 添加banner切换图方法。先看下效果吧！xFL快乐收录网

xFL快乐收录网

wordpress 添加banner切换图步骤

第一步：下载banner切换图幻灯片文件[下载地址：https://pan.baidu.com/s/1bnsevr5]xFL快乐收录网

第二步：将下载下来的文件解压，并将JS文件夹放到主题文件夹下面.xFL快乐收录网

第三步：将以下的js代码放</head>标签里面xFL快乐收录网

$(function(){xFL快乐收录网

$("#KinSlideshow").KinSlideshow();xFL快乐收录网

})xFL快乐收录网

</script>

第四步：在网站模板函数文件functions.php中加入以下代码，用于调用文章中的图片。xFL快乐收录网

//缩略图xFL快乐收录网

function get_first_image() {xFL快乐收录网

global $post;xFL快乐收录网

$first_img = ;xFL快乐收录网

ob_start();xFL快乐收录网

ob_end_clean();xFL快乐收录网

$output = preg_match_all(//i, $post->post_content, $matches);xFL快乐收录网

$first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = bloginfo(template_url) . "/images/default.jpg";xFL快乐收录网

};xFL快乐收录网

return $first_img;xFL快乐收录网

}

第五步：将下面的代码放到需要显示banner切换图的DIV中，用于调用网站后台某个分类下的文章中的图片【cat=5 分类号可以自己修改】xFL快乐收录网

</div>

第六步：将以下的CSS样式放到style.css的特别下方，用于控制banner切换图的尺寸及样式。xFL快乐收录网

/*幻灯片*/xFL快乐收录网

#KinSlideshow {float:left;height:300px;background:#999; margin-top:5px; margin-bottom:5px; }xFL快乐收录网

#KinSlideshow img {width:1008px;height:300px;}

第七步：自己在网站后台创建一个分类目录，取名为“幻灯片”，然后在这个分类中发布四片文章，每片文章中发一张图片，图片尺寸应用你网站的宽度一致。然后将上面【第五步】代码中的ID号改成这个分类的ID号即可。xFL快乐收录网

除了以上的方法能制作出banner切换图之外，还有其它很多方法，详细请看网站幻灯片代码大全。xFL快乐收录网

　　《wordpress 添加banner切换图（wordpress怎么添加图片）》更新于时间：2023-04-10 10:43:44；由本站小编进行发布，目前浏览的小伙伴达到，感谢你们的支持，后期快乐收录网小编会继续为大家更新更多相关的文章，希望广大网友多多关注快乐收录网工作心得栏目，如果觉得本站不错，那就给我们一个分享的支持吧！

wordpress 添加banner切换图（wordpress怎么添加图片）特别声明

本站快乐收录网提供的wordpress 添加banner切换图（wordpress怎么添加图片）都来源于网络，不保证文章的准确性和真实性，同时，对于该文章所造成的影响，不由快乐收录网实际控制，在2023-04-10 10:43:44收录时，该网页上的内容，都属于合规合法，如有侵权违规，可以直接联系网站管理员进行整改或删除，快乐收录网不承担任何责任。

快乐收录网：致力于优质、实用的网络站点资源收集与分享！本文地址：https://nav.klxjz.cn/CMS/WordPress/93497.html转载请注明

标签：

资讯分类