带时间轴的文章归档的html页面,Css打造伸缩时间轴样式的WordPress归档页面archive.php...
archive.php文件 又称文章归档页面。在WordPress中,文章归档页面是一个非常重要的页面,特别是当你的wordpress网站文章很多的时候,它将文章以年月日的分类方式对文章进行归类,可以让读者很方便的迅速找到某年某日的文章。现在,很多博客,比如腾讯微博,QQ空间都有时间轴的显示方式,今天我们用也用时间轴的形式来记录显示我们的wordpress网站文章归档页面,并且加入伸缩功能。首先看看效果:
1、在我们的主题更目录下建立archive.php(文章归档页面)
输入以下代码:
/**
* The template for displaying archive pages
* BootstrapWp 0.1
*/
get_header(); ?>
$previous_year = $year = 0;
$previous_month = $month = 0;
$ul_open = false;
$myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');
foreach($myposts as $post) :
setup_postdata($post);
$year = mysql2date('Y', $post->post_date);
$month = mysql2date(‘n’, $post->post_date);
$day = mysql2date('j', $post->post_date);
if($year != $previous_year || $month != $previous_month) :
if($ul_open == true) :
echo '';
endif;
echo '
'; echo the_time('Y-m'); echo '
';
echo '
- ';
$ul_open = true;
endif;
$previous_year = $year; $previous_month = $month;
?>
<?php the_time('Y-m-j'); ?>
由于主题是采用了Bootstrap框架所以加了,
根据你自己的主题,可以选择适当的布局。
2、打开主题根目录下的style.css文件,加入以下css代码
/*
* 文章归档页面样式
*/
.archive-title{border-bottom:1px #eee solid;position:relative;padding-bottom:4px;margin-bottom:10px}
.archives li{list-style-type:none}
.archives li a{padding:8px 0;display:block}
.archives li a:hover .atitle:after{background:#ff5c43}
.archives li a span{display: inline-block;width:100px;font-size:12px;text-indent:20px}
.archives li a .atitle{display: inline-block;padding:0 15px;position:relative}
.archives li a .atitle:after{position:absolute;left:-6px;background:#ccc;height:8px;width:8px;border-radius:6px;top:8px;content:""}
.archives li a .atitle:before{position:absolute;left:-8px;background:#fff;height:12px;width:12px;border-radius:6px;top:6px;content:""}
.archives{position:relative;padding:10px 0}
.archives:before{height:100%;width:4px;background:#eee;position:absolute;left:130px;content:"";top:0}
.m-title{position:relative;margin:10px 0;cursor:pointer}
.m-title:hover:after{background:#ff5c43}
.m-title:before{position:absolute;left:127px; background:#fff; height:18px;width:18px;border-radius:6px;top:3px;content:""}
.m-title:after{position:absolute;left:127px;background:#ccc;height:12px;width:12px;border-radius:6px;top:6px;content:""}
如果你引入以上CSS显示效果错乱的话,那么你就得调整上面的css布局了。
3、点击年月实现伸缩功能的话需要引入以下js
$('.archives ul.archives-monthlisting').hide();
$('.archives ul.archives-monthlisting:first').show();
$('.archives .m-title').click(function() {
$(this).next().slideToggle('fast');
return false;
});
如何你对Wordpress引入js有困惑的话,建议你阅读 WordPress引入css/js两种方法,如果你不想使用 伸缩功能的话,也可以采用分页的技术处理你的归档页面。
您可能感兴趣的文章:
带时间轴的文章归档的html页面,Css打造伸缩时间轴样式的WordPress归档页面archive.php...相关推荐
- Css打造伸缩时间轴样式的WordPress归档页面archive.php
archive.php文件 又称文章归档页面.在WordPress中,文章归档页面是一个非常重要的页面,特别是当你的wordpress网站文章很多的时候,它将文章以年月日的分类方式对文章进行归类,可以 ...
- wordpress文章添加css样式,给WordPress文章循环加上CSS类方便实现各种页面布局
在做WordPress主题开发的时候,为了帮助实现布局,我们经常需要给网站存档页的文章循环加上一些CSS类,看一下下面的例子,我们需要实现一个每行4列的图片布局,我们使用左浮动的方式,给每张图片定义一 ...
- html仿今日头条下拉刷新,小程序 仿今日头条 带滑动切换的文章列表
小程序 仿今日头条 带滑动切换的文章列表 发布时间:2018-07-19 09:41, 浏览次数:353 拿别人仿今日头条的代码做的改版, 首先感谢前辈.其次,这个代码虽然能用,但是js里还是存在一些 ...
- vue+element UI仿携程购票页面上面的日期时间轴选择日期
本篇文章写的是利用vue+elementUI写一个购票日期选择,横向的购票日期,类似于携程网上的日期选择,效果如下图所示: 其他地方可以忽略,其中比较麻烦的是我圈起来的那个时间选择,如下是代码: &l ...
- html css 水平时间轴,纯css+js水平时间轴
自定义,并自动加载时间节点 当前时间节点居中,突出显示 时间动态无痕添加 效果图: 初始状态 时间左走到一定2016.1月后 html: + - 对应 JS 设置处理: var left = docu ...
- 百度时间显示_文章的发布时间对百度优化网站重要吗
文章的发布时间对百度优化网站重要吗?这个问题,相信很多初做网站优化的萌新朋友都会问到,以小匠个人的经历来分享这个问题的经验,小匠认为,文章的发布时间对优化网站是非常重要的,下面小匠将从实际经历来给大家 ...
- 帝国cms 未审核 showinfo.php,帝国CMS批量修改文章未审核状态及批量修改上线时间...
帝国CMS批量修改审核文章未审核状态,批量自定义指定文件上线时间! 用法: 后台增加自定义页面 PHP CODE:$infouptime=to_time('2016-06-12 10:50:19') ...
- 使用LiveGBS GB28181平台监控视频录像回放如何在页面上嵌入录像时间轴
支持云端录像及设备录像的时间轴页面分享iframe页面集成时间轴录像回看页面 1.时间轴回放分享页面 1.1. iframe示例 1.2. 页面可配置参数 1.3.设备录像示例 1.4.云端录像示例 ...
- WordPress如何修改文章的更新(发布)日期和时间?
默认情况下,WordPress文章的发布日期和时间都比较容易修改,但是想要直接修改文章的更新时间就比较困难了,只能借用插件来解决这个问题.今天老古就跟大家说一说如何修改WordPress文章的更新日期 ...
- 手把手带你打造自己的UI样式库(第三章)之常用样式组件的设计与开发
常用样式组件的设计与开发 Search搜索框样式的设计与开发 搜索组件的需求 搜索框的功能比较简单,最基本的就是输入和提交两个逻辑.但是我们这个搜索框要额外的加一些细节,输入框分为输入状态和非输入状态 ...
最新文章
- Swift基础之闭包
- 13 vue学习 package.json
- InfoPath表单实战
- Console.WriteLine在以Windows Application方式下编译会产生性能问题
- t2 初识Tornado
- (C#)Windows Shell 外壳编程系列4 - 上下文菜单(iContextMenu)(二)嵌入菜单和执行命令...
- 因此,甲骨文杀死了java.net
- redis的多路复用是什么鬼
- 市面上有哪几种门_实木门、原木门、模压门,各有门道不怕坑!
- Linux进程间通信(信号量)
- 深入Scripting Runtime Library
- 几个C#关于Html解析的类
- Windows 下的 electron 开发笔记一
- Spark运行WordCount例子
- VC++软件授权加密与管控(附demo)
- PHP函数strcmp,PHP strcmp函数
- ANSYS模态分析详细步骤记录
- 3.EVE-NG导入Dynamips和IOL
- 2021年化工自动化控制仪表考试题库及化工自动化控制仪表作业考试题库
- 如何识别图片文字,PaddleOCR机器学习开源项目使用 | 机器学习