网站增加微言微语页面

好久没有折腾网站了，偶尔也只是发一些类似流水账似的文章。
并不是没事可写，有时因为是一两句的事感觉没必要写。
于是周末想着是不是该整一个类似朋友圈微博类的页面，用来写一下短心情类的。
参照网络上的方法，几经修改，终于完成了。传送门——-> 微言微语

1. 在主题的functions.php里面加入以下代码：

//说说<br />
add_action('init', 'my_custom_init');<br />
function my_custom_init() {<br />
$labels = array( 'name' =&gt; '说说', 'singular_name' =&gt; 'singularname', 'add_new' =&gt; '发表说说', 'add_new_item' =&gt; '发表说说', 'edit_item' =&gt; '编辑说说', 'new_item' =&gt; '新说说', 'view_item' =&gt; '查看说说', 'search_items' =&gt; '搜索说说', 'not_found' =&gt; '暂无说说', 'not_found_in_trash' =&gt; '没有已遗弃的说说', 'parent_item_colon' =&gt; '', 'menu_name' =&gt; '说说' ); $args = array( 'labels' =&gt; $labels, 'public' =&gt; true, 'publicly_queryable' =&gt; true, 'show_ui' =&gt; true, 'show_in_menu' =&gt; true, 'query_var' =&gt; true, 'rewrite' =&gt; true, 'capability_type' =&gt; 'post', 'has_archive' =&gt; true, 'hierarchical' =&gt; false, 'menu_position' =&gt; null, 'supports' =&gt; array('title','editor','author') ); register_post_type('shuoshuo',$args); }<br />

2. 新建一个shuoshuo.php文件放到你正在使用的主题根目录里，把下面代码放入shuoshuo.php中：

<?php /*<br />
Template Name: 说说<br />
author: 小王子<br />
url: https://www.wanghao.me<br />
*/<br />
get_header(); ?></p>
<p><div id="primary" class="content-area" style=""><br />
<main id="main" class="site-main" role="main"><br />
<div id="shuoshuo_content"><br />
<ul class="cbp_tmtimeline"><br />
<?php $limit = get_option('posts_per_page');<br />
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;<br />
query_posts('post_type=shuoshuo&post_status=publish&showposts=' . $limit=10 . '&paged=' . $paged);<br />
if (have_posts()) : while (have_posts()) : the_post(); ?><br />
<li> <span class="shuoshuo_author_img"><?php echo get_avatar( get_the_author_meta( 'user_email' ) ,48 ); ?></span><br />
<a class="cbp_tmlabel" href="javascript:void(0)"><br />
<p></p><br />
<p><?php the_content(); ?></p><br />
<p></p><br />
<p class="shuoshuo_time"><i class="fa fa-clock-o"></i><br />
<?php the_time('Y年n月j日G:i'); ?><br />
</p><br />
</a><br />
<?php endwhile;endif; ?><br />
</li><br />
</ul><br />
</div><br />
</main><br />
</div><br />
<?php kratos_pages(3);?><br />
<script type="text/javascript"><br />
$(function () {<br />
var oldClass = "";<br />
var Obj = "";<br />
$(".cbp_tmtimeline li").hover(function () {<br />
Obj = $(this).children(".shuoshuo_author_img");<br />
Obj = Obj.children("img");<br />
oldClass = Obj.attr("class");<br />
var newClass = oldClass + " zhuan";<br />
Obj.attr("class", newClass);<br />
}, function () {<br />
Obj.attr("class", oldClass);<br />
})<br />
})<br />
</script><br />
<?php get_sidebar(); ?><br />
<?php get_footer();?>

可以根据主题适当调整上述核心代码。

3. 加入 style CSS代码

/*说说*/<br />
#shuoshuo_content {<br />
background-color: #fff;<br />
padding: 10px;<br />
min-height: 500px;<br />
}<br />
/* shuo */<br />
body.theme-dark .cbp_tmtimeline::before {<br />
background: RGBA(255, 255, 255, 0.06);<br />
}<br />
ul.cbp_tmtimeline {<br />
padding: 0;<br />
}<br />
div class.cdp_tmlabel > li .cbp_tmlabel {<br />
margin-bottom: 0;<br />
}<br />
.cbp_tmtimeline {<br />
margin: 30px 0 0 0;<br />
padding: 0;<br />
list-style: none;<br />
position: relative;<br />
}<br />
/* The line */<br />
.cbp_tmtimeline:before {<br />
content: '';<br />
position: absolute;<br />
top: 0;<br />
bottom: 0;<br />
width: 4px;<br />
background: RGBA(0, 0, 0, 0.02);<br />
left: 80px;<br />
margin-left: 10px;<br />
}<br />
/* The date/time */<br />
.cbp_tmtimeline > li .cbp_tmtime {<br />
display: block;<br />
/* width: 29%; */<br />
/* padding-right: 110px; */<br />
max-width: 70px;<br />
position: absolute;<br />
}<br />
.cbp_tmtimeline > li .cbp_tmtime span {<br />
display: block;<br />
text-align: right;<br />
}<br />
.cbp_tmtimeline > li .cbp_tmtime span:first-child {<br />
font-size: 0.9em;<br />
color: #bdd0db;<br />
}<br />
.cbp_tmtimeline > li .cbp_tmtime span:last-child {<br />
font-size: 1.2em;<br />
color: #9BCD9B;<br />
}<br />
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {<br />
color: RGBA(255, 125, 73, 0.75);<br />
}<br />
div.cbp_tmlabel > p {<br />
margin-bottom: 0;<br />
}<br />
/* Right content */<br />
.cbp_tmtimeline > li .cbp_tmlabel {<br />
margin: 0 0 45px 65px;<br />
background: #9BCD9B;<br />
color: #fff;<br />
padding: .8em 1.2em .4em 1.2em;<br />
/* font-size: 1.2em; */<br />
font-weight: 300;<br />
line-height: 1.4;<br />
position: relative;<br />
border-radius: 5px;<br />
transition: all 0.3s ease 0s;<br />
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);<br />
cursor: pointer;<br />
display: block;<br />
}<br />
.cbp_tmlabel:hover {<br />
/* transform:scale(1.05); */<br />
transform: translateY(-3px);<br />
z-index: 1;<br />
-webkit-box-shadow: 0 15px 32px rgba(0, 0, 0, 0.15) !important<br />
}<br />
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {<br />
background: RGBA(255, 125, 73, 0.75);<br />
}<br />
/* The triangle */<br />
.cbp_tmtimeline > li .cbp_tmlabel:after {<br />
right: 100%;<br />
border: solid transparent;<br />
content: " ";<br />
height: 0;<br />
width: 0;<br />
position: absolute;<br />
pointer-events: none;<br />
border-right-color: #9BCD9B;<br />
border-width: 10px;<br />
top: 4px;<br />
}<br />
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {<br />
border-right-color: RGBA(255, 125, 73, 0.75);<br />
}<br />
p.shuoshuo_time {<br />
margin-top: 10px;<br />
border-top: 1px dashed #fff;<br />
padding-top: 5px;<br />
}<br />
/* Media */<br />
@media screen and (max-width: 65.375em) {<br />
.cbp_tmtimeline > li .cbp_tmtime span:last-child {<br />
font-size: 1.2em;<br />
}<br />
}<br />
.shuoshuo_author_img img {<br />
border: 1px solid #ddd;<br />
padding: 2px;<br />
float: left;<br />
border-radius: 64px;<br />
transition: all 1.0s;<br />
}<br />
.avatar {<br />
-webkit-border-radius: 100% !important;<br />
-moz-border-radius: 100% !important;<br />
box-shadow: inset 0 -1px 0 #3333sf;<br />
-webkit-box-shadow: inset 0 -1px 0 #3333sf;<br />
-webkit-transition: 0.4s;<br />
-webkit-transition: -webkit-transform 0.4s ease-out;<br />
transition: transform 0.4s ease-out;<br />
-moz-transition: -moz-transform 0.4s ease-out;<br />
}<br />
.zhuan {<br />
transform: rotateZ(720deg);<br />
-webkit-transform: rotateZ(720deg);<br />
-moz-transform: rotateZ(720deg);<br />
}

4. 在wordpress后台新建单页模板选择第2步建的说说模板。

5. 最后就发说说了，在哪里发不用我说了吧，记住不用填写标题。

现在待解决的问题就是“分页”了？？？？

已解决!
另外增加了侧栏调用或单独的页面显示！

更多精彩可以访问导航中的微语了解！！！