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

教程 9个月前 壳壳
975 0 0
最后更新于2022年3月20日,已超过262天没有更新,如果内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

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;
}
}
代码未压缩,为了避免主题默认样式干扰,这里代码未简化显得比较多,淡定。
版权声明:壳壳 发表于 2022年3月20日 pm4:18。
转载请注明:WordPress-OneNav主题添加作者信息小工具(美化版) | 壳壳博客

相关文章

暂无评论

暂无评论...
壳壳博客一键登录开启个人书签等功能!