Tstyle首页分栏修改图文教程

林继 WordPress 2,819 共写了551个字 (2010-12-23 22:04:52) 没有评论 打印 扫描二维码 百度已收录

此次修改涉及 style.css, functions.php, index.php 三个文件,修改前请自觉备份原来的主题文件,否则后果自负。

编辑时推荐在本地环境进行测试完美后再用到你的博客上,以免带来无法预料的后果。

为了演示方便,倡萌使用的Tstyle主题文件是到www.dafi.cn下载的最新免费版,所有的修改都是在最新主题文件是进行的。

另,由于倡萌是几天前修修补补的,某些很小的细节问题可能会遗漏,万一出现某些CSS冲突等问题,请自己解决。

1.打开style.css文件,找到下图的代码:

Tstyle首页分栏修改图文教程 2010 12 18 01728

使用下面的代码覆盖:

  1. /*首页分栏*/
  2. #part-left { float:left; padding-bottom:10px; width:330px;}
  3. #part-right { float:right; padding-bottom:10px; width:330px;}
  4. #part .f-m { overflow: hidden;}
  5. #part .list li { line-height: 28px; background-position: -43px 11px; }
  6. #part .list li em { width: 220px; }
  7. #part .date { width: 30px; }

2.打开index.php,找到下面的代码:

Tstyle首页分栏修改图文教程 2010 12 18 01726

使用下面的覆盖:

  1. 			<div id="part-left" >
  2. 				<div class="f-s"></div>
  3. 		  			<div class="f-m">
  4. 			  <h2><em>WordPress</em><span>WP</span><a class="more" href="/article/10-category/wordpress" target="_blank">更多...</a></h2>
  5. 					<div id="part">
  6. 		    <ul class="list">
  7. 						  <?php query_posts('cat=141&posts_per_page=6&caller_get_posts=1'); ?>
  8. 						  <?php while (have_posts()) : the_post(); ?>
  9.                           <li>			
  10.                               <em><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></em>
  11.                               	<?php if(get_comments_number() > 10) echo '<i class="hot">热门</i>'; ?>
  12. 								<?php if(date("ymd") - get_the_time("ymd") <= 2) echo '<i class="new">最新</i>'; ?>
  13. 								<?php if (is_sticky()) echo '<i class="top">置顶</i>'; ?>
  14. 								<span class="date"><?php the_time('m-d'); ?></span>	
  15. 						  </li>
  16.                           <?php endwhile; ?>
  17.                     </ul>
  18. 					</div>
  19. 				</div>
  20. 				<div class="f-e"></div>
  21. 			</div>
  22.  
  23. 		<div id="part-right">
  24. 				<div class="f-s"></div>
  25. 				<div class="f-m">
  26. 					<h2><em>新手建站</em><span>JZ</span><a class="more" href="/article/10-category/jz" target="_blank">更多...</a></h2>
  27. 					<div id="part">
  28. 		    <ul class="list">
  29. 						  <?php query_posts('cat=86&posts_per_page=6&caller_get_posts=1'); ?>
  30. 						  <?php while (have_posts()) : the_post(); ?>
  31.                           <li>			
  32.                               <em><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></em>
  33.                               	<?php if(get_comments_number() > 10) echo '<i class="hot">热门</i>'; ?>
  34. 								<?php if(date("ymd") - get_the_time("ymd") <= 2) echo '<i class="new">最新</i>'; ?>
  35. 								<?php if (is_sticky()) echo '<i class="top">置顶</i>'; ?>
  36. 								<span class="date"><?php the_time('m-d'); ?></span>	
  37. 						  </li>
  38.                           <?php endwhile; ?>
  39.                     </ul>
  40. 					</div>
  41. 				</div>
  42. 				<div class="f-e"></div>
  43. 			</div>


注:请自己修改代码中的调用ID和其他细节:

Tstyle首页分栏修改图文教程 2010 12 18 01730

代码只包含一个大横栏板块(显示内容样例如下图所示),如果需要多个栏目,请复制几份就可以。

Tstyle首页分栏修改图文教程 2010 12 18 01729

3.修改完上面的步骤,一般就可以了。如果你和倡萌一样,不再需要原来的8分栏了,那就打开functions.php,删除下图所示多余的函数代码:

Tstyle首页分栏修改图文教程 2010 12 18 01727

注意:每个人的主题文件或多或少修改过,如果按照上面的方法修改,达不到和倡萌一样的效果,说明有代码冲突,尤其是CSS样式冲突,请自己想办法解决。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

< >