腾讯云服务器优惠活动华纳云香港服务器

如何为WordPress网站侧边栏添加作者信息小工具功能

WordPress主题推荐

当前无论是个人博客还是自媒体平台都会在文章页侧边栏显示文章作者信息,这样一来能够给作者更多的曝光,也让网站显得更具亲和力。且如果网站是多编辑的话,也能跟很清晰的将作者进行区分,这显然是目前自媒体流行的氛围下一种潮流。

雅兮网是基于WordPress搭建的,跟大多数博主一样,笔者想增加这个功能第一件事就是去搜索一下有没有类似的小工具。这里插一句,笔者是非常青睐调用小工具的,可视化的操作使各项功能都简单快捷,也便于维护代码。

非常遗憾,笔者没有找到现成的小工具,很多的站长采用的是直接用文本小工具写静态html,这样缺点很明显,作者信息并不能跟随着文章作者的变化而改变;或者搭配支持PHP的文本小工具动态加载作者信息,但这样维护代码却令人头疼。所以最合适的就小工具了,既然找不到,那索性就自己写一个吧。

对于前端效果,在看了不少样式后,笔者决定做一个稍微时尚一点的效果,参考了很多优秀的主题,最终效果如下:

如何为WordPress网站侧边栏添加作者信息小工具功能-第1张-boke112百科(boke112.com)

作者信息小工具代码

  1. <?php
  2. /*
  3. Widget Name:本文作者
  4. Description:显示当前文章的作者信息
  5. Version:1.0
  6. Author:雅兮网
  7. Author URI:http://www.iyaxi.com
  8. */
  9. add_action(‘widgets_init’, create_function(, ‘return register_widget(“Authorinfo”);’));
  10. class Authorinfo extends WP_Widget {
  11. function Authorinfo() {
  12. $widget_ops = array(‘description’ => ‘显示当前文章的作者信息!’);
  13. $this->WP_Widget(‘Authorinfo’, ‘本文作者’, $widget_ops);
  14.  }
  15. function update($new_instance$old_instance) {
  16.  return $new_instance;
  17.  }
  18. function widget($args$instance) {
  19. extract( $args );
  20. echo $before_widget;
  21. echo widget_authorinfo();
  22. echo $after_widget;
  23.  }
  24. }
  25. function widget_authorinfo(){
  26.  ?>
  27.  <div class=“author-info”>
  28. <img class=“zuozeipc” src=“<?php bloginfo(‘template_url’); ?>/img/post-lz.png”>
  29.  <div class=“author-avatar”>
  30.  <a href=“”><?php if (function_exists(‘get_avatar’)) { echo get_avatar( get_the_author_email(), ’80’ ); }?></a>
  31.  </div>
  32.  <div class=“author-name”>
  33.  <?php the_author_posts_link(); ?>
  34. <a href=“<?php echo get_author_posts_url( get_the_author_meta( ‘ID’ ) ) ?>” target=“_blank”>(<?php the_author_posts(); ?>篇文章)</a>
  35.  <span>站长</span>
  36.  </div>
  37.  <div class=“author-des”>
  38.  <?php the_author_description(); ?>
  39.  </div>
  40.  <div class=“author-social”>
  41.  <span class=“author-blog”>
  42. <a href=“<?php the_author_url(); ?>” rel=“nofollow” target=“_blank”><i class=“icon-home”></i>博客</a>
  43.  </span>
  44.  <span class=“author-weibo”>
  45. <a href=“<?php the_author_meta(‘weibo’); ?>” rel=“nofollow” target=“_blank”><i class=“icon-weibo”></i>微博</a>
  46.  </span>
  47.  </div>
  48.  </div>
  49.  <?php
  50. }
  51. ?>

PS:也可以直接下载笔者做好的文件 widget-authorinfo.php

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

  1. /* 本文作者小工具 */
  2. .author-info{
  3. width: 100%;
  4. color#888;
  5. font-size12px;
  6. backgroundurl(img/author-banner.png) #fff center top no-repeat;
  7. positionrelative;
  8. }
  9. .zuozeipc {
  10. width50px;
  11. positionabsolute;
  12. top: –1px;
  13. left10px;
  14. }
  15. .author-avatar{
  16. padding-top30px;
  17. }
  18. .author-avatar a{
  19. displayblock;
  20. width80px;
  21. height80px;
  22. margin: 0 auto;
  23. background#C9C9C9;
  24. border-radius: 50%;
  25. border3px solid #fff;
  26.  -webkit-border3px solid #fff;
  27.  -moz-border3px solid #fff;
  28. }
  29. .author-avatar .avatar {
  30. width74px;
  31. height74px;
  32. border-radius: 50%;
  33.  -webkit-border-radius: 50%;
  34.  -moz-border-radius: 50%;
  35. }
  36. .author-name {
  37. height26px;
  38. line-height26px;
  39. margin10px 0;
  40. font-weightbold;
  41. font-size16px;
  42. text-aligncenter;
  43. }
  44. .author-name span {
  45. font-size12px;
  46. background#CECECE;
  47. color#FFFFFF;
  48. padding2px 6px;
  49. margin-left5px;
  50.  -webkit-border-radius: 4px;
  51.  -moz-border-radius: 4px;
  52. border-radius: 4px;
  53. positionrelative;
  54. }
  55. .author-des {
  56. padding10px;
  57. background#DFDBDB;
  58. text-indent: 2em;
  59. }
  60. .author-social {
  61. text-aligncenter;
  62. padding:20px 10px;
  63. }
  64. .author-social span{
  65. margin-right10px;
  66. border-radius: 2px;
  67. displayinlineblock;
  68. }
  69. .author-social span:hover {
  70. background-color#1b1b1b;
  71. }
  72. .author-social span a {
  73. padding4px 15px;
  74. font-size14px;
  75. color#fff;
  76. }
  77. .author-social span a i {
  78. margin-right5px;
  79. }
  80. .author-social .author-blog {
  81. background-color#ff5e5c;
  82. }
  83. .author-social .author-weibo {
  84. background-color#19b5fe;
  85. }

使用方法:

将上述代码放入你的小工具文件中,因为每个主题调用小工具的形式不尽相同,笔者也无法详细的解释,总之就是将上述小工具部署在你的主题中,然后在后台调用小工具,前台刷新即可看到效果了。

本小工具亮点

使用简单,直接部署就可使用;样式时尚大气,也可根据自己喜好修改样式表;动态加载,实时调取文章作者信息,特别适用于多作者网站;代码集成,比使用文本框输出有显著优势,便于维护和升级改版。

注意:作者信息后面“站长”二字可以在小工具中自行修改,因为理想情况下笔者是将其展示为当前文章作者的身份信息,如管理员、编辑等等,但遗憾的是笔者目前暂未发现实现办法,就暂且设为固定文字吧。

下半部分两个按钮是调取后台用户个人资料填写的站点和微博,有人会问,为何我的后台资料处没有微博这个选项呢?这个是可以自定义个人信息选项的,只需要在function.php添加如下代码即可,同理可以添加诸如电话、地址等信息;所以本小工具需要自定义一下微博。

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

特别提醒:由于各个主题不尽相同,笔者不能保证完美展现.有疑问欢迎留言一起交流。

赞 (0) 打赏
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请联系我们,确认后马上更正或删除,谢谢!
wu