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、在个人资料里填写微博地址和个人说明
这里会在前台面板显示个人说明的介绍和微博的链接
题外话
上面代码中的图片，也要替换成自己的，当然图片路径也要修改
附上原文链接：原文地址
