/ Wordpress / 14浏览

纯代码给WordPress增加说说/碎语功能

作为个人博客,分享技术文章固然重要,但是有时候有些琐碎的事情或者心情也想记录下来,这些只言片语如果还是用发布文章,就显得有些啰嗦了,这时候利用“说说”功能看起来要合适一些。“说说”类似qq空间的说说或者emblog的微语,型式也像微博发表的心情。目前WordPress还没有这方面人性化的设计,之前用云落的Git主题时,主题自带了这一功能,换主题就想参考他的主题利用纯代码给自己的博客增加这一功能,时间+表情,条理明晰,就算作为日记也是非常不错的体验。闲话不说,非常简单。
最终我们达到的效果如下图:
shuoshuo1
首先在主题的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); 
}

//说说的固定连接格式
function my_custom_init_link($link, $post = 0) {
    if ($post->post_type == 'shuoshuo') {
        return home_url('shuoshuo-' . $post->ID . '.html');
    } else {
        return $link;
    }
}
add_action('init', 'custom_book_rewrites_init');
function custom_book_rewrites_init() {
    add_rewrite_rule('shuoshuo-([0-9]+)?.html$', 'index.php?post_type=shuoshuo&p=$matches[1]', 'top');
}
add_filter('post_type_link', 'my_custom_init_link', 1, 3);

之后创建一个shuoshuo.php文档,把以下内容复制进去:



保存该文档,将其放于主题目录下,这步完成之后我们就可以在后台侧栏看到“说说”菜单,只是这样发表说说的话看起来会非常的乱,还要增加css代码控制以下前端显示样式。
将以下样式放入你所用主题的style.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;}
.tt,.zhutou{display:none !important}
.shuoshuo .zhutou{margin: 17px 5px 0 5px;}
.shuoshuo li em{float:left;width:39px;height:10px;margin:34px 0 0 -1px;}
}
@media screen and (min-width:1000px){.shuoshuo-sjsj,.mobileads{display:none !important}}

接下来就是进入wordpress后台新建页面,模版选择“说说”,发布之后就完成了。之后可通过后台侧栏“说说”菜单发表说说了。提供的样式仅供参考,各位可以通过修改css文件,编辑出属于自己的说说。
[download]单页下载[/download]

0

  1. This post has no comment yet

发表回复

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