HotNewsPro主题DIY–宽屏幻灯效果

2011-12-20 22:12:21 作者：IT伯伯所属分类：WordPress 阅读：698 评论：22

知更鸟的HotNewsPro主题灰常强大，所以没事就来折腾几下，这不就把首页的幻灯拉成宽屏的效果了。其实这不是自己的创意，前面去殁漂遥的站看到横幅幻灯，留言询问才知道他使用了一个幻灯的插件实现的。既然主题有幻灯功能，看来就没必要使用插件了的，折腾折腾，效果也出来了，只是浏览器兼容性还有待提高，现在就先这样吧。

那下面就跟我一起来实现吧：

第一步：找到cms.php页面中的这句代码

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

放到

<?php include('header_h.php'); ?>

的后面。

第二步：将includes文件夹中的slider.php代码替换成如下内容：

Code

<div id="slideshow">
<div class="slideshow">
<div id="featured_tag"></div>
<div id="slider_nav"></div>
<div id="slider" class="clearfix">
<?php
$args = array(
'posts_per_page' => 6,
'post__in' => get_option('sticky_posts'),
'caller_get_posts' => 10
);
query_posts($args);
?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="featured_post" >
<div class="slider_image">
<?php if ( get_post_meta($post->ID, 'slideshow', true) ) : ?>
<?php $image = get_post_meta($post->ID, 'slideshow', true); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php echo $image; ?>"width="400" height="248" alt="<?php the_title(); ?>"/></a>
<?php else: ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php if (has_post_thumbnail()) { the_post_thumbnail('slideshow'); }
else { ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img class="home-thumb" src="<?php echo catch_first_image() ?>" width="400px" height="248px" alt="<?php the_title(); ?>"/></a>
<?php } ?>
<?php endif; ?>
</div>
<div class="slider_post">
<a href="<?php the_permalink() ?>" rel="bookmark" title="详细阅读 <?php the_title_attribute(); ?>"><?php echo cut_str($post->post_title,30); ?></a>
<div class="clear"></div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<i class="lt"></i>
<i class="rt"></i>
<i class="lb"></i>
<i class="rb"></i>
</div>

注意，其中的posts_per_page值，可以根据自己的情况进行设置。

第三步：找到css文件夹中的css.css文件，将/** slideshow **/ 至#featured_tag样式之间的代码替换成如下内容：

Code

/** slideshow **/
#slideshow {
background:#fff;
width:958px;
height:248px;
padding:10px;
border:1px solid #ccc;
margin-bottom:10px;
}
.slideshow {
width:958px;
height:248px;
overflow:hidden;
}
.featured_post{
width:956px;
height:248px;
overflow:hidden;
}
.slider_image,.slider_image img {
float: left;
width:100%;
height:248px;
}
.slider_post {
position:absolute;
background:#000000;
width:100%;
opacity: 0.5;
margin:200px 0 0 0px;
height:50px;
}
.slider_post a{
line-height:45px;
font-size:20px;
margin-left:5px;
font-weight:500;
color:#FFF;
}
#slider_nav {
z-index:999;
margin:215px 0 0 810px;
}
#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;
}

具体的样式值，如果有问题，可以进行一些小的调整修改。

第四步，很重要的，添加内容时，需要添加一个自定义栏目，栏目名称是slideshow，值为图片的地址，同时还需要将文章置顶。只有两个条件都满足时，宽屏幻灯效果才会实现，切记！

建议幻灯图片大小设置为：958*248比例大小。

完成这四步的话，大体的宽屏幻灯效果应该就能实现了。要不试试吧？

上个我的预览图吧，呵呵：

前面说要讲讲这个的，由于太忙，就没腾出空来，最近主题装修之后，更新内容要做很多工作和花费很多心思，所以更新内容的频率就有些下降了，目的是给大家一个质量越来越高的网站，让大家都能找到自己喜欢的，学到自己想学的东西，仅此而已！

PS：如果有童鞋按此方法未实现的，请留言！

» 固定链接：IT伯伯 » 《HotNewsPro主题DIY–宽屏幻灯效果》

» 郑重声明：本文由IT伯伯发布，所有内容仅代表个人观点。版权归IT伯伯和IT伯伯共有，欢迎转载，但未经作者同意必须保留此段声明，并给出文章连接，否则保留追究法律责任的权利! 如果本文侵犯了您的权益，请留言。

分享到： QQ空间腾讯微博腾讯朋友新浪微博人人网开心网搜狐微博天涯社区网易微博

【上一篇】什么是浪漫？什么是浪费？
【下一篇】小轿车与独轮车的奇遇

目前有 22 条留言其中：访客:11 条, 博主:11 条

vickyce.com : 2012年03月03日11:31:41 10楼 @回复回复

我也改不了,css.css 根本搜索不到/** slideshow **/ 同时 hotnewspro 2.7
- IT伯伯 : 2012年03月03日11:46:46 @回复回复
  
  那把这段代码直接添加到css.css文件最后面吧~
  - vickyce.com : 2012年03月03日13:37:40 @回复回复
    
    谢谢~改好了~博主恏淫啊~还有图片的间隔怎么调整的? 再次谢谢了本人小白
    - IT伯伯 : 2012年03月03日20:32:04 @回复回复
      
      给个链接地址吧···
郑州设计师 : 2012年02月21日20:18:36 9楼 @回复回复

你没试过2.4和2.6版本怎么改？
- IT伯伯 : 2012年02月22日09:10:21 @回复回复
  
  不过即使是版本旧了点，那应该也是类似的改法的~
郑州设计师 : 2012年02月21日19:52:51 8楼 @回复回复

找不到：第三步：找到css文件夹中的css.css文件，将/** slideshow **/ 至#featured_tag样式之间的代码
- IT伯伯 : 2012年02月21日20:17:35 @回复回复
  
  给个演示地址帮你看下~
郑州设计师 : 2012年02月21日19:52:23 7楼 @回复回复

改来改去还是没改对，请问你是用的哪个版本的主题？
- IT伯伯 : 2012年02月21日20:17:10 @回复回复
  
  我的是2.7plus
fish : 2012年01月18日18:33:48 6楼 @回复回复

是在home.css里，我又按步骤试了一遍，还是不行
- IT伯伯 : 2012年01月18日22:15:17 @回复回复
  
  那除了第一步，你后面的二三步就按上面说的弄，然后自己改改CSS显示样式吧~
fish : 2012年01月18日13:32:18 5楼 @回复回复

我按你的办法试了一下，我想做的是：不做成通栏，就是把图片撑满方块，不带文字，所以我第一步没有做，第二步照做，第三步，hotnews2.7已经把CSS信息放在home.css了，我也照着改了。但结果是：图片导航还能看到，但是失效了。请楼主确认。
- IT伯伯 : 2012年01月18日13:53:38 @回复回复
  
  这个就是hotnews2.7版本的，CSS应该在css.css文件中，不要搞错了~
郑州设计师 : 2011年12月28日18:08:15 4楼 @回复回复

底下那个黑边和边框是否能去掉？还有左上角的红色标签。
- IT伯伯 : 2011年12月29日14:54:24 @回复回复
  
  底下的黑边应该是在ie6下才有的，不管了，懒得调整了··
  左上角的标签是鸟哥原本的样式就不去了，去掉也蛮简单，找到对应的css去掉就好了·
郑州设计师 : 2011年12月28日18:07:36 地板 @回复回复

果然很强大^^^^不错不错，多多分享些技术文章~~~~
- IT伯伯 : 2011年12月29日14:50:21 @回复回复
  
  呵呵，好的，有时间就写写的~·
强壮 : 2011年12月26日12:39:32 板凳 @回复回复

“一晚下班回家，一民警迎面巡逻而来。突然对我大喊：站住！
民警：String是值类型还是引用类型?
我：引用类型。
民警：你可以走了。
我感到很诧异。
我：为什么问这样的问题？
民警：深夜还在街上走，寒酸苦逼的样子，不是小偷就是搞程序的。
- IT伯伯 : 2011年12月29日14:54:46 @回复回复
  
  寒酸的程序员···
微PHP-鸿枫业 : 2011年12月25日14:26:39 沙发 @回复回复

圣诞节快乐~
- IT伯伯 : 2011年12月25日17:12:19 @回复回复
  
  圣诞节同乐~·