Browse now:

WordPress添加时间轴

Web servicesXiaobai Technology and resources

WordPress添加时间轴

归零科技
归零科技
2024年12月1日
3 Mins Read
712 Views
0 Comments
归零科技

一个时间轴，复制 CSS 粘贴到主题设置–>插入代码–>自定义css，然后新建文章，将代码放入文章即可。转自【广然笔记】和【优享云】；下面这个代码是【广然笔记】的原始版，直接新建文章即可。

div.timenode {
    position:relative;
}
div.timenode:before,div.timenode:after {
    content:'';
    z-index:1;
    position:absolute;
    background:rgba(57,186,232,0.5);
    width:2px;
    left:7px;
}
div.timenode:before {
    top:0px;
    height:6px;
}
div.timenode:after {
    top:26px;
    height:calc(100% - 26px);
}
div.timenode:last-child:after {
    height:calc(100% - 26px - 16px);
    border-bottom-left-radius:2px;
    border-bottom-right-radius:2px;
}
div.timenode .meta,div.timenode .body {
    max-width:calc(100% - 24px);
}
div.timenode .meta {
    position:relative;
    color:#5e5e5e;
    font-size:0.875rem;
    line-height:32px;
    height:32px;
}
div.timenode .meta:before,div.timenode .meta:after {
    content:'';
    position:absolute;
    top:8px;
    z-index:2;
}
div.timenode .meta:before {
    background:rgba(36,136,136);
    width:16px;
    height:16px;
    border-radius:8px;
    -webkit-border-radius:8px;
}
div.timenode .meta:after {
    background:#00d084;
    width:16px;
    height:16px;
    border-radius:8px;
    -webkit-border-radius:8px;
    transform:scale(0.5);
    -webkit-transform:scale(0.5);
    -khtml-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -o-transform:scale(0.5);
    -ms-transform:scale(0.5);
    transition:all 0.28s ease;
    -webkit-transition:all 0.28s ease;
    -khtml-transition:all 0.28s ease;
    -moz-transition:all 0.28s ease;
    -o-transition:all 0.28s ease;
    -ms-transition:all 0.28s ease;
}
div.timenode .meta p {
    font-weight:bold;
    margin:0 0 0 24px;
}
div.timenode .body {
    margin:4px 0 16px 24px;
    padding:16px;
    border-radius:8px;
    -webkit-border-radius:8px;
    background:#f0f0f0;
    display:-webkit-box;
    display:-moz-box;
    display:inline-block;
}
div.timenode .body:empty {
    display:-webkit-box;
    display:-moz-box;
    display:none;
}
div.timenode .body >*:first-child {
    margin-top:0.25em;
}
div.timenode .body >*:last-child {
    margin-bottom:0.25em;
}
div.timenode .body .highlight {
    border:1px solid #e5e5e5;
}
div.timenode:hover .meta {
    color:#181818;
}
div.timenode:hover .meta:before {
    background:#0693e3;
}
div.timenode:hover .meta:after {
    background:#00d084;
    transform:scale(1);
    -webkit-transform:scale(1);
    -khtml-transform:scale(1);
    -moz-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
}

【优享云】的改版

时间轴可以帮助你记录网站的发展历史以及各种重要事件，本次教程适用于大多数WordPress网站。在此基础上增加了一个WordPress后台发布功能。

归零科技

教程步骤

本次教程将会分为两个主要步骤：

  1. 注册自定义文章类型
  2. 添加自定义模板

注册自定义文章类型

首先，打开主题文件，前往主题文件 functions.php，添加下方代码来注册自定义文章类型时间轴：

//时间轴代码
add_action('init', 'my_time_axis');

function my_time_axis() {
    $labels = array(
        'name'               => '时间轴',
        'singular_name'      => '时间轴',
        'add_new'            => '发表时间轴',
        'add_new_item'       => '发表时间轴',
        'edit_item'          => '编辑时间轴',
        'new_item'           => '新时间轴',
        'view_item'          => '查看时间轴',
        'search_items'       => '搜索时间轴',
        'not_found'          => '暂无时间轴',
        'not_found_in_trash' => '没有已遗弃的时间轴',
        'parent_item_colon'  => '',
        'menu_name'          => '时间轴'
    );

    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'publicly_queryable' => true,
        'show_ui'            => true,
        'show_in_menu'       => true,
        'query_var'          => true,
        'rewrite'            => true,
        'capability_type'    => 'post',
        'has_archive'        => true,
        'hierarchical'       => false,
        'menu_position'      => null,
        'supports'           => array('title', 'editor', 'author')
    );

    register_post_type('timeline', $args);
}

将上述代码添加完成后，你会在WordPress后台菜单栏中看到一个”时间轴”的菜单，用于发布和管理时间轴文章。

归零科技

创建模板文件

创建一个模板文件或在现有模板中添加代码，以显示“时间轴”文章，并按照时间排序。在你的主题中创建一个模板文件 timeline.php，或者在现有模板文件中添加以下代码：

<?php
// 获取“时间轴”文章
$args = array(
    'post_type'      => 'timeline',
    'posts_per_page' => -1,
    'orderby'        => 'date',
    'order'          => 'DESC',
);

$timeline_query = new \WP_Query($args);

<?php if ($timeline_query->have_posts()) : ?>
    <div class="timeline">
    <?php while ($timeline_query->have_posts()) : $timeline_query->the_post(); ?>
            <div class="timenode">
        <div class="meta">
          <p></p>
          <p><?php the_title(); ?></p>
          <p></p>
        </div>
            <div class="body">
        <p><?php the_content(); ?></p>
      </div>
      </div>
        <?php endwhile; ?>
  </div>
<?php endif; wp_reset_postdata(); ?>

<style>
div.timenode{position:relative;}div.timenode:before,div.timenode:after{content:'';z-index:1;position:absolute;background:rgba(57,186,232,0.5);width:2px;left:7px;}div.timenode:before{top:0px;height:6px;}div.timenode:after{top:26px;height:calc(100% - 26px);}div.timenode:last-child:after{height:calc(100% - 26px - 16px);border-bottom-left-radius:2px;border-bottom-right-radius:2px;}div.timenode .meta,div.timenode .body{max-width:calc(100% - 24px);}div.timenode .meta{position:relative;color:#5e5e5e;font-size:0.875rem;line-height:32px;height:32px;}div.timenode .meta:before,div.timenode .meta:after{content:'';position:absolute;top:8px;z-index:2;}div.timenode .meta:before{background:rgba(36,136,136);width:16px;height:16px;border-radius:8px;-webkit-border-radius:8px;}div.timenode .meta:after{background:#00d084;width:16px;height:16px;border-radius:8px;-webkit-border-radius:8px;transform:scale(0.5);-webkit-transform:scale(0.5);-khtml-transform:scale(0.5);-moz-transform:scale(0.5);-o-transform:scale(0.5);-ms-transform:scale(0.5);transition:all 0.28s ease;-webkit-transition:all 0.28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all 0.28s ease;-o-transition:all 0.28s ease;-ms-transition:all 0.28s ease;}div.timenode .meta p{font-weight:bold;margin:0 0 0 24px;}div.timenode .body{margin:4px 0 16px 24px;padding:16px;border-radius:8px;-webkit-border-radius:8px;background:#f0f0f0;display:-webkit-box;display:-moz-box;display:inline-block;}div.timenode .body:empty{display:-webkit-box;display:-moz-box;display:none;}div.timenode .body >*:first-child{margin-top:0.25em;}div.timenode .body >*:last-child{margin-bottom:0.25em;}div.timenode .body .highlight{border:1px solid #e5e5e5;}div.timenode:hover .meta{color:#181818;}div.timenode:hover .meta:before{background:#0693e3;}div.timenode:hover .meta:after{background:#00d084;transform:scale(1);-webkit-transform:scale(1);-khtml-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);}
</style>

以上CSS由于长度原因已经压缩，如果需要修改可以格式化回来。

主题示例：CoreNext

以CoreNext主题为例，使用子主题的话，前往 CoreNext-Child/template/ 新建一个文件 timeline.php，将下述代码复制进去。

<?php
/*
Template Name: 时间轴
*/
namespace core_next;
the_post();

// 获取“时间轴”文章
$args = array(
    'post_type'      => 'timeline',
    'posts_per_page' => -1,
    'orderby'        => 'date',
    'order'          => 'DESC',
);

$timeline_query = new \WP_Query($args);

?>
<!doctype html>
<html lang="zh">
<?php get_template_part('template/views/header'); ?>
<body>
<div id="core-next-app">
    <app-header ref="app_header" id="app-header"></app-header>
    <main class="container">
        <div class="main-warp">
            <div class="post-warp">
                <div class="title-warp">
                    <h1 class="post-title"><?php the_title() ?></h1>
                </div>
                <div class="page-info-warp">
                    <?php
                    if (WordPress::isAdmin()) {
                        $post_id = get_the_ID();
                        $edit_post_link = get_edit_post_link($post_id);
                        echo '<div><i class="czs-pen-write"></i> <a href="' . $edit_post_link . '">编辑</a></div>';
                    }
                    ?>
                </div>
                <div class="content-warp">
                    <!--页面文章-->
                    <?php the_content(); ?> 
                    
                    <!--时间轴代码-->
                    <?php if ($timeline_query->have_posts()) : ?>
                        <div class="timeline">
                            <?php while ($timeline_query->have_posts()) : $timeline_query->the_post(); ?>
                                <div class="timenode">
                                    <div class="meta">
                                        <p></p>
                                        <p><?php the_title(); ?></p>
                                        <p></p>
                                    </div>
                                    <div class="body">
                                        <p><?php the_content(); ?></p>
                                    </div>
                                </div>
                            <?php endwhile; ?>
                        </div>
                    <?php endif; wp_reset_postdata(); ?>

                    <style>
                        div.timenode{position:relative;}div.timenode:before,div.timenode:after{content:'';z-index:1;position:absolute;background:rgba(57,186,232,0.5);width:2px;left:7px;}div.timenode:before{top:0px;height:6px;}div.timenode:after{top:26px;height:calc(100% - 26px);}div.timenode:last-child:after{height:calc(100% - 26px - 16px);border-bottom-left-radius:2px;border-bottom-right-radius:2px;}div.timenode .meta,div.timenode .body{max-width:calc(100% - 24px);}div.timenode .meta{position:relative;color:#5e5e5e;font-size:0.875rem;line-height:32px;height:32px;}div.timenode .meta:before,div.timenode .meta:after{content:'';position:absolute;top:8px;z-index:2;}div.timenode .meta:before{background:rgba(36,136,136);width:16px;height:16px;border-radius:8px;-webkit-border-radius:8px;}div.timenode .meta:after{background:#00d084;width:16px;height:16px;border-radius:8px;-webkit-border-radius:8px;transform:scale(0.5);-webkit-transform:scale(0.5);-khtml-transform:scale(0.5);-moz-transform:scale(0.5);-o-transform:scale(0.5);-ms-transform:scale(0.5);transition:all 0.28s ease;-webkit-transition:all 0.28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all 0.28s ease;-o-transition:all 0.28s ease;-ms-transition:all 0.28s ease;}div.timenode .meta p{font-weight:bold;margin:0 0 0 24px;}div.timenode .body{margin:4px 0 16px 24px;padding:16px;border-radius:8px;-webkit-border-radius:8px;background:#f0f0f0;display:-webkit-box;display:-moz-box;display:inline-block;}div.timenode .body:empty{display:-webkit-box;display:-moz-box;display:none;}div.timenode .body >*:first-child{margin-top:0.25em;}div.timenode .body >*:last-child{margin-bottom:0.25em;}div.timenode .body .highlight{border:1px solid #e5e5e5;}div.timenode:hover .meta{color:#181818;}div.timenode:hover .meta:before{background:#0693e3;}div.timenode:hover .meta:after{background:#00d084;transform:scale(1);-webkit-transform:scale(1);-khtml-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);}
                    </style>
                    <!--时间轴代码-->
                </div>
            </div>
            <app-comment id="app-comment"></app-comment>
        </div>
    </main>
    <?php get_template_part('template/module/footer'); ?>
</div>
</body>
<?php wp_footer(); ?>
</html>

随后到WordPress后台页面，新建页面，选择模板时间轴即可。

结语

通过以上步骤，你已经成功在WordPress网站中创建了一个时间轴。你可以通过发布时间轴文章，记录和展示网站的发展历史及重要事件。

Tags:

Share Article

归零科技
Follow Me Written By

归零科技

Other Articles

Related Posts

Scan the code
Powered by Joinchat