趙斌自媒體博客是基于WordPress搭建的,跟大多數博主一樣,筆者想增" />

純代碼添加WordPress網站側邊欄文章作者信息小工具

來源:賺貝金融

閱讀量:515

發布時間:2019-02-21 14:41:53

當前無論是個人博客還是自媒體平臺都會在文章頁側邊欄顯示文章作者信息,這樣一來能夠給作者更多的曝光,也讓網站顯得更具親和力。且如果網站是多編輯的話,也能跟很清晰的將作者進行區分,這顯然是目前自媒體流行的氛圍下一種潮流。 趙斌自媒體博客是基于WordPress搭建的,跟大多數博主一樣,筆者想增加這個功能第一件事就是去搜索一下有沒有類似的小工具。這里插一句,筆者是非常青睞調用小工具的,可視化的操作使各項功能都簡單快捷,也便于維護代碼。 非常遺憾,筆者沒有找到現成的小工具,很多的站長采用的是直接用文本小工具寫靜態html,這樣缺點很明顯,作者信息并不能跟隨著文章作者的變化而改變;或者搭配支持PHP的文本小工具動態加載作者信息,但這樣維護代碼卻令人頭疼。所以最合適的就小工具了,既然找不到,那索性就自己寫一個吧。 對于前端效果,在看了不少樣式后,筆者決定做一個稍微時尚一點的效果,參考了很多優秀的主題,最終效果如下:

作者信息小工具代碼

<?php
/*
Widget Name:本文作者 
Description:顯示當前文章的作者信息
Version:1.0  
Author:趙斌自媒體博客  
Author URI:http://www.wqjnth.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%20bloginfo('template_url');%20?>/images/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%20echo%20get_author_posts_url(%20get_the_author_meta(%20'ID'%20)%20)%20?>" target="_blank">
(<?php the_author_posts(); ?>篇文章)
</a>
  <span>
 /* 判斷作者的身份信息*/  
<?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'訂閱者';
}
?>
</span>
</div>
<div class="author-des">
<?php the_author_description(); ?>
</div>
<div class="author-social">
<span class="author-blog">
<a href="<?php%20the_author_url();%20?>"  rel="nofollow" target="_blank"><i class="icon-home"></i>博客</a>
</span>
<span class="author-weibo">
<a href="<?php%20the_author_meta('weibo');%20?>"  rel="nofollow" target="_blank"><i class="icon-weibo"></i>微博</a>
</span>
</div>
</div>
  <?php
}
?>
PS:也可以直接下載筆者做好的文件?widget-authorinfo.php css代碼(放入主題樣式表中,一般都是主題文件下的style.css文件)
/* 本文作者小工具 */
.author-info{
width: 100%;
color: #888;
font-size: 12px;
/* 這里改成自己的背景圖片路徑 */
background: url(/images/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: #F00;
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;
}

使用方法:

將上述php代碼放入你的小工具文件中(一般在主題文件夾下widgets文件夾下),因為每個主題調用小工具的形式不盡相同,筆者也無法詳細的解釋! 然后將上述小工具部署在你的主題中,只需要在function.php添加如下代碼即可:
//調用作者信息小工具
require_once get_stylesheet_directory() . '/widgets/widget-authorinfo.php';
然后在后臺就可以看到‘本文作者’小工具了: 然后在后臺調用小工具,前臺刷新即可看到效果了。
本小工具亮點 使用簡單,直接部署就可使用;樣式時尚大氣,也可根據自己喜好修改樣式表;動態加載,實時調取文章作者信息,特別適用于多作者網站;代碼集成,比使用文本框輸出有顯著優勢,便于維護和升級改版。
下半部分兩個按鈕是調取后臺用戶個人資料填寫的站點和微博,有人會問,為何我的后臺資料處沒有微博這個選項呢?這個是可以自定義個人信息選項的,只需要在function.php添加如下代碼即可,同理可以添加諸如電話、地址等信息;所以本小工具需要自定義一下微博。
//增加個人簡介信息
function my_new_contactmethods( $contactmethods ) {
$contactmethods['weibo'] = '微博';
 return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);
特別提醒:由于各個主題不盡相同,筆者不能保證完美展現.有疑問歡迎留言一起交流。 本小工具用到的圖片文件(自行下載調用):
福彩3d走势图