首页 Wordpress WordPress 边栏文章作者小工具

WordPress 边栏文章作者小工具

GavinWu 2022年03月16日 8:03 Wordpress 75 Views

一直在找有像类似腾讯社区的边栏文章作者信息面板的方法,终于在雅兮网找到了适合的方法。效果如下:
WordPress 边栏文章作者小工具|微言心语

1、注册边栏工具,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?php
/*
Widget Name:本文作者
Description:显示当前文章的作者信息
Version:1.0
Author:雅兮网
Author URI:https://www.yaxi.net
*/

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">
<img class="zuozeipc" src="<?php bloginfo('template_url'); ?>/img/post-lz.png">
<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' ); }?>
</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>站长</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
}
?>

也可以直接下载做好的文件

2、在functions.php最后加载 下载的文件

1
@include(TEMPLATEPATH.'/inc/widget-authorinfo.php');//这里修改成文件存放的路径,我存在inc文件夹里

3、样式css代码(放入主题样式表中)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/* 本文作者小工具 */
.author-info{
width: 100%;
color: #888;
font-size: 12px;
background: url(img/author-banner.png) #fff center top no-repeat;
position: relative;
}
.zuozeipc {
width: 50px;
position: absolute;
top: -1px;
left: 10px;
}
.author-avatar{
padding-top: 30px;
}
.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-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{
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;
}

4、在function.php里添加微博地址

1
2
3
4
5
6
//增加个人简介信息
function my_new_contactmethods( $contactmethods ) {
$contactmethods['weibo'] = '微博';
return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);

5、在个人资料里填写微博地址和个人说明

WordPress 边栏文章作者小工具|微言心语
这里会在前台面板显示个人说明的介绍和微博的链接

题外话

上面代码中的图片,也要替换成自己的,当然图片路径也要修改

附上原文链接:原文地址

相关文章

七牛

发表评论

QR Code

本页二维码