将CMS首页焦点幻灯移植到BLOG布局中 - html/css语言

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

具体效果如图：

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

首先打开blog.php，把CMS首页焦点幻灯调用代码：

1. <?php include (TEMPLATEPATH . '/includes/slider.php'); ?>   
2. <?php wp_reset_query();?>   
3. <div class="clear12"></div>  

加第12行

1. <!-- end: navigation -->  

下面。再把幻灯JS代码：

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

加到header.php模版：

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

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

1. /** slideshow **/  
2. #slideshow {   
3.     position:relative;   
4.     background:#fff;   
5.     width:710px;   
6.     height:248px;   
7.     padding:10px;   
8.     border:1px solid #ccc;   
9.     }   
10. .slideshow {   
11.     width:710px;   
12.     height:248px;   
13.     overflow:hidden;   
14.     }   
15. .featured_post{   
16.     width:708px;   
17.     height:248px;   
18.     overflow:hidden;   
19.     }   
20. .slider_image,.slider_image img {   
21.     float: left;   
22.     width:400px;   
23.     height:248px;   
24.     }   
25. .slider_post {   
26.     float:rightright;   
27.     width:280px;   
28.     padding-right:10px;   
29.     }   
30. .slider_post p{   
31.     font-size:13px;   
32.     text-indent:2em;   
33.     margin-top:5px;   
34.     line-height:24px;   
35.     }   
36. #slider_nav  {   
37.     position:absolute;   
38.     z-index:999;   
39.     margin:210px 0 0 270px;   
40.     }   
41. #slider_nav a {   
42.     background:url(../images/slider_nav.png);   
43.     float:left;   
44.     line-height:24px;   
45.     padding:0 8px 0 8px;   
46.     color:#ebebeb;   
47.     text-shadow: none;   
48.     }   
49. #slider_nav a.activeSlide { color:#f99356;}   
50. #featured_tag {   
51.     background:url(../images/featured.png);   
52.     position:absolute;   
53.     width:21px;   
54.     height:79px;   
55.     left:0px;   
56.     top:20px;   
57.     z-index:999;   
58.     }   
59. .news {   
60.     position:absolute;   
61.     width:51px;   
62.     height:51px;   
63.     rightright:-3px;   
64.     top:-3px;   
65.     z-index:10;   
66.     }   
67. .cat_name {   
68.     position:absolute;   
69.     line-height:20px;   
70.     rightright:100px;   
71.     top:-1px;   
72.     text-align:center;   
73.     padding:0 20px 0 20px;   
74.     border:1px solid #ccc;   
75.     }   
76. #map_h {   
77.     width:980px;   
78.     }   
79. .time_h {   
80.     float: left;   
81.     margin: 0 0 0 10px;   
82.     }   
83. .tag_t {   
84.     float:rightright;   
85.     width:750px;   
86.     height:23px;   
87.     overflow:hidden;   
88.     }   
89. .tag_t a {   
90.     padding:0 0 0 10px;   
91.     font-weight:bold;   
92.     text-shadow: 0px 1px 0px #fff;   
93.     }   

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

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