Chinaunix首页 | 论坛 | 博客
  • 博客访问: 144183
  • 博文数量: 21
  • 博客积分: 709
  • 博客等级: 上士
  • 技术积分: 255
  • 用 户 组: 普通用户
  • 注册时间: 2005-04-19 22:23
个人简介

凤飞飞

文章分类

全部博文(21)

文章存档

2012年(3)

2011年(17)

2005年(1)

我的朋友

分类: 系统运维

2011-11-30 14:56:42

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

具体效果如图:

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

提示:编辑修改模版文件,请使用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.   

下面。

二、再把幻灯JS代码:

  1. <script type="text/javascript" src="/js/jquery.cycle.all.min.js"></script>

加到header.php模版:

  1. <script type="text/javascript" src="/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.         
  3.         <div class="banner">
  4.             <?php
  5.                 $header_image = get_header_image();
  6.                 if ( ! emptyempty( $header_image ) ) :
  7.             ?>
  8.                 <img src="" width="" height="" alt="" />
  9.             <?php endif;?>
  10.         </div>
  11.         
  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>

 

阅读(1753) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~