博客增加说说功能

几个链接：

1、https://jiubx.com/2817.html/comment-page-5#comment

主要代码来源

2、http://www.xiaoyunhua.com/2926.html

解决页面不显示问题

3、https://blog.csdn.net/rachelkong/article/details/74295196

启发解决问题

---

在主题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);}
```

然后在主题更目录新建shuoshuo.php文件并添加以下代码进去

```
<?php /*
Template Name: 说说
##就是这一段原始代码没有贼坑！
*/
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="https://img.jiub.ren/wp-content/uploads/2018/11/QQ%E5%9B%BE%E7%89%8720181105103723.jpg" 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(&#039;Y年n月j日G:i&#039;); ?> </div> </a> <?php endwhile;endif; ?> </li> </ul> </div> </main> <!-- .site-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();?>
```

然后在你的主题样式表添加以下样式
[reply]

```
/* 说说css代码 */ #shuoshuo_content { background-color: #fff; padding: 10px; min-height: 500px; }/* 说说*/ body.theme-dark .bsy_timeline::before { background: RGBA(255, 255, 255, 0.06); } ul.bsy_timeline { padding: 0; } div class.bsy_tmlabel > li .bsy_tmlabel { margin-bottom: 0; } .bsy_timeline { margin: 30px 0 0 0; padding: 0; list-style: none; position: relative; } /*时间*/ .bsy_timeline > li .bsy_tmtime { display: block; max-width: 70px; position: absolute; } .bsy_timeline > li .bsy_tmtime span { display: block; text-align: right; } .bsy_timeline > li .bsy_tmtime span:first-child { font-size: 0.9em; color: #bdd0db; } .bsy_timeline > li .bsy_tmtime span:last-child { font-size: 1.2em; color: #9bcd9b; } .bsy_timeline > li:nth-child(odd) .bsy_tmtime span:last-child { color: rgba(255, 125, 73, 0.75); } div.bsy_tmlabel > p { margin-bottom: 0; } /*说说内容*/ .bsy_timeline > li .bsy_tmlabel { margin: 0 0 45px 65px; background: #9bcd9b; color: #fff; padding: .8em 1.2em .4em 1.2em; line-height: 1.4; position: relative; border-radius: 8px; transition: all 0.3s ease 0s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); display: block; } .bsy_tmlabel:hover { transform: translateY(-3px); z-index: 1; -webkit-box-shadow: 0 15px 32px rgba(0, 0, 0, 0.15) !important } .bsy_timeline > li:nth-child(odd) .bsy_tmlabel { background: rgba(255, 125, 73, 0.75); } /*三角*/ .bsy_timeline > li .bsy_tmlabel:after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: #9bcd9b; border-width: 10px; top: 10px; } .bsy_timeline > li:nth-child(odd) .bsy_tmlabel:after { border-right-color: rgba(255, 125, 73, 0.75); } .shuoshuo_time { margin-top: 10px; border-top: 1px dashed #eaeaea; padding-top: 6px; } /*头像*/ @media screen and (max-width: 65em) { .bsy_timeline > li .bsy_tmtime span:last-child { font-size: 1.3em; } } .author_tou img { border: 1px solid #ccc; padding: 2px; float: left; border-radius: 8px; transition: all 1.0s; } .zhuan { transform: rotateZ(720deg); -webkit-transform: rotateZ(720deg); -moz-transform: rotateZ(720deg); }
```

[/reply]

----

头像问题先放着 后面再解决