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

WordPress增加一个说说功能用来发状态是最好不过的了,平时我们都是用短文字来写点随笔,但是却要占用一整个文章,好像有点不划算,现在OK了,你们要的说说来了!

DEMO在此,教程在下面。

源代码部分

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

引用声明:源代码来自秋叶的博客,地址http://www.wuover.com/141.html,Sven略有改动。

以下代码放入functions.php中

以下代码放入主题的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); }

增加一个php文件

在主题的目录下,新建一个文件,seavia-shuo.php,把下面的代码放入这个php文件中:

<?php 
/*
 Template Name: 说说
 author: 秋叶,Sven修改
 */
 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:H'); ?></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 get_footer();?>

美化CSS样式

新建一个名为seavia-shuo.css的css文件,里面放入以下代码,然后把这个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;}
}

调用seavia-shuo.css

我们的思路是,判断页面,如果这个页面是shuoshuo,那么,我们就使用这个css文件。

还是functions.php哦,加入下面代码,里面的css地址换成你自己的地址噢噢噢

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

或者你如果嫌麻烦,可以直接把这些css放在seavia-shuo.php里,用<style>标签包裹起来即可。

发布说说

在新建里面找到说说,写说说的时候可以留空标题栏,直接在文章内容里面键入文字,这样显示出来的就和微博,说说一样啦。

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

 

所有发布过的说说,都会统一的出现在shuoshuo这个页面哦。

https://www.seavia.com/wordpress/wp-sends-status-shuoshuo-weibo.html

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *