刚刚为博客加入文章归档页面,同时加入了样式,这里不用复制page.php文件,直接把下面的代码复制然后新建一个PHP文件,然后上传至网站主题根目录,后新建页面-选择文章归档模板-发布-添加导航。

至于演示见下图或者见本博归档页面

guidangyulan

代码及样式

<?php
/*Template Name: 文章归档 */
get_header ();
?>
<div class="wrapper">
<!-- 归档页样式start -->
<style type="text/css">
.archives td{padding: 6px 10px 8px;border-bottom: solid 1px #eee}
.archives table{padding:10px 0 20px}
.meta-tit{border-bottom: solid 1px #e6e6e6;padding: 0 0 10px;margin-bottom: 20px}
</style>
<!-- 归档页样式end -->
<?php 
//获取文章列表
while (have_posts()) : the_post(); ?>
<div class="content-wrap">
<div class="content"><h1 class="main-tit"><?php the_title(); ?><strong>Archives</strong><em></em></h1>	
<div class="archives">
	<?php
    $previous_year = $year = 0;
    $previous_month = $month = 0;
    $ul_open = false;

    $myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');

    foreach($myposts as $post) :
        setup_postdata($post);

        $year = mysql2date('Y', $post->post_date);
        $month = mysql2date('n', $post->post_date);
        $day = mysql2date('j', $post->post_date);

        if($year != $previous_year || $month != $previous_month) :
            if($ul_open == true) : 
                echo '</table>';
            endif;

            echo '<h3>'; echo the_time('F Y'); echo '</h3>';
            echo '<table>';
            $ul_open = true;

        endif;

        $previous_year = $year; $previous_month = $month;
    ?>
        <tr>
            <td width="60" style="text-align:right;"><?php the_time('j日'); ?></td>
            <td width="400"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td>
            <td width="120"><a class="comm" href="<?php comments_link(); ?>" title="查看 <?php the_title(); ?> 的评论"><?php comments_number('0', '1', '%'); ?>人评论</a></td>
            <td width="120"><span class="view"><?php if(function_exists('the_views')) the_views(); ?>次浏览</span></td>
        </tr>
    <?php endforeach; ?>
    </table>
</div>
</div>
</div>
<?php endwhile;?>
<?php get_sidebar('sidebar')?>
</div>
<?php get_footer()?>
</body>
</html>