WordPress知更鸟主题增加微语/说说功能(纯代码/优化版)

2019年4月29日10:50:59 10 1,109
摘要

简单折腾一下WordPress的微语/说说功能,更加完善的教程。包含详细页面和路由相关的。

起因

前两天小王先森刚刚转WP后,想在WP上实现Emlog那种微语功能,百度了一下,教程很多,基本上都是一模一样的,而且轻微有一些问题。如:头像、详细页等。本片文章主要是针对知更鸟主题优化,其他主题大体上也是可以实现的。原本是不想弄这篇文章的,因为网上资源实属太多,但是怕有部分网友想实现此功能,但是找的资源又无法实现想要的,所以还是抽了点时间写一下这个教程。希望可以帮助您解决。具体效果可参考:闲言碎语

折腾步骤

打开主题目录下functions.php文件,添加说说功能代码:

  1. function my_custom_init() {
  2.     $labels = array(
  3.         'name' => '说说',
  4.         'singular_name' => 'singularname',
  5.         'add_new' => '发表说说',
  6.         'add_new_item' => '发表说说',
  7.         'edit_item' => '编辑说说',
  8.         'new_item' => '新说说',
  9.         'view_item' => '查看说说',
  10.         'search_items' => '搜索说说',
  11.         'not_found' => '暂无说说',
  12.         'not_found_in_trash' => '没有已遗弃的说说',
  13.         'parent_item_colon' => '',
  14.         'menu_name' => '说说'
  15.     );
  16.     $args = array(
  17.         'labels' => $labels,
  18.         'public' => true,
  19.         'publicly_queryable' => true,
  20.         'show_ui' => true,
  21.         'show_in_menu' => true,
  22.         'query_var' => true,
  23.         'capability_type' => 'post',
  24.         'has_archive' => true,
  25.         'hierarchical' => false,
  26.         'menu_position' => null,
  27.         'rewrite' => array('slug' => 'shuoshuo'),
  28.         'supports' => array(
  29.             'title',
  30.             'editor',
  31.             'author',
  32.             'comments',
  33.         )
  34.     );
  35.     register_post_type('shuoshuo', $args);
  36. }

上面代码在网友提供的代码进行简单优化,添加了重写此分类路由,定义为"shuoshuo",而且在网站后台不关联文章分类,不会造成数据混乱。在supports中,添加了评论,允许访客评论。register_post_type方法,此处参考秋叶网络博客WordPress官方说明。

添加完以上代码就可以看到后台有一个说说菜单,在菜单中,有一个说说和发表说说功能,就是简单的说说列表和添加说说功能。接下来,我们要添加一个模版页,也就是拿来展示说说/微语的页面。在知更鸟主题中,模版一般存在pages中,如果主题结构写的严谨的话,一般也在这些目录下,我们新建一个shuoshuo.php,为了和主题文件协调,我按照主题的规范名字就换成了template-shuoshuo.php,此处不影响。

  1. <?php
  2. /*
  3. Template Name: 微语
  4. */
  5. if ( ! defined( 'ABSPATH' ) ) { exit; }
  6. get_header(); ?>
  7. <style type="text/css">
  8.     #shuoshuo_content {
  9.         background-color: #fff;
  10.         padding: 10px;
  11.         min-height: 500px;
  12.     }
  13.     /* shuo */
  14.     body.theme-dark .cbp_tmtimeline::before {
  15.         background: RGBA(255, 255, 255, 0.06);
  16.     }
  17.     ul.cbp_tmtimeline {
  18.         padding: 0;
  19.     }
  20.     div class.cdp_tmlabel > li .cbp_tmlabel {
  21.         margin-bottom: 0;
  22.     }
  23.     .cbp_tmtimeline {
  24.         margin: 30px 0 0 0;
  25.         padding: 0;
  26.         list-style: none;
  27.         position: relative;
  28.     }
  29.     /* The line */
  30.     .cbp_tmtimeline:before {
  31.         content: '';
  32.         position: absolute;
  33.         top: 0;
  34.         bottom: 0;
  35.         width: 4px;
  36.         background: RGBA(0, 0, 0, 0.02);
  37.         left: 80px;
  38.         margin-left: 10px;
  39.     }
  40.     /* The date/time */
  41.     .cbp_tmtimeline > li .cbp_tmtime {
  42.         display: block;
  43.         /* width: 29%; */
  44.         /* padding-right: 110px; */
  45.         max-width: 70px;
  46.         position: absolute;
  47.     }
  48.     .cbp_tmtimeline > li .cbp_tmtime span {
  49.         display: block;
  50.         text-align: right;
  51.     }
  52.     .cbp_tmtimeline > li .cbp_tmtime span:first-child {
  53.         font-size: 0.9em;
  54.         color: #bdd0db;
  55.     }
  56.     .cbp_tmtimeline > li .cbp_tmtime span:last-child {
  57.         font-size: 1.2em;
  58.         color: #9BCD9B;
  59.     }
  60.     .cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
  61.         color: RGBA(255, 125, 73, 0.75);
  62.     }
  63.     div.cbp_tmlabel > p {
  64.         margin-bottom: 0;
  65.     }
  66.     /* Right content */
  67.     .cbp_tmtimeline > li .cbp_tmlabel {
  68.         margin: 0 0 45px 65px;
  69.         background: #9BCD9B;
  70.         color: #fff;
  71.         padding: .8em 1.2em .4em 1.2em;
  72.         /* font-size: 1.2em; */
  73.         font-weight: 300;
  74.         line-height: 1.4;
  75.         position: relative;
  76.         border-radius: 5px;
  77.         transition: all 0.3s ease 0s;
  78.         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  79.         cursor: pointer;
  80.         display: block;
  81.     }
  82.     .cbp_tmlabel:hover {
  83.         /* transform:scale(1.05); */
  84.         transform: translateY(-3px);
  85.         z-index: 1;
  86.         -webkit-box-shadow: 0 15px 32px rgba(0, 0, 0, 0.15) !important
  87.     }
  88.     .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
  89.         background: RGBA(255, 125, 73, 0.75);
  90.     }
  91.     /* The triangle */
  92.     .cbp_tmtimeline > li .cbp_tmlabel:after {
  93.         right: 100%;
  94.         border: solid transparent;
  95.         content: " ";
  96.         height: 0;
  97.         width: 0;
  98.         position: absolute;
  99.         pointer-events: none;
  100.         border-right-color: #9BCD9B;
  101.         border-width: 10px;
  102.         top: 4px;
  103.     }
  104.     .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
  105.         border-right-color: RGBA(255, 125, 73, 0.75);
  106.     }
  107.     p.shuoshuo_time {
  108.         margin-top: 10px;
  109.         border-top: 1px dashed #fff;
  110.         padding-top: 5px;
  111.     }
  112.     /* Media */
  113.     @media screen and (max-width: 65.375em) {
  114.         .cbp_tmtimeline > li .cbp_tmtime span:last-child {
  115.             font-size: 1.2em;
  116.         }
  117.     }
  118.     .shuoshuo_author_img img {
  119.         border: 1px solid #ddd;
  120.         padding: 2px;
  121.         float: left;
  122.         border-radius: 64px;
  123.         transition: all 1.0s;
  124.     }
  125.     .avatar {
  126.         -webkit-border-radius: 100% !important;
  127.         -moz-border-radius: 100% !important;
  128.         box-shadow: inset 0 -1px 0 #3333sf;
  129.         -webkit-box-shadow: inset 0 -1px 0 #3333sf;
  130.         -webkit-transition: 0.4s;
  131.         -webkit-transition: -webkit-transform 0.4s ease-out;
  132.         transition: transform 0.4s ease-out;
  133.         -moz-transition: -moz-transform 0.4s ease-out;
  134.     }
  135.     .zhuan {
  136.         transform: rotateZ(720deg);
  137.         -webkit-transform: rotateZ(720deg);
  138.         -moz-transform: rotateZ(720deg);
  139.     }
  140.     /* end */
  141. </style>
  142. </head>
  143. <body>
  144. <div id="primary" class="content-area" style="">
  145.     <main id="main" class="site-main" role="main">
  146.         <div id="shuoshuo_content">
  147.             <ul class="cbp_tmtimeline">
  148.                 <?php query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");
  149.               if (have_posts()):
  150.                   while (have_posts()):
  151.                       the_post(); ?>
  152.                 <li> <span class="shuoshuo_author_img"><?php echo get_avatar(get_the_author_email(), 24,'','',array('height' => 24,'width' => 24,) );?></span>
  153.                     <a class="cbp_tmlabel" href="<?php the_permalink(); ?>" target="_blank" title="<?php the_title(); ?>">
  154.                         <p></p>
  155.                         <p><?php
  156.         the_content(); ?></p>
  157.                         <p></p>
  158.                         <p class="shuoshuo_time"><i class="fa fa-clock-o"></i>
  159.                             <?php
  160.         the_time('Y年n月j日G:i'); ?>
  161.                         </p>
  162.                     </a>
  163.                     <?php
  164.     endwhile;
  165. endif; ?>
  166.                 </li>
  167.             </ul>
  168.         </div>
  169.     </main>
  170.     <!-- .site-main -->
  171. </div>
  172. <script type="text/javascript">
  173.     $(function () {
  174.         var oldClass = "";
  175.         var Obj = "";
  176.         $(".cbp_tmtimeline li").hover(function () {
  177.             Obj = $(this).children(".shuoshuo_author_img");
  178.             Obj = Obj.children("img");
  179.             oldClass = Obj.attr("class");
  180.             var newClass = oldClass + " zhuan";
  181.             Obj.attr("class", newClass);
  182.         }, function () {
  183.             Obj.attr("class", oldClass);
  184.         });
  185.     })
  186. </script>
  187. <?php
  188. get_sidebar();
  189. get_footer();
  190. ?>

模版页面简单说明一下,网友们一般分享出来的,头像这块之间是写死的,固定一个头像,这一块我专门做了一个优化吧。原本第一版的时候,我直接调用获取get_avatar()方法获取头像,然后再利用JS将样式调整,才开始感觉还不错,我想WP应该没那么简单,这种方法果然是给了很多参数,官方文档上说明,可以设置头像大小,头像等级等等,所以简单试了一下,感觉还可以,不支持是哪个地方有坑(可能吧),在说说页面上显示作者头像,应该是48是最合适的,但是第二个参数写48,竟然给我显示的96的大小,所以没辙,只能试试其他的:如后面添加数组单独设备宽和高,都不行,后来又把官网的代码复制到这边,他设置的是32,到页面上是64。欸,发现规律了,数据要减半。所以get_avatar方法此处是24。此处参考官方文档言曌博客

在后台新建页面,选中刚刚建立的微语页面模版,我们发条说说看看,成功了,但是进入详细页面条用的是文章页面,布局排版很乱。此处特意找了言曌博客站长进行交流,但是作者说站点不维护了,这一块代码也忘记了。唉,还要自己再研究一下,终于查找到了资料,原来是需要自己新建一个文章模版页就可以实现了。这里我们新建一个single-shuoshuo.php,这个就是与说说功能对应的文章页面。因为知更鸟自带的公告页面,适合做说说/微语的详细页面,就简单复制过来,去除版权说明、分类、相关文章等,留下评论。

  1. <?php
  2. if ( ! defined( 'ABSPATH' ) ) { exit; }
  3. get_header(); ?>
  4.     <div id="primary" class="content-area">
  5.         <main id="main" class="site-main" role="main">
  6.             <?php while ( have_posts() ) : the_post(); ?>
  7.                 <article id="post-<?php the_ID(); ?>" <?php post_class('wow fadeInUp post'); ?> data-wow-delay="0.3s">
  8.                     <header class="entry-header">
  9.                         <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
  10.                     </header><!-- .entry-header -->
  11.                     <div class="entry-content">
  12.                         <div class="single-content">
  13.                             <?php get_template_part('ad/ads', 'single'); ?>
  14.                             <?php the_content(); ?>
  15.                             <?php get_template_part( 'inc/file' ); ?>
  16.                             <style> #primary {width: 100%;}#sidebar,.r-hide {display: none;}</style>
  17.                         </div>
  18.                         <?php wp_link_pages(array('before' => '<div class="page-links">', 'after' => '', 'next_or_number' => 'next', 'previouspagelink' => '<span><i class="be be-arrowleft"></i></span>', 'nextpagelink' => "")); ?>
  19.                         <?php wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'number', 'link_before' =>'<span>', 'link_after'=>'</span>')); ?>
  20.                         <?php wp_link_pages(array('before' => '', 'after' => '</div>', 'next_or_number' => 'next', 'previouspagelink' => '', 'nextpagelink' => '<span><i class="be be-arrowright"></i></span> ')); ?>
  21.                         <?php if (zm_get_option('zm_like')) { ?>
  22.                             <?php get_template_part( 'template/social' ); ?>
  23.                         <?php } else { ?>
  24.                             <div id="social"></div>
  25.                         <?php } ?>
  26.                         <footer class="single-footer">
  27.                             <ul class="single-meta">
  28.                                 <?php edit_post_link('编辑', '<li class="edit-link">', '</li>' ); ?>
  29.                                 <?php if ( post_password_required() ) { ?>
  30.                                     <li class="comment"><a href="#comments">密码保护</a></li>
  31.                                 <?php } else { ?>
  32.                                     <li class="comment"><?php comments_popup_link( '<i class="be be-speechbubble"></i> 发表评论', '<i class="be be-speechbubble"></i> 1 ', '<i class="be be-speechbubble"></i> %' ); ?></li>
  33.                                 <?php } ?>
  34.                                 <?php if( function_exists( 'the_views' ) ) { the_views(true, '<li class="views"><i class="be be-eye"></i> ','</li>');  } ?>
  35.                             </ul>
  36.                             <ul id="fontsize">A+</ul>
  37.                             <div class="single-cat-tag">
  38.                                 <div class="single-cat">日期:<?php the_time( 'Y年m月d日' ) ?> </div>
  39.                             </div>
  40.                         </footer><!-- .entry-footer -->
  41.                         <div class="clear"></div>
  42.                     </div><!-- .entry-content -->
  43.                 </article><!-- #post -->
  44.                 <?php if (zm_get_option('meta_nav_lr')) : ?>
  45.                 <?php
  46.                     the_post_navigation( array(
  47.                         'next_text' => '<span class="meta-nav-l" aria-hidden="true"><i class="be be-arrowright"></i></span>',
  48.                         'prev_text' => '<span class="meta-nav-r" aria-hidden="true"><i class="be be-arrowleft"></i></span>',
  49.                     ) );
  50.                 ?>
  51.                 <?php endif; ?>
  52.                 <?php if ( comments_open() || get_comments_number() ) : ?>
  53.                     <?php comments_template( '', true ); ?>
  54.                 <?php endif; ?>
  55.             <?php endwhile; ?>
  56.         </main><!-- .site-main -->
  57.     </div><!-- .content-area -->
  58. <?php get_footer(); ?>

这样大概已经弄好了,现在需要整合路由了,因为不设置的话url可能就是域名+shuoshuo+标题显示,不利于SEO和美观。因为我的知更鸟版本稍微有点旧,需要在fuctions.php内添加路由,而在19年04月更新的版本中新增了此功能,文件为:types-permalink.php,直接添加'shuoshuo'=>'shuoshuo',然后保存一下主题设置就可以使用了。而在旧版本或者其他主题下,就需要自行设置。

  1. /**
  2.  * 设置 shuoshuo 这种自定义文章类型的固定链接结构为 ID.html 
  3.  * https://img.qsh5.cn/476.html
  4.  */
  5. add_filter('post_type_link', 'custom_shuoshuo_link', 1, 3);
  6. function custom_shuoshuo_link( $link$post = 0 ){
  7.     if ( $post->post_type == 'shuoshuo' ){
  8.         return home_url( 'shuoshuo/' . $post->ID .'.html' );
  9.     } else {
  10.         return $link;
  11.     }
  12. }
  13. add_action( 'init', 'custom_shuoshuo_rewrites_init' );
  14. function custom_shuoshuo_rewrites_init(){
  15.     add_rewrite_rule(
  16.         'shuoshuo/([0-9]+)?.html$',
  17.         'index.php?post_type=shuoshuo&p=$matches[1]',
  18.         'top' );
  19.     add_rewrite_rule(
  20.         'shuoshuo/([0-9]+)?.html/comment-page-([0-9]{1,})$',
  21.         'index.php?post_type=shuoshuo&p=$matches[1]&cpage=$matches[2]',
  22.         'top'
  23.         );
  24. }

添加完成后,详细页面也可以访问了,至此折腾完毕。有什么不明白的可以直接评论。

weinxin
微信公众号
博客微信公众号,欢迎关注。
不忘初心 牢记使命

发表评论取消回复

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

目前评论:10   其中:访客  6   博主  4

    • avatar wangy 0

      最前面在加上这段
      add_action(‘init’, ‘my_custom_init’);

      • avatar 股票配资 0

        你好,我的添加了第一步代码,后台为什么看不到说说的功能?

          • avatar 萧瑟  博主

            @股票配资 如果您无法实现,可以添加我QQ号联系,有时间会帮您解决。 :razz:

          • avatar 简单生活 2

            很多集成这个的,大多都荒着呢,感觉没啥需求,我也就没弄!

              • avatar 萧瑟  博主

                @简单生活 朋友需要就顺手弄了下,做个网站更新日志也可以哈。

              • avatar 老俍 4

                知道了,就是你的闲言碎语对吧

                  • avatar 萧瑟  博主

                    @老俍 嗯,就是仿照Emlog的微语实现的一个小功能。

                  • avatar 老俍 4

                    说说是个什么功能?

                    • avatar 小王先森 5

                      很详细,这是个不错的功能。在我的新版里面就更简单了!我要转过去保留一份

                        • avatar 萧瑟  博主

                          @小王先森 关于百度的收录算法,不想吐槽了。