一聚教程网:一个值得你收藏的教程网站

热门教程

WordPress插件WP-EasyArchives添加文章归档页面例子

时间:2022-06-25 18:37:02 编辑:袖梨 来源:一聚教程网


安装插件

第一步就是需要先安装好WP-EasyArchives插件!安装完成之后启动插件,然后去配置一下插件选项即可!

新建archives.php

我们在终端操作,进入到主题目录下,看到了page.php了吗?看到就可以了!

然后通过下面的命令操作一下:

cp page.php archives.php
 
这样就新建了一个文件名叫archives.php,同时它也复制了page.php中的所有内容!

然后修改一下archives.php文件,去掉头注释,修改为:


/*
Template Name: Archives Page
*/
 
最好不要使用中文注释,否则可能会乱码。这样子就可以在新建页面的时候选择模板时,出现Archives Page这个模板了!

新建文章归档页面

进入后台,点击新建页面,选择模板为Archives Page,预览一下吧!

预览后发现效果跟我所期望的相差好远,怎么没有缩进?颜色怎么改?看下面笔者所修改的CSS样式吧!

修改CSS样式

在后台插件处点击编辑,进入到插件编辑页面,选择WP-EasyArchives,然后找到css文件wp-easyarchives/css/wp-easyarchives.css,替换成如下:

#easy-archives .ea-loading{background:url(../img/ajax-loader.gif) 0 50% no-repeat;padding-left:22px;line-display:block;}
#easy-archives {width: 90%;margin: auto;margin-top: 20px;}
#easy-archives .ea-closed{display:none;}
#easy-archives .ea-collapse,#easy-archives .ea-expand{display:block;float:left;cursor:pointer;}
#easy-archives .ea-collapse{background:url(../img/icons.png) 0 -100px no-repeat;}
#easy-archives .ea-expand{background:url(../img/icons.png) 0 0 no-repeat;}
#easy-archives .ea-detail{font-weight:bolder;font-size:18px;color:#006400;}
#easy-archives .ea-month{padding-bottom:10px;margin-left:0px;font-size: 13px;color:green;}
#easy-archives .ea-month li{list-style:none;}
#easy-archives li{margin-top:5px;margin-left: 30px;}
#easy-archives li span,#easy-archives .ea-title span{font-size:14px; color:#999;}
#ea-year,#ea-author{font-weight:bolder;}
#ea-filter{padding-bottom:20px;margin-top: 30px;display: none;}
#ea-filter select,#ea-filter input{margin-right:10px;}

热门栏目