学做网站培训课程介绍

当前位置:

wordpress 添加banner切换图

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

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

wordpress自动调用后台图片的banner切换图

wordpress 添加banner切换图步骤

第一步:下载banner切换图幻灯片文件[下载地址:https://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号即可。

除了以上的方法能制作出banner切换图之外,还有其它很多方法,详细请看网站幻灯片代码大全

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 漂亮的wordpress淘客模板 图文教程 (111025 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发,自己比较喜欢。注意:此模板不支持IE6,
  • 用什么建网站?Wordpress建网站好不好?这些问题经常被新手问上问起。可以这样说,wordpress程序可以建各种类型的网站,它的功能强大之处令人称赞,
  • 网页如何添加背景音乐 视频教程附件下载 (1116827 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • QQ客服在很多网站都很普通,它可以很方便的让浏览我们网站的用户通过QQ进行交流,不需要去查找QQ再加好友,只需要点一下QQ客服上的图标就可以直接发信
  • wordpress 添加banner切换图 图文教程附件下载 (124541 次浏览)
    wordpress网站制作banner切换图的方法其实很多,有通过wordpress插件来制作的。但对于做网站的新手来说,能制作出wordpress网站自动调用后台网站内容
  • 图片轮播特效在网站制作过程中经常会用到,它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中,也讲过如何制作网站幻灯片,我们在学
  • 可以说任意一个网站都少不了换灯片,在之前的课程里学做网站论坛也列举了很多网站幻灯片代码,通过这些方法,我们可以制作作某一个规定尺寸的换灯片,
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自