WordPress添加微博/说说/碎语/状态功能

微博,QQ空间的状态流行,所以也想在Wordpress上添加这么一个功能。然后看到别人的设置,所以就搬运过来,体验了一下,效果如:我的说说

首先把下面的代码放到主题的functions.php里面。

//shuoshuo
 add_action ('init', 'my_custom_init'); function my_custom_init() { $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, '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); }

之后在主题的目录下,新建一个shuoshuo.php文件,放入下面的代码

<?php 
/*
 Template Name: 说说
 author: 秋叶,Sven修改
 */
 get_header(); ?><div class="shuoshuo">
 <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=shuoshuo&post_status=publish&showposts=' . $limit=10 . '&paged=' . $paged);
        if (have_posts()) : while (have_posts()) : the_post(); ?>
 <li><span class="tt"><?php the_time('庆资y年n月j日H:i'); ?></span>
 <div class="shuoshuo-content"><?php the_content(); ?><br/><div class="shuoshuo-meta"><span >—<?php the_author() ?></span></div></div><?php endwhile;endif; ?></li>
 </ul>
</div>
        <?php if (function_exists('wp_pagenavi')) wp_pagenavi();else { ?><div><?php previous_posts_link('【« 上一页】') ?>     <?php next_posts_link('【下一页 »】') ?></div><?php } ?>
<?php get_footer();?>

其中<?php the_time(‘庆资y年n月j日H:i’); ?>时间这个部分,格式参照Wordpress后台设置-常规中的日期格式和时间格式中的格式,不然发布出的说说很可能都是同一个时间。

然后是CSS样式,在主题目录下新建一个shuoshuo.css文件,放入下面的代码

.shuoshuo {
position: relative;
padding: 10px 0;
}
.shuoshuo li {
padding: 8px 0;
display: block;
}
.shuoshuo-content {
box-shadow: 0 0 3px RGBA(0,0,0,.15);
background-color: #f2f2f2;
border:1px #ccc solid;
border-radius: 4px;
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-meta {
text-align: right;
letter-spacing: 0px;
margin-top:-10px;
}
/*时间*/
.shuoshuo .tt{margin: 35px 0 0 15px;float:left;font-size:0.7em;}
.shuoshuo li em{float:left;width:50px;height:10px;margin:42px 0 0 28px;}
.shuoshuo li:hover .tt {color:#0c0;font-weight:bold;}
/*头像*/
.shuoshuo .zhutou{border-radius: 50%;margin: 25px 35px 0 5px;float:right;padding: 2px;border: 1px #ddd solid;display: block;transition: .5s;width: 40px;height: 40px;overflow:hidden;}
.shuoshuo li:hover .zhutou {
transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);border-color: #0c0;}
/*前面的轴*/
.shuoshuo:before {
height: 100%;
width: 2px;
background: #eee;
position: absolute;
left: 164px;
content: "";
top:0px;
}
.shuoshuo-content:before {
position: absolute;
top: 40px;
bottom: 0px;
left: -42px;
background: #fff;
height: 12px;
width: 12px;
border-radius: 6px;
content: "";
box-shadow: inset 0 0 2px #0c0;
}
.shuoshuo-content:after {
position: absolute;
top: 42px;
bottom: 0px;
left: -40px;
background: #ccc;
height: 8px;
width: 8px;
border-radius: 6px;
content: "";
}
.shuoshuo li:hover .shuoshuo-content:after {
background: #0c0;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
}
.shuoshuo li:hover .shuoshuo-content:before {-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);}
/*后面的轴*/
.shuoshuo:after {
height: 100%;
width: 2px;
background: #eee;
position: absolute;
right: 100px;
content: "";
top:0px;
}
.shuoshuo-meta:before {
position: absolute;
top: 42px;
bottom: 0px;
right: -56px;
background: #fff;
height: 12px;
width: 12px;
border-radius: 6px;
content: "";
z-index:2;
box-shadow: inset 0 0 2px #0c0;
}
.shuoshuo-meta:after {
position: absolute;
top: 44px;
bottom: 0px;
right: -54px;
background: #ccc;
height: 8px;
width: 8px;
z-index:2;
border-radius: 6px;
content: "";
}
.shuoshuo li:hover .shuoshuo-meta:after {
background: #0c0;
}
@media screen and (max-width: 800px) { 
.shuoshuo-content {margin:0 60px 0 70px;padding: 10px 10px 5px 10px;font-size:0.9em;}
.shuoshuo .tt{width:30px;font-weight:bold;margin: 30px 0 0 1px;font-size:0.5em;height: 20px;}
.shuoshuo li:hover .tt {color:#0c0;font-size:0.5em;}
.shuoshuo:before {left: 50px;}
.shuoshuo-content:before {left: -26px;top:30px;}
.shuoshuo-content:after {left: -24px;top:32px;}
.shuoshuo:after {right: 27px;}
.shuoshuo-meta:before {right: -39px;top:33px;}
.shuoshuo-meta:after {right: -37px;top:35px;}
.shuoshuo .zhutou{margin: 17px 5px 0 5px;}
.shuoshuo li em{float:left;width:39px;height:10px;margin:34px 0 0 -1px;}
}

然后是调用这个CSS文件,在主题的functions.php中添加下面的代码

//调用shuoshuo.css
add_action('wp_enqueue_scripts', 'seavia_script');
function seavia_script() {
if( is_page(shuo) ) {
wp_enqueue_style( 'shuoshuo', "http://wangqingzi.com/wp-content/themes/twentytwelve-child/shuoshuo.css",array(),'',false );
}
}

然后就可以写说说了,后台新建那就能看到说说选项了,和写普通的文章一样。

注:如果不想富媒体说说,单纯地写文字的话,可以把最后一段代码中的<?php the_content(); ?>改成<?php the_title(); ?>,这样以后发表说说只要填写标题就可以了,查找起来也比较方便。如果你用<?php the_content(); ?>,那么你发表说说的时候标题和内容要写成一样,以方便查找,如果你只填写内容,那么你在后台查看说说的时候,显示的列表全是无标题,对于修改比较麻烦。

本文参照http://www.wuover.com/141.html和https://www.seavia.com/wordpress/wp-sends-status-shuoshuo-weibo.html文章

发表评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注