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

知更鸟
知更鸟
知更鸟
站长
2587
文章
0
粉丝
私信
HotNews主题10712,242阅读模式
摘要　　经常有童鞋问如何将CMS首页焦点幻灯也显示在BLOG布局中，留言中无法说明白，现在就教大家将CMS首页焦点幻灯移植到BLOG布局中，不要看见长长的代码就头晕，只要按着下面的步骤...

经常有童鞋问如何将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.     float: left;
  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-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: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-shadow: 0px 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>

 

本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！

全球通用头像Gravatar申请教程
WordPress面包屑（breadcrumb）导航代码
悲催！HotNews Pro 2.7.2发现严重样式错误
将百度推荐集成到HotNews主题中
weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
 
知更鸟
  • HotNews主题
  • HotNews Pro
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
评论  107  访客  86  作者  20
    • 囧啊囧
      囧啊囧
      重庆市江北区 51F
      回复

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

      • Mulberry Outlet
        Mulberry Outlet
        福建省厦门市 52F
        回复

        一个字：好！

        • asdfasfd
          asdfasfd
          广东省广州市 53F
          回复

          测试您的

          • 廖肖寒
            廖肖寒
            山东省临沂市 54F
            回复

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

            • ziranniao
              ziranniao
              江西省新余市 55F
              回复

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

              • ethan
                ethan
                广东省佛山市顺德区 56F
                回复

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

                • 二手交易网
                  二手交易网
                  河南省许昌市 57F
                  回复

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

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

                  • 郑州设计师
                    郑州设计师
                    河南省郑州市 58F
                    回复

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

                      • hg6688
                        hg6688
                        江苏省南京市 B1
                        回复

                        @ 郑州设计师 我也想这样耶，兄弟研究出来了嘛

                      • 哈
                        哈
                        北京市 59F
                        回复

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

                        • 博雅
                          博雅
                          江苏省徐州市 60F
                          回复

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

                          • 小王
                            小王
                            浙江省丽水市 61F
                            回复

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

                            • 建哥
                              建哥
                              四川省成都市 62F
                              回复

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

                              • 思睿
                                思睿
                                云南省昆明市 63F
                                回复

                                要的就是这个啊，支持鸟哥！

                                • 黑窝's Blog
                                  黑窝's Blog
                                  甘肃省金昌市 64F
                                  回复

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

                                  呵呵，我找到了。呵呵，不好意思！

                                  • arenhliu
                                    arenhliu
                                    上海市 65F
                                    回复

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

                                    • 追酷
                                      追酷
                                      江苏省苏州市 66F
                                      回复

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

                                      • 三雨二草
                                        三雨二草
                                        加拿大温哥华 67F
                                        回复

                                        请问，哪位调过幻灯播放速度？谢谢！

                                          • 三雨二草
                                            三雨二草
                                            加拿大温哥华 B1
                                            回复

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

                                          • 四五网
                                            四五网
                                            江西省萍乡市 68F
                                            回复

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

                                            • 鸟弟弟
                                              鸟弟弟
                                              广东省深圳市 69F
                                              回复

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

                                              • 影之哀伤
                                                影之哀伤
                                                北京市 70F
                                                回复

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

                                                • 诸葛小觉
                                                  诸葛小觉
                                                  广东省广州市 71F
                                                  回复

                                                  博主博主，图失效了~~

                                                匿名

                                                发表评论

                                                匿名网友

                                                拖动滑块以完成验证