关闭边栏(ESC)打开边栏(ESC)
这个时间轴在之前的基础上重新美化了一下，弄了些背景图上去，打造一把伞的样子，顶部一个中等图，一个父亲拉着他女儿的故事，同时也更改了页脚的背景，挺喜欢这风格的。
一、先准备几个图片，放在主题assets/images/目录下，图片可以自己去设计或到网上找，也可以直接复制本站的。
二、新建一个PHP文档，把以下代码全部复制保存到主题page/目录下。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 |
<?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://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} 去掉就行
您这个真的很漂亮，但是我按照您的文章进行创建后，好多样式展示不出来，js和图片这些我已经下载下来保留到服务器上了。。
博主你好。这个模板JS连接打不开了
是的，那是好久前的，现在的JS都放在主题目录下了
挺喜欢这个样式的 能否打包给我
这里都有说怎么弄了呀，至少JS文件等，你可以查看我的，下载下来就是
get_template_part(‘template-parts/post/content-card’);
这是主题其中的一个模板，引用而已，如果你主题没有这个模板，直接在这个位置写上就是
您好！
请问一下在
在
这里为什么报502呢，是不是需要改什么呢，js没有问题！
噢，你在哪里看到502报错呢？