纯代码给WordPress增加说说功能

 2017年08月01日 10:59  4,437  36  打印本文  
达令家
       很多博客都已经有说说功能了,不过还有很多像九哥这样的新手博主才开始玩博客,想要自己实现还是比较困难,这里九哥借鉴了很多博客的说说代码和样式,其实核心都是一样的,只是样式上,细节方面有区别。

推荐几个不错的说说:

       效果演示(初始):http://www.mizuiren.com/shuo(原始作者样式)
       效果演示(进阶):https://liuyanzhao.com/shuoshuo.html(本文代码样式)
       效果演示(个性):http://www.macrr.com/shuo.html(九哥之前用过)
       效果演示(九哥):http://www.99bsy.com/xinyu.html(九哥正在使用)

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

首先在主题 functions.php 文件里添加以下代码:

  1. //新建说说功能 
  2. add_action('init', 'my_custom_init');
  3. function my_custom_init()
  4. $labels = array( 'name' => '说说',
  5. 'singular_name' => '说说',
  6. 'add_new' => '发表说说',
  7. 'add_new_item' => '发表说说',
  8. 'edit_item' => '编辑说说',
  9. 'new_item' => '新说说',
  10. 'view_item' => '查看说说',
  11. 'search_items' => '搜索说说',
  12. 'not_found' => '暂无说说',
  13. 'not_found_in_trash' => '没有已遗弃的说说',
  14. 'parent_item_colon' => '', 'menu_name' => '说说' );
  15. $args = array( 'labels' => $labels,
  16. 'public' => true,
  17. 'publicly_queryable' => true,
  18. 'show_ui' => true,
  19. 'show_in_menu' => true,
  20. 'exclude_from_search' =>true,
  21. 'query_var' => true,
  22. 'rewrite' => true, 'capability_type' => 'post',
  23. 'has_archive' => false, 'hierarchical' => false,
  24. 'menu_position' => null,
  25. 'taxonomies'=> array('category','post_tag'),
  26. 'supports' => array('editor','author','title', 'custom-fields','comments') );
  27. register_post_type('shuoshuo',$args);
  28. }

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

其次创建说说展示页面(说说模版),把以下代码添加进新建的模板文件中去:

  1. <?php /*
  2. Template Name: 说说
  3. author: 秋叶
  4. url: http://www.mizuiren.com/141.html
  5. */
  6. get_header(); ?>
  7. <div id="primary" class="content-area">
  8.     <main id="main" class="site-main" role="main">
  9.         <div id="shuoshuo_content">
  10.             <ul class="bsy_timeline">
  11.                 <?php query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?>
  12.                 <li> <span class="author_tou"><img src="http://www.99bsy.com/authortou.png" class="avatar" width="48" height="48"></span>
  13.                     <a class="bsy_tmlabel" href="javascript:void(0)">
  14.                         <div></div>
  15.                         <div><?php the_content(); ?></div>
  16.                         <div></div>
  17.                         <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'); ?>
  18.                         </div>
  19.                     </a>
  20.                     <?php endwhile;endif; ?>
  21.                 </li>
  22.             </ul>
  23.         </div>
  24.     </main>
  25.     <!-- .site-main -->
  26. </div>
  27. <script type="text/javascript">
  28.     $(function () {
  29.         var oldClass = "";
  30.         var Obj = "";
  31.         $(".bsy_timeline li").hover(function () {
  32.             Obj = $(this).children(".author_tou");
  33.             Obj = Obj.children("img");
  34.             oldClass = Obj.attr("class");
  35.             var newClass = oldClass + " zhuan";
  36.             Obj.attr("class", newClass);
  37.         }, function () {
  38.             Obj.attr("class", oldClass);
  39.         })
  40.     })
  41. </script>
  42. <?php get_sidebar(); ?>
  43. <?php get_footer();?>

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

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

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

99八十一
此处内容已经被作者无情的隐藏,请输入验证码查看内容
验证码:
请关注“99八十一”官方微信公众号,回复关键字“2231”,获取验证码。
注:手机微信扫描右侧二维码或搜索“99八十一网”即可关注“99八十一”官方微信公众号。

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

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

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

相关推荐:

历史上的今天:

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

吐槽一下

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前吐槽:36   其中:访客  19   博主  17

    • avatar 简单生活 来自天朝的朋友 谷歌浏览器 Windows 7 中国 移动 【小白】

      放出你现在用的,咱也撸一个! :grin:

      • avatar 孤狼 来自天朝的朋友 谷歌浏览器 Mac OS X 10_13_6 黑龙江省大庆市 联通 【小白】

        博主想请教一下像你这篇文章最下面的相关推荐是怎么实现的,这个功能好像是可以推荐相关的指定文章的ID链接吧,可以在编辑文章时输入某个ID就可以相关联吧。。不知道有没有教程。。

          • avatar 九哥 博主 来自天朝的朋友 QQ浏览器 Windows XP

            @孤狼 抱歉,这个没有教程,我这个也是半成品。

              • avatar 孤狼 来自天朝的朋友 Netscape Navigator iPhone iOS 12_0 like Mac OS X) AppleWebKit 黑龙江省哈尔滨市 联通 【小白】

                @九哥 那能不能请教一下是怎么修改的!

                  • avatar 九哥 博主 来自天朝的朋友 QQ浏览器 Windows XP

                    @孤狼 加我QQ或微信 :evil:

                      • avatar 孤狼 来自天朝的朋友 Netscape Navigator iPad OS 12_0 like Mac OS X) AppleWebKit 黑龙江省大庆市 联通 【小白】

                        @九哥 好的👌🏻我加一下你。。

                • avatar 麦田故事 来自天朝的朋友 谷歌浏览器 Windows 8.1 广西梧州市 联通 【小白】

                  说说这个功能用过,不过我更喜欢像贴吧一样的功能

                  • avatar 在放荡的孤独中闪光 来自天朝的朋友 谷歌浏览器 Windows 10 云南省 电信 【小白】

                    博主能帮帮忙吗 给弄弄这样式代码 我复制了上面的但是不行好像不生效

                    • avatar 在放荡的孤独中闪光 来自天朝的朋友 谷歌浏览器 Windows 10 云南省 电信 【小白】

                      样式不显示 页面太难看 不知道怎么弄 样式代码不会

                      • avatar voice站点 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信 【小白】

                        我这里不行,显示不出来,可以发,但是没有说说单独页面的展示

                          • avatar 九哥 博主 来自天朝的朋友 QQ浏览器  Android 8.0.0 STF-AL10 Build/HUAWEISTF-AL10

                            @voice站点 应该是模板没创建好,新建页面选择你创建好的说说模板。

                              • avatar voice站点 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信 【小白】

                                @九哥 现在显示是可以了,只是样式没有了

                            • avatar 朱曙明博客 来自天朝的朋友 谷歌浏览器 Windows 10 广东省深圳市南山区 电信 【小白】

                              话说,网站改的确实不错,不过就是网站打开速度有点慢了,博主可以优化下。玩博客的谁不是一个折腾~

                                • avatar 九哥 博主 来自天朝的朋友 QQ浏览器 Windows 7

                                  @朱曙明博客 谢谢夸奖 :mrgreen:
                                  速度慢应该是主机的问题,我用的国外主机,等到期了换国内的!折腾嘛是必须的。

                                • avatar Koolight 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省 联通 【进士】

                                  以前添加过,后来因为发了一条说说也占用了一个文章ID,所以就去掉了。

                                    • avatar 九哥 博主 来自天朝的朋友 谷歌浏览器 Windows Server 2003

                                      @Koolight 你有强迫症?在意那个干嘛?

                                    • avatar 无人小站 来自天朝的朋友 谷歌浏览器 Windows 10 江西省抚州市 电信 【小白】

                                      看起来不错的说说

                                      • avatar 我爱动感单车网 来自天朝的朋友 谷歌浏览器 Windows XP 广西桂林市 电信 【小白】

                                        不错,不过个人觉得颜色貌似艳丽与花哨了些,兴许是本人喜欢素雅的缘故吧;另,文章已做收藏,备用!

                                        • avatar 福利堆 来自天朝的朋友 谷歌浏览器 Windows 10 四川省自贡市 电信 【书童】

                                          这个功能很漂亮

                                          • avatar 热腾网 来自天朝的朋友 QQ浏览器  Android 5.1 HUAWEI TAG-AL00 Build/HUAWEITAG-AL00 天津市 电信IDC机房 【小白】

                                            这么多链接,直接上截图也可以啊。

                                              • avatar 九哥 博主 来自天朝的朋友 QQ浏览器 Windows 7

                                                @热腾网 省点空间嘛,就当给他们打广告了 :lol:

                                              • avatar boke112导航 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 电信 【进士】

                                                比较喜欢初始样式,其他样式都是带有链接,点击进去就相当于一篇非常短小的文章,感觉不太好。初始样式纯粹就是一个页面,所有的说说内容组成这个页面的内容,感觉挺好的。缺点就是无法互动

                                                  • avatar 九哥 博主 来自天朝的朋友 QQ浏览器 Windows 7

                                                    @boke112导航 要互动的话还是得链接到单独页面,要么最多只能实现点赞功能,条件有限啊!

                                                  • avatar 清秋暖冬 来自天朝的朋友 Safari浏览器  HUAWEI NXT-TL00 Build/HUAWEINXT-TL00) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 广东省 电信 【小白】

                                                    哇,看起来不错哦,一会试试添加一个,谢谢了!

                                                    • avatar wang 来自天朝的朋友 谷歌浏览器  F100 Build/LMY47D 广西 移动 【小白】

                                                      看起来不错啊,等等我也去试试

                                                        • avatar 九哥 博主 来自天朝的朋友 QQ浏览器 Windows 7

                                                          @wang 嗯,可以发短文字,心情等等!

                                                        • avatar Koolight 来自天朝的朋友 谷歌浏览器 Windows XP 陕西省宝鸡市 电信 【进士】

                                                          像是一个小记事本,挺不错的,最早在Git主题中看到过,没想到博主把它弄得这么细致美观了!

                                                            • avatar 九哥 博主 来自天朝的朋友 QQ浏览器 Windows 7

                                                              @Koolight 也是从别人那看到的,就拿来玩玩,稍微加工了下,折腾嘛~