纯代码给WordPress增加说说功能

2017年08月01日 10:59 7,588 37 打印本文

很多博客都已经有说说功能了，不过还有很多像九哥这样的新手博主才开始玩博客，想要自己实现还是比较困难，这里九哥借鉴了很多博客的说说代码和样式，其实核心都是一样的，只是样式上，细节方面有区别。

推荐几个不错的说说：

效果演示（初始）：http://www.mizuiren.com/shuo（原始作者样式）

效果演示（进阶）：https://liuyanzhao.com/shuoshuo.html（本文代码样式）

效果演示（个性）：http://www.macrr.com/shuo.html（九哥之前用过）

效果演示（九哥）：http://www.99bsy.com/xinyu.html（九哥正在使用）

这里介绍进阶版实现方法：

首先在主题 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,
'taxonomies'=> array('category','post_tag'),
'supports' => array('editor','author','title', 'custom-fields','comments') );
register_post_type('shuoshuo',$args);
}

这一步是后台添加说说功能选项。

其次创建说说展示页面（说说模版），把以下代码添加进新建的模板文件中去：

<?php /*
Template Name: 说说
author: 秋叶
url: http://www.mizuiren.com/141.html
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div id="shuoshuo_content">
<ul class="bsy_timeline">
<?php query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?>
<li> <span class="author_tou"><img src="http://www.99bsy.com/authortou.png" class="avatar" width="48" height="48"></span>
<a class="bsy_tmlabel" href="javascript:void(0)">
<div></div>
<div><?php the_content(); ?></div>
<div></div>
<div class="shuoshuo_time"><i class="fa fa-user"></i><?php the_author() ?><i class="fa fa-clock-o"></i><?php the_time('Y年n月j日G:i'); ?>
</div>
</a>
<?php endwhile;endif; ?>
</li>
</ul>
</div>
</main>
</div>
<script type="text/javascript">
$(function () {
var oldClass = "";
var Obj = "";
$(".bsy_timeline li").hover(function () {
Obj = $(this).children(".author_tou");
Obj = Obj.children("img");
oldClass = Obj.attr("class");
var newClass = oldClass + " zhuan";
Obj.attr("class", newClass);
}, function () {
Obj.attr("class", oldClass);
})
})
</script>
<?php get_sidebar(); ?>
<?php get_footer();?>

保存命名为 shuoshuo.php，将其放于主题根目录下，记得修改自己的头像（红色地址）。

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

最后在 style.css 文件里添加以下代码：

此处内容已经被作者无情的隐藏，请输入验证码查看内容

请关注“99八十一”官方微信公众号，回复关键字“2231”，获取验证码。
注：手机微信扫描右侧二维码或搜索“99八十一网”即可关注“99八十一”官方微信公众号。

样式仅供参考，小伙伴们可以充分发挥自己的想象力。

以上步骤完成后，进入 WordPress 后台，新建“说说”页面，模版选择之前创建的“说说”模版，之后就可以发表说说了。

至于说说单独文章页和其他功能小伙伴们也可以自行研究下，九哥之前使用的版本大家可以参考下。

历史上的今天:

99八十一微信公众号

扫一扫关注99八十一微信公众号，打开微信简简单单即可查看99八十一所有内容，更快捷更方便。

版权声明：本站原创文章，于2017年8月1日，由九哥发表，共 5813 字。
转载请注明：纯代码给WordPress增加说说功能 | 99八十一

吐槽一下取消吐槽

目前吐槽：37 其中：访客 0 博主 0

小A 中国移动【小白】
回复 2019年11月2日 11:00 0楼

2019��11��2��10:16 时间显示不出来年月日，是一堆问号，这是什么原因造成的？
简单生活 中国移动【小白】
回复 2019年6月20日 12:03 0楼

放出你现在用的，咱也撸一个！
- 九哥博主
  回复 2019年6月20日 21:11 1层
  
  @简单生活想放早就放了，就是不想千篇一律
孤狼黑龙江省大庆市联通【小白】
回复 2018年12月13日 23:28 0楼

博主想请教一下像你这篇文章最下面的相关推荐是怎么实现的，这个功能好像是可以推荐相关的指定文章的ID链接吧，可以在编辑文章时输入某个ID就可以相关联吧。。不知道有没有教程。。
- 九哥博主
  回复 2018年12月17日 11:26 1层
  
  @孤狼抱歉，这个没有教程，我这个也是半成品。
  - 孤狼黑龙江省哈尔滨市联通【小白】
    回复 2018年12月17日 11:28 2层
    
    @九哥那能不能请教一下是怎么修改的！
    - 九哥博主
      回复 2018年12月17日 12:08 3层
      
      @孤狼加我QQ或微信
      - 孤狼黑龙江省大庆市联通【小白】
        2018年12月17日 18:32 4层
        
        @九哥好的👌🏻我加一下你。。
麦田故事 广西梧州市联通【小白】
回复 2018年11月28日 20:45 0楼

说说这个功能用过，不过我更喜欢像贴吧一样的功能
- 九哥博主
  回复 2018年11月29日 19:35 1层
  
  @麦田故事个人博客，根据自己喜好来吧。
在放荡的孤独中闪光 云南省电信【小白】
回复 2018年10月2日 23:27 0楼

博主能帮帮忙吗给弄弄这样式代码我复制了上面的但是不行好像不生效
在放荡的孤独中闪光 云南省电信【小白】
回复 2018年10月2日 23:25 0楼

样式不显示页面太难看不知道怎么弄样式代码不会
- 九哥博主
  回复 2018年10月7日 09:31 1层
  
  @在放荡的孤独中闪光样式需要慢慢调整。
voice站点 四川省成都市电信【小白】
回复 2018年7月25日 20:53 0楼

我这里不行，显示不出来，可以发，但是没有说说单独页面的展示
- 九哥博主
  回复 2018年7月25日 21:28 1层
  
  @voice站点应该是模板没创建好，新建页面选择你创建好的说说模板。
  - voice站点 四川省成都市电信【小白】
    回复 2018年7月25日 21:40 2层
    
    @九哥现在显示是可以了，只是样式没有了
    - 九哥博主
      回复 2018年7月25日 21:48 3层
      
      @voice站点样式仅供参考，可以慢慢修改调整。
朱曙明博客 广东省深圳市南山区电信【小白】
回复 2017年11月25日 13:40 0楼

话说，网站改的确实不错，不过就是网站打开速度有点慢了，博主可以优化下。玩博客的谁不是一个折腾~
- 九哥博主
  回复 2017年11月25日 13:48 1层
  
  @朱曙明博客谢谢夸奖
  速度慢应该是主机的问题，我用的国外主机，等到期了换国内的！折腾嘛是必须的。
Koolight 湖北省联通【进士】
回复 2017年11月11日 22:09 0楼

以前添加过，后来因为发了一条说说也占用了一个文章ID，所以就去掉了。
- 九哥博主
  回复 2017年11月11日 22:25 1层
  
  @Koolight 你有强迫症？在意那个干嘛？
无人小站 江西省抚州市电信【小白】
回复 2017年9月30日 09:18 0楼

看起来不错的说说
- 九哥博主
  回复 2017年9月30日 10:23 1层
  
  @无人小站可以体验一下。
我爱动感单车网 广西桂林市电信【小白】
回复 2017年8月2日 21:34 0楼

不错，不过个人觉得颜色貌似艳丽与花哨了些，兴许是本人喜欢素雅的缘故吧；另，文章已做收藏，备用！
- 九哥博主
  回复 2017年8月3日 08:15 1层
  
  @我爱动感单车网颜色可以自己改改。
福利堆 四川省自贡市电信【书童】
回复 2017年8月2日 21:18 0楼

这个功能很漂亮
- 九哥博主
  回复 2017年8月3日 08:13 1层
  
  @福利堆那就弄一个。
热腾网 天津市电信IDC机房【小白】
回复 2017年8月2日 19:36 0楼

这么多链接，直接上截图也可以啊。
- 九哥博主
  回复 2017年8月2日 20:37 1层
  
  @热腾网省点空间嘛，就当给他们打广告了
boke112导航 广西南宁市电信【进士】
回复 2017年8月2日 15:37 0楼

比较喜欢初始样式，其他样式都是带有链接，点击进去就相当于一篇非常短小的文章，感觉不太好。初始样式纯粹就是一个页面，所有的说说内容组成这个页面的内容，感觉挺好的。缺点就是无法互动
- 九哥博主
  回复 2017年8月2日 15:43 1层
  
  @boke112导航要互动的话还是得链接到单独页面，要么最多只能实现点赞功能，条件有限啊！
清秋暖冬 广东省电信【小白】
回复 2017年8月2日 13:53 0楼

哇，看起来不错哦，一会试试添加一个，谢谢了！
- 九哥博主
  回复 2017年8月2日 14:00 1层
  
  @清秋暖冬客气，好东西要和大家一起分享嘛~
wang 广西移动【小白】
回复 2017年8月2日 00:03 0楼

看起来不错啊，等等我也去试试
- 九哥博主
  回复 2017年8月2日 09:36 1层
  
  @wang 嗯，可以发短文字，心情等等！
Koolight 陕西省宝鸡市电信【进士】
回复 2017年8月1日 22:33 0楼

像是一个小记事本，挺不错的，最早在Git主题中看到过，没想到博主把它弄得这么细致美观了！
- 九哥博主
  回复 2017年8月2日 09:35 1层
  
  @Koolight 也是从别人那看到的，就拿来玩玩，稍微加工了下，折腾嘛~

推荐几个不错的说说：

这里介绍进阶版实现方法：

相关推荐：

历史上的今天:

吐槽一下取消吐槽

目前吐槽：37 其中：访客 0 博主 0