一、模板图片
将我共享的网盘中的文件夹下的图片全部存储到当前主题下的assets/imag
目录下

抱歉!为防机器采集,此处内容已被隐藏,请输入验证码查看内容
请关注“浅时光博客”官方微信公众号,回复关键字“6762”,获取验证码。
【注】用手机微信扫描右侧二维码都可以关注“浅时光博客”官方微信公众号。

- 说明:最终的效果如上图所示,这里我只是截图,实际效果是动态的。
二、保存JS文件
将我共享的网盘中JS模板文件全部保存在网站可直接访问的目录下即可,比如我这里在/var/www/wordpress
下面创建一个archive
目录,并将JS文件上传进去即可
三、编写代码
创建一个PHP文件,并保存到主题page/
目录下;注意修改JS文件的存储URL路径为自己的
[root@localhost pages]# vim archiveslist.php
<?php
/**
* Template Name: 时光轴
*/
get_header();?>
<style>
#footer{display:none}
/* 外框样式*/
.archives {
position:relative;
padding: 200px 0 220px;margin-bottom:10px;
min-height: calc(100vh - 70px);
width: 750px;
left:calc(50% - 375px);
text-align: center;font-family: Georgia,'Microsoft JhengHei','微软雅黑';
background: url(<?php echo get_template_directory_uri()."/assets/images/xtimebt.png" ?>) no-repeat left 328px bottom 0;
}
.diy-logo img{
position: absolute;
top:80px;
left:50%;transform:translateX(-50%);border-bottom: 4px solid #86544D;max-width:90vw;z-index:2
}
.archives .diy-bt img{
position: absolute;
bottom:0px;
left:328px;
z-index:-1;
}
.archives ul{margin: 0;padding: 0}
.diy-logo:hover {cursor: pointer}
.archives>ul>li{
list-style-type: none;
position: relative;
width: 100%;
}
.archives li a {
padding: 8px 0;
display: inline-block;
color:#666;
}
/* 标题前小圆点在鼠标经过时的样式*/
.archives li a:hover .sp3{
background: #ff5c43;
}
/* 日期样式*/
.archives li a .rq {
position: absolute;
left:275px;
width: 100px;
font-size: 14px;
font-family: times;
}
/* 标题*/
.archives li a .atitle {
position: absolute;
left:388px;
text-align: left;
}
/* 标题前的外围小点*/
.archives li a .sp4 {
position: absolute;
left: 367px;
background: #86544D;
height: 16px;
width: 16px;
border-radius: 50%;
top: 10px;
transition: all .3s
}
/* 标题前的小点内围*/
.archives li a .sp3{
position: absolute;
left: 370px;
background: #fff;
height: 10px;
width: 10px;
border-radius: 50%;
top: 13px;
z-index: 1;
transition: all .3s
}
/* 时间中间线*/
.archives:before {
height: calc(100% - 205px);
width: 4px;
background: #86544D;
position: absolute;
left: 373px;
content: "";
top: 50px
}
/* 左边月份标题*/
.m-title {
position: relative;
width:140px;
top:10px;
left:305px;
cursor: pointer;
color:#86544D;
font-size: 18px;
border: 4px solid #86544D;
padding: 3px 0;
background: #fff;
border-radius: 20px;
transition: all .5s;
font-family: Georgia;
}
/* 鼠标经过大圆点样式*/
.m-title:hover{
background: #ff5c43!important;
}
.diy-card{
width:320px;
position: relative;
left:402px;
top:16px;
text-align: left;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
transition: all .3s;
z-index: 3
}
.diy-card:hover .post-img img{transform: scale(2);}
.diy-card .post .post-title {display: none;margin:-4px 0 -12px;}
.diy-card .post-style-card .post-top-meta {display: none;margin-bottom: 10px;}
.diy-card .post-style-card .post-time {margin-top:10px}
.diy-card .post-style-card .post-img{margin:-10px -10px 0;overflow: hidden;padding: 0}
.diy-card .post-style-card .post-img img{transition: all .5s ease-out}
.diy-card .post-style-card .post-bottom {padding-top:0}
.diy-card .post-style-card .post-meta-author {margin-bottom: 0}
.diy-card .post-style-card .post-meta-author a span {width: auto}
body{
background: url(<?php echo get_template_directory_uri()."/assets/images/bgbottom.png" ?>) no-repeat center bottom 0/contain fixed,url(<?php echo get_template_directory_uri()."/assets/images/bg.png" ?>) no-repeat right 0 top 70px fixed,linear-gradient(90deg,rgba(255,165,150,0.3) 10%,rgba(0,228,255,0.35)) no-repeat;
}
.bg{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-2}
@media(max-width:767px){
body{
background:url(<?php echo get_template_directory_uri()."/assets/images/bgbottom.png" ?>) no-repeat center bottom 0/contain fixed, linear-gradient(90deg,rgba(255,165,150,0.3) 10%,rgba(0,228,255,0.35)) no-repeat;
}
.diy-card,.diy-card .post{box-shadow:none;}
.archives{width: 100%;padding-top:150px}
.diy-logo img{top:70px}
.archives li a .rq{display: none}
.diy-card{width: 310px;left: 220px}
.diy-card .post-style-card .post-top-meta{display: block;margin: 0px 4px}
.diy-card .post .post-title {display: block;margin:0px 4px -8px;}
.archives li a .atitle{display: none}
.diy-card .post-style-card .post-img{height: auto;max-height:148px;margin:0px 4px;overflow: hidden;padding: 0}
.diy-card .post-style-card .post-img img{height:auto}
}
@media(min-width:768px){
.m-title:nth-of-type(2n) {left:252px}
.m-title:nth-of-type(2n+1) {left:358px}
.archives li:nth-child(2n) .diy-card{left:28px;}
.archives li:nth-child(2n) .rq{left:376px;}
.archives li:nth-child(2n) .atitle{
left:28px;
text-align: right;
width: 335px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0;
}
}
</style>
<div class="container">
<?php if (have_posts()): ?>
<?php while (have_posts()) : the_post(); ?>
<article class="page-content">
<?php the_content(); ?>
</article>
<?php endwhile; ?>
<?php endif; ?>
<div class="bg">
<div id="birds-canvas-holder"></div>
</div>
<div class="diy-logo"><img src="<?php echo get_template_directory_uri()."/assets/images/time.png" ?>" alt="点击可展开或收缩"></div>
<div class="archives">
<?php
$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 '</ul>';
endif;
echo '<h4 class="m-title">';
echo the_time( 'Y-m' );
echo '</h4>';
echo '<ul class="archives-monthlisting">';
$ul_open = true;
endif;
$previous_year = $year;
$previous_month = $month;
?>
<li style="min-height: 40px;">
<a href="<?php the_permalink(); ?>"><span class="rq"><?php the_time('Y-m-j'); ?></span>
<div class="atitle"><?php the_title(); ?></div><span class="sp3"></span><span class="sp4"></span></a>
<div class="diy-card">
<?php get_template_part('template-parts/post/content-card'); ?>
</div>
</li>
<?php endforeach; ?>
</ul>
<div class="diy-bt"><img src="<?php echo get_template_directory_uri()."/assets/images/timebt.png" ?>" alt="点击可展开或收缩"></div>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<script src="https://xxxxx.com/archive/three.min.js"></script>
<script src="https://xxxxx.com/archive/CanvasRenderer.js"></script>
<script src="https://xxxxx.com/archive/Projector.js"></script>
<script src="https://xxxxx.com/archive/TweenMax.min.js"></script>
<script src="https://xxxxx.com/archive/main-0a79fb13e7.min.js"></script>
<script>
$('.archives ul.archives-monthlisting' ).hide();
//$('.archives ul.archives-monthlisting:first' ).show();
//$('.archives .m-title:first').css('background','#DDC6C4');
$('.archives .m-title' ).click( function () {
$('.archives .m-title' ).css('background','#fff');
$(this).next().fadeToggle('fast');
$(this).css('background','#DDC6C4');
return false;
} );
$( '.diy-logo' ) . on( 'click', function ( e ) {
e . preventDefault();
if ( $( this ) . data( 's' ) ) {
$( this ) . data( 's', '' );
$('.archives ul.archives-monthlisting').show();
} else {
$( this ) . data( 's', 1 );
$('.archives ul.archives-monthlisting').hide();
}
} );
</script>
四、新建页面
然后我们登入到WP后台 —> 新建页面 —>时光轴

参考原创文章:
https://icss.me/1308.html
博主,这个pages文件夹是新建的吗,我放进去模板里面没有这个选项
对的,自己在服务器上创建下
php文件将xxx修改成自己的域名,放在/wordpress/wp-includes/page下
图片放在,/wordpress/wp-includes/assets/images下
JS放在,/wordpress/archive下
还需要修改什么吗
不需要修改
我这样操作之后刷新,模板里面还是没有时光轴这个选项,只有默认首页、空白页面、友情链接
存放在主题下的page或者pages目录下