修改时轴页面

效果

实现

timeline.php原代码：

<?php 
/*Template Name: 归档时间轴*/
?>

<?php get_header(); ?>

<div class="page-information-card-container"></div>

<?php get_sidebar(); ?>

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<?php
			while ( have_posts() ) :
				the_post();

				get_template_part( 'template-parts/content', 'timeline' );

				if (get_option("argon_show_sharebtn") != 'false') {
					get_template_part( 'template-parts/share' );
				}

				if (comments_open() || get_comments_number()) {
					comments_template();
				}
			endwhile;
		?>

<?php get_footer(); ?>

将timeline.php修改为以下代码：

<?php
/*
Template Name: 时间轴
*/
get_header(); ?>
<?php get_sidebar(); ?>
		
<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<article class="post post-full card bg-white shadow-sm border-0" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<a class="post-title text-center" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
			<div class="post-content" id="post_content">
                <?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) :
                        if ($ul_open) echo '</div>';
                        echo '<h3>' . get_the_time('Y') . '</h3>';
                        echo "<div class='argon-timeline'>";
                        $ul_open = true;
                    endif;
                    $previous_year = $year;
                    $previous_month = $month;
                    ?>
                    <div class='argon-timeline-node'>
                        <div class='argon-timeline-time'><?php the_time('m-d'); ?></div>
									<div class='argon-timeline-card card bg-gradient-secondary shadow-sm'><div class='argon-timeline-title'><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div></div>
                    </div>
                <?php
                endforeach;
                echo '</div>';
                ?>
			</div>
		</article>
		
<style>
	.argon-timeline-card {
		margin-bottom: 4px;
		padding: 4px 20px;
		display: inline-block;
	}
	.argon-timeline-title {
		font-size: 17px;
		font-weight: bold;
		margin-bottom: 0px;
	}
	.post-content {
		line-height:1;
	}
	.argon-timeline-card:before {
		content: '';
		position: absolute;
		left: -18px;
		top: 8px;
		background: var(--themecolor);
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}
	.argon-timeline-time {
    position: absolute;
    left: -110px;
    margin-top: 0px;
    width: 85px;
    text-align: right;
    font-size: 15px;
    line-height: 26px;
	}
	.argon-timeline {
    margin-left: 110px;
    border-left: 3px solid rgba(var(--themecolor-rgbstr),0.2);
    padding-left: 10px;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
	}
</style>
<?php
while ( have_posts() ) :
	the_post();		
	if (get_option("argon_show_sharebtn") != 'false') {
		get_template_part( 'template-parts/share' );
	}
	if (comments_open() || get_comments_number()) {
		comments_template();
	}
endwhile;
?>
<?php get_footer(); ?>
		
	</main>
</div>

参考

Argon 主题修改记录 - 鸦鸦的巢穴 (crowya.com)