wordpress怎么制作banner

WordPress网站制作banner切换图的方法其实很多,有通过wordpress插件来制作的。但对于做网站的新手来说,能制作出wordpress网站自动调用后台网站内容的banner切换图却不是一件容易的事情。

wordpress怎么制作banner

下面分享一个制作wordpress 添加banner切换图方法。先看下效果吧!

wordpress怎么制作banner

相关推荐:《WordPress教程

wordpress 添加banner切换图步骤

第一步:下载banner切换图幻灯片文件[下载地址:http://pan.baidu.com/s/1bnsevr5]

第二步:将下载下来的文件解压,并将JS文件夹放到主题文件夹下面。

第三步:将以下的js代码放标签里面。

<script>/js/jquery-1.4a2.min.js" type="text /javascript"></script><script>/js/jquery.KinSlideshow-1.2.1.min.js"  type="text/javascript"></script><script> $(function(){ $("#KinSlideshow").KinSlideshow(); }) </script>

第四步:在网站模板函数文件functions.php中加入以下代码,用于调用文章中的图片。

//缩略图 function get_first_image() { global $post; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/@@##@@/i', $post-&gt;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> <?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>" target="_blank" title="<?php  the_title(); ?>"&gt;@@##@@" /&gt;</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怎么制作bannerwordpress怎么制作banner

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享