社交生活越来越少，越来与不喜欢把生活和个人情绪都往公共空间放了，QQ 、微信、微博这一些的都已经基本是要废了。更多的生活状态都只是装在心里，不再愿意展现出来，也逐渐开始习惯用博客记录下生活的点滴，平常的生活、学习或是其他。
wordpress 确实是个好东西，很多时候有些话想说了写在这里在合适不过了，只是不太和谐的是就算是写几句话也得弄篇文章出来，这就有点费劲了，所以还是更希望有个类似说说 的功能，几条简单的语句表达出来就行。
然后就百度吧，搞了半天搞成了这个样子，算是不错了，地址：https://www.dyxmq.cn/shuoshuo
添加说说的步骤
用的知更鸟主题，首先在 functions.php 里添加：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//新建说说功能 add_action("init", "my_custom_init"); function my_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, "exclude_from_search" =>true, "query_var" => true, "rewrite" => true, "capability_type" => "post", "has_archive" => false, "hierarchical" => false, "menu_position" => null, "supports" => array("editor","author","title", "custom-fields") ); register_post_type("shuoshuo",$args); } |
此时，后台界面会多出一个说说栏目：
点击能发表说说和查看历史说说，发表说说的界面和发表文章 的一样，写说说可以不用携带标题。然后新建一个 template-shuoshuo.php 文件，放到 pages 目录下，填入以下内容，下面要注意替换掉自己的头像 url：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
<?php /* Template Name: 说说页面 author: dyxmq.cn url: https://www.dyxmq.cn/ */ get_header(); ?> <style type="text/css"> #shuoshuo_content { background-color: #fff; padding: 10px; min-height: 500px; } /* shuo */ 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; } /* The line */ .cbp_tmtimeline:before { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; background: RGBA(0, 0, 0, 0.02); left: 80px; margin-left: 10px; } /* The date/time */ .cbp_tmtimeline > li .cbp_tmtime { display: block; /* width: 29%; */ /* padding-right: 110px; */ 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; } /* Right content */ .cbp_tmtimeline > li .cbp_tmlabel { margin: 0 0 45px 65px; background: #9BCD9B; color: #fff; padding: .8em 1.2em .4em 1.2em; /* font-size: 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:scale(1.05); */ 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: RGBA(255, 125, 73, 0.75); } /* The triangle */ .cbp_tmtimeline > li .cbp_tmlabel:after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: #9BCD9B; border-width: 10px; top: 4px; } .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after { border-right-color: RGBA(255, 125, 73, 0.75); } p.shuoshuo_time { margin-top: 10px; border-top: 1px dashed #fff; padding-top: 5px; } /* Media */ @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; } .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); } /* end */ </style> </head> <body> <div id="primary" class="content-area" style=""> <main id="main" class="site-main" role="main"> <div id="shuoshuo_content"> <ul class="cbp_tmtimeline"> <?php query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?> <li> <span class="shuoshuo_author_img"><img src="https://cdn.dyxmq.cn/wp-content/uploads/2017/10/shuoshuo.jpg" 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> <?php endwhile;endif; ?> </li> </ul> </div> </main> <!-- .site-main --> </div> <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_sidebar(); ?> <?php get_footer();?> |
搞定之后在页面 选项卡新建一个页面，把模板设置为说说页面，保存后进入到此页面就会显示所有的说说了。
总结
可以发说说之后比较麻烦的一个点是每次发说说还要进来后台，有点麻烦，考虑了一下之后做了个公众号，最后的效果是给公众号发送消息就能直接发说说了。教程有时间了再补上吧，睡觉~
评论