wordpress怎麼製作banner

爱喝马黛茶的安东尼
發布: 2019-07-16 10:55:53
原創
3654 人瀏覽過

wordpress網站製作banner切換圖的方法其實很多,有透過wordpress外掛來製作的。但對於做網站的新手來說,能製作出wordpress網站自動呼叫後台網站內容的banner切換圖卻不是一件容易的事。

wordpress怎麼製作banner

下面分享一個製作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 = &#39;&#39;;
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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板