经常有童鞋问如何将CMS首页焦点幻灯也显示在BLOG布局中，留言中无法说明白，现在就教大家将CMS首页焦点幻灯移植到BLOG布局中，不要看见长长的代码就头晕，只要按着下面的步骤操作就可以了。
具体效果如图：
此文于2011年11月3日23点修正，排除BLOG布局置顶文章显示，参考来自官方Codex
提示：编辑修改模版文件，请使用notepad++或EmEditor文本编辑软件，通过FTP软件上传覆盖原文件，或者在Wordpress后台外观→编辑中修改模版文件，切记不能用操作系统自带的记事本修改中文模板， 否则会改变模版编码，造成主题错位或乱码（中文模版编码为：UTF-8 无BOM）。
一、打开blog.php，把CMS首页焦点幻灯调用代码：
- <?php include (TEMPLATEPATH . '/includes/slider.php'); ?>
- <?php wp_reset_query();?>
- <div class="clear12"></div>
- <?php
- $sticky = get_option( 'sticky_posts' );
- $args = array(
- 'ignore_sticky_posts' => 1,
- 'post__not_in' => $sticky,
- 'paged' => $paged
- );
- query_posts( $args );
- ?>
加到第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独立博客模版中。
另有童鞋问如何将顶部的热点文章加到CMS首页去，这个简单些：
用下面的代码：
- <?php if (get_option('swt_hot') == 'Hide') { ?>
- <!-- header_image -->
- <div class="banner">
- <?php
- $header_image = get_header_image();
- if ( ! emptyempty( $header_image ) ) :
- ?>
- <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
- <?php endif;?>
- </div>
- <!-- end:header_image -->
- <?php } else { include(TEMPLATEPATH . '/includes/top_hot_a.php'); } ?>
替换header_h.php中138到140行：
- <div id="map_h">
- <div class="tag_t"><?php wp_tag_cloud('smallest=12&largest=12&orderby=count&unit=px&order=&order=RAND&exclude&include=&number='.get_option('swt_top_tag'));?></div>
- </div>
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
1F
呵呵，不错呀，谢谢分享了
2F
越来越强大了，必须的支持！
3F
谢谢了！太好了！
4F
不错不错，嘿嘿！
5F
收藏了 找很久了
6F
哈哈，谢谢哦，今天下午你在邮件里还跟我说等有空你写一个教材，没想到这么快就出来啦。真是太感谢了。不过改变后BLOG布局里有一点我觉得还是不如意，那就是热度旁边那个图表黄色的“新”我总觉得不如CMS布局里红色的“NEW”来得美观和醒目！
7F
强烈支持，我本来都想修改的，可是鉴于我对代码的不熟悉，修改不成功..谢谢提供..如果后台有个开启开关那是更好地..
8F
在cms模式下如何在底部分类中添加内容，我的底部8个分类中只显示一个分类名称，并且都是空的，还有就是如何添加分类图标，多谢帮忙给看一下http://www.gmpee.org
B1
@ gaogao 看使用说明
9F
应该加大这类局部应用分享，让不太懂技术的博友也能自己动手修改自己喜欢的theme。
10F
很不错的效果，回去试试看
11F
blog布局改好后，登陆后界面出错，原来在顶部的变在了底部，是这样的，而且奇怪的是，改完后，好几个中文输入法不能用了~~~
这个出现在左下角了，而且是文字形式。原来在顶：
12F
是在你这个留言版不能用ＡＢＣ输入法
B1
@ lovemurder 经测试未发现，这个就是用ＡＢＣ输入法打的
13F
那个幻灯右下脚的“12345”数字后面的小灰色方块也不见啦~~~
B1
@ lovemurder 教程中每一步都不少，否则就是这样了
估计你未加载幻灯JS
14F
在写个把blog顶部那4个转到CMS
B1
@ 亮亮 这是个蛋疼的问题，NO
B1
@ 亮亮 这个就很容易修改..看看我的博客吧，是否你想要的..我的博客好像就有你描述的样板..我修改了，可以正常使用..
15F
哎呀呀，又有新东西，马上试用！
16F
修改添加后，是可以显示幻灯片，可是原本旁边有文字描述的，修改添加后却为空..修改了多次还是一样..最后换回去了..
B1
@ 殊仙俺亦 可以重新复制样式代码，之前的代码有点错误
B2
@ 知更鸟 谢谢站长的提示与跟进..回去我试试..
B2
@ 知更鸟 请问鸟哥，哪里有错啦？哈哈，今天我重新做了一次，弄好了。就是登陆后，那个原来在顶部的管理菜单还是跑最底部去了。能修复就好，但其实这个问题也不大，不影响普通用户浏览就好~~~
17F
行了~为什么没有显示多个幻灯片呢？
B1
@ 小坚 总共三步，你丢了一步，未加载JS文件
18F
最近发现一个趋势，博客往CMS方向发展，CMS往博客发展
19F
哈哈，原来不止我一个人需要这样的效果
前一段时间已经实现了，现在想实现文章自动伸缩功能，搞不过来
非常感谢鸟大的这款主题，折腾性太强大了
20F
行啦~第二步代码加错了。~嘿嘿~
再问问鸟哥，复制代码的时候怎么去掉左边的数字序号呀~
刚那份css的代码我一个个删掉的 1. 2. 3. ~
B1
@ 小坚 杯具…请使用Firefox或chrome和opera，复制代码，就是不能用IE
21F
哥哥，真牛啊，主题不错，赞一下
22F
又有疑问，幻灯片的文章能够自定义吗？比如按照热点，现在好像是按照更新时间的，这样首页重复内容了哦
B1
@ 小坚 设置日志置顶，使用说明中已写
B2
@ 知更鸟 发现一个问题，如果设置5篇日志置顶，幻灯片是置顶文章里，但是日志置顶，幻灯片下面的文章显示的前五篇都是置顶的文章，这个跟按照更新时间显示效果一样，最好能设置成安装blog模式中顶部热点图片hot的模式！～
B3
@ 非常木 赞同哦 要怎么修改呢 我的现在置顶 跟幻灯片是重复的文章
B4
@ T.K 文章已更新的，此问题已解决…
B3
@ 非常木 文章已更新的，此问题已解决
23F
我发现在第三步中background:url(../images/featured.png)这个，需要把两点改成一点才能正常显示featured.png和slider_nav.png，不知道大家的情况是怎么样的。
24F
鸟哥，刚闲逛一个博客，人家说换主题了，原因是因为你的主题太好但太多人用了。。
啥时候你要弄个收费就好了，我们愿意买呃【我说这句话会被人海扁吧。。。】
B1
@ 小坚 是啊，用的人确实多，目前的版本下载已超过1万
想弄个独一无二的主题，就只有订制了
B2
@ 知更鸟 鸟哥 帮我也看看 我按照那三部 把代码都弄进去了 怎么还没有显示呢
B3
@ ohiyu 提示：使用或修改主题请保持页脚作者链接，谢谢！
25F
新建页面后，会在页脚显示。这个怎么去掉？鸟哥的搜索，为啥老是不能用，您站内容忒多了。找晕了，都找不到。
26F
鸟哥，有一个问题。为什么我在把所有文章删除并且清空回收站以后，首页右侧还可以看到那些文章的列表呢？鼠标移动到上面会显示文章内，但点击后进入的是未知页面，内容为“对不起！这个真没有”
博客留言，没有图，不知道你能看明白不~~~
B1
@ lovemurder 你的问题还真不少，呵呵
文章删除后，应该不会出现你说明的情况
主题支持留言贴图，没看见下面的“插入图片”？
27F
鸟哥。这个留言字数即时数据统计怎么弄的。。
B1
@ 强龙 这只是个试验的东西，没什么用
B2
@ 知更鸟 留言字数统计这段js有问题，超500字不提示，messagemessage.value多了一个message
28F
Google XML Sitemaps很好用
不過最近遇到困擾,Google說每個Sitemap只能有50000條網址,超過了怎麼辦?
Google XML Sitemaps並沒有自動切割的功能?
麻煩鳥哥解惑
B1
@ 蘇丞泰 如果真有此事，那么5万篇文章，对一般网站就是天文数字了，我开博三四年也就几百篇日志，再过十年二十年，5万也不可能达到，是不是
29F
不错很给力分享了
30F
你的模板有更新哦，啥时候发布出来呢？
B1
@ 四川人 没有什么值得的更新的
31F
鸟哥，网站最底部最右边的那个 xx次查询 是什么意思？
B1
@ 小坚 数据库查询
32F
学习了,这个插件不错
33F
鸟哥，在wordpress主题设置的“订阅”里面，有两个要填的内容，“输入你的Feed地址”和“输入你的订阅HTML代码”，前面的我搞定了，但是后面那个是什么呀？我一直没弄明白。
B1
@ lovemurder 添加烧录网站提供的HMTL代码
B2
@ 知更鸟 鸟哥，我还真没找到。它只给了我一个Feed地址，比如你的这个站点的Feed地址就是：http://feed.feedsky.com/zmingcx
那个订阅HTML代码还真没有。你能把你的截图给我看看吗？谢谢！
B3
@ lovemurder 晕….
登录feedsky.com—–我的Feeds—–进入管理——-Feed发布—–选择下面的图标后，HTML代码就在下面
这个feedsky已是个死站，加了代码会影响打开速度
34F
路过学习鸟 对这些还是不太懂- –
35F
嘿嘿，这个不错，感谢分享。
36F
受益匪浅啊
37F
学习了
38F
这东西看不懂啊大哥、、、
39F
感谢鸟哥，已经顺利改好，偶尔也换换blog模式的首页。
40F
鸟哥 下边的分享小图标是怎么搞的？
41F
感谢分享~~~~~
42F
鸟哥分享的太好了
43F
我在网上看到很多人在用这个主题，准备近期把博客主题换了
44F
呜呜 没能成功····
45F
鸟哥 为什么 我按照你的三步都操作了 也没有错 为什么 还是没有显示 求解
46F
请问怎么像你一样域名不显示www呢?
B1
@ 小z 你域名不解析www.主机不配置www.不就行了
B2
@ clairelume 但是那样就不行了！必须要www 好像说的是香港虚拟机必须用www 是这样么？
B3
@ 小z 貌似有这一说。我朋友的一个主机也是，不用设置，默认就给你开了个www的
47F
你的主页用谷歌浏览器打开有错位！
48F
这个弄起来有点小麻烦
49F
我不会告诉博主，我看了这文章
50F
成功移植。不过一直以后感觉幻灯和顶部热点文章有点类似，想去掉首页顶部的热点文章，但是不影响其他页面的热点文章显示，应该怎么操作呢，鸟哥
51F
感谢，先前那个问题可以不问了，呵呵！看到这个明白了。
52F
一个字：好！
53F
测试您的
54F
鸟哥，我加完代码后幻灯片怎么就显示一页呢？
55F
鸟哥，怎么修改才能让文章只显示标题呢？
56F
将CMS首页焦点幻灯移植到BLOG布局中 已经按你的方法做 之前是可以的 但现在又不行了 是什么问题呢
57F
鸟哥！ 请教 怎么样去掉顶部 幻影灯 我想在顶部logo下边添加广告或者自定义的文字什么的。。。。
怎么样去掉顶部 幻影灯 具体要写该那里的代码。
58F
我自己折腾想吧首页幻灯改成通栏大图片的样式，怎么实现呢？在css.css文件里找不到/** slideshow **/
B1
@ 郑州设计师 我也想这样耶，兄弟研究出来了嘛
B2
@ hg6688 还木有，研究不出来，得请鸟哥支招。。。
59F
鸟哥 幻灯片标题有字数限制 我的标题都显示不全 怎么修改？
B1
@ 哈 改完会错位…
B2
@ 知更鸟 那就完全没办法了？
60F
为什么我修改完之后会错位呢？
幻灯片部分的左上角有个小的12345，右上角又有个1、2
然后就是错位显示图片和文字。。。
61F
请问这个幻灯片只能显示5篇吗，能自定义吗，多显示多篇吗，这个是选的是置顶文章，能显示自定义的吗
62F
向鸟哥致敬。很强大的一个主题。继续使用，努力发现其中的bug，与鸟哥一起完善这个主题，研究这主题。
63F
要的就是这个啊，支持鸟哥！
64F
鸟哥请问这个幻灯片只能显示5篇吗，多显示多篇吗? 请教下在那里修改，谢谢！
呵呵，我找到了。呵呵，不好意思！
65F
如何将cms首页布局中的视频幻灯片删掉啊。
66F
鸟哥怎么把这个幻灯片样式改成现在新版的 幻灯片。。 以前那个不显示文字。。
67F
请问，哪位调过幻灯播放速度？谢谢！
B1
@ 三雨二草 也许别人也有这个需要。在 jquery.cycle.all.min.js 中找到 4000 这个数字，改变它的值，就可改变每张幻灯停留的时间。
68F
代码控，修改之前得做好代码的备份…
69F
鸟哥,新版中 如何将CMS首页焦点幻灯移植到BLOG布局中
折腾了N天,还是不行
70F
鸟哥，有3个问题…1.找不到 只有插入代码后显示在文章下面而不是上面2.幻灯片不切换3.右边无文字。
71F
博主博主，图失效了~~
来自外部的引用