最近给博客添加了一个显现作者信息的小工具,网上也有很多关于边栏显现作者信息的完成方式,但是大多都需求我们再修正代码中的一些信息,很是费事,于是本人自创了很多网上的代码并优化成了目前我所运用的这款显现作者信息小工具。下面是小工具前端显现的截图,希望你喜欢。
关于社交信息的获取,由于并不是一切主题都会有微博、QQ、微信等信息的获取,这里我只获取了用户信息中的博客地址及作者博文的内容,当然你也能够经过增加这些字段来完成更多社交媒体的选项。详细增加方式以增加微博社交信息为例,在function.php文件中添加如下代码:
//增加用户信息自定义字段 function qgg_contactmethods( $contactmethods ) { $contactmethods['weibo'] = '微博'; return $contactmethods; } add_filter('user_contactmethods','qgg_contactmethods',10,1);
好了,如今我们来看下作者信息小工具的详细完成。先来说一下我所目前正在运用的DUX主题。
新增 widget-qggauthorinfo.php 文件
新建一个 widget-qggauthorinfo.php 的文件,并在其中添加如下代码:
<?php /* Widget Name:QGG作者信息 Description:显现当前文章的作者信息 Version:1.0 Author:蝈蝈要安静 Author URL:http://blog.quietguoguo.com */ //DUX主题直接运用此代码即可,其他主题可能需求运用下面的代码注册小工具 //add_action('widgets_init', create_function('', 'return register_widget("widget_ui_qggauthorinfo");')); class widget_ui_qggauthorinfo extends WP_Widget { function widget_ui_qggauthorinfo() { $widget_ops = array('description' => '显现当前文章的作者信息!'); $this->WP_Widget('widget_ui_qggauthorinfo', 'QGG作者信息', $widget_ops); } function update($new_instance, $old_instance) { return $new_instance; } function widget($args, $instance) { extract( $args ); echo $before_widget; echo widget_ui_qggauthorinfo(); echo $after_widget; } } //获取作者一切文章阅读量 if(!function_exists('qgg_author_posts_views')) { function qgg_author_posts_views($author_id = 1 ,$display = true) { global $wpdb; $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 "; $author_posts_views = intval($wpdb->get_var($apvn)); if($display) { echo number_format_i18n($author_posts_views); } else { return $author_posts_views; } } } //获取作者参与评论的评论数 if(!function_exists('qgg_author_posts_comments')) { function qgg_author_posts_comments( $author_id = 1 ,$author_email='' ,$display = true) { global $wpdb; $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' )"; $author_posts_comments = intval($wpdb->get_var($apcn)); if($display) { echo number_format_i18n($author_posts_comments); } else { return $author_posts_comments; } } } function widget_ui_qggauthorinfo(){ ?> <div class="author_box"> <div class="author_info"> <div class="author_avatar"> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>"><?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?></a> </div> <!--<a class="author_pic"><img src="头像链接"></a>预留,目前运用的Gravatar头像,看看以后能不能自定义上传头像--> <div class="author_name"> <?php the_author_posts_link(); ?> <span> <?php $user_id=get_post($id)->post_author; if(user_can($user_id,'install_plugins')) { echo '管理员'; }elseif(user_can($user_id,'edit_others_posts')) { echo '编辑'; }elseif(user_can($user_id,'publish_posts')) { echo'作者'; }elseif(user_can($user_id,'delete_posts')) { echo'投稿者'; }elseif(user_can($user_id,'read')) { echo'订阅者'; }?> </span> </div> <div class="author_tongji"> <div class="author_card"> <span class="author_card_n"><?php the_author_posts(); ?></span> <span class="author_card_t">文章数</span> </div> <div class="author_card"> <span class="author_card_n"><?php qgg_author_posts_views( get_the_author_meta('ID') ); ?></span> <span class="author_card_t">阅读量</span> </div> <div class="author_card"> <span class="author_card_n"><?php qgg_author_posts_comments( get_the_author_meta('ID') ,get_the_author_meta('user_email')); ?></span> <span class="author_card_t">评论数<?php echo get_the_author_meta('ID '); ?></span> </div> </div> <div class="author_des"> <?php the_author_description(); ?> </div> <div class="author-social"> <span> <a href="<?php echo get_the_author_meta('user_url'); ?>" rel="nofollow" target="_blank"><i class="fa fa-user-o" aria-hidden="true"></i>  作者博客</a> </span> <span> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>" rel="nofollow" target="_blank"><i class="fa fa-file-text-o" aria-hidden="true"></i>  博文专栏</a> </span> </div> </div> <div class="author-posts"> <h3>最新文章:</h3> <ul> <?php $author_id = get_the_author_meta('ID'); 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 , 3"); foreach ($result as $post) { setup_postdata($post); $postid = $post->ID; $title = $post->post_title; ?> <li class="author-list"> <i class="fa fa-hand-o-right"></i>   <a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>"><?php echo $title ?></a> </li> <?php } ?> </ul> </div> </div> <?php } ?>
这是这次主题修正的中心文件,其中的一些代码大家可依据本人需求停止删改,比方你想增加更多社交信息可修正102-109这段代码完成。
修正 widget-index.php 文件
DUX主题对其一切小工具的调用都是经过 widget-index.php 文件来完成的,添加完上述代码后我们需求在该文件中找到如下代码并添加上 ‘qggauthorinfo’, 这一字段。该数组中的每一个字段对应DUX主题 widgets 文件夹下的一个小工具,大家可对应理解。
$widgets = array( 'sticky', 'statistics', 'ads', 'textads', 'comments', 'posts', 'readers', 'tags' );
值得留意的是,’tags’ 这个字段后面没有完毕“,”符号,所以假如大家添加到该字段后留意一下。当然,为了防止大家添加中错误,倡议添加到原有两个小工具对应字段中间,比方这里你能够添加到 ‘posts’, 与 ‘readers’, 之间。
修正 main.css 文件
添加如下代码至你主题的主款式文件中,DUX主题添加到 main.css 文件中即可。
/*作者信息小工具CSS款式*/ .author_box { background-color:#fff; border-radius:2px; clear:both; position:relative; margin:10px; } .author_info { display:inline-block; position:relative; width: 90%; height:auto; margin:auto 5%; color:#A09F9F; border:0px solid #eceef1; } .author_avatar img { width: 100%; height: 100%; display: block; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .author_avatar { display: block; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .author_avatar a{ display: block; width: 80px; height: 80px; margin: 0 auto; background: #C9C9C9; border-radius: 50%; border: 3px solid #fff; -webkit-border: 3px solid #fff; -moz-border: 3px solid #fff; } .author_name { height: 26px; line-height: 26px; margin: 10px 0; font-weight: bold; font-size: 18px; text-align: center; } .author_name span { font-size: 9px; background: #C0C0C0; color: #FFFFFF; padding: 1px 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; position: relative; } .author_tongji { position:relative; margin:15px 20px; left:3%; } .author_card { display:inline-block; position:relative; height:50px; width:30%; margin:0px; color:#555555; border-left:1px solid rgba(36, 160, 240, 1); border-right:1px solid rgba(36, 160, 240, 1); } .author_card_n { color:rgba(240, 66, 66, 1); font-size:16px; font-family:黑体; font-weight:bold; display:block; width:100%; height:25px; top:5px; text-align:center; } .author_card_t { font-size:18px; font-family: 楷体; display:block; width:100%; height:25px; position:absolute; top:25px; text-align:center; } .author_des { font-size:16px; padding:5px; height:60px; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break: break-all; border-top:3px double rgba(36, 180, 240, 0.8); border-bottom:3px double rgba(36, 180, 240, 0.8); } .author-social { margin:18px 0px 0px; text-align:center; } .author-social a { border:1px rgba(0,0,0,0.15) solid; margin:3px; padding:8px 24px; cursor:pointer; background-color:#F74840; border:0px solid rgba(36, 180, 240, 1); color:#fff!important; height:36px; line-height:36px; font-size:16px; border-radius:999em; } .author-posts { background-color:#fff; border-radius:2px; clear:both; position:relative; margin:10px; -webkit-box-shadow:0px 3px 3px 0px rgba(0,0,0,0.05); -moz-box-shadow:0px 3px 3px 0px rgba(0,0,0,0.05); box-shadow:0px 3px 3px 0px rgba(0,0,0,0.05); } .author-posts h3 { background:none; border:0px solid rgba(36, 180, 240, 1); color:rgba(36, 160, 240, 1); font-size:18px; font-weight:bold; } .author-list { margin:3px 10px; font-size:14px; word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border:0px solid rgba(36, 180, 240, 1); }
由于主题的不同及其他缘由,款式代码可能会呈现错位等现象,可能需求大家依据本人状况微调一下。
其他主题修正
关于其他 WordPress 主题直接运用上述代码可能无法在外观小工具下显现该工具,我们需求将 widget-qggauthorinfo.php 中注册小工具的代码翻开,同时我们需求在 function.php 文件中添加如下代码加载这个 PHP 文件。留意修正下代码中的途径!
require_once get_stylesheet_directory() . '/widgets/widget-qggauthorinfo.php';
为了防止大家复制代码出错,文末我会附上 main.css 与 widget-qggauthorinfo.php 这两个主要文件的下载,有需求的同窗能够下载运用。
代码参考:
https://www.iyaxi.com/2016-11-10/1132.html
https://boke112.com/3641.html
感谢您的来访,获取更多精彩文章请收藏本站。
![](https://www.gyzsq.com/wp-content/uploads/2022/07/9259adea4619.gif)
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
![头像](/wp-content/themes/zibll/img/avatar-default.png)
- 最新
- 最热
只看作者