wordpress怎麼製作banner

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(&#39;template_directory&#39;); ?>/js/jquery-1.4a2.min.js" type="text
/javascript"></script>
<script type="text/javascript" src="<?php bloginfo(&#39;template_directory&#39;); ?>/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(&#39;/<img .+src=[\&#39;"]([^\&#39;"]+)[\&#39;"].* alt="wordpress怎麼製作banner" >/i&#39;, $post->post_content, $matches);
$first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = bloginfo(&#39;template_url&#39;) 
. "/images/default.jpg";
};
return $first_img;
}

第五步：將下面的程式碼放到需要顯示banner切換圖的DIV中，用於呼叫網站後台某個分類下的文章中的圖片【cat=5 分類號碼可以自行修改】

<div id="KinSlideshow" style="visibility:hidden;">
<?php if (have_posts()) : ?>
<?php query_posts(&#39;cat=5&#39; . $mcatID. &#39;&caller_get_posts=1&showposts=4&#39;); ?>
<?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中文網其他相關文章！