wordpress点击伸缩归档(archives)页面

这几天在进行主题的 调整二次开发，到了归档页面 archives.php模板的调整环节，因为归档页面是以时间顺序排列的，所以想到了CSS来布局，构建一个时间轴的样式，但一想文章太多，全部罗列的话页面会很长，于是想到了用加载js,但考虑到会影响速度，最终放弃了，就来一个简单的可伸缩的样式，点击月份可以展开，再点击可以回来。

其实以前曾经学习过一个样式 Css打造伸缩时间轴样式的WordPress归档页面archive.php

1、创建归档函数到 functions.php 里

其实你可以单独新建一个archives.php文件，把以下的代码复制进去，然后在 functions.php 引入文件

/*** 引入归档函数*/
require get_template_directory() . 'archives.php';

或者直接复制以下代码到functions.php 里,代码太长，点击这里下载原代码

2、创建page-archives.php页面模板

页面内容可以简单以下，主要是在这个页面里要调用函数自定义的归档函数zww_archives_list();

<?php
/*** Template Name:Archives*/
get_header(); ?><div><?php zww_archives_list(); ?> </div>
<?php get_footer(); ?>

登陆wordpress后台-页面-新建页面-然后新建页面（如叫：归档），选择模版为 Archives

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

WordPress引入css/js两种方法

wp_enqueue_script('jquery');

4、jQuery 代码：

如果你的主题引入了 jQuery 库，那么下面这段代码你完全可以放到page-archives.php里

<script type="text/javascript">
(function ($, window) {$(function() {var $a = $('#archives'),$m = $('.al_mon', $a),$l = $('.al_post_list', $a),$l_f = $('.al_post_list:first', $a);$l.hide();$l_f.show();$m.css('cursor', 's-resize').on('click', function(){$(this).next().slideToggle(400);});var animate = function(index, status, s) {if (index > $l.length) {return;}if (status == 'up') {$l.eq(index).slideUp(s, function() {animate(index+1, status, (s-10<1)?0:s-10);});} else {$l.eq(index).slideDown(s, function() {animate(index+1, status, (s-10<1)?0:s-10);});}};$('#al_expand_collapse').on('click', function(e){e.preventDefault();if ( $(this).data('s') ) {$(this).data('s', '');animate(0, 'up', 100);} else {$(this).data('s', 1);animate(0, 'down', 100);}});});
})(jQuery, window);
</script>

也可以直接打开 header.php 并找到，在其下面加上

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

4、Css参考

这样即使成功的话也非常不好看，剩下的就是根据自己的布局加入CSS了，你要好好的研究zww_archives_list() 里面的Html结构，然后编写自己喜欢的CSS,这里分享一下我的css.

/** ---------------文章归档页面样式--------------------*/
#main-archivest{;margin:20px 0;}
.m-title{text-align:center;border-bottom:solid 1px #ccc;}
.al_mon{font-weight:bold;}
#archives ul li {list-style-type:none;}
#archives ul >li{padding:0 0 8px 5px;border-left:solid 1px #ccc;background-image:url(li.png); padding-left:20px; background-repeat:no-repeat;}
#archives ul>li>ul{margin:0;padding:0;}
#archives ul>li>ul>li{list-style-type:none;background-image:url(li.gif); padding-left:20px;background-repeat:no-repeat; border-left:dashed 1px #ccc;}

其实你可以完全复制，稍加修改。

5、小结

1、因为查询度有点大，所以有加数据库缓存，只在文章发表/修改时才会更新缓存数据，所以测试时，可以特意去后台点“快速编辑”文章然后点更新就可以更新缓存数据。
2、参考原文：http://zww.me/
3、本站效果预览 http://www.511yj.com/archives
4、遇到问题留言交流。

您可能感兴趣的文章:

▪ 开启Gzip压缩加快你的wordpress网站加载浏览速度

▪ wordpress301永久重定向实现方法

▪ WordPress 性能优化:使用 nginx 服务器

▪ Super Static Cache高级纯静态插件Wordpress提速优化神器

▪ wp-super-cache启用时出现WP_CACHE constant added to wp-config.php的解决方法

▪ wordpress定时发送失败的原因及四种解决办法

▪ Wordpress使用Redis缓存加速|511遇见强烈推荐

▪ wordpress必须禁用REST API和移除WP-JSON链接的方法

▪ 移除WordPress加载的JS和CSS链接中的版本号

▪ 拯救xmlrpc.php让WordPress瘫痪的的六种办法

wordpress点击伸缩归档(archives)页面相关推荐

关于wordpress 点击文章查看内容跳转加载失败(404)的解决方法
最近在折腾自己的个人博客,一直以来的博文都是在CSDN中来写的,还是很有感情的,但是拥有一个自己的独立博客是长久以来的梦想.所以可能之后的一些分享就会优先在独立博客中发出扯淡结束进入正题-- - - ...
html——仿e签宝合同归档html页面实现(纯静态,类似收藏夹页面)
先放一下e签宝合同归档页面: 这里只编写了其主体部分,模仿编写的效果如下: 该页面使用bootstrap实现布局,界面的样式以及相关的图标按钮使用layui实现.各个按钮都实现了相应的功能,包括新建分 ...
【ASP.NET】【防止连续多次点击提交按钮导致页面重复提交】
最近做项目遇到了这样的情况: 公司网络比平常慢了不少,在点击保存按钮提交页面后需等待挺长的一段时间,忍不住手贱点多了几次,当提交完成后发现数据库语句执行异常. 两种验证方式: 第1种: aspx页面按 ...
android ViewPager 实现点击小圆点切换页面案例
android ViewPager 实现点击小圆点切换页面说明:在viewpager中,通过左右滑动可以切换页面,同样可以通过点击所指示的小圆点来滑动到某个页面页面. 具体实现方法如下: 主要ac ...
点击按钮出现图片_坪山电动车上牌丨部分手机点击拍摄按钮，页面没有反应，无法拍摄人脸图片或上传照片，为什么？...
戳蓝字关注,骑行要备案,安全常相伴大家好!我是「帮你电动车轻松上牌的」小易今天继续解答广大深圳电动车车主,在操作"易骑行"小程序进行电动车备案,以及深圳电动车上牌骑行过程中遇到的常 ...
Vue项目代码改进（四）—— 在使用ElementUI时点击同一个路由，页面报错
这个不可描述的问题是:在使用ElementUI时点击同一个路由,页面报错. 错误代码如下: element-ui.common.js?ccbf:3339 NavigationDuplicated {_ ...
input点击链接另一个页面，各种操作。
1.链接到某页 <input type="button" name="Submit" value="确定" class=" ...
这个例子主要展示了通过点击button实现viewflipper页面切换
这个例子主要展示了通过点击button实现viewflipper页面切换转载于:https://blog.51cto.com/creator0hacker/1270968
android优美列表页面,android listview 列表点击列表进入详细页面
[实例简介] android listview 列表点击列表进入详细页面 [实例截图] [核心代码] ListviewSingleChoice └── ListviewSingleChoice ├─ ...

wordpress点击伸缩归档(archives)页面

wordpress点击伸缩归档(archives)页面相关推荐

最新文章

热门文章