wordpress網站製作banner切換圖的方法其實很多，有透過wordpress外掛來製作的。但對於做網站的新手來說，能製作出wordpress網站自動呼叫後台網站內容的banner切換圖卻不是一件容易的事。
下面分享一個製作wordpress 新增banner切換圖方法。先看下效果吧！
相關推薦：《WordPress教學》
wordpress 新增banner切換圖步驟
第一步：下載banner切換圖投影片檔案[下載位址：http://pan.baidu.com/s/1bnsevr5]
第二步：將下載下來的檔案解壓，並將JS資料夾放到主題資料夾下面。
第三步：將以下的js程式碼放入標籤裡面。
<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=[\'"]([^\'"]+)[\'"].* alt="wordpress怎麼製作banner" >/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的詳細內容。更多資訊請關注PHP中文網其他相關文章！
