专注帝国CMS、dedecms、WordPress网站建站教程。
当前位置: WordPress > wp怎么制作banner wordpress教程

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

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

相关推荐:《WordPress教程》

wordpress 添加banner切换图步骤

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

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

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

<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=[\'"]([^\'"]+)[\'"].*>/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的详细内容,更多请关注本站其它相关文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线