Loading...

WordPress-OneNav主题添加作者信息小工具(美化版)

教程分享1年前 (2022)更新 战东海
287 0 0

WordPress添加作者信息小工具(美化版),让信息更加简洁明了的展示,包括了文章数量,浏览量以及评论数量和最新文章等用户信息。

WordPress添加作者信息小工具

前端显示效果及后台选项如下图所示:

WordPress-OneNav主题添加作者信息小工具(美化版)

创建 widget_author_info.php 文件

新建一个名为 widget_author_info.php 的文件,将以下代码丢到该文件中:
<?php ?> <?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; } }

 

代码未压缩,为了避免主题默认样式干扰,这里代码未简化显得比较多,淡定。
© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...

网址设置

网址样式切换

详细

网址卡片按钮

显示

布局设置

左侧边栏菜单

展开

搜索框设置

自定义搜索框背景

  • 骑行

  • 风景

自定义搜索框高度

  • 聚焦
  • 信息
  • 默认
自定义设置
TAB栏自定义颜色

背景颜色

文字颜色