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中文網其他相關文章!