必须记一下心情界面是怎么弄好的

说说这个功能坏就坏在页面不具有普适性

建立子主题

首先这一步不是必须的，但你如果和我一样新手且并没有对博客进行本地布置而是架设在虚拟主机上的话建议重复此步骤，学其他技术宅那样直接把函数加在function.php造成严重后果则自负（什么鬼）

为此对于业余人士来说，建议这一步也不要随便加减文件，去插件中心下载一个child theme configurator，然后创建一个新的子主题，我借鉴和用的都是sakura衍生的主题，所以ui会比较相近。

[warning]之前尝试了好几个古早代码的结果无一例外要么崩溃要么界面不适配丑得没法看，尤其是各种改function.php的，真的很佩服他们的折腾精神，我折腾了几次还原几次之后都快放弃了。[/warning]

说说功能

然后就是从御坂の地下室大佬这里抄到的内容，因为我博客性质比较隐蔽我就不打扰对方了。另外也是写在这里提醒自己一下，千万别盲目的立马照做了，先拉到最后看一下说明再照着来做！

首先把以下代码添加到主题根目录中的functions.php文件中

 //说说页面
function shuoshuo_custom_init()
{
    $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',
            'comments'
 
        )
    );
    register_post_type('shuoshuo', $args);
}
add_action('init', 'shuoshuo_custom_init');

然后添加模板文件，在主题根目录新建一个名为page-shuo.php的文件并将以下代码添加在其中

 
<?php
 
/**
 * Template Name: 说说/微语
 */
 
get_header(); ?>
 
<style>
body.theme-dark .cbp_tmtimeline::before{background:RGBA(255,255,255,0.06)}ul.cbp_tmtimeline{padding:0}div class.cdp_tmlabel > li .cbp_tmlabel{margin-bottom:0}.cbp_tmtimeline{margin:30px 0 0 0;padding:0;list-style:none;position:relative}.cbp_tmtimeline > li .cbp_tmtime{display:block;max-width:70px;position:absolute}.cbp_tmtimeline > li .cbp_tmtime span{display:block;text-align:right}.cbp_tmtimeline > li .cbp_tmtime span:first-child{font-size:0.9em;color:#bdd0db}.cbp_tmtimeline > li .cbp_tmtime span:last-child{font-size:1.2em;color:#9BCD9B}.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child{color:RGBA(255,125,73,0.75)}div.cbp_tmlabel > p{margin-bottom:0}.cbp_tmtimeline > li .cbp_tmlabel{margin:0 0 45px 65px;background:#24a0f0;color:#fff;padding:.8em 1.2em .4em 1.2em;font-weight:300;line-height:1.4;position:relative;border-radius:5px;transition:all 0.3s ease 0s;box-shadow:0 1px 2px rgba(0,0,0,0.15);cursor:pointer;display:block}.cbp_tmlabel:hover{transform:translateY(-3px);z-index:1;-webkit-box-shadow:0 15px 32px rgba(0,0,0,0.15) !important}.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel{background:#7878f0}.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after{border-right-color:#7878f0}.cbp_tmtimeline > li .cbp_tmlabel:after{right:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-right-color:#24a0f0;border-width:10px;top:4px}p.shuoshuo_time{margin-top:10px;border-top:1px dashed #fff;padding-top:5px;font-family:Ubuntu}@media screen and (max-width:65.375em){.cbp_tmtimeline > li .cbp_tmtime span:last-child{font-size:1.2em}}.shuoshuo_author_img img{border:1px solid #ddd;padding:2px;float:left;border-radius:64px;transition:all 1.0s;height:50px}.avatar{-webkit-border-radius:100% !important;-moz-border-radius:100% !important;box-shadow:inset 0 -1px 0 #3333sf;-webkit-box-shadow:inset 0 -1px 0 #3333sf;-webkit-transition:0.4s;-webkit-transition:-webkit-transform 0.4s ease-out;transition:transform 0.4s ease-out;-moz-transition:-moz-transform 0.4s ease-out}.zhuan{transform:rotateZ(720deg);-webkit-transform:rotateZ(720deg);-moz-transform:rotateZ(720deg)}
</style>
 
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <div class="cbp_shuoshuo">
            <?php
            query_posts("post_type=shuoshuo & post_status=publish & posts_per_page=-1");
            if (have_posts()) : ?>
                <ul class="cbp_tmtimeline">
                    <?php
                    while (have_posts()) : the_post(); ?>
                        <li>
                            <span class="shuoshuo_author_img"><img src="<?php echo get_avatar_url(get_the_author_meta('ID')); ?>" class="avatar avatar-48" width="48" height="48"></span>
                            <a class="cbp_tmlabel" href="javascript:void(0)">
                                <p></p>
                                <p><?php the_content(); ?></p>
                                <p></p>
                                <p class="shuoshuo_time"><i class="fa fa-clock-o"></i> <?php the_time('Y年n月j日G:i'); ?></p>
                            </a>
                        </li>
                    <?php endwhile;
                    wp_reset_query();//重置查询
                    ?>
                </ul>
            <?php
            else : ?>
                <h3 style="text-align: center;">你还没有发表说说噢！</h3>
                <p style="text-align: center;">赶快去发表你的第一条说说心情吧！</p>
            <?php
            endif; ?>
        </div>
    </main><!-- #main -->
</div><!-- #primary -->
<script type="text/javascript">
    $(function() {
        var oldClass = "";
        var Obj = "";
        $(".cbp_tmtimeline li").hover(function() {
            Obj = $(this).children(".shuoshuo_author_img");
            Obj = Obj.children("img");
            oldClass = Obj.attr("class");
            var newClass = oldClass + " zhuan";
            Obj.attr("class", newClass);
        }, function() {
            Obj.attr("class", oldClass);
        })
    })
</script>
<?php
get_footer();

最后在后台新建一个页面，模板选择为说说/微语。

注意事项

因为Sakurairo是自带说说功能的，也就是说如果我此刻再加说说功能，一共就有两个说说（是的你后台也确实会有两个），但wp并不会，它会自动合并同类项，因为函数类型撞了。所以必须另外自定义一种函数，这个很简单，在依次照做上面的步骤之前，先把代码复制下来，然后把所有的“说说”和“shuoshuo”都替换成“心情”和“mood”，反正随便你换成啥，就是一定要表现出这是两个不同的函数以及功能，并且在此基础上你想做多少个说说功能都行。

函数和页面模板可以直接在子主题里面加，里面已经引用了父主题了所以无所谓，以后原主题更新了基本上也不会有什么影响。

果然啊自己调试麻烦还是抄代码方便，总之折腾到通宵可太难受了，我要补觉去了www明天看M26！

功能重构及改进

1.首先，在后台主题文件编辑器中的function.php文件末尾添加如下函数（来自sakurairo）

今天中午去看的时候不知道代码怎么的出了点问题，微语界面变成了文章模板列表，一开始猜想是不是css类和本身自带的说说功能重合了，但中途又遇到几次糟心崩溃所以没完全注意，不过这次因为用了子主题倒是没有很麻烦地各种办法想尽去恢复，直接重新复制一个就行了，这次用的是另一个大佬Astrophel扒出来的sakurairo代码（其实之前我也有想扒过不过我怕我扒不完然后直接带着整个站点gg，毕竟托管服务真的没有本地部署那么快），这边也记录一下

# 商业转载请联系作者获得授权，非商业转载请注明出处。
# For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source.
# 协议(License)：署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
# 作者(Author)：Astrophel
# 链接(URL)：https://www.astrophel.top/?p=534
# 来源(Source)：Astrophel

//说说页面
function shuoshuo_custom_init()
{
    $labels = array(
        'name' => __("Ideas", "sakurairo"),
        'singular_name' => __("Idea", "sakurairo"),
        'add_new' => __("Publish New Idea", "sakurairo"),
        'add_new_item' => __("Publish New Idea", "sakurairo"),
        'edit_item' => __("Edit Idea", "sakurairo"),
        'new_item' => __("New Idea", "sakurairo"),
        'view_item' => __("View Idea", "sakurairo"),
        'search_items' => __("Search Idea", "sakurairo"),
        'not_found' => __("Not Found Idea", "sakurairo"),
        'not_found_in_trash' => __("No Idea in the Trash", "sakurairo"),
        'parent_item_colon' => '',
        'menu_name' => __("Ideas", "sakurairo")
    );
    $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('shuoshuo', $args);
}
add_action('init', 'shuoshuo_custom_init');

2.然后向主题根目录中上传下面的文件，命名为page-shuo.php

# 商业转载请联系作者获得授权，非商业转载请注明出处。
# For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source.
# 协议(License)：署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
# 作者(Author)：Astrophel
# 链接(URL)：https://www.astrophel.top/?p=534
# 来源(Source)：Astrophel

<?php
 
/**
 * Template Name: 说说/微语
 */
 
get_header(); ?>
 
<style>
body.theme-dark .cbp_tmtimeline::before{background:RGBA(255,255,255,0.06)}ul.cbp_tmtimeline{padding:0}div class.cdp_tmlabel > li .cbp_tmlabel{margin-bottom:0}.cbp_tmtimeline{margin:30px 0 0 0;padding:0;list-style:none;position:relative}.cbp_tmtimeline > li .cbp_tmtime{display:block;max-width:70px;position:absolute}.cbp_tmtimeline > li .cbp_tmtime span{display:block;text-align:right}.cbp_tmtimeline > li .cbp_tmtime span:first-child{font-size:0.9em;color:#bdd0db}.cbp_tmtimeline > li .cbp_tmtime span:last-child{font-size:1.2em;color:#9BCD9B}.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child{color:RGBA(255,125,73,0.75)}div.cbp_tmlabel > p{margin-bottom:0}.cbp_tmtimeline > li .cbp_tmlabel{margin:0 0 45px 65px;background:#24a0f0;color:#fff;padding:.8em 1.2em .4em 1.2em;font-weight:300;line-height:1.4;position:relative;border-radius:5px;transition:all 0.3s ease 0s;box-shadow:0 1px 2px rgba(0,0,0,0.15);cursor:pointer;display:block}.cbp_tmlabel:hover{transform:translateY(-3px);z-index:1;-webkit-box-shadow:0 15px 32px rgba(0,0,0,0.15) !important}.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel{background:#7878f0}.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after{border-right-color:#7878f0}.cbp_tmtimeline > li .cbp_tmlabel:after{right:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-right-color:#24a0f0;border-width:10px;top:4px}p.shuoshuo_time{margin-top:10px;border-top:1px dashed #fff;padding-top:5px;font-family:Ubuntu}@media screen and (max-width:65.375em){.cbp_tmtimeline > li .cbp_tmtime span:last-child{font-size:1.2em}}.shuoshuo_author_img img{border:1px solid #ddd;padding:2px;float:left;border-radius:64px;transition:all 1.0s;height:50px}.avatar{-webkit-border-radius:100% !important;-moz-border-radius:100% !important;box-shadow:inset 0 -1px 0 #3333sf;-webkit-box-shadow:inset 0 -1px 0 #3333sf;-webkit-transition:0.4s;-webkit-transition:-webkit-transform 0.4s ease-out;transition:transform 0.4s ease-out;-moz-transition:-moz-transform 0.4s ease-out}.zhuan{transform:rotateZ(720deg);-webkit-transform:rotateZ(720deg);-moz-transform:rotateZ(720deg)}
</style>
 
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <div class="cbp_shuoshuo">
            <?php
            query_posts("post_type=shuoshuo & post_status=publish & posts_per_page=-1");
            if (have_posts()) : ?>
                <ul class="cbp_tmtimeline">
                    <?php
                    while (have_posts()) : the_post(); ?>
                        <li>
                            <span class="shuoshuo_author_img"><img src="<?php echo get_avatar_url(get_the_author_meta('ID')); ?>" class="avatar avatar-48" width="48" height="48"></span>
                            <a class="cbp_tmlabel" href="javascript:void(0)">
                                <p></p>
                                <p><?php the_content(); ?></p>
                                <p></p>
                                <p class="shuoshuo_time"><i class="fa fa-clock-o"></i> <?php the_time('Y年n月j日G:i'); ?></p>
                            </a>
                        </li>
                    <?php endwhile;
                    wp_reset_query();//重置查询
                    ?>
                </ul>
            <?php
            else : ?>
                <h3 style="text-align: center;">你还没有发表说说噢！</h3>
                <p style="text-align: center;">赶快去发表你的第一条说说心情吧！</p>
            <?php
            endif; ?>
        </div>
    </main><!-- #main -->
</div><!-- #primary -->
<script type="text/javascript">
    (function() {
        var oldClass = "";
        var Obj = "";(".cbp_tmtimeline li").hover(function() {
            Obj = $(this).children(".shuoshuo_author_img");
            Obj = Obj.children("img");
            oldClass = Obj.attr("class");
            var newClass = oldClass + " zhuan";
            Obj.attr("class", newClass);
        }, function() {
            Obj.attr("class", oldClass);
        })
    })
</script>
<?php
get_footer();

然后再在页面里面新建一个微语模板的空白界面。

页尾设置

顺便把这个也写了我怕我记不住，也是抄的代码，尝试了一下不知道为什么设置为今年的话读取不出来，于是我只好假装我是2021年开了这个博客（其实问题也不大，这个虚拟主机最开始也确实是2021年左右买的）

这里参考的是Hoyue和Nic t or两位大佬的做法

打开主题设置页面-全局设置-页尾设置，在页尾信息那里添加下面的代码，文字部分可以随便改成自己想要的，我觉得没啥必要就没改：

1
2
3

<div style="color: #F08047;margin-top: -18px" class="ui inverted m-text-thin m-text-spaced">
My Blog Has Been Running For：<span id="htmer_time" class="item m-text-thin"></span> 
(*๓´╰╯`๓)</div>

接下来在主题的页尾附加代码这里（主题有个页尾设置的部分），添加下面代码：

<script>
// 运行时间统计
function secondToDate(second) {
    if (!second) {
      return 0;
    }
    var time = new Array(0, 0, 0, 0, 0);
    if (second >= 365 * 24 * 3600) {
      time[0] = parseInt(second / (365 * 24 * 3600));
      second %= 365 * 24 * 3600;
    }
    if (second >= 24 * 3600) {
      time[1] = parseInt(second / (24 * 3600));
      second %= 24 * 3600;
    }
    if (second >= 3600) {
      time[2] = parseInt(second / 3600);
      second %= 3600;
    }
    if (second >= 60) {
      time[3] = parseInt(second / 60);
      second %= 60;
    }
    if (second > 0) {
      time[4] = second;
    }
    return time;
  }
  function setTime() {
    /*此处为网站的创建时间*/
    var create_time = Math.round(new Date(Date.UTC(2021, 5, 12, 0, 0, 0)).getTime() / 1000);
    var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
    currentTime = secondToDate((timestamp - create_time));
    currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
            + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
            + '秒';
    document.getElementById("htmer_time").innerHTML = currentTimeHtml;
  }
  setInterval(setTime, 1000);
 </script>

注意中间有注释的下一行，中间的日期需要自行修改成你网站创建的时间。最后点击保存就可以看到了。如果显示不出来的话可以先用LiteSpeed清一下缓存。