纯代码给WordPress增加说说功能

Mr Y WordPress 14211 阅读

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

推荐几个不错的说说：

       效果演示（初始）：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>
  43. <?php get_sidebar(); ?>
  44. <?php get_footer();?>

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

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

最后在 style.css 文件里添加以下代码：
[gzh2v keyword="2231" key="9981"]

  1. /* 说说css代码来自憧憬博客 */
  2.    #shuoshuo_content {
  3.        background-color: #fff;
  4.        padding: 10px;
  5.        min-height: 500px;
  6.    }
  7.    //说说
  8.    body.theme-dark .bsy_timeline::before {
  9.        background: RGBA(255, 255, 255, 0.06);
  10.    }
  11.    ul.bsy_timeline {
  12.        padding: 0;
  13.    }
  14.    div class.bsy_tmlabel > li .bsy_tmlabel {
  15.        margin-bottom: 0;
  16.    }
  17.    .bsy_timeline {
  18.        margin: 30px 0 0 0;
  19.        padding: 0;
  20.        list-style: none;
  21.        position: relative;
  22.    }
  23.    //时间
  24.    .bsy_timeline > li .bsy_tmtime {
  25.        display: block;
  26.        max-width: 70px;
  27.        position: absolute;
  28.    }
  29.    .bsy_timeline > li .bsy_tmtime span {
  30.        display: block;
  31.        text-align: right;
  32.    }
  33.    .bsy_timeline > li .bsy_tmtime span:first-child {
  34.        font-size: 0.9em;
  35.        color: #bdd0db;
  36.    }
  37.    .bsy_timeline > li .bsy_tmtime span:last-child {
  38.        font-size: 1.2em;
  39.        color: #9bcd9b;
  40.    }
  41.    .bsy_timeline > li:nth-child(odd) .bsy_tmtime span:last-child {
  42.        color: rgba(255, 125, 73, 0.75);
  43.    }
  44.    div.bsy_tmlabel > p {
  45.        margin-bottom: 0;
  46.    }
  47.    //说说内容
  48.    .bsy_timeline > li .bsy_tmlabel {
  49.        margin: 0 0 45px 65px;
  50.        background: #9bcd9b;
  51.        color: #fff;
  52.        padding: .8em 1.2em .4em 1.2em;
  53.        line-height: 1.4;
  54.        position: relative;
  55.        border-radius: 8px;
  56.        transition: all 0.3s ease 0s;
  57.        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  58.        display: block;
  59.    }
  60.    .bsy_tmlabel:hover {
  61.        transform: translateY(-3px);
  62.        z-index: 1;
  63.        -webkit-box-shadow: 0 15px 32px rgba(0, 0, 0, 0.15) !important
  64.    }
  65.    .bsy_timeline > li:nth-child(odd) .bsy_tmlabel {
  66.        background: rgba(255, 125, 73, 0.75);
  67.    }
  68.    //三角
  69.    .bsy_timeline > li .bsy_tmlabel:after {
  70.        right: 100%;
  71.        border: solid transparent;
  72.        content: " ";
  73.        height: 0;
  74.        width: 0;
  75.        position: absolute;
  76.        pointer-events: none;
  77.        border-right-color: #9bcd9b;
  78.        border-width: 10px;
  79.        top: 10px;
  80.    }
  81.    .bsy_timeline > li:nth-child(odd) .bsy_tmlabel:after {
  82.        border-right-color: rgba(255, 125, 73, 0.75);
  83.    }
  84.    .shuoshuo_time {
  85.        margin-top: 10px;
  86.        border-top: 1px dashed #eaeaea;
  87.        padding-top: 6px;
  88.    }
  89.    //头像
  90.    @media screen and (max-width: 65em) {
  91.        .bsy_timeline > li .bsy_tmtime span:last-child {
  92.            font-size: 1.3em;
  93.        }
  94.    }
  95.    .author_tou img {
  96.        border: 1px solid #ccc;
  97.        padding: 2px;
  98.        float: left;
  99.        border-radius: 8px;
  100.        transition: all 1.0s;
  101.    }
  102.  .zhuan {
  103.         transform: rotateZ(720deg);
  104.         -webkit-transform: rotateZ(720deg);
  105.         -moz-transform: rotateZ(720deg);
  106.     }

[/gzh2v]

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

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

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

相关推荐：

[bsy_insert_post ids=523]

版权声明：
作者：Mr Y
链接：https://www.99bsy.com/2202.html
来源：小算草
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>