之前博客分享过一篇添加作者信息侧边栏功能的文章>>> WordPress添加作者信息小工具 ,当时能力有限,制作的比较粗糙,而且当时有网友建议增加些后台自定义选项也一直没时间增加,最近几天重新调整了下这个功能,并且新增了一些后台设置选项,再次分享一下。前端显示效果及后台选项如下图所示:
创建 widget_author_info.php 文件
新建一个名为 widget_author_info.php 的文件,将以下代码丢到该文件中:
<?php /** * @name 作者信息 * @description 在网站侧边栏添加一个作者信息的侧栏小工具用于显示当前文章的作者信息(包含站点名称、站点副标题,站点描述、自定义链接、文章数、评论数、标签数等) */ ?> <?php class widget_author_info extends WP_Widget { function __construct(){ parent::__construct( 'widget_author_info', __('QGG 作者信息', 'QGG'), array( 'classname' => 'widget-author-info', 'description'=> '显示当前文章的作者信息' ) ); } // 后台设置选项 function form($instance) { $defaults = array( 'img_link' => get_template_directory_uri() . '/img/sidebar-banner.png', 'post_num' => 5, 'show_role' => 'on', 'show_sns' => 'on', 'show_tongji' => 'on', 'show_desc' => 'on', 'show_posts' => 'on', ); $instance = wp_parse_args( (array) $instance, $defaults ); extract($instance); ?> <p> <label> <?php _e('顶部招贴图像:', 'QGG'); ?> <input id="<?php echo $this->get_field_id('img_link'); ?>" name="<?php echo $this->get_field_name('img_link'); ?>" value="<?php echo $instance['img_link']; ?>" type="url" class="widefat"/> </label> </p> <p> <label> <?php _e('显示文章数目:', 'QGG'); ?> <input id="<?php echo $this->get_field_id('post_num'); ?>" name="<?php echo $this->get_field_name('post_num'); ?>" value="<?php echo $instance['post_num']; ?>" type="number" class="widefat"/> </label> </p> <p> <label> <input id="<?php echo $this->get_field_id('show_role'); ?>" name="<?php echo $this->get_field_name('show_role'); ?>" type="checkbox" class="widefat" <?php checked( $instance['show_role'], 'on' ); ?> > <?php _e('显示作者角色', 'QGG'); ?> </label> </p> <p> <label> <input id="<?php echo $this->get_field_id('show_sns'); ?>" name="<?php echo $this->get_field_name('show_sns'); ?>" type="checkbox" class="widefat" <?php checked( $instance['show_sns'], 'on' ); ?> > <?php _e('显示社交信息', 'QGG'); ?> </label> </p> <p> <label> <input id="<?php echo $this->get_field_id('show_tongji'); ?>" name="<?php echo $this->get_field_name('show_tongji'); ?>" type="checkbox" class="widefat" <?php checked( $instance['show_tongji'], 'on' ); ?> > <?php _e('显示统计信息', 'QGG'); ?> </label> </p> <p> <label> <input id="<?php echo $this->get_field_id('show_desc'); ?>" name="<?php echo $this->get_field_name('show_desc'); ?>" type="checkbox" class="widefat" <?php checked( $instance['show_desc'], 'on' ); ?> > <?php _e('显示作者描述', 'QGG'); ?> </label> </p> <p> <label> <input id="<?php echo $this->get_field_id('show_posts'); ?>" name="<?php echo $this->get_field_name('show_posts'); ?>" type="checkbox" class="widefat" <?php checked( $instance['show_posts'], 'on' ); ?> > <?php _e('显示更多文章', 'QGG'); ?> </label> </p> <?php } // 更新设置选项 function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['img_link'] = $new_instance['img_link']; $instance['post_num'] = $new_instance['post_num']; $instance['show_role'] = $new_instance['show_role']; $instance['show_sns'] = $new_instance['show_sns']; $instance['show_tongji'] = $new_instance['show_tongji']; $instance['show_desc'] = $new_instance['show_desc']; $instance['show_posts'] = $new_instance['show_posts']; return $instance; } // 前端显示内容 function widget($args, $instance){ extract( $args ); $img_link = isset($instance['img_link']) ? $instance['img_link'] : get_template_directory_uri() . '/img/sidebar-banner.png'; $post_num = isset($instance['post_num']) ? $instance['post_num'] : 5; $show_role = isset($instance['show_role']) ? $instance['show_role'] : ''; $show_sns = isset($instance['show_sns']) ? $instance['show_sns'] : ''; $show_tongji = isset($instance['show_tongji']) ? $instance['show_tongji'] : ''; $show_desc = isset($instance['show_desc']) ? $instance['show_desc'] : ''; $show_posts = isset($instance['show_posts']) ? $instance['show_posts'] : ''; $author_id = get_the_author_meta('ID'); $author_name = get_the_author_meta('display_name'); $author_email = get_the_author_meta('user_email'); $my_post_num = get_the_author_posts(); $my_view_num = get_author_posts_views( $author_id, false ); $my_cmnt_num = get_author_posts_comments( $author_id, $author_email, false ); echo $before_widget; echo '<img class="banner" src="'.$img_link.'" alt="">'; echo '<div class="author-info">'; // 用户头像 echo'<div class="icon"> <a href="'.get_author_posts_url( $author_id ).'">'._get_the_avatar( $author_id, $current_user->user_email, true, 80 ).'</a> </div>'; // 用户角色 echo '<div class="role">'; echo get_the_author_posts_link(); if ($show_role){ echo '<span>'; if( user_can($author_id,'install_plugins') ){ echo '管理员'; }elseif( user_can($author_id,'edit_others_posts') ){ echo '编辑'; }elseif( user_can($author_id,'publish_posts') ){ echo'作者'; }elseif( user_can($author_id,'delete_posts') ){ echo'投稿者'; }elseif( user_can($author_id,'read') ){ echo'订阅者'; } echo '</span>'; } echo '</div>'; echo '<div class="clear"></div>'; // 社交信息 if ($show_sns){ echo '<div class="sns">'; if( get_the_author_meta( "user_url" ) ){ echo '<span class="sns-item"> <a href="'.get_the_author_meta( "user_url" ).'" rel="nofollow" target="_blank"><i class="iconfont qgg-user"></i><b>用户</b></a> </span>'; } if( get_the_author_meta( "qq" ) ){ echo '<span class="sns-item"> <a href="'.get_the_author_meta( "qq" ).'" rel="nofollow" target="_blank"><i class="iconfont qgg-qq"></i><b>QQ</b></a> </span>'; } if( get_the_author_meta( "wechat" ) ){ echo '<span class="sns-item"> <a href="'.get_the_author_meta( "wechat" ).'" rel="nofollow" target="_blank"><i class="iconfont qgg-wechat"></i><b>微信</b></a> </span>'; } if( get_the_author_meta( "weibo" ) ){ echo '<span class="sns-item"> <a href="'.get_the_author_meta( "weibo" ).'" rel="nofollow" target="_blank"><i class="iconfont qgg-weibo"></i><b>微博</b></a> </span>'; } if( get_the_author_meta( "email" ) ){ echo '<span class="sns-item"> <a href="'.get_the_author_meta( "email" ).'" rel="nofollow" target="_blank"><i class="iconfont qgg-email"></i><b>邮箱</b></a> </span>'; } echo '</div>'; } // 用户统计 if ($show_tongji){ echo '<div class="tongji"> <div class="card"> <span class="tag">文章数</span> <b class="num">'.$my_post_num.'</b> </div> <div class="card"> <span class="tag">浏览量</span> <b class="num">'.$my_view_num.'</b> </div> <div class="card"> <span class="tag">评论数</span> <b class="num">'.$my_cmnt_num.'</b> </div> </div>'; } // 用户描述 if ($show_desc){ echo '<div class="desc"> '.get_the_author_description().' </div>'; } // 用户文章 if ($show_posts){ echo '<div class="posts"> <div class="title"> <span class="more"> <a href="'.get_author_posts_url( $author_id ).'" rel="nofollow" target="_blank">更多<i class="iconfont qgg-cross"></i></a> </span> <h3>最新文章</h3> </div> <ul>'; global $wpdb; $result = $wpdb->get_results( "SELECT comment_count, ID, post_title, post_date FROM $wpdb->posts WHERE post_status='publish' AND post_type='post' AND post_author = $author_id ORDER BY ID DESC LIMIT 0 , $post_num" ); $i = 0; foreach ($result as $post) { $i++; setup_postdata($post); $post_id = $post->ID; $post_title = $post->post_title; echo '<li> <span class="tag tag-'.$i.'">'.$i.'</span><a href="'.get_permalink($post_id).'" title="'.$post_title.'">'.$post_title.'</a> </li>'; } echo '</ul> </div>'; } echo '</div>'; echo $after_widget; } } //获取作者所有文章浏览量 if(!function_exists('get_author_posts_views')) { function get_author_posts_views($author_id = 1 ,$display = true) { global $wpdb; $sqlPost = "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 "; $author_posts_views = intval($wpdb->get_var($sqlPost)); if( $display ) { echo number_format_i18n($author_posts_views); } else { return $author_posts_views; } } } //获取作者参与评论的评论数 if(!function_exists('get_author_posts_comments')) { function get_author_posts_comments( $author_id = 1, $author_email='', $display = true ) { global $wpdb; $sqlComt = "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' )"; $author_posts_comments = intval( $wpdb->get_var($sqlComt) ); if($display) { echo number_format_i18n( $author_posts_comments ); } else { return $author_posts_comments; } } }
注意:文件格式为 UTF-8 ,默认顶部图片 sidebar-banner.png 也要改一下。
在 functions.php 文件中引入
直接在主题 functions.php 文件中添加如下代码即可:
require_once get_stylesheet_directory() . '/widgets/widget_author_info.php';
注意:路径调整为自己主题 widget_author_info.php 文件所在位置。
CSS 样式美化代码
直接在主题主样式文件中添加如下代码即可:
/**====================作者信息侧栏样式====================**/ .widget-author-info{ display: block; position: relative; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: auto; margin: 20px 0 0; border: 0; padding: 0; border-radius: 0; background: #fff; overflow: hidden; } .widget-author-info .banner{ display: block; width: 100%; height: 120px; } .widget-author-info .author-info{ display: block; width: 100%; height: auto; margin: 0; border: 0; padding: 15px; text-align: justify; } .widget-author-info .author-info .icon{ display: block; position: relative; top: -50px; left: 10px; width: 80px; height: 80px; margin: 0; border: 0; padding: 5px; border-radius: 3px; background: #eee; } .widget-author-info .author-info .icon .avatar{ width: 100%; height: 100%; } .widget-author-info .author-info .role{ display: block; position: absolute; top: 90px; left: 120px; width: auto; max-width: 200px; height: 30px; margin: 0; border: 0; padding: 0; } .widget-author-info .author-info .role a{ display: inline-block; max-width: 100px; font-size: 20px; font-weight: bolder; color: #fff; text-decoration: none; } .widget-author-info .author-info .role span{ display: inline-block; position: relative; bottom: 2px; margin: 0 5px; border: 0; padding: 3px 5px; border-radius: 3px; font-size: 10px; color: #fff; background: #ff0000; background: -webkit-gradient(linear,left top,right top,from(#ff0000),to(#ff7600)) no-repeat; background: -webkit-linear-gradient(left, #ff0000, #ff7600) no-repeat; background: linear-gradient(90deg,#ff0000,#ff7600) no-repeat; -webkit-box-shadow: 0 3px 5px rgba(255,80,0,0.5); box-shadow: 0 3px 5px rgba(255,80,0,0.5); } .widget-author-info .author-info .sns{ float: none; display: block; position: absolute; top: 120px; left: 120px; width: auto; max-width: 240px; height: 40px; margin: 3px 0; border: 0; padding: 0; font-size: 12px; } .widget-author-info .author-info .sns .sns-item{ float: left; display: inline-block; position: relative; width: 36px; height: 36px; margin: 0 5px 0 0; border: 0; padding: 0; line-height: 40px; text-align: center; font-weight: normal; overflow: hidden; } .widget-author-info .author-info .sns .sns-item a{ display: block; text-decoration: none; color: #999; } .widget-author-info .author-info .sns .sns-item i{ display: block; width: 100%; height: 24px; } .widget-author-info .author-info .sns .sns-item i:before{ display: inline-block; position: absolute; top: 0; bottom: 0; right: 0; left: 0; height: 24px; width: 100%; line-height: 24px; font-size: 18px; } .widget-author-info .author-info .sns .sns-item b{ display: block; width: 100%; height: 12px; width: 100%; line-height: 12px; font-size: 12px; } .widget-author-info .author-info .clear{ clear: both; display: block; position: relative; margin: -45px 0; border: 0; padding: 0; } .widget-author-info .author-info .tongji{ display: block; position: relative; width: auto; height: 50px; margin: 10px -17px 0; border: 0; padding: 0; } .widget-author-info .author-info .tongji .card{ float: left; display: block; position: relative; width: 33.33%; height: 100%; margin: 0; border: 0; padding: 5px 0; text-align: center; background: #fafafa; } .widget-author-info .author-info .tongji .card:hover{ background: #eee; } .widget-author-info .author-info .tongji .card:before{ position: absolute; content: ''; top: 5px; right: 0; width: 1px; height: 40px; background: #eee; } .widget-author-info .author-info .tongji .card:last-child:before{ background: #fafafa; } .widget-author-info .author-info .tongji .card span{ display: block; width: 100%; height: 20px; margin: 0; border: 0; padding: 0; line-height: 20px; font-size: 14px; font-style: normal; color: #999; } .widget-author-info .author-info .tongji .card b{ display: block; width: 100%; height: 20px; margin: 0; border: 0; padding: 0; line-height: 20px; font-size: 16px; font-style: normal; color: #24a0f0; } .widget-author-info .author-info .desc{ display: block; position: relative; width: 100%; height: auto; max-height: 48px; line-height: 16px; margin: 10px 0 0; border: 0; padding: 0; font-size: 12px; color: #999; overflow: hidden; text-align: justify; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .widget-author-info .author-info .posts{ display: block; position: relative; width: 100%; height: auto; margin: 10px 0 0; border: 0; padding: 0; } .widget-author-info .author-info .posts .title{ display: block; width: auto; height: 30px; margin: 0 -15px; border: 0; padding: 0; line-height: 30px; background: #fafafa; } .widget-author-info .author-info .posts .title h3{ margin: 0 15px; border: 0; padding: 0; font-size: 16px; font-weight: bold; color: #24a0f0; background: none; } .widget-author-info .author-info .posts .title .more{ float: right; display: block; width: auto; height: 100%; margin: 0 15px; border: 0; padding: 0; font-size: 12px; color: #999; } .widget-author-info .author-info .posts .title .more i{ font-size: 12px; } .widget-author-info .author-info .posts .title .more a{ text-decoration: none; color: #999; } .widget-author-info .author-info .posts .title .more a:hover{ text-decoration: none; color: #24a0f0; } .widget-author-info .author-info .posts ul{ display: block; position: relative; margin: 10px 0 0; border: 0; padding: 0; } .widget-author-info .author-info .posts ul li{ display: inline-block; position: relative; width: 100%; height: 24px; margin: 0; border: 0; padding: 0; line-height: 24px; font-size: 14px; color: #555; overflow: hidden; text-overflow: ellipsis; word-break: break-all; white-space: nowrap; } .widget-author-info .author-info .posts ul li a{ text-decoration: none; color: #555; } .widget-author-info .author-info .posts ul li a:hover{ text-decoration: none; color: #24a0f0; } .widget-author-info .author-info .posts ul li span.tag{ float: left; display: block; position: relative; width: 20px; height: 20px; margin: 2px 10px 2px 0; border: 0; padding: 0; border-radius: 3px; font-size: 12px; line-height: 20px; text-align: center; color: #fff; background: #ccc; } .widget-author-info .author-info .posts ul li span.tag-1{ background: #ff7878; } .widget-author-info .author-info .posts ul li span.tag-2{ background: #f9c909; } .widget-author-info .author-info .posts ul li span.tag-3{ background: #24f00c; } @media (max-width: 1366px) { .widget-author-info{ margin: 20px 0 0; } .widget-author-info .banner{ display: block; width: 100%; height: 100px; } .widget-author-info .author-info{ padding: 10px; } .widget-author-info .author-info .icon{ width: 70px; height: 70px; } .widget-author-info .author-info .role{ top: 70px; left: 100px; } .widget-author-info .author-info .sns{ top: 100px; left: 100px; height: 24px; } .widget-author-info .author-info .sns .sns-item{ width: 24px; height: 24px; } .widget-author-info .author-info .sns .sns-item b{ display: none; } .widget-author-info .author-info .tongji{ margin: 5px -12px 0; } .widget-author-info .author-info .desc{ margin: 5px 0 0; } .widget-author-info .author-info .posts{ margin: 5px 0 0; } } @media (max-width: 1024px) { .widget-author-info{ margin: 15px 0 0; } .widget-author-info .author-info{ width: 100%; padding: 15px; } .widget-author-info .author-info .icon{ top: -50px; left: 10px; width: 80px; height: 80px; padding: 5px; border-radius: 3px; } .widget-author-info .author-info .role{ top: 70px; left: 120px; width: auto; max-width: 200px; height: 30px; } .widget-author-info .author-info .role a{ font-size: 24px; } .widget-author-info .author-info .role span{ bottom: 2px; margin: 0 5px; padding: 3px 5px; border-radius: 3px; font-size: 10px; } .widget-author-info .author-info .sns{ top: 100px; left: 120px; max-width: 240px; height: 40px; margin: 3px 0; font-size: 12px; } .widget-author-info .author-info .sns .sns-item{ width: 36px; height: 36px; margin: 0 5px 0 0; line-height: 40px; } .widget-author-info .author-info .sns .sns-item i{ height: 24px; } .widget-author-info .author-info .sns .sns-item i:before{ height: 24px; width: 100%; line-height: 24px; font-size: 18px; } .widget-author-info .author-info .sns .sns-item b{ display: block; height: 12px; line-height: 12px; font-size: 12px; } .widget-author-info .author-info .clear{ margin: -45px 0; } .widget-author-info .author-info .tongji{ height: 50px; margin: 10px -17px 0; } .widget-author-info .author-info .tongji .card{ padding: 5px 0; } .widget-author-info .author-info .tongji .card:before{ top: 5px; height: 40px; } .widget-author-info .author-info .tongji .card span{ height: 20px; line-height: 20px; font-size: 14px; } .widget-author-info .author-info .tongji .card b{ height: 30px; line-height: 20px; font-size: 16px; } .widget-author-info .author-info .desc{ max-height: 48px; line-height: 16px; margin: 10px 0 0; font-size: 12px; -webkit-line-clamp: 3; } .widget-author-info .author-info .posts{ margin: 10px 0 0; } .widget-author-info .author-info .posts .title{ height: 30px; margin: 0 -15px; line-height: 30px; } .widget-author-info .author-info .posts .title h3{ margin: 0 15px; font-size: 16px; } .widget-author-info .author-info .posts .title .more{ margin: 0 15px; font-size: 12px; } .widget-author-info .author-info .posts .title .more i{ font-size: 12px; } .widget-author-info .author-info .posts ul{ display: block; position: relative; margin: 10px 0 0; border: 0; padding: 0; } .widget-author-info .author-info .posts ul li{ display: inline-block; position: relative; width: 100%; height: 24px; margin: 0; border: 0; padding: 0; line-height: 24px; font-size: 16px; color: #555; overflow: hidden; text-overflow: ellipsis; word-break: break-all; white-space: nowrap; } .widget-author-info .author-info .posts ul li span.tag{ float: left; display: block; position: relative; width: 20px; height: 20px; margin: 2px 10px 2px 0; border: 0; padding: 0; border-radius: 3px; font-size: 12px; line-height: 20px; text-align: center; color: #fff; background: #ccc; } } @media (max-width: 768px) { .widget-author-info{ margin: 10px 0 0; } .widget-author-info .author-info .role a{ font-size: 20px; } } @media (max-width: 480px) { .widget-author-info{ margin: 5px 0 0; } .widget-author-info .banner{ display: block; width: 100%; height: 100px; } .widget-author-info .author-info{ padding: 10px; } .widget-author-info .author-info .icon{ width: 70px; height: 70px; } .widget-author-info .author-info .role{ top: 70px; left: 100px; } .widget-author-info .author-info .role a{ font-size: 18px; } .widget-author-info .author-info .sns{ top: 100px; left: 100px; height: 24px; } .widget-author-info .author-info .sns .sns-item{ width: 32px; height: 24px; } .widget-author-info .author-info .sns .sns-item b{ display: none; } .widget-author-info .author-info .tongji{ height: 40px; margin: 5px -12px 0; } .widget-author-info .author-info .tongji .card{ padding: 3px 0; } .widget-author-info .author-info .tongji .card:before{ top: 5px; height: 30px; } .widget-author-info .author-info .tongji .card span{ height: 15px; line-height: 15px; font-size: 12px; } .widget-author-info .author-info .tongji .card b{ height: 20px; line-height: 20px; font-size: 14px; } .widget-author-info .author-info .desc{ margin: 5px 0 0; } .widget-author-info .author-info .posts{ margin: 5px 0 0; } .widget-author-info .author-info .posts .title h3{ margin: 0 10px; font-size: 14px; } .widget-author-info .author-info .posts .title .more{ margin: 0 10px; font-size: 10px; } .widget-author-info .author-info .posts .title .more i{ font-size: 10px; } .widget-author-info .author-info .posts ul{ margin: 5px 0 0; } .widget-author-info .author-info .posts ul li{ font-size: 14px; } .widget-author-info .author-info .posts ul li span.tag{ width: 16px; height: 16px; margin: 1px 5px 1px 0; line-height: 16px; font-size: 10px; } }
代码未压缩,为了避免主题默认样式干扰,这里代码未简化显得比较多,淡定。
评论 (17)
添加好了 就是注册不了
widget-index.php 可以详细介绍下怎么注册小组件么? 后台不显示
你这个调用的第二弹,在widget-index.php 文件中要加个什么名称啊。
微信公众号回复的没反应啊。
回复【验证码】,其他功能还没做
老大,后台有了选项,注册了widgets,但是前台调用显示错误,Fatal error: Call to undefined function _get_the_avatar() in D:\wwwroot\blog\wp-content\themes\xiu\widgets\widget_author_info.php on line 110,我是没用DUX主题,用别的主题做的
_get_the_avatar() 是我自定义获取头像的函数,你换成你主题对应的函数即可
老大,你好。为什么我添加之后,在后台小工具哪里没有QGG作者信息选项!在线等,老大么么哒!
没注册小工具吧,DUX 主题里有个 widget-index.php 里有个 $widgets 添加一下,或者在functions.php 中require一下试试。
蝈蝈要安静 期待你的tag 标签教程 等不及了 还有个你网页上的问题 就是左边的留言栏目时间 比真实的留言时间
要早8小时 这个问题也一直困扰我
looking forward your tutorials and hoping you could fix the minor bugs
那个 tag 啊?时间可能是时区设置的问题,抽空看下
蝈蝈 要安静 你的博客很有特点 挺喜欢你的这个主页上面的一个小的亮点 主页的每个文章列表下面调用了 TAG标签 可以做个教程嘛?
的确有相关小工具了,但与文章中的演示严重不符,功能残缺,望补充
后台设置保存了吗?
没有用啊
怎么把右侧的栏目都固定啊,只能固定3个啊,大神
都固定的话屏幕高度小于侧栏高度会有小工具无法显示或显示不全哦