纯代码为wordpress添加时间轴-本站微语时间轴

效果预览:http://www.shuogei.com/?page_id=2129

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;}
}

说明:本文原创归属秋叶网络博客,本站只是稍作修改和改进。



发表评论