公告:123目录网为广大站长提供免费收录网站服务,我们将免费进行到底,如需快审服务(10元/站)请联系站长QQ,可自助充值发布。

点击这里在线咨询客服
新站提交
  • 网站:315
  • 待审:0
  • 小程序:12
  • 文章:35791
  • 会员:69

 

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

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

wordpress 添加banner切换图步骤

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

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

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

$(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->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>

第六步:将以下的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长文章分页(wordpress neve)

上一篇:wordpress文章调用顶级父级目录名称(wordpress调用arry指定值)

相关文章

  admin95360564zxm

注册时间:

网站:1 个   小程序:3 个  文章:12 篇

  • 315

    网站

  • 12

    小程序

  • 35791

    文章

  • 69

    会员

赶快注册账号,推广您的网站吧!
最新入驻小程序

数独大挑战2018-06-03

数独一种数学游戏,玩家需要根据9

答题星2018-06-03

您可以通过答题星轻松地创建试卷

全阶人生考试2018-06-03

各种考试题,题库,初中,高中,大学四六

运动步数有氧达人2018-06-03

记录运动步数,积累氧气值。还可偷

每日养生app2018-06-03

每日养生,天天健康

体育训练成绩评定2018-06-03

通用课目体育训练成绩评定