wordpress 添加banner切換圖
2018-11-02 來源：學(xué)做網(wǎng)站論壇
wordpress網(wǎng)站制作banner切換圖的方法其實(shí)很多，有通過wordpress插件來制作的。但對于做網(wǎng)站的新手來說，能制作出wordpress網(wǎng)站自動調(diào)用后臺網(wǎng)站內(nèi)容的banner切換圖卻不是一件容易的事情。（相關(guān)知識：如何制作網(wǎng)站輪播圖）
下面學(xué)做網(wǎng)站論壇分享一個(gè)制作wordpress 添加banner切換圖方法。先看下效果吧！
wordpress 添加banner切換圖步驟
第一步：下載banner切換圖幻燈片文件[下載地址：http://pan.baidu.com/s/1bnsevr5]
第二步：將下載下來的文件解壓，并將JS文件夾放到主題文件夾下面.
第三步：將以下的js代碼放</head>標(biāo)簽里面
<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>
第四步：在網(wǎng)站模板函數(shù)文件functions.php中加入以下代碼，用于調(diào)用文章中的圖片。
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中，用于調(diào)用網(wǎng)站后臺某個(gè)分類下的文章中的圖片【cat=5 分類號可以自己修改】
<?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;}
第七步：自己在網(wǎng)站后臺創(chuàng)建一個(gè)分類目錄，取名為“幻燈片”，然后在這個(gè)分類中發(fā)布四片文章，每片文章中發(fā)一張圖片，圖片尺寸應(yīng)用你網(wǎng)站的寬度一致。然后將上面【第五步】代碼中的ID號改成這個(gè)分類的ID號即可。
除了以上的方法能制作出banner切換圖之外，還有其它很多方法，詳細(xì)請看網(wǎng)站幻燈片代碼大全。
標(biāo)簽： 代碼 網(wǎng)站模板 網(wǎng)站制作 制作網(wǎng)站
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
