HotNewsPro主题DIY–侧边栏Tab选项卡

2011-01-09 11:01:00 作者：IT伯伯所属分类：WordPress 阅读：1511 评论：10

呵呵，啥都不多说，先看看效果吧~~，对比下

有没有心动呢?呵呵，心动了，就继续吧，看看我们是如何实现的。第一步，将下载文件中的r_tab.php，放到主题的文件夹下面。第二步，找到sidebar.php文件的下面这些代码

Code

<div class="tab">
<ul id=drawer>
<li><a href="#">最新文章</a>
<div class="clear"></div>
<ul>
<ol id="newarticles">
<?php $myposts = get_posts('numberposts=10&offset=0');foreach($mypostsas$post) :?>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="详细阅读 <?php the_title_attribute(); ?>"><?php echo cut_str($post->post_title,32); ?></a>
<?php endforeach; ?>
</ol>
</ul>
<li><a href="#">热门文章</a>
<div class="clear"></div>
<ul>
<ol id="hotarticles">
<?php $popular = new WP_Query('orderby=comment_count&caller_get_posts=4&posts_per_page=10'); ?>
<?php while ($popular->have_posts()) : $popular->the_post(); ?>
<a href="<?php the_permalink(); ?>"><?php echo cut_str($post->post_title,32); ?></a>
<?php endwhile; ?>
</ol>
</ul>
<li><a href="#">随机文章</a>
<div class="clear"></div>
<ul>
<ol id="advice">
<?php s_random_lists(); ?>
</ol>
</ul>
</li>
</ul>
</div>

将其替换成，下面这句代码

Code

第三步，将如下CSS代码段贴到Style.css文件中

Code

#tab-title .selected_0{color:#000;cursor:pointer;font-weight:bold;background:url(images/sidebar_a.png) 0 -112pxno-repeat !important;color:#FFF !important;}
#tab-title .selected_1{color:#000;cursor:pointer;font-weight:bold;background:url(images/sidebar_b.png) 0 -112pxno-repeat !important;color:#FFF !important;}
#tab-title .selected_2{color:#000;cursor:pointer;font-weight:bold;background:url(images/sidebar_c.png) 0 -112pxno-repeat !important;color:#FFF !important;}
#tab-title span{padding:5px18px8px1px;border-right:0px;margin-left:-1px;cursor:pointer;}
#tab-content .hide{display:none;}
#tab-content ul{padding:5px10px;overflow:hidden;border-right:1pxsolid#ccc;border-left:1pxsolid#ccc;background:#fff;}
#tab-content ul li{line-height:25px;list-style:none}

第四步，将下载压缩包中的图片文件上传到主题下的images文件夹中

问题1:图片背景的修改? 主要修改selected_1、2、3中的background:url(images/sidebar_b.png) 0 -112px no-repeat !important;这是控制选项卡的背景主背景在r_tab.php中的标签下，background属性

问题2：鼠标滑动换成鼠标点击事件？直接将onmouseover改成onclick或者onmouseclick即可。如果对代码不太熟悉，还是不改的哦~~

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

目前有 10 条留言其中：访客:9 条, 博主:1 条

飓风 : 2012年03月16日21:28:25 7楼 @回复回复

鼠标滑动换成鼠标点击事件？直接将onmouseover改成onclick或者onmouseclick即可。

请问在哪个文件里改呢？
- IT伯伯 : 2012年03月16日21:49:20 @回复回复
  
  下载失效了。不好意思，已经找不到2.4版本的文件了。你用2.7plus版本的tab吧
过客小小 : 2011年12月05日11:56:55 6楼 @回复回复

留言是种美德，写点什么…
ˉ黑色.小亮 : 2011年06月30日03:17:31 5楼 @回复回复

- – 还有一个, sidebar_i.png 没一起打包,
ˉ黑色.小亮 : 2011年06月30日02:53:20 4楼 @回复回复

对了, 还有博主贴出来的代码是全角符号无法使用, 都要手动一个一个替换成半角, 你应该没把wp的那个全角那个去掉….
ˉ黑色.小亮 : 2011年06月30日02:47:55 地板 @回复回复

php include(‘r_tab.php’); ?>div>
这段代码, 中间调用少了<?
应该是
div>
冲棒 : 2011年03月14日01:22:53 板凳 @回复回复

背景倒地是怎么修改的
- 亦如我心 : 2011年03月15日10:51:28 @回复回复
  
  上面有步骤的哦~~
小屁人 : 2011年01月09日17:38:38 沙发 @回复回复

你的下载地址这个图片更牛！哈哈
- 亦如我心 : 2011年01月10日02:09:38 @回复回复
  
  呵呵，图片是从别处找的，样式是自己控制了的，加到文章中的代码还蛮简单的，呵呵~~