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

老虎说测试 前端技术字数 3765阅读12分33秒阅读模式
摘要这个用代码的方式来实现文章归档是比较好的方法,比插件要好很多,因此在这里大力的推荐下,我也没改啥,从网络引用,修改了些小笔误,在网络上的一些文件存在一点小问题,就是直接复制后,几个...

看到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归档页面模板[速度很快]》,并根据我的主题的实际情况作了修改。

 最后更新:2022-3-15
  • 版权声明:本文为原创文章,转载请附上原文出处链接及本声明。
  • 转载请注明:jQuery代码实现WordPress日志归档页面展开收缩效果 | https://chenxuehu.com/article/2012/04/719.html
评论  2  访客  2