商务网站首页制作教案

深圳网站建设公司经常有童鞋问如何将CMS首页焦点幻灯也显示在BLOG布局中，留言中无法说明白，现在就教大家将CMS首页焦点幻灯移植到BLOG布局中，不要看见长长的代码就头晕，只要按着下面的步骤操作就可以了。

具体效果如图：

提示：编辑修改模版文件，请使用notepad++或EmEditor文本编辑软件，通过FTP软件上传覆盖原文件，或者在Wordpress后台外观编辑中修改模版文件，切记不能用操作系统自带的记事本修改中文模板，否则会改变模版编码，造成主题错位或乱码（中文模版编码为：UTF-8 无BOM）。首先打开blog.php，把CMS首页焦点幻灯调用代码：

?php include (TEMPLATEPATH . '/includes/slider.php'); ?
?php wp_reset_query();?
div class="clear12"/div

加第12行

!-- end: navigation --

下面。再把幻灯JS代码：

script type="text/javascript" src="?php bloginfo('template_directory'); ?/js/jquery.cycle.all.min.js"/script

加到header.php模版：

script type="text/javascript" src="?php bloginfo('template_directory'); ?/js/muscript.js"/script

后面。将幻灯样式加到HotNewspro\css目录中的css.css最后：

/** slideshow **/
#slideshow {
position:relative;
background:#fff;
width:710px;
height:248px;
padding:10px;
border:1px 广西网站建设公司 solid #ccc;
}
.slideshow {
width:710px;
网站建设公司 height:248px;
overflow:hidden;
}
.featured_post{
width:708px;
height:248px;
overflow:hidden;
}
.slider_image,.slider_image img {
float: left;
width:400px;
height:248px;
}
.slider_post {
float:right;
width:280px;
padding-right:10px;
}
.slider_post p{
font-size:13px;
text-indent:2em;
margin-top:5px;
line-height:24px;
}
#slider_nav {
position:absolute;
z-index:999;
margin:210px 0 0 270px;
}
#slider_nav a {
background:url(../images/slider_nav.png);
float:left;
line-height:24px;
padding:0 8px 0 8px;
color:#ebebeb;
text-shadow: none;
}
#slider_nav a.activeSlide { color:#f99356;}
#featured_tag {
background:url(../images/featured.png);
position:absolute;
width:21px;
height:79px;
left:0px;
top:20px;
z-index:999;
}
.news {
商务网站首页制作教案 position:absolute;
width:51px;
height:51px;
rightright:-3px;
top:-3px;
z-index:10;
}
.cat_name {
position:absolute;
line-height:20px;
rightright:100px;
top:-1px;
text-align:center;
padding:0 20px 0 20px;
border:1px solid #ccc;
}
#map_h {
width:980px;
}
.time_h {
float: left;
margin: 0 0 0 10px;
}
.tag_t {
float:right;
width:750px;
height:23px;
overflow:hidden;
}
.tag_t a {
padding:0 0 0 10px;
font-weight:bold;
text-shadow: 0px 1px 0px #fff;
}

最后刷新页面，看看是不是幻灯也正常显示在BLOG布局中了。

同理，还可将幻灯加到blog_page.php独立博客模版中。

原文地址：知更鸟