WordPress添加类似说说、微博的时间轴微语页面

这个版本的WordPress可以直接使用，CSS样式可以完美兼容。效果如图

使用方法：

一、后台配置

新建微语功能

将下面的代码复制粘贴到主题的functions.php函数文件中，为WordPress添加微语功能。添加完成后，可以在WordPress后台菜单中找到"微语"这一项。

php 复制代码

//新建微语功能 
add_action('init', 'my_shuoshuo');
function my_shuoshuo()
{ $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' => true, 'hierarchical' => false,
'menu_position' => null, 'supports' => array('editor','author','title','comments') );
register_post_type('weiyu',$args);
}

添加微语模板

添加页面模板文件，新建一个template-weiyu.php文件，将下面代码复制进去，上传到你主题的pages页面目录。

php 复制代码

<?php
/*
Template Name: 微言微语
*/
?>
<?php get_header(); ?>
<style type="text/css">
.weiyu-header h1 {
    font-size: 12px;
    font-size: 1.6rem;
    line-height: 30px;
    text-align: center;
    margin: 0 0 15px 0;
}
.weiyu-title {
    font-size: 13px;
    margin: 10px -21px 10px -21px;
    padding: 0 15px;
    border-bottom: 1px solid #ebebeb;
    border-left: 5px solid #0088cc;
}
</style>
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <header class="weiyu-header">
                        <h1 class="single-title"><?php the_title(); ?></h1>
                        <h3 class="weiyu-title">目前有 <?php $count_posts = wp_count_posts('weiyu'); echo $published_posts = $count_posts->publish;?> 个微语，于<?php $last = $wpdb->get_results("SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'weiyu')");$last = date('Y年n月j日', strtotime($last[0]->MAX_m));echo $last; ?>更新。
                         </h3>
                    </header>
                        <main id="main" class="site-main" role="main">
                        <!--noptimize-->
                        <div class="weiyu">
                             <ul class="archives-monthlisting">
                             <?php $limit = get_option('posts_per_page');$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;query_posts('post_type=weiyu&post_status=publish&showposts=' . $limit=15 . '&paged=' . $paged);if (have_posts()) : while (have_posts()) : the_post(); ?>
                             <li><?php echo get_avatar( get_the_author_email(), 40 ); ?>
                             <div class="calendar-year">
                             <div class="cal-year"><?php echo get_the_time('y') ?></div>
                             </div>
                             <div class="calendar">
                             <div class="cal-month month-<?php echo get_the_time('m') ?>"><?php echo get_the_time('M') ?></div>
                             <div class="cal-date"><?php echo get_the_time('j') ?></div>
                             </div><em></em>
                             <div class="weiyu-content"><?php the_content(); ?><br/><div class="weiyu-meta"><span><i class="fa fa-user-circle"></i>：<?php the_author() ?>&nbsp;&nbsp;<a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" title="<?php _e( '点赞', 'begin' ); ?>" class="dingzan<?php if(isset($_COOKIE['zm_like_'.$post->ID])) echo ' done';?>"><i class="fa fa-thumbs-o-up"></i>：(<i class="count"><?php if( get_post_meta($post->ID,'zm_like',true) ){
                                 echo get_post_meta($post->ID,'zm_like',true);
                                 } else {
                                     echo '0';
                                     }?></i>)</a></span></div>
                             </div>
                             <?php endwhile;endif; ?>
                             </li>
                             </ul>
                        </div>
                        <!--/noptimize-->
                        </main><!-- .site-main -->
                </article><!-- #page -->
            <?php begin_pagenav(); ?>
<?php get_footer(); ?>

CSS样式美化

为微语页面添加CSS样式，复制以下代码加到你主题的style.css中。可根据自己的情况进行修改。

需要注意的是代码中/波浪线/bolangxian.png路径注意修改成自己的

php 复制代码

<ol class="linenums"><li class="L0">/*微语*/<li class="L1">strong { font-weight: normal;}<li class="L2">.weiyu {<li class="L3">position: relative;<li class="L4">padding: 10px 0;<li class="L5">}<li class="L6">.weiyu li {<li class="L7">padding: 8px 0;<li class="L8">display: block;<li class="L9">}<li class="L0">.weiyu-content {<li class="L1">box-shadow: 0 0 3px RGBA(0,0,0,.15);<li class="L2">background-color: #f9f9f9;<li class="L3">border:1px #ccc solid;<li class="L4">border-radius: 4px;<li class="L5">font-size: 1.0em;<li class="L6">line-height:1.5em;<li class="L7">margin:0 150px 0 150px;<li class="L8">letter-spacing: 1px;<li class="L9">padding: 20px 20px 0px 30px;<li class="L0">color: #666;<li class="L1">min-height:60px;<li class="L2">position: relative;<li class="L3"> white-space: pre; /* CSS 2.0 */ <li class="L4"> white-space: pre-wrap; /* CSS 2.1 */ <li class="L5"> white-space: pre-line; /* CSS 3.0 */ <li class="L6"> white-space: -pre-wrap; /* Opera 4-6 */ <li class="L7"> white-space: -o-pre-wrap; /* Opera 7 */ <li class="L8"> white-space: -moz-pre-wrap; /* Mozilla */ <li class="L9"> white-space: -hp-pre-wrap; /* HP Printers */ <li class="L0"> word-wrap: break-word; /* IE 5+, 文本行的任意字内断开 */<li class="L1">}<li class="L2">.weiyu-content p{margin:0;}<li class="L3">/*作者*/<li class="L4">.weiyu-meta {text-align: right;letter-spacing: 0px;margin-top:-15px;}<li class="L5">.weiyu-meta span{background-color:#f9f9f9;border-radius:3px;padding:2px 5px;font-size:13px}<li class="L6">.weiyu-meta a {color: #666 !important;}<li class="L7">/*年月日*/<li class="L8">.calendar{text-align:center;position:relative;margin-bottom:5px;margin-right:-5px;margin-top:0;border:1px solid #c9c9c9;-webkit-border-top-left-radius:7px;-webkit-border-bottom-right-radius:7px;border-radius-topleft:7px;border-radius-bottomright:7px;border-top-left-radius:7px;border-bottom-right-radius:7px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;top:20px;float:left;margin-left: 3px;-webkit-box-shadow:#c6c6c6 1px 1px 3px;box-shadow:#c6c6c6 1px 1px 3px}<li class="L9">.calendar-year{text-align:center;position:relative;margin-bottom:5px;margin-right:-5px;margin-top:0;border:1px solid #c9c9c9;-webkit-border-top-left-radius:7px;border-bottom-left-radius:7px;top:39px;float:left;margin-left: 27px;}<li class="L0">.cal-year{color:#b2b1b2;background-color:#e9e9e9;text-shadow:white -1px -1px 1px;-webkit-border-top-left-radius:6px;border-radius-bottomleft:6px;border-bottom-left-radius:6px;letter-spacing:-2px;font:bold 15px Helvetica,"Arial Rounded MT Bold",Geneva,sans-serif;padding:1px 4px 2px 0;text-align:center;border:1px solid #fff}<li class="L1">.cal-month{-webkit-border-top-left-radius:6px;border-radius-topleft:6px;border-top-left-radius:6px;font-size:10px;font-weight:bold;color:#fff;letter-spacing:0;text-transform:uppercase;padding:3px 10px}<li class="L2">.cal-date{color:#222;background-color:#e9e9e9;text-shadow:white -1px -1px 1px;-webkit-border-bottom-right-radius:6px;border-radius-bottomright:6px;border-bottom-right-radius:6px;letter-spacing:-2px;font:bold 21px Helvetica,"Arial Rounded MT Bold",Geneva,sans-serif;padding:1px 4px 2px 0;text-align:center;border:1px solid #fff}<li class="L3">.month-01{background-color:#767c8f}.month-02{background-color:#345abe}.month-03{background-color:#37838d}.month-04{background-color:#55b06c}.month-05{background-color:#409ad5}.month-06{background-color:#be63c5}<li class="L4">.month-07{background-color:#f79445}.month-08{background-color:#4e1e00}.month-09{background-color:#a04262}.month-10{background-color:#284461}.month-11{background-color:#4d1d77}.month-12{background-color:#af1919}<li class="L5">/*波浪线*/<li class="L6">.weiyu li em{float:left;background:url("bolangxian.png") no-repeat;width:55px;height:10px;margin:42px 0 0 26px;}<li class="L7">/*头像*/<li class="L8">.weiyu .avatar{border-radius: 50%;margin: 26px 35px 0 5px;float:right;padding: 0px;border: 1px #ddd solid;display: block;transition: .5s;width: 40px;height: 40px;overflow:hidden;}<li class="L9">.weiyu li:hover .avatar {<li class="L0">transform: rotate(360deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);border-color: #0c0;}<li class="L1">/*前面的轴*/<li class="L2">.weiyu:before {<li class="L3">height: 100%;<li class="L4">width: 2px;<li class="L5">background: #eee;<li class="L6">position: absolute;<li class="L7">left: 105px;<li class="L8">content: "";<li class="L9">top:0px;<li class="L0">}<li class="L1">.weiyu-content:before {<li class="L2">position: absolute;<li class="L3">top: 40px;<li class="L4">bottom: 0px;<li class="L5">left: -51px;<li class="L6">background: #fff;<li class="L7">height: 12px;<li class="L8">width: 12px;<li class="L9">border-radius: 6px;<li class="L0">content: "";<li class="L1">box-shadow: inset 0 0 2px #0c0;<li class="L2">}<li class="L3">.weiyu-content:after {<li class="L4">position: absolute;<li class="L5">top: 42px;<li class="L6">bottom: 0px;<li class="L7">left: -49px;<li class="L8">background: #ccc;<li class="L9">height: 8px;<li class="L0">width: 8px;<li class="L1">border-radius: 6px;<li class="L2">content: "";<li class="L3">}<li class="L4">.weiyu li:hover .weiyu-content:after {<li class="L5">background: #0c0;<li class="L6">-webkit-transform: scale(1.3);<li class="L7">-moz-transform: scale(1.3);<li class="L8">-ms-transform: scale(1.3);<li class="L9">-o-transform: scale(1.3);<li class="L0">}<li class="L1">.weiyu li:hover .weiyu-content:before {-webkit-transform: scale(1.3);<li class="L2">-moz-transform: scale(1.3);<li class="L3">-ms-transform: scale(1.3);<li class="L4">-o-transform: scale(1.3);}<li class="L5">/*后面的轴*/<li class="L6">.weiyu:after {<li class="L7">height: 100%;<li class="L8">width: 2px;<li class="L9">background: #eee;<li class="L0">position: absolute;<li class="L1">right: 100px;<li class="L2">content: "";<li class="L3">top:0px;<li class="L4">}<li class="L5">.weiyu-meta:before {<li class="L6">position: absolute;<li class="L7">top: 42px;<li class="L8">bottom: 0px;<li class="L9">right: -56px;<li class="L0">background: #fff;<li class="L1">height: 12px;<li class="L2">width: 12px;<li class="L3">border-radius: 6px;<li class="L4">content: "";<li class="L5">z-index:2;<li class="L6">box-shadow: inset 0 0 2px #0c0;<li class="L7">}<li class="L8">.weiyu-meta:after {<li class="L9">position: absolute;<li class="L0">top: 44px;<li class="L1">bottom: 0px;<li class="L2">right: -54px;<li class="L3">background: #ccc;<li class="L4">height: 8px;<li class="L5">width: 8px;<li class="L6">z-index:2;<li class="L7">border-radius: 6px;<li class="L8">content: "";<li class="L9">}<li class="L0">.weiyu li:hover .weiyu-meta:after {<li class="L1">background: #0c0;<li class="L2">}<li class="L3">@media screen and (max-width: 550px) { <li class="L4">.weiyu-content {margin:0 30px 0 30px;padding: 10px 3px 0px 8px;font-size:0.9em;}<li class="L5">.calendar{left: -46px;top:8px;margin-right:-46px;}<li class="L6">.cal-month{font-size:8px;padding:0px 3px}<li class="L7">.cal-date{font:bold 13px Helvetica,"Arial Rounded MT Bold",Geneva,sans-serif;}<li class="L8">.calendar-year{left: -46px;top:26px;}<li class="L9">.cal-year{font:bold 9px Helvetica,"Arial Rounded MT Bold",Geneva,sans-serif;padding:0 1px 0 0;}<li class="L0">.weiyu:before {left: 20px;}<li class="L1">.weiyu-content:before {left: -16px;top:25px;}<li class="L2">.weiyu-content:after {left: -14px;top:27px;}<li class="L3">.weiyu:after {right: 20px;}<li class="L4">.weiyu-meta:before {right: -16px;top:25px;}<li class="L5">.weiyu-meta:after {right: -14px;top:27px;}<li class="L6">.weiyu .avatar{margin: 16px -17px 0 5px;width: 30px;height: 30px;}<li class="L7">.weiyu li em{float:left;width:10px;height:10px;margin:25px 0 0 -12px;}<li class="L8">.weiyu-meta span{font-size:10px}<li class="L9">}

二、前端配置

最后刷新前后端，后台在自定义页面选择模板【微语】即可~，内容发布在微语模块进行编辑

三、注意事项

这个微语页面使用了Font Awesome字体图标，需要安装font awesome 4 menus插件（或者直接将Font Awesome字体放到网站目录下）才能正常显示。或自行修改成Iconfont-阿里巴巴矢量图标库的也可以，看自己选择。。

template-weiyu.php文件内2段图标可自行修改

php 复制代码

fa fa-user-circle
fa fa-thumbs-o-up