WordPress侧边栏添加作者信息小工具教程

南山大王 4,036 3

[灯笼]七夕节倒计时[灯笼]

2019年七夕节时间:2019年8月7日 星期三 农历七月初七#(玫瑰)

#(太阳)距离2019年七夕节还有[aru_89]

前段时间写过一篇文章,是为vieu主题或dux主题添加侧边栏“旗下网站”小工具,今天呢,是参考“简学网络”的侧栏作者信息小工具优化而来。带来两个版本,一个版本是大众化的,一个版本还是为dux和vieu用户准备的。

先看看效果图,如果喜欢,就看下去,不喜欢,就跳过吧。

WordPress侧边栏添加作者信息小工具教程

一、添加代码

温馨提示

如果你是vieu和dux模板的用户,可直接下载widget-authorinfo文件 点击下载,第一步便可跳过!看第二步~

<?php
/*
Widget Name:本文作者
Description:显示当前文章的作者信息
Version:1.0
Author:乐者博客
Author URI:https://www.98qcw.cn
*/
add_action('widgets_init', create_function('', 'return register_widget("Authorinfo");'));
class Authorinfo extends WP_Widget {
 
function Authorinfo() {
$widget_ops = array('description' => '显示当前文章的作者信息!');
$this->WP_Widget('Authorinfo', '本文作者', $widget_ops);
}
 
function update($new_instance, $old_instance) {
return $new_instance;
}
 
function widget($args, $instance) {
extract( $args );
echo $before_widget;
echo widget_authorinfo();
echo $after_widget;
}
}
 
function widget_authorinfo(){
?>
<div class="author-info">
<div class="author-avatar">
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>" title="<?php the_author(); ?>" rel="author">
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?><i title="超级学长作者认证 " class="author-ident"></i>
</a>
</div>
<div class="author-name">
<?php the_author_posts_link(); ?>
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>" target="_blank">(<?php the_author_posts(); ?>篇文章)</a>
<span><?php the_author_meta('bianji'); ?></span>
</div>
<div class="author-des">
<?php the_author_description(); ?>
</div>
<div class="author-social">
<span class="author-blog">
<a href="<?php the_author_url(); ?>" rel="nofollow" target="_blank"><i class="icon-home"></i>网站</a>
</span>
<span class="author-weibo">
<a href="<?php the_author_meta('weibo'); ?>" rel="nofollow" target="_blank"><i class="icon-weibo"></i>微博</a>
</span>
</div>
</div>
<?php
}
?>

二、添加CSS样式

把下面样式代码添加到主题css文件里,每个主题不同,所以可能需要微调,另外图片调用路径根据自己主题来修改(图片素材评论后下载)

/* 本文作者小工具 */
.author-info{
width: 100%;
color: #888;
font-size: 12px;
background: url(../img/author_banner.jpg) #fff center top no-repeat;
position: relative;
background-size: 100%;
}
.author-avatar{
padding-top: 45px;
}
.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-avatar .avatar {
width: 74px;
height: 74px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
.author-ident {
    display: inline-block;
    background-image: url(../img/icon.png);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    vertical-align: -2px;
    background-position: -50px -25px;
    position: absolute;
    bottom: 170px;
    right: 130px;
}
.author-name {
height: 26px;
line-height: 26px;
margin: 10px 0;
font-weight: bold;
font-size: 16px;
text-align: center;
}
.author-name span {
font-size: 12px;
background: #CECECE;
color: #FFFFFF;
padding: 2px 6px;
margin-left: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
position: relative;
}
.author-des {
padding: 10px;
background: #DFDBDB;
text-indent: 2em;
}
.author-social {
text-align: center;
padding:20px 10px;
}
.author-social span{
padding:3px 15px;
margin-right: 10px;
border-radius: 2px;
display: inline-block;
}
.author-social span:hover {
background-color: #1b1b1b;
}
.author-social span a {
/*padding: 4px 15px;*/
font-size: 14px;
color: #fff;
}
.author-social span a i {
margin-right: 5px;
}
.author-social .author-blog {
background-color: #ff5e5c;
}
.author-social .author-weibo {
background-color: #19b5fe;
}

三、特殊代码说明

因为WordPress没有用户角色(如管理员、编辑、投稿者等)的函数,所以我们只能自己自定义一段函数,然后调用到前台(第一段代码第40行,我调用的是<?php the_author_meta(‘bianji’); ?>)。

那么这个是怎么自定义的呢?

作者小工具我们需要“微博”和“编辑身份”两项,只需要添加下面代码到主题的functions.php里

//增加个人简介信息
function my_new_contactmethods( $contactmethods ) {
$contactmethods['weibo'] = '微博';
$contactmethods['bianji'] = '编辑身份';
return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);

添加完成之后,我们在后台—编辑用户的时候,就会多了“微博”和“编辑身份”这两项,可以自定义填写了,比如“编辑身份”我们可以把自己定义为站长,别人分为新手/老手/主编等等,这个就由大家自由发挥。

温馨提示

这个是接上面的演示图(因为不怎么玩微博,所以小编把“微博”改成了“QQ”,上述代码还是显示微博的!)

WordPress侧边栏添加作者信息小工具教程

四、使用vieu和dux模板的用户

你们如果想操作方便,可以直接下载文件里的widget-authorinfo.php到主题的widgets文件夹,然后编辑widgets下的widget-index.php文件,把这个小工具添加进去。

如下(下面代码的zhan是我之前添加的旗下网站,authorinfo是作者信息)
$widgets = array(
	'sticky',
	'statistics',
	'ads',
	'textads',
	'comments',
	'posts',
	'readers',
	'viads',
	'zhan',
	'links',
	'authorinfo',
	'tags'
);

添加后(在后台—外观—小工具里添加vi-作者信息),css和图片也要加入,有什么有问题,欢迎在下方评论区留言~[aru_31]

红包

发表评论 取消回复
表情 图片 链接 代码

  1. 似最初
    似最初 Lv 1

    非常不错

  2. 网赚项目

    好厉害

  3. 更省商学院

    不错的功能,不过我还是看不懂怎么添加[aru_22]

分享
微信
微博
QQ