jQuery代码实现WordPress日志归档页面展开收缩效果

看到http://zww.me/archives网站的日志归档页面，做得很不错，有jQuery效果，很不漂亮，也很实用。于是也想做成这样。所以就到网站上找找有没有现成的。

不过找来找去，还是在http://zww.me找到了一篇《代码实现WordPress归档页面模板[速度很快]》这个文章，将如何实现进行了详细的说明。文章源自陈学虎-https://chenxuehu.com/article/2012/04/719.html

有了别人的教程，就剩下简单的效仿了，我们就按照教程一步步的操作吧：文章源自陈学虎-https://chenxuehu.com/article/2012/04/719.html

第一步：复制一份page.php，改名为archives.php，在最上面加上下面几行代码：文章源自陈学虎-https://chenxuehu.com/article/2012/04/719.html

[php]<?php文章源自陈学虎-https://chenxuehu.com/article/2012/04/719.html

/* Template Name: 文章归档 */文章源自陈学虎-https://chenxuehu.com/article/2012/04/719.html

?>[/php]文章源自陈学虎-https://chenxuehu.com/article/2012/04/719.html

这个代码很重要。这样就做好日志归档的模板了。当然还要加一点东东在里面。文章源自陈学虎-https://chenxuehu.com/article/2012/04/719.html

找到类似 <?php content(); ?>，我的page.php里面的是<?php the_content(); ?>这个代码，后面加上下面这一句：文章源自陈学虎-https://chenxuehu.com/article/2012/04/719.html

[php]<a id=”expand_collapse” href=”#”>全部展开/收缩</a> <div id=”archives”><?php archives_list_SHe(); ?></div>[/php]文章源自陈学虎-https://chenxuehu.com/article/2012/04/719.html

主要是为了“全部展开/收缩”有个点击的地方。这样就模板就OK了。文章源自陈学虎-https://chenxuehu.com/article/2012/04/719.html

第二步：建一个新的函数，archives_list_SHe，将这个函数的代码放到主题的 functions.php里面去。（谨记要保证代码在 ?>内，要不然会出大问题的。）

[php]function archives_list_SHe() {
global $wpdb,$month;
$lastpost = $wpdb->get_var(“SELECT ID FROM $wpdb->posts WHERE post_date <’” . current_time(‘mysql’) . “‘ AND post_status=’publish’ AND post_type=’post’ AND post_password=” ORDER BY post_date DESC LIMIT 1″);
$output = get_option(‘SHe_archives_’.$lastpost);
if(empty($output)){
$output = ”;
$wpdb->query(“DELETE FROM $wpdb->options WHERE option_name LIKE ‘SHe_archives_%’”);
$q = “SELECT DISTINCT YEAR(post_date) AS year, MONTH(post_date) AS month, count(ID) as posts FROM $wpdb->posts p WHERE post_date <’” . current_time(‘mysql’) . “‘ AND post_status=’publish’ AND post_type=’post’ AND post_password=” GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY post_date DESC”;
$monthresults = $wpdb->get_results($q);
if ($monthresults) {
foreach ($monthresults as $monthresult) {
$thismonth    = zeroise($monthresult->month, 2);
$thisyear    = $monthresult->year;
$q = “SELECT ID, post_date, post_title, comment_count FROM $wpdb->posts p WHERE post_date LIKE ‘$thisyear-$thismonth-%’ AND post_date AND post_status=’publish’ AND post_type=’post’ AND post_password=” ORDER BY post_date DESC”;
$postresults = $wpdb->get_results($q);
if ($postresults) {
$text = sprintf(‘%s %d’, $month[zeroise($monthresult->month,2)], $monthresult->year);
$postcount = count($postresults);
$output .= ‘<ul><li><span>’ . $text . ‘ &nbsp;(‘ . count($postresults) . ‘&nbsp;篇文章)</span><ul>’ . “\n”;
foreach ($postresults as $postresult) {
if ($postresult->post_date != ’0000-00-00 00:00:00′) {
$url = get_permalink($postresult->ID);
$arc_title    = $postresult->post_title;
if ($arc_title)
$text = wptexturize(strip_tags($arc_title));
else
$text = $postresult->ID;
$title_text = ‘View this post, &quot;’ . wp_specialchars($text, 1) . ‘&quot;’;
$output .= ‘<li>’ . mysql2date(‘d日’, $postresult->post_date) . ‘:&nbsp;’ . “<a href=’$url’ title=’$title_text’>$text</a>”;
$output .= ‘&nbsp;(‘ . $postresult->comment_count . ‘)’;
$output .= ‘</li>’ . “\n”;
}
}
}
$output .= ‘</ul></li></ul>’ . “\n”;
}
update_option(‘SHe_archives_’.$lastpost,$output);
}else{
$output = ‘<div>Sorry, no posts matched your criteria.</div>’ . “\n”;
}
}
echo $output;
}[/php]

以上所有，拷到functions.php里面去，请再次看上面的红色注释，一定要在?>内。

第三步：现在再来动上面的那个模板。将那个模板用FTP或其他工具传到主题文件夹里面去。进入后台，“页面”－“添加新页面”，写一个标题，比如文章归档,在打开的页面的右侧栏，那有一个“页面属性”－“模板”，下拉选择“文章归档”，即可。

第四步：加入加载了 jQuery 库，如果您的主题加载了 jQuery 库，把下面的直接加进去就行了，加入到我们建好的archives.php就好了。

[php]<script type="text/javascript">
/* 存档页面 jQ伸缩 */

$(‘#expand_collapse,.archives-yearmonth’).css({cursor:”s-resize”});
$(‘#archives ul li ul.archives-monthlisting’).hide();
$(‘#archives ul li ul.archives-monthlisting:first’).show();
$(‘#archives ul li span.archives-yearmonth’).click(function(){$(this).next().slideToggle(‘fast’);return false;});
//以下下是全局的操作
$(‘#expand_collapse’).toggle(
function(){
$(‘#archives ul li ul.archives-monthlisting’).slideDown(‘fast’);
},
function(){
$(‘#archives ul li ul.archives-monthlisting’).slideUp(‘fast’);
});
</script>[/php]

如果您的主题没有加载的话，那就把这段代码加到archives.php里面去。

打开archives.php，找到<?php get_header(); ?>这句，把上面的jQuery代码直接复制到下面即可。

如果还是不行，那就在<?php get_header(); ?>这句上面再加一句代码。代码如下：

[php]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>[/php]

上面的引用代码，在网络上的一些文件存在一点小问题，就是直接复制后，几个引号是全角的，需要更改为半角的英文才有效，现在我已经更改好了，如果您在使用的过程中还是存在问题，您首先检查下标点符号是否使用正确，谢谢。

这样肯定就没有什么问题了。点击查看  http://chenxuehu.com/guidang

本文完全参考：《代码实现WordPress归档页面模板[速度很快]》，并根据我的主题的实际情况作了修改。