纯代码为wordpress添加说说时间轴

1.functions.php添加如下代码： 

add_action(‘init’, ‘my_custom_init’); function my_custom_init() { $labels = array( ‘name’ => ‘说说’, ‘singular_name’ => ‘singularname’, ‘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’) ); register_post_type(‘shuoshuo’,$args); } 

 

2.创建shuoshuo.php模版，放置在主题目录下，内容如下： 

<?php /* 

Template Name: 说说 

author: 说给你听 

url: http://www.shuogei.com 

*/ 

get_header(); ?><div class=”shuoshuo”> 

<ul class=”archives-monthlisting”> 

<?php query_posts(“post_type=shuoshuo&post_status=publish&posts_per_page=11&paged=” . $paged); 

if (have_posts()) : while (have_posts()) : the_post(); ?> 

<li><span class=”tt”>Time: <?php the_time(‘Y/n/j/G:i’); ?></span><em>—–</em> 

<div class=”shuoshuo-content”><?php the_content(); ?></div><?php endwhile;endif; ?></li> 

</ul> 

</div> 

/*<div class=”pt-3 pb-3″> 

<?php lerm_pagination();?> 

</div>这里是你的主题分页函数，根据自己情况修改。*/ 

 

<?php get_footer();?> 

 

3.css样式，仅供参考，主题不同样式效果不同。 

.shuoshuo { 

position: relative; 

padding: 10px 0; 

} 

.shuoshuo li { 

padding: 8px 0; 

display: block; 

position: relative; 

} 

.shuoshuo-content { 

box-shadow: 0 0 3px RGBA(0,0,0,.15); 

background-color: #fff; 

border:1px #00FF00 solid; 

border-radius: 10px; 

font-size: 1.2em; 

line-height:1.4em; 

margin:0 150px 0 200px; 

letter-spacing: 1px; 

padding: 20px 20px 0px 30px; 

color: #666; 

min-height:60px; 

position: relative; 

white-space: pre; /* CSS 2.0 */ 

white-space: pre-wrap; /* CSS 2.1 */ 

white-space: pre-line; /* CSS 3.0 */ 

white-space: -pre-wrap; /* Opera 4-6 */ 

white-space: -o-pre-wrap; /* Opera 7 */ 

white-space: -moz-pre-wrap; /* Mozilla */ 

white-space: -hp-pre-wrap; /* HP Printers */ 

word-wrap: break-word; /* IE 5+, 文本行的任意字内断开 */ 

} 

.shuoshuo-content p{margin:0;} 

 

/*时间*/ 

.shuoshuo .tt{margin: 18px 0 0 -20px;float:left;font-size:1em;color:#1E90FF} 

.shuoshuo li em{ 

font-size:20px; 

color: #8A2BE2; 

width: 100px; 

height: 10px; 

position: absolute; 

left: 170px; 

top: 22px; 

z-index: 0; 

} 

.shuoshuo li:hover .tt {color: #32CD32;font-weight:bold;} 

 

/*前面的轴*/ 

.shuoshuo:before { 

height: 100%; 

width: 4px; 

background:#8A2BE2; 

position: absolute; 

left: 206px; 

content: “”; 

top:0px; 

} 

 

.shuoshuo-content:after { 

position: absolute; 

top: 23px; 

bottom: 0px; 

left: -40px; 

background:#FF0000; 

height: 14px; 

width: 14px; 

border-radius: 7px; 

content: “”; 

z-index:2; 

} 

.shuoshuo li:hover .shuoshuo-content:after { 

background: #00FF00; 

-webkit-transform: scale(1.5); 

-moz-transform: scale(1.5); 

-ms-transform: scale(1.5); 

-o-transform: scale(1.5); 

} 

 

@media screen and (max-width: 800px) { 

.shuoshuo-content {margin:0 10px 0 7px;padding: 30px 3px 10px 7px;font-size:0.9em;line-height:1.5em;} 

.shuoshuo .tt{ 

border-bottom:1px solid #00FF00; 

position: absolute; 

left: 30px; 

z-index: 1; 

top: -8px; 

} 

.shuoshuo li:hover .tt {color:#0c0;font-size:0.5em;} 

 

.shuoshuo:before {left: 20px;} 

 

.shuoshuo-content:after {left: -33px;top:32px;} 

 

.shuoshuo li em{width:90px;left: -19px;top: 32px;} 

}