WordPress網站制作banner切換圖的方法其實很多，有通過wordpress插件來制作的。但對于做網站的新手來說，能制作出wordpress網站自動調用后臺網站內容的banner切換圖卻不是一件容易的事情。
下面分享一個制作wordpress 添加banner切換圖方法。先看下效果吧！
相關推薦：《WordPress教程》
wordpress 添加banner切換圖步驟
第一步：下載banner切換圖幻燈片文件[下載地址：http://pan.baidu.com/s/1bnsevr5]
第二步：將下載下來的文件解壓，并將JS文件夾放到主題文件夾下面。
第三步：將以下的js代碼放標簽里面。
<script>/js/jquery-1.4a2.min.js" type="text /javascript"></script><script>/js/jquery.KinSlideshow-1.2.1.min.js" type="text/javascript"></script><script> $(function(){ $("#KinSlideshow").KinSlideshow(); }) </script>
第四步：在網站模板函數文件functions.php中加入以下代碼，用于調用文章中的圖片。
//縮略圖 function?get_first_image()?{ global?$post; $first_img?=?''; ob_start(); ob_end_clean(); $output?=?preg_match_all('/@@##@@/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> <?php if (have_posts()) : ?><?php query_posts('cat=5' . $mcatID. '&caller_get_posts=1&showposts=4'); ?><?php while (have_posts()) : the_post(); ?><a>"?target="_blank"?title="<?php the_title(); ?>">@@##@@"?/></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號即可。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
