为wordpress添加时间轴


预览:http://www.vip.ec/?page_id=1718

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.mizuiren.com/141.html
*/
get_header(); ?><div class=”shuoshuo”>
<ul class=”archives-monthlisting”>
<?php query_posts(“post_type=shuoshuo&post_status=publish&posts_per_page=-1″);if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><span class=”tt”><?php the_time(‘Y/n/j/G:i’); ?></span><em>——–</em>
<div class=”shuoshuo-content”><?php the_content(); ?><br/></div><?php endwhile;endif; ?></li>
</ul>
</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.5em;
margin:0 150px 0 200px;
letter-spacing: 1px;
padding: 20px 20px
5px 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:
35px 0 0 20px;float:left;font-size:1em;}
.shuoshuo li em
{ width: 28px;
height: 10px;
position: absolute;

left: 170px;
top:42px;
z-index: 0;

color:#9400D3;
font-size:20px
}
.shuoshuo li:hover .tt
{color:#0c0;font-weight:bold;}

/*前面的轴*/
.shuoshuo:before {
height: 100%;
width: 4px;
background: #9400D3;
position:
absolute;
left: 217px;
content: “”;
top:0px;
}
.shuoshuo-
content:before {
position: absolute;
top: 40px;
bottom: 0px;
left: -42px;
background: #FFFF00;
height: 20px;
width: 20px;
border-radius: 10px;
content: “”;
box-shadow: inset 0 0 4px
#0c0;
z-index:1;
}

@media screen and (max-width: 800px) {
.shuoshuo-content {margin:0 -10px 0px -40px;padding: 25px
10px 5px 10px;font-size:0.9em;}
.shuoshuo .tt{

width: 130px;
height: 10px;
position: absolute;

left: -50px;
z-index: 1;
top:-25px;
font-
size:0.8em;
color: #1E90FF;
}
.shuoshuo li:hover .tt
{color:#0c0;font-size:0.5em;}
.shuoshuo:before {left: -8px;}
.shuoshuo-content:before {left: -28px;top:30px;}

.shuoshuo li
em{width: 100px;left: -55px;top: 32px;}}


Leave a Comment

Scroll Up