• 首页
  • >
  • Notes
  • >
  • WordPress主题开发:自定义文章归档页面模板
  • WordPress主题开发:自定义文章归档页面模板

    Time:2020-02-25 / View:86

    第一步、先将如下代码放入主题的function.php中:

     function zww_archives_list() {
         if( !$output = get_option('zww_archives_list') ){
             $output = '<div id="archives"><p>[<a id="al_expand_collapse" href="#">全部展开/收缩</a>] <em>(注: 点击月份可以展开)</em></p>';
             $the_query = new WP_Query( 'posts_per_page=-1&ignore_sticky_posts=1' ); //update: 加上忽略置顶文章
             $year=0; $mon=0; $i=0; $j=0;
             while ( $the_query->have_posts() ) : $the_query->the_post();
                 $year_tmp = get_the_time('Y');
                 $mon_tmp = get_the_time('m');
                 $y=$year; $m=$mon;
                 if ($mon != $mon_tmp && $mon > 0) $output .= '</ul></li>';
                 if ($year != $year_tmp && $year > 0) $output .= '</ul>';
                 if ($year != $year_tmp) {
                     $year = $year_tmp;
                     $output .= '<h3 class="al_year">'. $year .' 年</h3><ul class="al_mon_list">'; //输出年份
                 }
                 if ($mon != $mon_tmp) {
                     $mon = $mon_tmp;
                     $output .= '<li><span class="al_mon">'. $mon .' 月</span><ul class="al_post_list">'; //输出月份
                 }
                 $output .= '<li>'. get_the_time('d日: ') .'<a href="'. get_permalink() .'">'. get_the_title() .'</a> <em>('. get_comments_number('0', '1', '%') .')</em></li>'; //输出文章日期和标题
             endwhile;
             wp_reset_postdata();
             $output .= '</ul></li></ul></div>';
             update_option('zww_archives_list', $output);
         }
         echo $output;
     }
     function clear_zal_cache() {
         update_option('zww_archives_list', ''); // 清空 zww_archives_list
     }
     add_action('save_post', 'clear_zal_cache'); // 新发表文章/修改文章时

    第二步、复制一份主题目录下的page.php文件,改名为archives.php,打开archives.php文件,把最顶部的<?php 后面加上如下代码:

    
    /*
    Template Name: archives
    */

    第三步、把如下代码替换<main></main>中间的内容:

    <?php zww_archives_list(); ?>

    第四步、在主题的header.php或者footer.php中加入如下代码:

    <script type='text/javascript' src='<?php echo get_template_directory_uri();?>/js/archives.js'></script>

    archives.js文件下载:

    隐藏内容,“回复”后“刷新页面”即可查看隐藏内容!

    第五步、在网站后台,创建一个页面选择archive模板即可。

     

    发表留言

    1. aaaaa

      😀 😀

      江苏省南京市 电信
    2. 正需要这个页面,试一下

      湖南省株洲市 电信
      1. @刘工 博主,显示链接不存在了

        湖南省株洲市 电信
    3. kkttping

      谢谢分享,学习一下

      四川省成都市 电信
    4. dack

      谢谢分享,学习一下

      河南省郑州市 移动
      1. @dack 👿 👿

        河南省漯河市 联通
      2. dack

        @Misshylsay 分享取消了啊 👿

        河南省郑州市 移动
    5. 下载不了

      贵州省黔南州 电信
    6. 真的吗

      贵州省黔南州 电信
    7. 看一下

      广东省阳江市 电信
    8. 问问

      问问

      重庆市开县 电信
      1. @问问 😊

        河南省漯河市 电信

    发布留言