Thematic子主题之自定义首页布局

使用子主题的一个主要目的,在于折腾起来方便,不用去修改父主题任何文件和代码,可避免日后父主题升级时带来不必要的麻烦。本文折腾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

如无特别说明,本站文章皆为原创,若要转载,必须注明以下原文信息:
日志标题: 《Thematic子主题之自定义首页布局》
日志链接: http://www.chenchunlin.info/create-custom-posts-layout-in-home-page-thematic-child-theme.html
博客名称: Chenchunlinblog

This entry was posted in WordPress and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

分享这篇文章:



相关文章:

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>