搬码资源网广告位 搬码资源网广告位

简约WordPress时间轴归档模板

下面是搬码源码网 abnma.com 通过网络收集整理的代码片段。搬码源码网小编现在分享给大家,也给大家做个参考。

这个时间轴在之前的基础上重新美化了一下,弄了些背景图上去,打造一把伞的样子,顶部一个中等图,一个父亲拉着他女儿的故事,同时也更改了页脚的背景,挺喜欢这风格的。

一、先准备几个图片,放在主题 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} 去掉就行

以上是搬码源码网(abnma.com)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得搬码源码网网站内容还不错,欢迎将搬码源码网网站推荐给程序员好友。

声明:
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。
本站资源来自网络收集,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
如果您喜欢该程序,请支持正版软件,得到更好的正版服务。
本文链接:https://www.abnma.com/11114.html,转载请注明出处。
如有侵权,请邮件联系我们删除处理。

0
搬码资源网广告位

评论0

请先

没有账号? 注册  忘记密码?