[mark_a]有的时候不想发文章,想跟QQ空间一样写个心情吐槽,下面久伴带来一个wordpress实现说说功能[/mark_a]
预览地址: https://jiubx.com/xinqing
教程
在主题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 /* */ 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('Y年n月j日G:i'); ?> </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]
加群入久伴博客官方微信群
加入久伴官方微信群有啥优势?
1.文章内部资源由于时间久远可能失效,加群,群内可以第一时间反馈
2.网站中教程不一定适用任何人,加群可以第一时间咨询并解决您得疑惑
3.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言
扫描下方二维码即可加入交流讨论

说说,这对于博客来说是一个比较使用的功能!
是的,有的时候发表一下心情状态啥的,另写一篇文章我觉得不适合
其实个人觉得这个说说对于独立博客意义不大,像这种简短的心情语句直接发布在QQ或微信可能更好。
折腾党
我不管的,我直接发没有标题的
也可以哈
dsdas好你好
貌似见过这个页面
试一试哟
支持
看看这个是否可以 感谢!
你好,请问这个代码还能使用吗?
可以使用