将CMS首页焦点幻灯移植到BLOG布局中

知更鸟
知更鸟
知更鸟
1633
文章
6930
评论
2011年10月30日14:21:0610711.9K
摘要

  经常有童鞋问如何将CMS首页焦点幻灯也显示在BLOG布局中,留言中无法说明白,现在就教大家将CMS首页焦点幻灯移植到BLOG布局中,不要看见长长的代码就头晕,只要按着下面的步骤操作就可以了。
  编辑修改模版文件,请使用notepad++或EmEditor文本编辑软件,通过FTP软件上传覆盖原文件,或者在Wordpress后台外观→编辑中修改模版文件,切记不能用操作系统自带的记事本修改中文模板, 否则会改变模版编码,造成主题错位或乱码。

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

具体效果如图:

 

此文于2011年11月3日23点修正,排除BLOG布局置顶文章显示,参考来自官方Codex

提示:编辑修改模版文件,请使用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>
  4. <?php
  5. $sticky = get_option( 'sticky_posts' );
  6. $args = array(
  7.     'ignore_sticky_posts' => 1,
  8.     'post__not_in' => $sticky,
  9.     'paged' => $paged
  10. );
  11. query_posts( $args );
  12. ?>

加到第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.     floatleft;
  22.     width:400px;
  23.     height:248px;
  24.     }
  25. .slider_post {
  26.     float:right;
  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-shadownone;
  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.     floatleft;
  81.     margin: 0 0 0 10px;
  82.     }
  83. .tag_t {
  84.     float:right;
  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-shadow0px 1px 0px #fff;
  93.     }

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

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

另有童鞋问如何将顶部的热点文章加到CMS首页去,这个简单些:

用下面的代码:

  1. <?php if (get_option('swt_hot') == 'Hide') { ?>
  2.     <!-- header_image -->
  3.     <div class="banner">
  4.         <?php
  5.             $header_image = get_header_image();
  6.             if ( ! emptyempty$header_image ) ) :
  7.         ?>
  8.             <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
  9.         <?php endif;?>
  10.     </div>
  11.     <!-- end:header_image -->
  12. <?php } else { include(TEMPLATEPATH . '/includes/top_hot_a.php'); } ?>

替换header_h.php中138到140行:

  1. <div id="map_h">
  2.     <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>
  3. </div>

 

weinxin
版权声明
本站原创文章转载请注明文章出处
全球通用头像Gravatar申请教程 WordPress

全球通用头像Gravatar申请教程

百度百科:我们在很多博客或者网站留言,评论的时候会看到有的人头像很酷很个性化,但是这个博客和网站本身并没有提供设置头像的功能,感觉有点神奇,那么是怎么做到的呢?其实这是使用了Gravatar。 是Gl...
Wordpress面包屑(breadcrumb)导航代码 WordPress

WordPress面包屑(breadcrumb)导航代码

所谓面包屑(breadcrumb)导航,类似这种:首页 > 公司简介 > 发展历史 展示网站树型结构,并让网站访问者随时知道自己所处的位置,方便返回上几级。下面这段代码,可以很容易地将导航...
悲催!HotNews Pro 2.7.2发现严重样式错误 HotNews主题

悲催!HotNews Pro 2.7.2发现严重样式错误

今天在XP下浏览自己的博客,发现字号错乱,大小不一,已严重影响页面布局,第一感觉就是因为XP默认无微软雅黑字体,显示有偏差,但仔细一看并非只是因为字体,而是主题各部分字号定义有问题。 主要是CMS布局...
将百度推荐集成到HotNews主题中 HotNews主题

将百度推荐集成到HotNews主题中

百度推荐于10月未正式向广大站长完全开放,与之相似的同类产品众多,个人感觉百度推荐与其它同类产品不同之处是,完全站内链接,没有跳转,百度推荐的内容都是直接链接到你自己的网站上,而不是像其它同类产品需要...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:107   其中:访客  86   博主  20   引用   1
    • 绿瘦减肥药 绿瘦减肥药 0

      呵呵,不错呀,谢谢分享了

      • 电脑配置网 电脑配置网 2

        越来越强大了,必须的支持!

        • 郑州驾校 郑州驾校 4

          谢谢了!太好了!

          • Win7en乐园 Win7en乐园 8

            不错不错,嘿嘿!

            • 牛初乳排行榜 牛初乳排行榜 1

              收藏了 找很久了

              • lovemurder lovemurder 3

                哈哈,谢谢哦,今天下午你在邮件里还跟我说等有空你写一个教材,没想到这么快就出来啦。真是太感谢了。不过改变后BLOG布局里有一点我觉得还是不如意,那就是热度旁边那个图表黄色的“新”我总觉得不如CMS布局里红色的“NEW”来得美观和醒目!

                • 殊仙俺亦 殊仙俺亦 2

                  强烈支持,我本来都想修改的,可是鉴于我对代码的不熟悉,修改不成功..谢谢提供..如果后台有个开启开关那是更好地..

                  • gaogao gaogao 3

                    在cms模式下如何在底部分类中添加内容,我的底部8个分类中只显示一个分类名称,并且都是空的,还有就是如何添加分类图标,多谢帮忙给看一下http://www.gmpee.org

                    • 调皮鬼 调皮鬼 3

                      应该加大这类局部应用分享,让不太懂技术的博友也能自己动手修改自己喜欢的theme。

                      • 400电话办理 400电话办理 2

                        很不错的效果,回去试试看

                        • lovemurder lovemurder 3

                          blog布局改好后,登陆后界面出错,原来在顶部的变在了底部,是这样的,而且奇怪的是,改完后,好几个中文输入法不能用了~~~

                          这个出现在左下角了,而且是文字形式。原来在顶:

                          • lovemurder lovemurder 3

                            是在你这个留言版不能用ABC输入法

                            • lovemurder lovemurder 3

                              那个幻灯右下脚的“12345”数字后面的小灰色方块也不见啦~~~

                                • 知更鸟 知更鸟

                                  @ lovemurder 教程中每一步都不少,否则就是这样了
                                  估计你未加载幻灯JS

                                • 亮亮 亮亮 3

                                  在写个把blog顶部那4个转到CMS

                                    • 知更鸟 知更鸟

                                      @ 亮亮 这是个蛋疼的问题,NO

                                      • 殊仙俺亦 殊仙俺亦 2

                                        @ 亮亮 这个就很容易修改..看看我的博客吧,是否你想要的..我的博客好像就有你描述的样板..我修改了,可以正常使用..

                                      • 小坚 小坚 4

                                        哎呀呀,又有新东西,马上试用!

                                        • 殊仙俺亦 殊仙俺亦 2

                                          修改添加后,是可以显示幻灯片,可是原本旁边有文字描述的,修改添加后却为空..修改了多次还是一样..最后换回去了..

                                            • 知更鸟 知更鸟

                                              @ 殊仙俺亦 可以重新复制样式代码,之前的代码有点错误

                                                • 殊仙俺亦 殊仙俺亦 2

                                                  @ 知更鸟 谢谢站长的提示与跟进..回去我试试..

                                                  • lovemurder lovemurder 3

                                                    @ 知更鸟 请问鸟哥,哪里有错啦?哈哈,今天我重新做了一次,弄好了。就是登陆后,那个原来在顶部的管理菜单还是跑最底部去了。能修复就好,但其实这个问题也不大,不影响普通用户浏览就好~~~

                                                • 小坚 小坚 4

                                                  行了~为什么没有显示多个幻灯片呢?

                                                  • 大猪 大猪 1

                                                    最近发现一个趋势,博客往CMS方向发展,CMS往博客发展

                                                    • Tmd Tmd 5

                                                      哈哈,原来不止我一个人需要这样的效果
                                                      前一段时间已经实现了,现在想实现文章自动伸缩功能,搞不过来
                                                      非常感谢鸟大的这款主题,折腾性太强大了

                                                      • 小坚 小坚 4

                                                        行啦~第二步代码加错了。~嘿嘿~

                                                        再问问鸟哥,复制代码的时候怎么去掉左边的数字序号呀~

                                                        刚那份css的代码我一个个删掉的 1. 2. 3. ~

                                                          • 知更鸟 知更鸟

                                                            @ 小坚 杯具…请使用Firefox或chrome和opera,复制代码,就是不能用IE

                                                          • 王朋雨博客 王朋雨博客 0

                                                            哥哥,真牛啊,主题不错,赞一下

                                                            • 小坚 小坚 4

                                                              又有疑问,幻灯片的文章能够自定义吗?比如按照热点,现在好像是按照更新时间的,这样首页重复内容了哦

                                                                • 知更鸟 知更鸟

                                                                  @ 小坚 设置日志置顶,使用说明中已写

                                                                    • 非常木 非常木 1

                                                                      @ 知更鸟 发现一个问题,如果设置5篇日志置顶,幻灯片是置顶文章里,但是日志置顶,幻灯片下面的文章显示的前五篇都是置顶的文章,这个跟按照更新时间显示效果一样,最好能设置成安装blog模式中顶部热点图片hot的模式!~

                                                                        • T.K T.K 0

                                                                          @ 非常木 赞同哦 要怎么修改呢 我的现在置顶 跟幻灯片是重复的文章

                                                                            • 知更鸟 知更鸟

                                                                              @ T.K 文章已更新的,此问题已解决…

                                                                            • 知更鸟 知更鸟

                                                                              @ 非常木 文章已更新的,此问题已解决

                                                                        • 非常木 非常木 1

                                                                          我发现在第三步中background:url(../images/featured.png)这个,需要把两点改成一点才能正常显示featured.png和slider_nav.png,不知道大家的情况是怎么样的。

                                                                          • 小坚 小坚 4

                                                                            鸟哥,刚闲逛一个博客,人家说换主题了,原因是因为你的主题太好但太多人用了。。

                                                                            啥时候你要弄个收费就好了,我们愿意买呃【我说这句话会被人海扁吧。。。】

                                                                              • 知更鸟 知更鸟

                                                                                @ 小坚 是啊,用的人确实多,目前的版本下载已超过1万
                                                                                想弄个独一无二的主题,就只有订制了

                                                                                  • ohiyu ohiyu 1

                                                                                    @ 知更鸟 鸟哥 帮我也看看 我按照那三部 把代码都弄进去了 怎么还没有显示呢

                                                                                      • 知更鸟 知更鸟

                                                                                        @ ohiyu 提示:使用或修改主题请保持页脚作者链接,谢谢!

                                                                                  • Mr.shang Mr.shang 1

                                                                                    新建页面后,会在页脚显示。这个怎么去掉?鸟哥的搜索,为啥老是不能用,您站内容忒多了。找晕了,都找不到。

                                                                                    • lovemurder lovemurder 3

                                                                                      鸟哥,有一个问题。为什么我在把所有文章删除并且清空回收站以后,首页右侧还可以看到那些文章的列表呢?鼠标移动到上面会显示文章内,但点击后进入的是未知页面,内容为“对不起!这个真没有”

                                                                                      博客留言,没有图,不知道你能看明白不~~~

                                                                                        • 知更鸟 知更鸟

                                                                                          @ lovemurder 你的问题还真不少,呵呵
                                                                                          文章删除后,应该不会出现你说明的情况
                                                                                          主题支持留言贴图,没看见下面的“插入图片”?

                                                                                        • 强龙 强龙 3

                                                                                          鸟哥。这个留言字数即时数据统计怎么弄的。。

                                                                                            • 知更鸟 知更鸟

                                                                                              @ 强龙 这只是个试验的东西,没什么用

                                                                                                • clairelume clairelume 6

                                                                                                  @ 知更鸟 留言字数统计这段js有问题,超500字不提示,messagemessage.value多了一个message

                                                                                              • 蘇丞泰 蘇丞泰 4

                                                                                                Google XML Sitemaps很好用
                                                                                                不過最近遇到困擾,Google說每個Sitemap只能有50000條網址,超過了怎麼辦?
                                                                                                Google XML Sitemaps並沒有自動切割的功能?
                                                                                                麻煩鳥哥解惑

                                                                                                  • 知更鸟 知更鸟

                                                                                                    @ 蘇丞泰 如果真有此事,那么5万篇文章,对一般网站就是天文数字了,我开博三四年也就几百篇日志,再过十年二十年,5万也不可能达到,是不是

                                                                                                  • 影楼课程培训团购 影楼课程培训团购 4

                                                                                                    不错很给力分享了

                                                                                                    • 四川人 四川人 6

                                                                                                      你的模板有更新哦,啥时候发布出来呢?

                                                                                                      • 小坚 小坚 4

                                                                                                        鸟哥,网站最底部最右边的那个 xx次查询 是什么意思?

                                                                                                        • 上海标志设计 上海标志设计 0

                                                                                                          学习了,这个插件不错

                                                                                                          • lovemurder lovemurder 3

                                                                                                            鸟哥,在wordpress主题设置的“订阅”里面,有两个要填的内容,“输入你的Feed地址”和“输入你的订阅HTML代码”,前面的我搞定了,但是后面那个是什么呀?我一直没弄明白。

                                                                                                              • 知更鸟 知更鸟

                                                                                                                @ lovemurder 添加烧录网站提供的HMTL代码

                                                                                                                  • lovemurder lovemurder 3

                                                                                                                    @ 知更鸟 鸟哥,我还真没找到。它只给了我一个Feed地址,比如你的这个站点的Feed地址就是:http://feed.feedsky.com/zmingcx

                                                                                                                    那个订阅HTML代码还真没有。你能把你的截图给我看看吗?谢谢!

                                                                                                                      • 知更鸟 知更鸟

                                                                                                                        @ lovemurder 晕….
                                                                                                                        登录feedsky.com—–我的Feeds—–进入管理——-Feed发布—–选择下面的图标后,HTML代码就在下面

                                                                                                                        这个feedsky已是个死站,加了代码会影响打开速度

                                                                                                                  • 小小鱼 小小鱼 4

                                                                                                                    路过学习鸟 对这些还是不太懂- –

                                                                                                                    • Win7en乐园 Win7en乐园 8

                                                                                                                      嘿嘿,这个不错,感谢分享。

                                                                                                                      • 扬州起源 扬州起源 2

                                                                                                                        受益匪浅啊

                                                                                                                        • 屈臣氏官网 屈臣氏官网 5

                                                                                                                          学习了

                                                                                                                          • 电脑租赁 电脑租赁 3

                                                                                                                            这东西看不懂啊大哥、、、

                                                                                                                            • MAGI MAGI 4

                                                                                                                              感谢鸟哥,已经顺利改好,偶尔也换换blog模式的首页。

                                                                                                                              • 忆昔年 忆昔年 3

                                                                                                                                鸟哥 下边的分享小图标是怎么搞的?

                                                                                                                                • 英国旅游网 英国旅游网 3

                                                                                                                                  感谢分享~~~~~

                                                                                                                                  • 浮生未歇 浮生未歇 1

                                                                                                                                    鸟哥分享的太好了

                                                                                                                                    • Ouvps Ouvps 0

                                                                                                                                      我在网上看到很多人在用这个主题,准备近期把博客主题换了

                                                                                                                                      • gaoq gaoq 1

                                                                                                                                        呜呜 没能成功····

                                                                                                                                        • 梦 0

                                                                                                                                          鸟哥 为什么 我按照你的三步都操作了 也没有错 为什么 还是没有显示 求解

                                                                                                                                          • 小z 小z 4

                                                                                                                                            请问怎么像你一样域名不显示www呢?

                                                                                                                                              • clairelume clairelume 6

                                                                                                                                                @ 小z 你域名不解析www.主机不配置www.不就行了

                                                                                                                                                  • 小z 小z 4

                                                                                                                                                    @ clairelume 但是那样就不行了!必须要www 好像说的是香港虚拟机必须用www 是这样么?

                                                                                                                                                      • clairelume clairelume 6

                                                                                                                                                        @ 小z 貌似有这一说。我朋友的一个主机也是,不用设置,默认就给你开了个www的

                                                                                                                                                  • 小z 小z 4

                                                                                                                                                    你的主页用谷歌浏览器打开有错位!

                                                                                                                                                    • 输送设备 输送设备 3

                                                                                                                                                      这个弄起来有点小麻烦

                                                                                                                                                      • Mulberry Outlet Mulberry Outlet 3

                                                                                                                                                        我不会告诉博主,我看了这文章

                                                                                                                                                        • iShaw iShaw 2

                                                                                                                                                          成功移植。不过一直以后感觉幻灯和顶部热点文章有点类似,想去掉首页顶部的热点文章,但是不影响其他页面的热点文章显示,应该怎么操作呢,鸟哥

                                                                                                                                                          • 囧啊囧 囧啊囧 1

                                                                                                                                                            感谢,先前那个问题可以不问了,呵呵!看到这个明白了。

                                                                                                                                                            • Mulberry Outlet Mulberry Outlet 3

                                                                                                                                                              一个字:好!

                                                                                                                                                              • asdfasfd asdfasfd 0

                                                                                                                                                                测试您的

                                                                                                                                                                • 廖肖寒 廖肖寒 0

                                                                                                                                                                  鸟哥,我加完代码后幻灯片怎么就显示一页呢?

                                                                                                                                                                  • ziranniao ziranniao 3

                                                                                                                                                                    鸟哥,怎么修改才能让文章只显示标题呢?

                                                                                                                                                                    • ethan ethan 1

                                                                                                                                                                      将CMS首页焦点幻灯移植到BLOG布局中 已经按你的方法做 之前是可以的 但现在又不行了 是什么问题呢

                                                                                                                                                                      • 二手交易网 二手交易网 1

                                                                                                                                                                        鸟哥! 请教 怎么样去掉顶部 幻影灯 我想在顶部logo下边添加广告或者自定义的文字什么的。。。。

                                                                                                                                                                        怎么样去掉顶部 幻影灯 具体要写该那里的代码。

                                                                                                                                                                        • 郑州设计师 郑州设计师 5

                                                                                                                                                                          我自己折腾想吧首页幻灯改成通栏大图片的样式,怎么实现呢?在css.css文件里找不到/** slideshow **/

                                                                                                                                                                          • 哈 2

                                                                                                                                                                            鸟哥 幻灯片标题有字数限制 我的标题都显示不全 怎么修改?

                                                                                                                                                                            • 博雅 博雅 2

                                                                                                                                                                              为什么我修改完之后会错位呢?
                                                                                                                                                                              幻灯片部分的左上角有个小的12345,右上角又有个1、2
                                                                                                                                                                              然后就是错位显示图片和文字。。。

                                                                                                                                                                              • 小王 小王 1

                                                                                                                                                                                请问这个幻灯片只能显示5篇吗,能自定义吗,多显示多篇吗,这个是选的是置顶文章,能显示自定义的吗

                                                                                                                                                                                • 建哥 建哥 0

                                                                                                                                                                                  向鸟哥致敬。很强大的一个主题。继续使用,努力发现其中的bug,与鸟哥一起完善这个主题,研究这主题。

                                                                                                                                                                                  • 思睿 思睿 2

                                                                                                                                                                                    要的就是这个啊,支持鸟哥!

                                                                                                                                                                                    • 黑窝 黑窝's Blog 3

                                                                                                                                                                                      鸟哥请问这个幻灯片只能显示5篇吗,多显示多篇吗? 请教下在那里修改,谢谢!

                                                                                                                                                                                      呵呵,我找到了。呵呵,不好意思!

                                                                                                                                                                                      • arenhliu arenhliu 1

                                                                                                                                                                                        如何将cms首页布局中的视频幻灯片删掉啊。

                                                                                                                                                                                        • 追酷 追酷 1

                                                                                                                                                                                          鸟哥怎么把这个幻灯片样式改成现在新版的 幻灯片。。 以前那个不显示文字。。

                                                                                                                                                                                          • 三雨二草 三雨二草 1

                                                                                                                                                                                            请问,哪位调过幻灯播放速度?谢谢!

                                                                                                                                                                                              • 三雨二草 三雨二草 1

                                                                                                                                                                                                @ 三雨二草 也许别人也有这个需要。在 jquery.cycle.all.min.js 中找到 4000 这个数字,改变它的值,就可改变每张幻灯停留的时间。

                                                                                                                                                                                              • 四五网 四五网 3

                                                                                                                                                                                                代码控,修改之前得做好代码的备份…

                                                                                                                                                                                                • 鸟弟弟 鸟弟弟 0

                                                                                                                                                                                                  鸟哥,新版中 如何将CMS首页焦点幻灯移植到BLOG布局中
                                                                                                                                                                                                  折腾了N天,还是不行

                                                                                                                                                                                                  • 影之哀伤 影之哀伤 1

                                                                                                                                                                                                    鸟哥,有3个问题…1.找不到 只有插入代码后显示在文章下面而不是上面2.幻灯片不切换3.右边无文字。

                                                                                                                                                                                                    • 诸葛小觉 诸葛小觉 1

                                                                                                                                                                                                      博主博主,图失效了~~