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

2011年10月30日14:21:06 107 11,815
摘 要

  经常有童鞋问如何将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
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

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

目前评论:107   其中:访客  86   博主  20   引用   1

    • 囧啊囧 1

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

      • Mulberry Outlet 3

        一个字:好!

        • asdfasfd 0

          测试您的

          • 廖肖寒 0

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

            • ziranniao 3

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

              • ethan 1

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

                • 二手交易网 1

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

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

                  • 郑州设计师 5

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

                    • 2

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

                        • 知更鸟 Admin

                          @ 改完会错位…

                            • 2

                              @知更鸟 那就完全没办法了?

                          • 博雅 2

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

                            • 小王 1

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

                              • 建哥 0

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

                                • 思睿 2

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

                                  • 黑窝's Blog 3

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

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

                                    • arenhliu 1

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

                                      • 追酷 1

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

                                        • 三雨二草 1

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

                                            • 三雨二草 1

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

                                            • 四五网 3

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

                                              • 鸟弟弟 0

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

                                                • 影之哀伤 1

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

                                                  • 诸葛小觉 1

                                                    博主博主,图失效了~~

                                                  • 来自外部的引用: 1

                                                    • 启用 HotNews 主题 CMS 首页布局 | 三雨二草