比起其他的收费主题,Mossight唯一的不足就是没有现成的归档页面,个人觉得归档页面对于一个博客来说还是比较重要,所以自己动手,丰衣足食。

对于这个问题最简单的办法就是弄个归档页面的插件。不过插件让WordPress越发臃肿,所以秉着简洁高效的原则,我还是想通过代码来实现这个功能,通过"谷哥"和"度娘",半个码农的我也是能解决这个问题的。

网上看下来,关于用代码写归档页大致有两种,一是直接使用 SQL 语句实现调用,另外一种是使用WordPress 推荐的 WP_Query() 函数来调用。WordPress 官方不提倡直接使用 SQL 语句实现,所以我会参照后面一种方法进行。

下面方法每个步骤都分两种,一种是对于一般主题,另外一种是针对Mossight主题的。如各位看客需了解其原理,请移步原创作者:ZWWoOoOo(毕竟借鉴他人的没有那么足底气跟人讲解 呵呵)查看具体效果:请看我博客的存档页

1、原教程说把下面的函数扔到所用主题的 functions.php 文件( 为了避免中文乱码,将其转化为UTF8 无 BOM 格式)里面:

/* Archives list by zwwooooo | http://zww.me */
 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'); // 新发表文章/修改文章时

Mossight主题

本人启用了Mossight-child子主题,而且这个子主题里的functions.php 文件内容为空,所以直接将上面代码复制到functions.php 文件内即可

2. 复制一份主题的 page.php 更名为 archives.php,然后在最顶端加入:

<?php
/* Template Name: archives */
?>

然后找到其中类似

<?php content(); ?>

代码,在其下面加入如下代码:

<!--archives-->
<?php zww_archives_list(); ?>
<!--archives end-->

然后进wp后台添加一新页面,在右侧栏模板选择 archives。

Mossight主题

将Mossight文件夹里的page.php按照上面的方法更改即可。

3. 给主题加载 jQuery 库,没有加载的,把下面这句扔到 functions.php 里面就行了。

wp_enqueue_script('jquery');

Mossight主题

由于我已启用主题调用的新浪jquery库,所以这步省略。

4. jQuery 效果代码

jQuery(document).ready(function($){
 //===================================存档页面 jQ伸缩
     (function(){
         $('#al_expand_collapse,#archives span.al_mon').css({cursor:"s-resize"});
         $('#archives span.al_mon').each(function(){
             var num=$(this).next().children('li').size();
             var text=$(this).text();
             $(this).html(text+'<em> ( '+num+' 篇文章 )</em>');
         });
         var $al_post_list=$('#archives ul.al_post_list'),
             $al_post_list_f=$('#archives ul.al_post_list:first');
         $al_post_list.hide(1,function(){
             $al_post_list_f.show();
         });
         $('#archives span.al_mon').click(function(){
             $(this).next().slideToggle(400);
             return false;
         });
         $('#al_expand_collapse').toggle(function(){
             $al_post_list.show();
         },function(){
             $al_post_list.hide();
         });
     })();
 });

PS:不知道怎么写js文件调用的就直接打开 header.php 并找到

<?php wp_head(); ?>

在其下面加上

<script type="text/javascript">上面那段jQuery代码</script>

Mossight主题

个人认为上面那段jQuery效果代码应该只作用于归档页面,如果贸然添加到header.php这全局文件可能会影响到别页面的其他jQuery效果,所以我将上面那段代码添加到之前创建的archives.php文件里,找到
<?php get_header()?>

并在下面添加

<script type="text/javascript">上面那段jQuery代码</script>

即可。

到这步,归档页面的功能已经都实现了,如果对其原始的样式不满意,还可以根据下面给出的HTML结构进行美化。

5.css根据需要写,不写也可以。HTML结构如下:

<div id="archives">
     <p>[<a id="al_expand_collapse" href="#">全部展开/收缩</a>] <em>(注: 点击月份可以展开)</em></p>
     <h3 class="al_year">'年份</h3>
     <ul class="al_mon_list">
         <li><span class="al_mon">月份<em> (本月文章数量)</em></span>
             <ul class="al_post_list">
                 <li>号数: <a href="文章链接">文章标题</a> <em>(评论数量)</em></li>
             </ul>
         </li>
     </ul>
 </div

Mossight主题

我这里只做了相关段落的缩进。
同样在之前创建的archives.php文件里,找到
<?php get_header()?>

并在下面添加

<style type="text/css">
#archives .al_mon {
	margin-left:3em;
}
#archives .al_post_list {
	margin-left:5.6em;
}
</style>

OK 大功告成了!现在你的博客也有jQuery伸缩效果的归档页面了,而且还是纯代码、原生态的。

也许有对代码头晕,但又想用归档页面的Mossight童鞋,好吧,那我好人做到底,将上面两个文件打包,提供给大家下载。
archives.php文件
使用方法:将该文件上传至Mossight文件夹即可(需要修改归档页面样式的童鞋,请在里面进行修改,具体位置已标注)
archives.php打包文件
functions.php文件
使用方法:将该文件覆盖Mossight-child文件夹里的同名文件即可
functions.php打包文件

对于再次升级的Mossight1.8.0版主题也同样适用
再次感谢一直为该主题更新的三位童鞋 Jezzzz Mugee 牧风

目前有16条回应
Comment
Trackback
  • 空空裤兜 回应于2012/09/08 16:50 回复TA

    Z大叔的代码,跟着你学习做一个

  • 老男孩 回应于2012/09/09 04:35 回复TA

    我用插件实现的,懒得堆代码

    • Oo雨天阳光oO 回应于2012/09/10 18:35 回复TA

      @老男孩: 嗯 用插件更方便些 特别是主题升级时不用再次改代码

  • 孙超博客 回应于2012/09/16 10:36 回复TA

    回访老友了·····嘿嘿!

    • Oo雨天阳光oO 回应于2012/09/16 13:25 回复TA

      谢谢兄弟捧场 :)

  • shaun 回应于2013/05/15 23:25 回复TA

    你好 ,请问这个归档方式有没用到数据库缓存呢,,因为我在折腾的时候出现了一个问题 ,,照着步骤做的,代码没改动,能读取到id archives 但是后面的P标签 还有id al_expand_collapse却没有读出来,,,百思不得其解 求助~

    • Oo雨天阳光oO 回应于2013/05/16 10:05 回复TA

      应该有缓存 因为我发现有时文章本身和归档页面后的评论数是不一样的 但具体是不是数据库缓存我没仔细研究代码 所以不清楚。。。你只读取到

      后面的就读不了了 这个没理由啊。。。你看下它们的ID什么的有没有跟你WP本身有重复之类的 对了 你是MOSSIGHT主题还是别的?

      • shaunmrm 回应于2013/05/16 13:56 回复TA

        @Oo雨天阳光oO:
        你好 主题是最新wp带的twenty twelve主题啊 开始我用同样的代码试了几次 em里的内容可以显示 但是a里面的内容显示不了 我不明白 直接把p里面的内容删掉再试 内容果然都没了 我再重新还原初始代码试的时候就成现在这种情况了 所以不知道是不是缓存的问题啊

        • Oo雨天阳光oO 回应于2013/05/18 17:33 回复TA

          @shaunmrm: 我自己在本地换成你的主题测试了下,然后把修改的文件和其效果截图都Email你了 请查收 ;-)

  • YOYO 回应于2013/05/18 13:40 回复TA

    问下,我照着你那个存档弄的,并且直接下载你的那两个附件到我的文件里,但是我的存档目录下面有留言的这个框框要怎么去掉啊?

    • Oo雨天阳光oO 回应于2013/05/18 17:51 回复TA

      @YOYO: 取消归档页面的留言功能,你直接在后台“页面”中找到“归档”页面,编辑它,把右上角的“显示选项”点开,勾选“讨论”项,在下面就有显示“允许评论”和“这个页面接受 trackback 和 pingback”的选项,根据你的需求选择就OK了 :|

  • maicoo 回应于2013/06/03 20:51 回复TA

    博主,你的固定链接这么弄的呢!谢谢!

    • Oo雨天阳光oO 回应于2013/06/04 09:19 回复TA

      @maicoo: 固定链接我使用的是“wp slug translate”插件

      • maicoo 回应于2013/06/05 01:37 回复TA

        @Oo雨天阳光oO: 谢谢
        我博客真心有大黄鸭(⊙o⊙)哦!
        摄界专栏,倒数第二骗文章好像。

你好,欢迎光临!