首页 » 建站技术 » WordPress » 浏览内容

Tstyle首页分栏修改图文教程


2010-12-23 22:04:52 2,701 0 发表评论 字体: 作者:C.K.
标签: WordPress备忘

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

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

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

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

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

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

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

使用下面的代码覆盖:

/*首页分栏*/
  • #part-left { float:left; padding-bottom:10px; width:330px;}
  • #part-right { float:right; padding-bottom:10px; width:330px;}
  • #part .f-m { overflow: hidden;}
  • #part .list li { line-height: 28px; background-position: -43px 11px; }
  • #part .list li em { width: 220px; }
  • #part .date { width: 30px; }
  • 2.打开index.php,找到下面的代码:

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

    使用下面的覆盖:

                <div id="part-left" >
  •                 <div class="f-s"></div>
  •                     <div class="f-m">
  •               <h2><em>WordPress</em><span>WP</span><a class="more" href="/article/10-category/wordpress" target="_blank">更多...</a></h2>
  •                     <div id="part">
  •             <ul class="list">
  •                           <?php query_posts('cat=141&posts_per_page=6&caller_get_posts=1'); ?>
  •                           <?php while (have_posts()) : the_post(); ?>
  •                           <li>         
  •                               <em><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></em>
  •                                 <?php if(get_comments_number() > 10) echo '<i class="hot">热门</i>'; ?>
  •                                 <?php if(date("ymd") - get_the_time("ymd") <= 2) echo '<i class="new">最新</i>'; ?>
  •                                 <?php if (is_sticky()) echo '<i class="top">置顶</i>'; ?>
  •                                 <span class="date"><?php the_time('m-d'); ?></span>
  •                           </li>
  •                           <?php endwhile; ?>
  •                     </ul>
  •                     </div>
  •                 </div>
  •                 <div class="f-e"></div>
  •             </div>
  •  
  •         <div id="part-right">
  •                 <div class="f-s"></div>
  •                 <div class="f-m">
  •                     <h2><em>新手建站</em><span>JZ</span><a class="more" href="/article/10-category/jz" target="_blank">更多...</a></h2>
  •                     <div id="part">
  •             <ul class="list">
  •                           <?php query_posts('cat=86&posts_per_page=6&caller_get_posts=1'); ?>
  •                           <?php while (have_posts()) : the_post(); ?>
  •                           <li>         
  •                               <em><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></em>
  •                                 <?php if(get_comments_number() > 10) echo '<i class="hot">热门</i>'; ?>
  •                                 <?php if(date("ymd") - get_the_time("ymd") <= 2) echo '<i class="new">最新</i>'; ?>
  •                                 <?php if (is_sticky()) echo '<i class="top">置顶</i>'; ?>
  •                                 <span class="date"><?php the_time('m-d'); ?></span>
  •                           </li>
  •                           <?php endwhile; ?>
  •                     </ul>
  •                     </div>
  •                 </div>
  •                 <div class="f-e"></div>
  •             </div>

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

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

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

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

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

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

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

      网站统计 Statistics

      • 创建时间: 2005年1月3日 距今4971 天
      • 日志总数: 2461
      • 评论总数: 630
      • 标签总数: 654
      • 链接总数: 273
      • 最后更新: 2017-7-1 18:16:33
      • 您是本站第 13798062 位访客

      广告区 Guǎng Gào