使用子主题的一个主要目的，在于折腾起来方便，不用去修改父主题任何文件和代码，可避免日后父主题升级时带来不必要的麻烦。本文折腾Thematic子主题首页布局问题，暂以Thematic自带的样板子主题thematicsamplechildtheme为例——这个子主题其实是继承了父主题Thematic的一切特征，包括外观在内，因为它仅有的两个主要文件 functions.php和style.css里面没有写入任何自定义的东西，需要添加代码才能获得我们想要的额外功能。这里我要将首页日志以2列或3列布局的形式显示出来，让它看起来像一个CMS。方法有两个，一个是直接到WordPress后台改变页面模板；另一个就是这里要介绍的，利用Thematic的hooks（钩子）——filter 和 actions来实现。

先看看折腾成功后首页布局截图：

下面是基本代码，如果您要使用，复制并粘贴到子主题的functions.php文件中即可，后面会继续解释它的原理：

<?php
function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');   function snippet_index_loop() {
  global $post;
        /* Count the number of posts so we can insert a widgetized area */ $count = 1;
        while ( have_posts() ) : the_post() ?>
            <?php $counter++; ?>    
            <div class="column <?php if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>">
                <div class="clear-fix">
                    <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
                        <?php thematic_postheader(); ?>
                        <div class="entry-content">
                            <?php the_excerpt(); ?>
                            <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
                        </div>
                            <?php thematic_postfooter(); ?>
                    </div><!-- .post -->
                </div><!-- .clear-fix -->
            </div><!-- .column -->   <?php comments_template();
                    if ($count==$thm_insert_position) { get_sidebar('index-insert');}     $count = $count + 1;
        endwhile;
}
add_action('thematic_indexloop', 'snippet_index_loop');   ?>

添加CSS样式，将以下CSS代码加入到子主题的样式表中就可以了：

.column{width:250px; display:inline;float:left; overflow:hidden;}
.clear-fix{display:box;}
.one{margin-right:40px;}
.hentry{padding:0;}
.column .entry-content{width:245px;}

通过添加以上的两部份代码，主题首页已经是两栏布局了，但下面还要解释一下：

<?php
function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
?>

这段函数的意思是，首先我们要去除thematic默认的index loop（默认的首页布局），在content-extensions.php文件中本来是这样的thematic_index_loop，上面的函数会将其禁用。

既然去除了默认的index_loop，那么就添加我们自定义的loop，这里命名为custom_index_loop，见下面的代码：

<?php
function custom_index_loop() {
  global $post;
        /* Count the number of posts so we can insert a widgetized area */ $count = 1;
        while ( have_posts() ) : the_post() ?>
            <?php $counter++; ?>    
            <div class="column <?php if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>">
                <div class="clear-fix">
                    <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
                        <?php thematic_postheader(); ?>
                        <div class="entry-content">
                            <?php the_excerpt(); ?>
                            <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
                        </div>
                            <?php thematic_postfooter(); ?>
                    </div><!-- .post -->
                </div><!-- .clear-fix -->
            </div><!-- .column -->   <?php comments_template();
                    if ($count==$thm_insert_position) { get_sidebar('index-insert');}   $count = $count + 1;
        endwhile;
}
add_action('thematic_indexloop', 'custom_index_loop');
?>

再看一看下面的这一段函数：

<?php $counter++; ?>    
    <div class="column <?php if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>">

它的作用是创建两栏布局，如果您想要的是3栏布局，加上一个elseif ，然后改变$counter 的值和调整一下样式（主要是修改宽度）就可以了。

日志内容当然不是以摘要来显示，所以我使用下面这一段函数：

<?php
<div class="entry-content">
   <?php the_excerpt(); ?>
   <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
</div>
?>

最后，要实现两栏布局，得执行以下函数：

<?php
add_action('thematic_indexloop', 'custom_index_loop');
?>

好了，至于上面的CSS样式，大家可以自己添加，这里就不解释了。

下面附上3栏布局的function函数及其CSS样式代码。

function函数：

function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');   function snippet_index_loop() {
  global $post;
        /* Count the number of posts so we can insert a widgetized area */ $count = 1;
        while ( have_posts() ) : the_post() ?>
            <?php $counter++; $clear=''; ?>    
            <div class="column <?php if ($counter == 1) { echo 'one'; } elseif ($counter == 2) { echo 'two'; }  else { echo 'three'; $counter = 0; $clear='<div style="clear:both;height:0px;"></div>';} ?>">
                <div class="clear-fix">
                    <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
                        <?php thematic_postheader(); ?>
                        <div class="entry-content">
                            <?php the_excerpt(); ?>
                            <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
                        </div>
                            <?php thematic_postfooter(); ?>
                    </div><!-- .post -->
                </div><!-- .clear-fix -->
            </div><!-- .column -->   <?php comments_template();
                    if ($count==$thm_insert_position) { get_sidebar('index-insert');}   echo $clear;
        $count = $count + 1;
        endwhile;
}
add_action('thematic_indexloop', 'snippet_index_loop');

CSS样式代码：

.column{width:160px; display:inline;float:left; overflow:hidden;}
.clear-fix{display:box;}
.two{margin:0 20px;}
.hentry{padding:0;}
.column .entry-content{width:245px;}

收工啦，希望朋友们用得着哦！如果大家还有什么好的建议，发表一下评论吧！

代码:hardiannazief