WordPress教程 / WordPress

一把伞的时间轴归档页模板

温馨提示:本文最后更新于2021-05-24 20:37:47,某些文章具有时效性,若有错误或已失效,请在下方留言或提交工单提交工单
浅时光 · 5月24日 · 2021年 本文6456个字,预计阅读17分钟 1218次已读
一把伞的时间轴归档页模板文件
价格:免费
    最近更新2021年05月10日

    一、模板图片

    将我共享的网盘中的文件夹下的图片全部存储到原文链接:https://www.dqzboy.com当前主题下的assets/images/目录下

    二、保存JS文件

    将我共享的网盘中JS模板文件全部保存在网站可直接访问的目录下即可,比如我这里在/var/www/wordpress下面创建一个archive目录,并将JS文件上传进去即可

    三、编写代码

    创建一个PHP文件,并保存到主题page/目录下;注意修改JS文件的存储URL路径为自己的文章来源(Source):https://www.dqzboy.com

    [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后台 —> 新建页面 —> 模板选择 时光轴

    1615526774 84b6c1668a545aa

    五、效果展示

    文章来源(Source):https://www.dqzboy.com

    说明:这里我只是截图,实际效果文章来源(Source):https://www.dqzboy.com是动态的

    1615526774 2e9ee0057885067

    参考原创文章:

    https://icss.me/1308文章来源(Source):https://www.dqzboy.com.html



    本文作者:浅时光
    原文链接:https://www.dqzboy.com/6762.html
    版权声明:知识共享署名-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)协议进行许可
    转载时请以超链接形式标明文章原始出处和作者信息

    0 条回应

    必须 注册 为本站用户, 登录 后才可以发表评论!

      本站已稳定运行: | 耗时 0.305 秒 | 查询 31 次 | 内存 12.50 MB