找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2561|回复: 0

[分享] 代码实现WordPress归档页面模板

[复制链接]
发表于 2016-1-7 20:07:09 | 显示全部楼层 |阅读模式 来自 中国–河南–郑州
天在制作一个网站模板时,突然就想尝试下用WordPress原生函数来实现归档页面的内容调用。
经过测试,我使用了WordPress推荐的WP_Query() 函数来调用所有文章,除了每月的文章数量无法直接调用到外,其它数据都可以实现,虽然可以借助另外的WP原生函数实现每月文章数量,但是比较繁琐。所以我 另外想了个办法:我博客的存档页是用了jQuery来实现每月文章列表的伸缩效果,于是“每月文章数量显示”我就用jQuery来实现了。
下面是过程和方法,有兴趣的朋友可以试试。
折腾功能:代码实现WordPress归档页面模板[WP原生函数篇]
原创作者:zwwooooo
特点:
1. 按照年份、月份显示文章列表
2. 显示每月的文章数量(需要配合及Query)
3. 显示每篇文章的评论数
4. 使用 WordPress 原生函数实现数据调用
5. 这个存档函数会在数据库生成一个表 zww_archives_list 来做缓存,只在发表/修改文章时才更新,减少数据库查询。
6. 即使不使用第5点的数据库缓存功能也比以前的直接 SQL 语句省资源。
效果图:

代码实现WordPress归档页面模板[WP原生函数篇]
步骤:
1. 把下面的函数扔到所用主题的 functions.php 文件里面:(注意:因为有中文,所以要把 functions.php 文件转换为 UTF8 无 BOM 格式,不然中文会乱码)
/* Archives list by zwwooooo | http://zww.me */
function zww_archives_list() {
     if( !$output = get_option('zww_archives_list') ){
         $output = '[全部展开/收缩] (注: 点击月份可以展开)
';
         $the_query = new WP_Query( 'posts_per_page=-1' );
         $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 .= '';
             if ($year != $year_tmp && $year > 0) $output .= '';
             if ($year != $year_tmp) {
                 $year = $year_tmp;
                 $output .= ''. $year .' 年


    '; //输出年份
                 }
                 if ($mon != $mon_tmp) {
                     $mon = $mon_tmp;
                     $output .= '
  • '. $mon .' 月


      '; //输出月份
                   }
                   $output .= '
    • '. get_the_time('d日: ') .'[url='. get_permalink() .]'. get_the_title() .'[/url] ('. get_comments_number('0', '1', '%') .')
      '; //输出文章日期和标题
               endwhile;
               wp_reset_postdata();
               $output .= '

';
         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'); // 新发表文章/修改文章时

2. 复制一份主题的 page.php 更名为 archives.php,然后在最顶端加入:
  1. /*
  2. Template Name: archives
  3. */
  4. ?>
复制代码
然后找到类似 ,在其下面加入如下代码

进wp后台添加一新页面,在右侧栏模板选择 archives
3. 给主题加载 jQuery 库,没有加载的,把下面这句扔到 functions.php 里面就行了。
  1. wp_enqueue_script('jquery');
复制代码
4. jQuery 效果代码

  1. jQuery(document).ready(function($){
  2. //===================================存档页面 jQ伸缩
  3.      (function(){
  4.          $('#al_expand_collapse,#archives span.al_mon').css({cursor:"s-resize"});
  5.          $('#archives span.al_mon').each(function(){
  6.              var num=$(this).next().children('li').size();
  7.              var text=$(this).text();
  8.              $(this).html(text+'[i] ( '+num+' 篇文章 )[/i]');
  9.          });
  10.          var $al_post_list=$('#archives ul.al_post_list'),
  11.              $al_post_list_f=$('#archives ul.al_post_list:first');
  12.          $al_post_list.hide(1,function(){
  13.              $al_post_list_f.show();
  14.          });
  15.          $('#archives span.al_mon').click(function(){
  16.              $(this).next().slideToggle(400);
  17.              return false;
  18.          });
  19.          $('#al_expand_collapse').toggle(function(){
  20.              $al_post_list.show();
  21.          },function(){
  22.              $al_post_list.hide();
  23.          });
  24.      })();
  25. });
复制代码
PS:不知道怎么写js文件调用的就直接打开 header.php 并找到
,在其下面加上

4. css根据需要写,不写也可以的。HTML结构:

  1.      [[url=#]全部展开/收缩[/url]] [i](注: 点击月份可以展开)[/i]

  2.      [b]'年份[/b]
  3.      [list]

  4.          [*]月份[i] (本月文章数量)[/i]
  5. [list]

  6.                  [*]号数: [url=文章链接]文章标题[/url] [i](评论数量)[/i]

  7.              [/list]
  8.          
  9.      [/list]

复制代码
折腾完,收工!


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-21 21:33 , Processed in 0.052557 second(s), 8 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表