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

知更鸟
知更鸟
知更鸟
站长
2511
文章
0
粉丝
HotNews主题12,145阅读模式
摘要　　经常有童鞋问如何将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 Pro
  • HotNews主题
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
评论  107  访客  86  作者  20