简约WordPress时间轴归档模板
以下代码由PHP站长网 52php.cn收集自互联网现在PHP站长网小编把它分享给大家,仅供参考 这个时间轴在之前的基础上重新美化了一下,弄了些背景图上去,打造一把伞的样子,顶部一个中等图,一个父亲拉着他女儿的故事,同时也更改了页脚的背景,挺喜欢这风格的。 一、先准备几个图片,放在主题 assets/images/目录下,图片可以自己去设计或到网上找,也可以直接复制本站的。 二、新建一个 PHP 文档,把以下代码全部复制保存到主题 page/目录下 <?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.2),0 6px 20px 0 rgba(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,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 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://icss.me/myweb/index/three.min.js"></script> <script src="https://icss.me/myweb/index/CanvasRenderer.js"></script> <script src="https://icss.me/myweb/index/Projector.js"></script> <script src="https://icss.me/myweb/index/TweenMax.min.js"></script> <script src="https://icss.me/myweb/index/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> 三、新建一个页面,模板就选刚才建好的模板就行。以下是效果图,如果你需要显示底部信息的放在,就把最上面的那一行:#footer{display:none} 去掉就行 以上内容由PHP站长网【52php.cn】收集整理供大家参考研究如果以上内容对您有帮助,欢迎收藏、点赞、推荐、分享。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |