{"id":63,"date":"2024-12-01T12:15:32","date_gmt":"2024-12-01T04:15:32","guid":{"rendered":"https:\/\/demo.rivaxstudio.com\/kalisa\/clean\/?p=63"},"modified":"2025-08-13T15:17:30","modified_gmt":"2025-08-13T07:17:30","slug":"faces-that-have-charmed-us-the-most-escape-us-the-soonest","status":"publish","type":"post","link":"https:\/\/yanxu.guilinkeji.com\/en\/faces-that-have-charmed-us-the-most-escape-us-the-soonest.html","title":{"rendered":"WordPress\u6dfb\u52a0\u65f6\u95f4\u8f74"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n

\u4e00\u4e2a\u65f6\u95f4\u8f74\uff0c\u590d\u5236 CSS \u7c98\u8d34\u5230\u4e3b\u9898\u8bbe\u7f6e–>\u63d2\u5165\u4ee3\u7801–>\u81ea\u5b9a\u4e49css\uff0c\u7136\u540e\u65b0\u5efa\u6587\u7ae0\uff0c\u5c06\u4ee3\u7801\u653e\u5165\u6587\u7ae0\u5373\u53ef<\/strong>\u3002\u8f6c\u81ea\u3010\u5e7f\u7136\u7b14\u8bb0\u3011\u548c\u3010\u4f18\u4eab\u4e91\u3011\uff1b\u4e0b\u9762\u8fd9\u4e2a\u4ee3\u7801\u662f\u3010\u5e7f\u7136\u7b14\u8bb0\u3011\u7684\u539f\u59cb\u7248\uff0c\u76f4\u63a5\u65b0\u5efa\u6587\u7ae0\u5373\u53ef\u3002<\/p>\n\n

div.timenode {\n    position:relative;\n}\ndiv.timenode:before,div.timenode:after {\n    content:'';\n    z-index:1;\n    position:absolute;\n    background:rgba(57,186,232,0.5);\n    width:2px;\n    left:7px;\n}\ndiv.timenode:before {\n    top:0px;\n    height:6px;\n}\ndiv.timenode:after {\n    top:26px;\n    height:calc(100% - 26px);\n}\ndiv.timenode:last-child:after {\n    height:calc(100% - 26px - 16px);\n    border-bottom-left-radius:2px;\n    border-bottom-right-radius:2px;\n}\ndiv.timenode .meta,div.timenode .body {\n    max-width:calc(100% - 24px);\n}\ndiv.timenode .meta {\n    position:relative;\n    color:#5e5e5e;\n    font-size:0.875rem;\n    line-height:32px;\n    height:32px;\n}\ndiv.timenode .meta:before,div.timenode .meta:after {\n    content:'';\n    position:absolute;\n    top:8px;\n    z-index:2;\n}\ndiv.timenode .meta:before {\n    background:rgba(36,136,136);\n    width:16px;\n    height:16px;\n    border-radius:8px;\n    -webkit-border-radius:8px;\n}\ndiv.timenode .meta:after {\n    background:#00d084;\n    width:16px;\n    height:16px;\n    border-radius:8px;\n    -webkit-border-radius:8px;\n    transform:scale(0.5);\n    -webkit-transform:scale(0.5);\n    -khtml-transform:scale(0.5);\n    -moz-transform:scale(0.5);\n    -o-transform:scale(0.5);\n    -ms-transform:scale(0.5);\n    transition:all 0.28s ease;\n    -webkit-transition:all 0.28s ease;\n    -khtml-transition:all 0.28s ease;\n    -moz-transition:all 0.28s ease;\n    -o-transition:all 0.28s ease;\n    -ms-transition:all 0.28s ease;\n}\ndiv.timenode .meta p {\n    font-weight:bold;\n    margin:0 0 0 24px;\n}\ndiv.timenode .body {\n    margin:4px 0 16px 24px;\n    padding:16px;\n    border-radius:8px;\n    -webkit-border-radius:8px;\n    background:#f0f0f0;\n    display:-webkit-box;\n    display:-moz-box;\n    display:inline-block;\n}\ndiv.timenode .body:empty {\n    display:-webkit-box;\n    display:-moz-box;\n    display:none;\n}\ndiv.timenode .body >*:first-child {\n    margin-top:0.25em;\n}\ndiv.timenode .body >*:last-child {\n    margin-bottom:0.25em;\n}\ndiv.timenode .body .highlight {\n    border:1px solid #e5e5e5;\n}\ndiv.timenode:hover .meta {\n    color:#181818;\n}\ndiv.timenode:hover .meta:before {\n    background:#0693e3;\n}\ndiv.timenode:hover .meta:after {\n    background:#00d084;\n    transform:scale(1);\n    -webkit-transform:scale(1);\n    -khtml-transform:scale(1);\n    -moz-transform:scale(1);\n    -o-transform:scale(1);\n    -ms-transform:scale(1);\n}<\/code><\/pre>\n\n
\u00a0<\/div>\n
\n
\u3010\u4f18\u4eab\u4e91\u3011\u7684\u6539\u7248<\/h2>\n\n
\u65f6\u95f4\u8f74\u53ef\u4ee5\u5e2e\u52a9\u4f60\u8bb0\u5f55\u7f51\u7ad9\u7684\u53d1\u5c55\u5386\u53f2\u4ee5\u53ca\u5404\u79cd\u91cd\u8981\u4e8b\u4ef6\uff0c\u672c\u6b21\u6559\u7a0b\u9002\u7528\u4e8e\u5927\u591a\u6570WordPress\u7f51\u7ad9\u3002\u5728\u6b64\u57fa\u7840\u4e0a\u589e\u52a0\u4e86\u4e00\u4e2aWordPress\u540e\u53f0\u53d1\u5e03\u529f\u80fd\u3002<\/p>\n\n
\"\"<\/figure>\n\n
\u6559\u7a0b\u6b65\u9aa4<\/p>\n\n
\u672c\u6b21\u6559\u7a0b\u5c06\u4f1a\u5206\u4e3a\u4e24\u4e2a\u4e3b\u8981\u6b65\u9aa4\uff1a<\/p>\n\n
    \n
  1. \u6ce8\u518c\u81ea\u5b9a\u4e49\u6587\u7ae0\u7c7b\u578b<\/li>\n\n
  2. \u6dfb\u52a0\u81ea\u5b9a\u4e49\u6a21\u677f<\/li>\n<\/ol>\n\n
    \u6ce8\u518c\u81ea\u5b9a\u4e49\u6587\u7ae0\u7c7b\u578b<\/h3>\n\n
    \u9996\u5148\uff0c\u6253\u5f00\u4e3b\u9898\u6587\u4ef6\uff0c\u524d\u5f80\u4e3b\u9898\u6587\u4ef6\u00a0functions.php<\/code>\uff0c\u6dfb\u52a0\u4e0b\u65b9\u4ee3\u7801\u6765\u6ce8\u518c\u81ea\u5b9a\u4e49\u6587\u7ae0\u7c7b\u578b\u65f6\u95f4\u8f74\uff1a<\/p>\n\n
    \/\/\u65f6\u95f4\u8f74\u4ee3\u7801\nadd_action('init', 'my_time_axis');\n\nfunction my_time_axis() {\n    $labels = array(\n        'name'               => '\u65f6\u95f4\u8f74',\n        'singular_name'      => '\u65f6\u95f4\u8f74',\n        'add_new'            => '\u53d1\u8868\u65f6\u95f4\u8f74',\n        'add_new_item'       => '\u53d1\u8868\u65f6\u95f4\u8f74',\n        'edit_item'          => '\u7f16\u8f91\u65f6\u95f4\u8f74',\n        'new_item'           => '\u65b0\u65f6\u95f4\u8f74',\n        'view_item'          => '\u67e5\u770b\u65f6\u95f4\u8f74',\n        'search_items'       => '\u641c\u7d22\u65f6\u95f4\u8f74',\n        'not_found'          => '\u6682\u65e0\u65f6\u95f4\u8f74',\n        'not_found_in_trash' => '\u6ca1\u6709\u5df2\u9057\u5f03\u7684\u65f6\u95f4\u8f74',\n        'parent_item_colon'  => '',\n        'menu_name'          => '\u65f6\u95f4\u8f74'\n    );\n\n    $args = array(\n        'labels'             => $labels,\n        'public'             => true,\n        'publicly_queryable' => true,\n        'show_ui'            => true,\n        'show_in_menu'       => true,\n        'query_var'          => true,\n        'rewrite'            => true,\n        'capability_type'    => 'post',\n        'has_archive'        => true,\n        'hierarchical'       => false,\n        'menu_position'      => null,\n        'supports'           => array('title', 'editor', 'author')\n    );\n\n    register_post_type('timeline', $args);\n}<\/code><\/pre>\n\n
    \u5c06\u4e0a\u8ff0\u4ee3\u7801\u6dfb\u52a0\u5b8c\u6210\u540e\uff0c\u4f60\u4f1a\u5728WordPress\u540e\u53f0\u83dc\u5355\u680f\u4e2d\u770b\u5230\u4e00\u4e2a\u201d\u65f6\u95f4\u8f74\u201d\u7684\u83dc\u5355\uff0c\u7528\u4e8e\u53d1\u5e03\u548c\u7ba1\u7406\u65f6\u95f4\u8f74\u6587\u7ae0\u3002<\/p>\n\n
    \"\"<\/figure>\n
    \n
    \u521b\u5efa\u6a21\u677f\u6587\u4ef6<\/h3>\n\n
    \u521b\u5efa\u4e00\u4e2a\u6a21\u677f\u6587\u4ef6\u6216\u5728\u73b0\u6709\u6a21\u677f\u4e2d\u6dfb\u52a0\u4ee3\u7801\uff0c\u4ee5\u663e\u793a\u201c\u65f6\u95f4\u8f74\u201d\u6587\u7ae0\uff0c\u5e76\u6309\u7167\u65f6\u95f4\u6392\u5e8f\u3002\u5728\u4f60\u7684\u4e3b\u9898\u4e2d\u521b\u5efa\u4e00\u4e2a\u6a21\u677f\u6587\u4ef6\u00a0timeline.php<\/code>\uff0c\u6216\u8005\u5728\u73b0\u6709\u6a21\u677f\u6587\u4ef6\u4e2d\u6dfb\u52a0\u4ee5\u4e0b\u4ee3\u7801\uff1a<\/p>\n\n
    <?php\n\/\/ \u83b7\u53d6“\u65f6\u95f4\u8f74”\u6587\u7ae0\n$args = array(\n    'post_type'      => 'timeline',\n    'posts_per_page' => -1,\n    'orderby'        => 'date',\n    'order'          => 'DESC',\n);\n\n$timeline_query = new \\WP_Query($args);\n\n<?php if ($timeline_query->have_posts()) : ?>\n    <div class="timeline">\n    <?php while ($timeline_query->have_posts()) : $timeline_query->the_post(); ?>\n            <div class="timenode">\n        <div class="meta">\n          <p><\/p>\n          <p><?php the_title(); ?><\/p>\n          <p><\/p>\n        <\/div>\n            <div class="body">\n        <p><?php the_content(); ?><\/p>\n      <\/div>\n      <\/div>\n        <?php endwhile; ?>\n  <\/div>\n<?php endif; wp_reset_postdata(); ?>\n\n<style>\ndiv.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);}\n<\/style><\/code><\/pre>\n
    \n
    \u4ee5\u4e0aCSS\u7531\u4e8e\u957f\u5ea6\u539f\u56e0\u5df2\u7ecf\u538b\u7f29\uff0c\u5982\u679c\u9700\u8981\u4fee\u6539\u53ef\u4ee5\u683c\u5f0f\u5316\u56de\u6765\u3002<\/p>\n\n
    \u4e3b\u9898\u793a\u4f8b\uff1aCoreNext<\/h3>\n\n
    \u4ee5CoreNext\u4e3b\u9898\u4e3a\u4f8b\uff0c\u4f7f\u7528\u5b50\u4e3b\u9898\u7684\u8bdd\uff0c\u524d\u5f80\u00a0CoreNext-Child\/template\/<\/code>\u00a0\u65b0\u5efa\u4e00\u4e2a\u6587\u4ef6\u00a0timeline.php<\/code>\uff0c\u5c06\u4e0b\u8ff0\u4ee3\u7801\u590d\u5236\u8fdb\u53bb\u3002<\/p>\n\n
    <?php\n\/*\nTemplate Name: \u65f6\u95f4\u8f74\n*\/\nnamespace core_next;\nthe_post();\n\n\/\/ \u83b7\u53d6“\u65f6\u95f4\u8f74”\u6587\u7ae0\n$args = array(\n    'post_type'      => 'timeline',\n    'posts_per_page' => -1,\n    'orderby'        => 'date',\n    'order'          => 'DESC',\n);\n\n$timeline_query = new \\WP_Query($args);\n\n?>\n<!doctype html>\n<html lang="zh">\n<?php get_template_part('template\/views\/header'); ?>\n<body>\n<div id="core-next-app">\n    <app-header ref="app_header" id="app-header"><\/app-header>\n    <main class="container">\n        <div class="main-warp">\n            <div class="post-warp">\n                <div class="title-warp">\n                    <h1 class="post-title"><?php the_title() ?><\/h1>\n                <\/div>\n                <div class="page-info-warp">\n                    <?php\n                    if (WordPress::isAdmin()) {\n                        $post_id = get_the_ID();\n                        $edit_post_link = get_edit_post_link($post_id);\n                        echo '<div><i class="czs-pen-write"><\/i> <a href="' . $edit_post_link . '">\u7f16\u8f91<\/a><\/div>';\n                    }\n                    ?>\n                <\/div>\n                <div class="content-warp">\n                    <!--\u9875\u9762\u6587\u7ae0-->\n                    <?php the_content(); ?> \n                    \n                    <!--\u65f6\u95f4\u8f74\u4ee3\u7801-->\n                    <?php if ($timeline_query->have_posts()) : ?>\n                        <div class="timeline">\n                            <?php while ($timeline_query->have_posts()) : $timeline_query->the_post(); ?>\n                                <div class="timenode">\n                                    <div class="meta">\n                                        <p><\/p>\n                                        <p><?php the_title(); ?><\/p>\n                                        <p><\/p>\n                                    <\/div>\n                                    <div class="body">\n                                        <p><?php the_content(); ?><\/p>\n                                    <\/div>\n                                <\/div>\n                            <?php endwhile; ?>\n                        <\/div>\n                    <?php endif; wp_reset_postdata(); ?>\n\n                    <style>\n                        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);}\n                    <\/style>\n                    <!--\u65f6\u95f4\u8f74\u4ee3\u7801-->\n                <\/div>\n            <\/div>\n            <app-comment id="app-comment"><\/app-comment>\n        <\/div>\n    <\/main>\n    <?php get_template_part('template\/module\/footer'); ?>\n<\/div>\n<\/body>\n<?php wp_footer(); ?>\n<\/html><\/code><\/pre>\n\n
    \u968f\u540e\u5230WordPress\u540e\u53f0\u9875\u9762\uff0c\u65b0\u5efa\u9875\u9762\uff0c\u9009\u62e9\u6a21\u677f\u65f6\u95f4\u8f74\u5373\u53ef\u3002<\/p>\n\n
    \u7ed3\u8bed<\/h2>\n\n
    \u901a\u8fc7\u4ee5\u4e0a\u6b65\u9aa4\uff0c\u4f60\u5df2\u7ecf\u6210\u529f\u5728WordPress\u7f51\u7ad9\u4e2d\u521b\u5efa\u4e86\u4e00\u4e2a\u65f6\u95f4\u8f74\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7\u53d1\u5e03\u65f6\u95f4\u8f74\u6587\u7ae0\uff0c\u8bb0\u5f55\u548c\u5c55\u793a\u7f51\u7ad9\u7684\u53d1\u5c55\u5386\u53f2\u53ca\u91cd\u8981\u4e8b\u4ef6\u3002<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"
    \u4e00\u4e2a\u65f6\u95f4\u8f74\uff0c\u590d\u5236 CSS \u7c98\u8d34\u5230\u4e3b\u9898\u8bbe\u7f6e–>\u63d2\u5165\u4ee3\u7801–>\u81ea\u5b9a\u4e49css\uff0c\u7136\u540e […]<\/p>\n","protected":false},"author":1,"featured_media":2055,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,2],"tags":[51,89],"class_list":["post-63","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","category-ziyuan","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/yanxu.guilinkeji.com\/en\/wp-json\/wp\/v2\/posts\/63","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yanxu.guilinkeji.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yanxu.guilinkeji.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yanxu.guilinkeji.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yanxu.guilinkeji.com\/en\/wp-json\/wp\/v2\/comments?post=63"}],"version-history":[{"count":14,"href":"https:\/\/yanxu.guilinkeji.com\/en\/wp-json\/wp\/v2\/posts\/63\/revisions"}],"predecessor-version":[{"id":2067,"href":"https:\/\/yanxu.guilinkeji.com\/en\/wp-json\/wp\/v2\/posts\/63\/revisions\/2067"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/yanxu.guilinkeji.com\/en\/wp-json\/wp\/v2\/media\/2055"}],"wp:attachment":[{"href":"https:\/\/yanxu.guilinkeji.com\/en\/wp-json\/wp\/v2\/media?parent=63"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yanxu.guilinkeji.com\/en\/wp-json\/wp\/v2\/categories?post=63"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yanxu.guilinkeji.com\/en\/wp-json\/wp\/v2\/tags?post=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}