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

  • 2012年4月21日
  • 9,027
  • A+
所属分类:前端技术
摘要

这个用代码的方式来实现文章归档是比较好的方法,比插件要好很多,因此在这里大力的推荐下,我也没改啥,从网络引用,修改了些小笔误,在网络上的一些文件存在一点小问题,就是直接复制后,几个引号是全角的,需要更改为半角的英文才有效,现在我已经更改好了,如果您在使用的过程中还是存在问题,您首先检查下标点符号是否使用正确,谢谢。

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

不过找来找去,还是在http://zww.me找到了一篇《代码实现WordPress归档页面模板[速度很快]》这个文章,将如何实现进行了详细的说明。

有了别人的教程,就剩下简单的效仿了,我们就按照教程一步步的操作吧:

第一步:复制一份page.php,改名为archives.php,在最上面加上下面几行代码:

[php]<?php

/* Template Name: 文章归档 */

?>[/php]

这个代码很重要。这样就做好日志归档的模板了。当然还要加一点东东在里面。

找到类似 <?php content(); ?>,我的page.php里面的是<?php the_content(); ?>这个代码,后面加上下面这一句:

[php]<a id=”expand_collapse” href=”#”>全部展开/收缩</a> <div id=”archives”><?php archives_list_SHe(); ?></div>[/php]

主要是为了“全部展开/收缩”有个点击的地方。这样就模板就OK了。

第二步:建一个新的函数,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归档页面模板[速度很快]》,并根据我的主题的实际情况作了修改。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
就像罐装饮料自动售货机,你投入钱它就会为你解渴,可是你不往里面头钱它就什么也不会提供给你靠钱是买不了人的心灵的。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  2   博主  0

    • avatar 牧羊人 0

      大家都用的这种哈~

      • avatar 高高 0

        请教一下,如果实现在文章列表中点击文章标题显示文章内容,怎么实现呢?