WordPress側邊欄作者信息小工具

2016-11-10 11:14 來自本站原創 104,220 35 15
[摘要]

今天為大家分享一個WordPress側邊欄顯示作者信息的小工具,增加文章作者曝光度,提升網站親和力,純代碼實現,簡單實用!

當前無論是個人博客還是自媒體平臺都會在文章頁側邊欄顯示文章作者信息,這樣一來能夠給作者更多的曝光,也讓網站顯得更具親和力。且如果網站是多編輯的話,也能跟很清晰的將作者進行區分,這顯然是目前自媒體流行的氛圍下一種潮流。

雅兮網是基于WordPress搭建的,跟大多數博主一樣,筆者想增加這個功能第一件事就是去搜索一下有沒有類似的小工具。這里插一句,筆者是非常青睞調用小工具的,可視化的操作使各項功能都簡單快捷,也便于維護代碼。

非常遺憾,筆者沒有找到現成的小工具,很多的站長采用的是直接用文本小工具寫靜態html,這樣缺點很明顯,作者信息并不能跟隨著文章作者的變化而改變;或者搭配支持PHP的文本小工具動態加載作者信息,但這樣維護代碼卻令人頭疼。所以最合適的就小工具了,既然找不到,那索性就自己寫一個吧。

對于前端效果,在看了不少樣式后,筆者決定做一個稍微時尚一點的效果,參考了很多優秀的主題,最終效果如下。

WordPress側邊欄作者信息小工具

作者信息小工具代碼

<?php
/*
Widget Name:本文作者 
Description:顯示當前文章的作者信息
Version:1.0 
Author:雅兮網 
Author URI:http://www.wegtnc.live 
*/ 
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
}
?>

也可以直接下載筆者做好的文件?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);

特別提醒:由于各個主題不盡相同,筆者不能保證完美展現.有疑問歡迎留言一起交流。

2016.11.11圖發奇想:文中提到想實現作者身份信息,但苦于沒有函數支持。既然可以自定義個人簡介,則完全可以增加一項“身份”選項,可設置管理員、總編、小編等等,然后再用the_author_meta函數輸出即可,這基本上可以實現身份了,缺憾是作者自己可以在后臺修改身份信息,但既然是有權限發文的,基本上是自己人了,所以“僭越”身份這種事情不必擔心啦...

有需要的可以自行修改一下代碼,筆者就暫不修改文中代碼了,自己動手豐衣足食嘛 [得意]

本文最后更新于2016年11月19日,已超過 1 年沒有更新,如果文章內容或圖片資源失效,請留言反饋,我們會及時處理,謝謝!

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 聲明:凡注明“本站原創”的所有文字圖片等資料,版權均屬 雅兮網 所有,歡迎轉載,但務請注明出處;
    目前評論:35   其中:訪客  26   博主  9
    加載中...
    1. 7天前 17樓

      我看了下收錄了。哈哈!已經9102年了 [壞笑]

    2. 2個月前 (05-12) 16樓

      感謝分享,正需要

    3. 喬伊 1
      8個月前 (11-13) 15樓

      請問下為啥dux主題按照你的做法來設置,結果直接網頁打不開,提示找不到這個小工具

    4. kiss 1
      10個月前 (09-13) 14樓

      你好站長!還有就是怎么加的V和評論區的等級 能分享下嗎? 謝謝啦!

    5. kiss 1
      10個月前 (09-13) 13樓

      背景咋弄的啊

    6. Vick 1
      10個月前 (08-24) 12樓

      朋友好,我按照您說的搗鼓完畢,發現作者信息顯示在其他小工具的最下方,有沒有辦法將作者信息欄顯示在搜索框一下,就像您的網站。

      • 飛鳥
        10個月前 (08-25)  地下1層

        @Vick: 小工具位置問題 不是代碼原因,可以在后臺小工具拖動調整位置的

        • Vick 1
          10個月前 (08-25)  地下2層

          @飛鳥: 我是吧這個小工具添加到文章頁側欄,但是好像文章頁側欄和全站側欄的小工具不能統一排序吧,他們好像是各自獨立的排序

          • 飛鳥
            10個月前 (08-25)  地下3層

            @Vick: 不同的主題,情況不一;如果文章頁有單獨的小工具,自然和首頁的不一樣;另外 關于小工具順序的,是WordPress基礎知識,這位朋友如果還不是很清楚,自己好好琢磨一下基礎的東西,我這里就不討論了。

            • Vick 1
              10個月前 (08-25)  地下4層

              @飛鳥: 我是新手,剛接觸,謝謝哈

        • Vick 1
          10個月前 (08-25)  地下2層

          @飛鳥: 突然發現,是不是我把其他小工具放到全站側欄的原因,吧各個小工具逐個放到首頁側欄,分類側欄和文章頁側欄應該就能解決了,這樣解決是組好的辦法嗎?謝謝

    7. 3年前 (2016-11-22) 11樓

      < ?php $user_id=get_post($id)->post_author;
      if(user_can($user_id,'install_plugins')) {
      echo '管理員';
      }elseif(user_can($user_id,'edit_others_posts')) {
      echo '編輯';
      }elseif(user_can($user_id,'publish_posts')) {
      echo'作者';
      }elseif(user_can($user_id,'delete_posts')) {
      echo'投稿者';
      }elseif(user_can($user_id,'read')) {
      echo'訂閱者';
      }?>

      • 3年前 (2016-11-22)  地下1層

        @Biebb技: 代碼顯示不全,可以郵箱我

      • 飛鳥
        3年前 (2016-11-23)  地下1層

        @Biebb技: 你這段代碼很給力,可以顯示作者的權限了,收下了,表示感謝。可惜WordPress后臺這個權限做的并不是特別完善。我個人目前是傾向于個人資料設置職位,然后前臺調用,這樣個性化強一點! [呲牙]

        • 3年前 (2016-11-30)  地下2層

          @飛鳥: 沒啥,我也轉載了你的文章,哈哈,不過看你沒被收錄我也就暫時沒放出來,等你收錄了我就放了

          • 飛鳥
            3年前 (2016-12-01)  地下3層

            @Biebb[呲牙] 我這篇也不知道為啥 一直沒有收錄,度娘嫌棄 [咒罵]

    1 2
    發表評論

    疑問 調皮 難過 摳鼻 嚇 微笑 可愛 壞笑 驚訝 發呆 疑問 大兵 偷笑 咒罵 發怒 白眼 鼓掌 得意 擦汗 親親 大哭 呲牙 暈 強

    分享 35 15 104,220
    Top dhc篮彩双层皂盒