经常有童鞋问如何将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行
下面。再把幻灯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 {
-
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:rightright;
-
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:rightright;
-
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独立博客模版中。
作者：知更鸟
