现在的位置: 首页 > WordPress教程 > 正文

知更鸟主题Blog布局添加CMS幻灯效果及重复置顶文章去除

2012年11月14日 WordPress教程 ⁄ 共 2094字 评论数 5 ⁄ 阅读 4,225 次

hotnews主题修改

第一步:将cms布局中幻灯控制代码移到blog布局文件中;

在主题根目录下,cms.php中幻灯代码移到blog.php中,移动代码最前前面slider.php代码,如下:

<?php include (TEMPLATEPATH . '/includes/slider.php'); ?> 

<?php wp_reset_query();?>     

<div ></div>

其中第一行代码为幻灯,第二行为最新文章调用,第三行为空行;

第二步:排除Blog布局中重复的置顶文章;

在上述代码下添加如下代码:

<?php

$sticky = get_option( 'sticky_posts' ); 

$args = array(

  'ignore_sticky_posts' => 1, 

  'post__not_in' => $sticky, 

  'paged' => $paged 

); 

query_posts( $args );

?>

第三步:幻灯JS代码:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.cycle.all.min.js"></script> 

加到header.php模版:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/muscript.js"></script> 

后面。

第四步:处理CSS样式

在CMS而已中CSS控制代码在home.css中,而blog布局中则没有,我们需要把home.css中控制幻灯的代码添加到css.css文件中。

在home.css中查找#slidershow,并将代码完整复制下来添加到css.css的最后面,代码如下:

#slideshow {

  position:relative; 

  background:#fff; 

  width:710px;

  height:248px;

  padding:10px;

  border:1px solid #ccc; 

  }

.slideshow {

  width:710px;

  height:248px;

  overflow:hidden; 

  }

.featured_post{

  width:708px;

  height:248px;

  overflow:hidden; 

  }

.slider_image,.slider_image img { 

  float: left;

  width:400px;

  height:248px;

  }

.slider_post {

  float:right;

  width:280px;

  padding-right:10px; 

  }

.slider_post p{

  font-size:13px; 

  text-indent:2em; 

  margin-top:5px; 

  line-height:24px; 

  }

#slider_nav  {

  position:absolute; 

  z-index:999;

  margin:210px 0 0 270px; 

  }

#slider_nav a {

  background:url(../images/slider_nav.png); 

  float:left;

  line-height:24px; 

  padding:0 8px 0 8px; 

  color:#ebebeb;

  text-shadow: none; 

  }

#slider_nav a.activeSlide { color:#f99356;}

#featured_tag {

  background:url(../images/featured.png); 

  position:absolute; 

  width:21px;

  height:79px;

  left:0px;

  top:20px;

  z-index:999;

  }

.news {

  position:absolute; 

  width:51px;

  height:51px;

  rightright:-3px; 

  top:-3px;

  z-index:10;

  }

.cat_name {

  position:absolute; 

  line-height:20px; 

  rightright:100px; 

  top:-1px;

  text-align:center; 

  padding:0 20px 0 20px; 

  border:1px solid #ccc; 

  }

#map_h {

  width:980px;

  }

.time_h {

  float: left;

  margin: 0 0 0 10px; 

  }

.tag_t {

  float:right;

  width:750px;

  height:23px;

  overflow:hidden; 

  }

.tag_t a {

  padding:0 0 0 10px; 

  font-weight:bold; 

  text-shadow: 0px 1px 0px #fff; 

 

第五步:刷新页面,大功告成!

这样,我们就解决了知更鸟 Blog布局添加幻灯并解决置顶文章重复的问题了!

» 声明:本站文章源于个人经验总结或书籍、互联网转载,内容仅用于个人学习,请勿转载,否则后果自负!

目前有 5 条留言 其中:访客:1 条, 博主:1 条 引用: 3

  1. 阿来博客 : 2012年11月20日14:52:25  -49楼 @回复 回复

    这不是最新文章调用吧?


    • 管理员
      大河笨鸟 : 2012年11月20日19:00:56  地下1层 @回复 回复

      调用置顶文章,调用最新文章方法相同,这个是后台设置的问题,如果不设置置顶文章就会显示最新文章。

给我留言

留言无头像?