WordPress添加时间轴

一个时间轴，复制 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后台发布功能。

教程步骤

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

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

注册自定义文章类型

首先，打开主题文件，前往主题文件 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网站中创建了一个时间轴。你可以通过发布时间轴文章，记录和展示网站的发展历史及重要事件。

归零科技

联系我们

归零科技

联系我们

WordPress添加时间轴

【优享云】的改版

注册自定义文章类型

创建模板文件

主题示例：CoreNext

结语

标签：

归零科技

Other Articles

WordPress的翻译汉化主题、插件项目推荐–很给力的团队

WordPress教程：分享一个简单实用的标题+分割线布局样式（适用子比主题）

WordPress教程：分享一个简单实用的标题+分割线布局样式（适用子比主题）

WordPress的翻译汉化主题、插件项目推荐–很给力的团队

暂无评论！抢先评论！

发表回复取消回复

Related Posts

零基础 WordPress 建站：从规划到上线的 18 步清单

DNS 解析与 HTTPS：连接网站、邮箱和 CDN 的上线指南

域名注册与续费：选择、实名、转移和到期管理

WordPress 安装与上线：从域名、服务器到网站后台

内容、预约、会员与业务网站方案

电商网站规划与交付：从商品到订单流程

企业官网内容与转化：怎样把业务讲明白

输入并按 Enter 键进行搜索

归零科技

联系我们

输入并按 Enter 键进行搜索

归零科技

联系我们

WordPress添加时间轴

【优享云】的改版

注册自定义文章类型

创建模板文件

主题示例：CoreNext

结语

标签：

分享文章

归零科技

Other Articles

暂无评论！抢先评论！

发表回复 取消回复

Related Posts

发表回复取消回复