纯代码给WordPress增加说说功能
[v_black] 很多博客都已经有说说功能了,不过还有很多像九哥这样的新手博主才开始玩博客,想要自己实现还是比较困难,这里九哥借鉴了很多博客的说说代码和样式,其实核心都是一样的,只是样式上,细节方面有区别。[/v_black]
推荐几个不错的说说:
这里介绍进阶版实现方法:
首先在主题 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>
- <!-- .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();?>
保存命名为 shuoshuo.php,将其放于主题根目录下,记得修改自己的头像(红色地址)。
[v_redb] 如果只想单纯的写文字的话,可以把第15行代码中的<?php the_content(); ?>改成<?php the_title(); ?>,这样发表说说只要填写标题就可以了,查找起来也比较方便。如果用<?php the_content(); ?>,那么发表说说的时候标题和内容要写成一样,方便查找,如果只填写内容,那么在后台查看说说的时候,显示的列表全是无标题,对于修改比较麻烦。[/v_redb]
最后在 style.css 文件里添加以下代码:
[gzh2v keyword="2231" key="9981"]
- /* 说说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);
- }
[/gzh2v]
样式仅供参考,小伙伴们可以充分发挥自己的想象力。
以上步骤完成后,进入 WordPress 后台,新建“说说”页面,模版选择之前创建的“说说”模版,之后就可以发表说说了。
至于说说单独文章页和其他功能小伙伴们也可以自行研究下,九哥之前使用的版本大家可以参考下。
相关推荐:
[bsy_insert_post ids=523]
小A
2019��11��2��10:16 时间显示不出来年月日,是一堆问号,这是什么原因造成的?
简单生活
放出你现在用的,咱也撸一个! 😀
九哥@简单生活
想放早就放了,就是不想千篇一律 😯
孤狼
博主想请教一下像你这篇文章最下面的相关推荐是怎么实现的,这个功能好像是可以推荐相关的指定文章的ID链接吧,可以在编辑文章时输入某个ID就可以相关联吧。。不知道有没有教程。。
九哥@孤狼
抱歉,这个没有教程,我这个也是半成品。
孤狼@九哥
那能不能请教一下是怎么修改的!
九哥@孤狼
加我QQ或微信 👿
孤狼@九哥
好的??我加一下你。。
麦田故事
说说这个功能用过,不过我更喜欢像贴吧一样的功能
九哥@麦田故事
个人博客,根据自己喜好来吧。
在放荡的孤独中闪光
博主能帮帮忙吗 给弄弄这样式代码 我复制了上面的但是不行好像不生效
在放荡的孤独中闪光
样式不显示 页面太难看 不知道怎么弄 样式代码不会
九哥@在放荡的孤独中闪光
样式需要慢慢调整。
voice站点
我这里不行,显示不出来,可以发,但是没有说说单独页面的展示
九哥@voice站点
应该是模板没创建好,新建页面选择你创建好的说说模板。
voice站点@九哥
现在显示是可以了,只是样式没有了
九哥@voice站点
样式仅供参考,可以慢慢修改调整。
朱曙明博客
话说,网站改的确实不错,不过就是网站打开速度有点慢了,博主可以优化下。玩博客的谁不是一个折腾~
九哥@朱曙明博客
谢谢夸奖
速度慢应该是主机的问题,我用的国外主机,等到期了换国内的!折腾嘛是必须的。
Koolight
以前添加过,后来因为发了一条说说也占用了一个文章ID,所以就去掉了。
九哥@Koolight
你有强迫症?在意那个干嘛?
无人小站
看起来不错的说说
九哥@无人小站
可以体验一下。
我爱动感单车网
不错,不过个人觉得颜色貌似艳丽与花哨了些,兴许是本人喜欢素雅的缘故吧;另,文章已做收藏,备用!
九哥@我爱动感单车网
颜色可以自己改改。
福利堆
这个功能很漂亮
九哥@福利堆
那就弄一个。
热腾网
这么多链接,直接上截图也可以啊。
九哥@热腾网
省点空间嘛,就当给他们打广告了 😆
boke112导航
比较喜欢初始样式,其他样式都是带有链接,点击进去就相当于一篇非常短小的文章,感觉不太好。初始样式纯粹就是一个页面,所有的说说内容组成这个页面的内容,感觉挺好的。缺点就是无法互动
九哥@boke112导航
要互动的话还是得链接到单独页面,要么最多只能实现点赞功能,条件有限啊!
清秋暖冬
哇,看起来不错哦,一会试试添加一个,谢谢了!
九哥@清秋暖冬
客气,好东西要和大家一起分享嘛~
wang
看起来不错啊,等等我也去试试
九哥@wang
嗯,可以发短文字,心情等等!
Koolight
像是一个小记事本,挺不错的,最早在Git主题中看到过,没想到博主把它弄得这么细致美观了!
九哥@Koolight
也是从别人那看到的,就拿来玩玩,稍微加工了下,折腾嘛~