最近给博客添加了一个显示作者信息的小工具，网上也有很多关于边栏显示作者信息的实现方式，但是大多都需要我们再修改代码中的一些信息，很是麻烦，于是自己借鉴了很多网上的代码并优化成了目前我所使用的这款显示作者信息小工具。

WordPress添加自定义小工具-图片1

对于社交信息的获取，由于并不是所有主题都会有微博、QQ、微信等信息的获取，这里我只获取了用户信息中的博客地址及作者博文的内容，当然你也可以通过增加这些字段来实现更多社交媒体的选项。具体增加方式以增加微博社交信息为例，在function.php文件中添加如下代码：

  1. //自定义用户信息小工具
  2. function author_info_methods( $contactmethods ) {
  3.     $contactmethods['weibo'] = '微博';
  4.     return $contactmethods;
  5. }
  6. add_filter('user_contactmethods','author_info_methods',10,1);

下面是小工具前端显示的截图，希望你喜欢。

WordPress添加自定义小工具-图片2

好了，现在我们来看下作者信息小工具的具体实现。

新增 widget-authorinfo.php 文件

新建一个 widget-authorinfo.php 的文件，并在其中添加如下代码：

  1. <?php
  2. /*
  3.  Widget Name:作者信息
  4.  Description:显示当前文章的作者信息
  5.  Version:1.0
  6.  */
  7. //DUX主题直接使用此代码即可，其他主题可能需要使用下面的代码注册小工具
  8. //add_action('widgets_init', create_function('', 'return register_widget("widget_ui_authorinfo");'));
  9.  
  10. class widget_ui_authorinfo extends WP_Widget {
  11.     
  12.     function widget_ui_authorinfo() {
  13.         $widget_ops = array('description' => '显示当前文章的作者信息！');
  14.         $this->WP_Widget('widget_ui_authorinfo', '作者信息', $widget_ops);
  15.     }
  16.     
  17.     function update($new_instance, $old_instance) {
  18.         return $new_instance;
  19.     }
  20.     
  21.     function widget($args, $instance) {
  22.         extract( $args );
  23.         echo $before_widget;
  24.         echo widget_ui_authorinfo();
  25.         echo $after_widget;
  26.     }
  27. }
  28.  
  29. //获取作者所有文章浏览量
  30. if(!function_exists('author_posts_views')) {
  31.     function author_posts_views($author_id = 1 ,$display = true) {
  32.         global $wpdb;
  33.         $apvn = "SELECT SUM(meta_value+0) FROM $wpdb->posts left join $wpdb->postmeta on ($wpdb->posts.ID = $wpdb->postmeta.post_id) WHERE meta_key = 'views' AND post_author = $author_id ";
  34.         $author_posts_views = intval($wpdb->get_var($apvn));
  35.         if($display) {
  36.             echo number_format_i18n($author_posts_views);
  37.         } else {
  38.             return $author_posts_views;
  39.         }
  40.     }
  41. }
  42.  
  43. //获取作者参与评论的评论数
  44. if(!function_exists('author_posts_comments')) {
  45.     function author_posts_comments( $author_id = 1 ,$author_email='' ,$display = true) {
  46.         global $wpdb;
  47.         $apcn = "SELECT count(comment_author) FROM $wpdb->comments WHERE comment_approved='1' AND comment_type='' AND (user_id = '$author_id'  OR comment_author_email='$author_email' )";
  48.         $author_posts_comments = intval($wpdb->get_var($apcn));
  49.         if($display) {
  50.             echo number_format_i18n($author_posts_comments);
  51.         } else {
  52.             return $author_posts_comments;
  53.         }
  54.     }
  55. }
  56.  
  57. function widget_ui_authorinfo(){
  58.     ?>
  59.  
  60.     <section class="author_info">
  61.         <div class="widget_avatar" style="background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/img/author-img.jpg);">
  62.             <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>" title="<?php the_author(); ?>" class="widget_avatar">
  63.                 <?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>
  64.                 <i title="<?php the_author(); ?>" class="author-ident author1"></i>
  65.             </a>
  66.         </div>
  67.         <div class="author_name">
  68.             <?php the_author(); ?>
  69.             <span class="admin_field">
  70.                 <?php $user_id=get_post($id)->post_author;
  71.                     if(user_can($user_id,'install_plugins')) {
  72.                         echo '管理员';
  73.                     }elseif(user_can($user_id,'edit_others_posts')) {
  74.                         echo '编辑';
  75.                     }elseif(user_can($user_id,'publish_posts')) {
  76.                         echo'作者';
  77.                     }elseif(user_can($user_id,'delete_posts')) {
  78.                         echo'投稿者';
  79.                     }elseif(user_can($user_id,'read')) {
  80.                         echo'订阅者';
  81.                     }
  82.                 ?>
  83.             </span>
  84.         </div>
  85.         <div class="author-social">
  86.             <span class="author-weixin"> 
  87.                 <a title="微信"><i class="fa fa-weixin"></i><em style="background-image: url(https://www.pieruo.com/wp-content/uploads/2019/01/wechat-qrcode.jpg);"></em></a>
  88.             </span> 
  89.             <span class="author-qq"> 
  90.                 <a href="//wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes" rel="nofollow" target="_blank" title="QQ联系我"><i class="fa fa-qq"></i></a>
  91.             </span> 
  92.             <span class="author-diy"> 
  93.                 <a href="http://weibo.com/123456789" rel="nofollow" target="_blank" title="微博"><i class="fa fa-weibo"></i></a>
  94.             </span>
  95.         </div>
  96.         <p id="hitokoto"><?php the_author_description(); ?></p>
  97.     </section>
  98.  
  99.     <section class="author_count">
  100.         <ul>
  101.             <li><span>文章数</span><strong><?php the_author_posts(); ?></strong></li>
  102.             <li><span>浏览量</span><strong><?php author_posts_views( get_the_author_meta('ID') ); ?><?php echo get_the_author_meta('ID '); ?></strong></li>
  103.             <li><span>评论数</span><strong><?php author_posts_comments( get_the_author_meta('ID') ,get_the_author_meta('user_email')); ?></strong></li>
  104.         </ul>
  105.     </section>
  106.   
  107. <?php
  108. }
  109. ?>

这是这次主题修改的核心文件，其中的一些代码大家可根据自己需要进行删改，比如你想增加更多社交信息可修改102-109这段代码实现。

修改 widget-index.php 文件

DUX主题对其所有小工具的调用都是通过 widget-index.php 文件来实现的，添加完上述代码后我们需要在该文件中找到如下代码并添加上 ‘authorinfo’, 这一字段。该数组中的每一个字段对应DUX主题 widgets 文件夹下的一个小工具，大家可对应了解。

  1. $widgets = array(
  2.     'sticky',
  3.     'statistics',
  4.     'ads',
  5.     'textads',
  6.     'comments',
  7.     'posts',
  8.     'readers',
  9.     'tags'
  10. );

值得注意的是，’tags’ 这个字段后面没有结束“,”符号，所以如果大家添加到该字段后注意一下。当然，为了避免大家添加中错误，建议添加到原有两个小工具对应字段中间，比如这里你可以添加到 ‘posts’,  与 ‘readers’, 之间。

修改 main.css 文件

添加如下代码至你主题的主样式文件中，DUX主题添加到 main.css 文件中即可。

  1. /*作者信息小工具CSS样式*/
  2. .author_info {text-align:center;}
  3. .widget_avatar {position:relative;height:100px;background-repeat:no-repeat;background-position:center center;margin-bottom:54px;}
  4. a.widget_avatar {display:block;position:absolute;top:54px;left:50%;margin-left:-46px;padding:6px;background-color:transparent;border-radius:100%;}
  5. a.widget_avatar img {width:80px;height:80px;border-radius:100%;}
  6. .weiyu_main i.weiyu-author,a.widget_avatar i.author1 {background-position: -50px -0px;}
  7. a.widget_avatar img:hover {opacity: 1;-ms-transform: scale(1.08);transform: scale(1.08);-webkit-transition: all .3s ease-out 0s;-o-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s;}
  8. i.weiyu-author,
  9. i.author-ident {display:inline-block;background-image:url(../img/avatar_img.png);background-repeat:no-repeat;width:20px;height:20px;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,.3);vertical-align:-2px;background-position:-50px -25px;position:absolute;bottom:14px;right:5px;}
  10. .author-social {text-align:center;padding:10px 0 20px;position: relative;}
  11. .author-social span {display:inline-block;margin:0 10px;border-radius:2px;}
  12. .author-social span:hover {background:#363e49;}
  13. span.author-weixin {background-color:#4CAF50;}
  14. span.author-weixin a em {position:absolute;z-index:99;bottom:61px;left:0;margin-left:26px;width:100px;height:100px;background-color:#fff;-webkit-background-size:95% auto;background-size:95% auto;background-position:center center;background-repeat:no-repeat;border:1px solid #DDDDDD;display:none;-webkit-transition:all .2s ease-out .1s;-o-transition:all .2s ease-out .1s;transition:all .2s ease-out .1s;}
  15. span.author-weixin a em:after {position:absolute;bottom:-16px;left:50%;width:0;height:0;margin-left:-8px;line-height:0;border:8px solid transparent;border-top:8px solid #dddddd;content:'';}
  16. span.author-weixin a:hover em {display:block;-webkit-transition:all .2s ease-out .1s;-o-transition:all .2s ease-out .1s;transition:all .2s ease-out .1s;}
  17. span.author-qq {background-color:#ff5e5c;}
  18. span.author-diy {background-color:#3690cf;}
  19. .author-social span a {padding:6px 20px;font-size:16px;color:#fff;display:inline-block;}
  20. .author_info .author_name {text-align:center;margin-bottom:12px;font-size:22px;line-height:26px;}
  21. span.admin_field {background-color:#ffa600;color:#fff;font-size:12px;display:inline-block;vertical-align:middle;margin-left:6px;padding:0 6px;line-height:24px;border-radius:2px;}
  22. .author_info p {padding:0 20px;font-weight:500;text-align:justify;margin-bottom:18px;}
  23. .author_count {background-color:#fff;border-top:1px #efefef solid;}
  24. .author_count ul {display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;text-align:center;}
  25. .author_count ul li {float:left;list-style:none;width:33.333%;border-right:1px #efefef solid;padding:8px 0;font-weight:300;}
  26. .author_count ul li:last-child {border-right:1px solid transparent;}
  27. .author_count ul li span {display:block;font-size:14px;color:#999;}
  28. .author_count ul li strong {font-weight:bold;}

由于主题的不同及其他原因，样式代码可能会出现错位等现象，可能需要大家根据自己情况微调一下。

其他主题修改

对于其他 WordPress 主题直接使用上述代码可能无法在外观小工具下显示该工具，我们需要将 widget-authorinfo.php 中注册小工具的代码打开，同时我们需要在 function.php 文件中添加如下代码加载这个 PHP 文件。注意修改下代码中的路径！

  1. require_once get_stylesheet_directory() . '/widgets/widget-authorinfo.php';

本文已通过「原本」原创作品认证，转载请注明文章出处及链接。

夏日阳光
  • 本文由 夏日阳光 发表于 2019年2月23日
  • 本文为夏日阳光原创文章，转载请务必保留本文链接：https://www.pieruo.com/35.html
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证
加载中...