本站是基于WordPress搭建的,跟大多数博主一样,笔者想增加这个功能第一件事就是去搜索一下有没有类似的小工具。这里插一句,笔者是非常青睐调用小工具的,可视化的操作使各项功能都简单快捷,也便于维护代码。
当前无论是个人博客还是自媒体平台都会在文章页侧边栏显示文章作者信息,这样一来能够给作者更多的曝光,也让网站显得更具亲和力。且如果网站是多编辑的话,也能跟很清晰的将作者进行区分,这显然是目前自媒体流行的氛围下一种潮流。
非 常遗憾,笔者没有找到现成的小工具,很多的站长采用的是直接用文本小工具写静态html,这样缺点很明显,作者信息并不能跟随着文章作者的变化而改变;或 者搭配支持PHP的文本小工具动态加载作者信息,但这样维护代码却令人头疼。所以最合适的就小工具了,既然找不到,那索性就自己写一个吧。
对于前端效果,在看了不少样式后,笔者决定做一个稍微时尚一点的效果,参考了很多优秀的主题,最终效果如下:
作者信息小工具代码
- <?php
- 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 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
- }
- ?>
PS:也可以直接下载笔者做好的文件 widget-authorinfo.php
css代码(放入主题样式表中)
- .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;
- }
使用方法:
将上述代码放入你的小工具文件中,因为每个主题调用小工具的形式不尽相同,笔者也无法详细的解释,总之就是将上述小工具部署在你的主题中,然后在后台调用小工具,前台刷新即可看到效果了。
注意:作者信息后面“站长”二字可以在小工具中自行修改,因为理想情况下笔者是将其展示为当前文章作者的身份信息,如管理员、编辑等等,但遗憾的是笔者目前暂未发现实现办法,就暂且设为固定文字吧。
下半部分两个按钮是调取后台用户个人资料填写的站点和微博,有人会问,为何我的后台资料处没有微博这个选项呢?这个是可以自定义个人信息选项的,只需要在function.php添加如下代码即可,同理可以添加诸如电话、地址等信息;所以本小工具需要自定义一下微博。
- //增加个人简介信息
- function my_new_contactmethods( $contactmethods ) {
- $contactmethods['weibo'] = '微博';
- return $contactmethods;
- }
- add_filter('user_contactmethods','my_new_contactmethods',10,1);
特别提醒:由于各个主题不尽相同,笔者不能保证完美展现.有疑问欢迎留言一起交流。
温馨提示:本文最后更新于2019年3月19日,已超过 2 年没有更新,如果文章内容或图片资源失效,请留言反馈,模板下载吧会及时处理,谢谢!