logo头像

博学广问,自律静思

在wordpress上写说说/短微博

在我们写博客的时候,有时候只要简单记录一下程序的一个bug怎样解决,或者只言片语抒发一下点滴感想,如果长篇大论起来未免繁琐,但是几句话也当做一篇文章看起来感觉莫名其妙。wordpress是最受欢迎的博客程序之一,但是却没有其它有些博客CMS程序的“微语”这样的功能。有时候我们只想用一两句话抒发一下自己的情绪,就想用wordpress发个微博,发个说说;没有必要写成长篇大论,如果凑字数就完全失去了“抒发”的真谛。上次写了一篇用wordpress写说说的文章,访友们很是踊跃,希望做成插件。

一、插件

[button class=”demo” size=”lg” href=”https://github.com/geekeren/WordPressShuoShuo" title=”在Github上StarWordPress说说插件”]在Github上Star[/button] 本插件处于许多网友的要求为wordpress提供说说功能,wordpress不仅仅可以长篇大论,而可以微言大义。

二、使用注意

由于本人不是专业的wordpress开发者,没有大量时间优化这项功能。本插件提供发表说说等功能,至于说说页面的样式界面文件只分享本人正在使用的我的界面样式可能并不适合你,这可能需要你自己根据自己的主题适配说说展示页界面布局和样式。

三、插件截图

预览地址:http://wangbaiyuan.cn/shuoshuo

电脑端界面:

shuoshuo

手机端界面:

mobileshuoshuo 下面主要介绍一下核心代码: 首先在主题的functions.php里面加入以下代码:

四、代码部分

//新建说说功能
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,
‘exclude_from_search’ =>true,
‘query_var’ => true,
‘rewrite’ => true, ‘capability_type’ => ‘post’,
‘has_archive’ => false, ‘hierarchical’ => false,
‘menu_position’ => null, ‘supports’ => array(‘editor’,’author’,’title’, ‘custom-fields’) );
register_post_type(‘shuoshuo’,$args);
}

然后新建一个页面模板,如“page-shuoshuo.php”

<?php /
Template Name: 说说
author: 王柏元
url: http://wangbaiyuan.cn
/

get_header(); ?>


    <?php query_posts(“post_type=shuoshuo&post_status=publish&posts_per_page=-1”);if (have_posts()) : while (have_posts()) : the_post(); ?>

  • <?php the_time(‘Y年n月j日G:H’); ?>
  • <?php the_content(); ?>
    —<?php the_author() ?>
    <?php endwhile;endif; ?>



    <?php get_footer(‘simple’);?>

    CSS样式:

    [toggle hide=”yes” title=”我的css样式:” color=”red”]

    #content-container{
    background: url() top left repeat,url(http://wangbaiyuan.cn/wp-content/uploads/2015/01/background.jpg) top center no-repeat;
    background-attachment: fixed;
    background-size: 2px 2px,cover;
    }

    #body-container{
    background: #72d0eb;
    background-attachment: fixed;
    background-size: 2px 2px,cover;
    }body
    .ssbody{
    max-width:900px;
    margin:0px auto;
    background-attachment:fixed;
    background-repeat: repeat;
    color: #FFFFFF;
    font-family: 隶书;
    }

    .shuoshuo {
    position: relative;
    padding: 10px 0;
    }
    .shuoshuo li {
    padding: 8px 0;
    display: block;
    }
    .shuoshuo-content {
    color: #FFFFFF;
    font-family: 隶书;
    box-shadow: 0 0 3px RGBA(0,0,0,.15);
    background-color: rgba(148, 137, 137, 0.43);
    border:1px #FFF 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;
    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;}
    .shuoshuo li em{float:left;background:url(“http://www.wuover.com/wp-content/themes/QIUYE/images/bolangxian.png") repeat-y;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;}
    .shuoshuo .tt{width:30px;font-weight:bold;margin: 30px 0 0 1px;height: 20px;}
    .shuoshuo li:hover .tt {color:#0c0;font-size:1.2em;}
    .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;}
    }

    [/toggle] 然后新建一个页面,使它的页面模板为“说说”样式。你可以访问我的“博客说说”预览一

    @一芦居
    一芦居 commented at 2019-05-25

    我见过一个网站显示的是微博,感觉那样更好,毕竟是移动端的app,更方便

    @超人
    超人 commented at 2018-10-18

    你好,为啥我装了您的插件,后台没有显示新建说说这一个功能

    @bokit
    bokit commented at 2018-10-11

    不错。近来我也考虑弄这个。

    @极客人
    极客人 commented at 2018-09-25

    你试一试插件有没有问题?

    @小盐君
    小盐君 commented at 2018-09-21

    分页塞进去了 不显示,怎么整呢,求教

    @福这里
    福这里 commented at 2017-10-23

    能在分类里面显示不,

    @voice站点
    voice站点 commented at 2017-10-08

    根据你提供的方法,功能是实现了,但是CSS样式没有,加到style.css不行,新建页面模板也不行,这是为什么啊?该怎么做呢? 麻烦楼主了

    @极客人
    极客人 commented at 2017-10-03

    你看看http://wangbaiyuan.cn/by-shuoshuo-wp-plugin-release-feedback.html怎么配置的

    @voice站点
    voice站点 commented at 2017-09-23

    请问楼主css加载到哪里?

    @秋叶博客
    秋叶博客 commented at 2016-09-06

    恩。我就来看看

    @李开文博客
    李开文博客 commented at 2016-09-04

    挺不错实用的功能。

    @BanYuner
    BanYuner commented at 2016-04-22

    学习了 已经用上了 CSS方面等数量大了之后再看看怎么修改吧

    @极客人
    极客人 commented at 2016-02-09

    新年快乐,你使用的插件是插件吗。审查元素看看css有没有加载成功

    @流光博客
    流光博客 commented at 2016-02-09

    完成上诉步骤后,说说页面无所诉风格,地址 http://sumwind.com/shuoshuo/ 如何解决?麻烦解答一下,新年快乐!

    @Aaron
    Aaron commented at 2016-01-02

    如何分页呢 ?

    @极客人
    极客人 commented at 2015-12-02

    有的,和wordpress更新无关

    @滕绍武博客
    滕绍武博客 commented at 2015-12-02

    博主做出这个来后,wordpress自动更新了还有么

    @极客人
    极客人 commented at 2015-08-22

    你看一下这篇文章http://wangbaiyuan.cn/at-the-top-right-of-the-page-the-page-baidu-included-seal.html

    @月儿的博客
    月儿的博客 commented at 2015-08-22

    博主,你这个百度收录怎么做的,样式很漂亮,能不能放以下代码啊

    @月儿的博客
    月儿的博客 commented at 2015-08-21

    请问博主现在的说说是怎么做出来的,请放代码。

    @极客人
    极客人 commented at 2015-08-18

    wordpress新建shuoshuo样式后。域名/shuoshuo/说说的标题名 就是单条说说的页面,在这个页面可以评论,你可以在每条说说上加个链接

    @segena
    segena commented at 2015-08-18

    博主 求教。每条的评论功能怎么做的,方便说明下吗

    @大谋士网
    大谋士网 commented at 2015-08-16

    你好,请问下,怎么设置分页呢?

    @极客人
    极客人 commented at 2015-08-06

    这是引用为这个页面写的CSS文件,需要自己创建,即为这个链接路径:THEME_URI.'/includes/css/my.css',指的是:当前主题目录/includes/css/.mycss

    @百味人生
    百味人生 commented at 2015-08-05

    href="<?php echo THEME_URI.'/includes/css/my.css' 这个链接是什么意思,怎么改成自己的。谢谢

    @黄良钵博客
    黄良钵博客 commented at 2015-07-23

    博主你好,请问你的最新版说说的代码是什么?

    @阳江活动网
    阳江活动网 commented at 2015-07-22

    功能强大,怎么在这个基础上加入投稿功能?这样就是一个强大的多人说说了。

    @小小白
    小小白 commented at 2015-06-10

    求发布新的方法

    @极客人
    极客人 commented at 2015-06-07

    后台面板上有,这篇文章的方式做的wordpress说说不支持分页。新的方法我会过几天发布,做的效果和本站的说说效果一样

    @小小白
    小小白 commented at 2015-06-07

    我新建好了页面,可是在哪里发表新的说说

    @极客人
    极客人 commented at 2015-05-25

    你的主题挺适合写分享生活类文章,没必要和我的博客说说一样的,加了反而显得不搭

    @夏寒
    夏寒 commented at 2015-05-25

    打算放弃了!

    @极客人
    极客人 commented at 2015-05-22

    新建一个页面,使它的页面模板为“说说”样式

    @夏寒
    夏寒 commented at 2015-05-22

    不知道那里出了问题,还是不行!直接显示404

    @极客人
    极客人 commented at 2015-05-21

    我修改后的代码有背景图片和头像,应该只和我的主题兼容,你就按照本页的方法实现说说效果吧

    @极客人
    极客人 commented at 2015-05-21

    把代码加在functions.php,最后一行"?>"的前面,css可以加在当前主题style.css里

    @夏寒
    夏寒 commented at 2015-05-21

    functions.php里面加入代码:代码加在那个地方呢?在最前面还是最后面!CSS样式怎么新建呀,可不可共享一下CSS样式呢?谢谢啦!小白不懂PHP呀!

    @极客人
    极客人 commented at 2015-05-05

    后来我把代码改了一下,考虑到可能和其他主题不兼容,没有把最终的代码放出来

    @极客人
    极客人 commented at 2015-05-05

    你的网站怎么访问不了

    @牛俊亮
    牛俊亮 commented at 2015-05-05

    样式怎么跟你的不太一样,没有背景图片,也没有头像