WordPress添加作者信息小工具

推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。

对于社交信息的获取,由于并不是所有主题都会有微博、QQ、微信等信息的获取,这里我只获取了用户信息中的博客地址及作者博文的内容,当然你也可以通过增加这些字段来实现更多社交媒体的选项。具体增加方式以增加微博社交信息为例,在function.php文件中添加如下代码:

//增加用户信息自定义字段
function qgg_contactmethods( $contactmethods ) {
    $contactmethods['weibo'] = '微博';
    return $contactmethods;
}
add_filter('user_contactmethods','qgg_contactmethods',10,1);

好了,现在我们来看下作者信息小工具的具体实现。先来说一下DUX主题。

新增 widget-qggauthorinfo.php 文件

新建一个 widget-qggauthorinfo.php 的文件,并在其中添加如下代码:

<?php
//DUX主题直接使用此代码即可,其他主题可能需要使用下面的代码注册小工具
//add_action('widgets_init', create_function('', 'return register_widget("widget_ui_qggauthorinfo");'));
class widget_ui_qggauthorinfo extends WP_Widget {
    function widget_ui_qggauthorinfo() {
        $widget_ops = array('description' => '显示当前文章的作者信息!');
        $this->WP_Widget('widget_ui_qggauthorinfo', 'QGG作者信息', $widget_ops);
    }
    function update($new_instance, $old_instance) {
        return $new_instance;
    }
    function widget($args, $instance) {
        extract( $args );
        echo $before_widget;
        echo widget_ui_qggauthorinfo();
        echo $after_widget;
    }
}
//获取作者所有文章浏览量
if(!function_exists('qgg_author_posts_views')) {
    function qgg_author_posts_views($author_id = 1 ,$display = true) {
        global $wpdb;
        $apvn = "SELECT SUM(meta_value+0) FROM $wpdb->posts left join $wpdb->postmeta on ($wpdb->posts.ID = $wpdb->postmeta.post_id) WHERE meta_key = 'views' AND post_author = $author_id ";
        $author_posts_views = intval($wpdb->get_var($apvn));
        if($display) {
            echo number_format_i18n($author_posts_views);
        } else {
            return $author_posts_views;
        }
    }
}
//获取作者参与评论的评论数
if(!function_exists('qgg_author_posts_comments')) {
    function qgg_author_posts_comments( $author_id = 1 ,$author_email='' ,$display = true) {
        global $wpdb;
        $apcn = "SELECT count(comment_author)
		FROM $wpdb->comments WHERE comment_approved='1' AND comment_type='' AND (user_id = '$author_id'  OR comment_author_email='$author_email' )";
        $author_posts_comments = intval($wpdb->get_var($apcn));
        if($display) {
            echo number_format_i18n($author_posts_comments);
        } else {
            return $author_posts_comments;
        }
    }
}
function widget_ui_qggauthorinfo(){
?>
    <div class="author_box">
        <div class="author_info">
            <div class="author_avatar">
                <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>"><?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?></a>
            </div>
			<!--<a class="author_pic"><img src="头像链接"></a>预留,目前使用的Gravatar头像,看看以后能不能自定义上传头像-->
			<div class="author_name">
                <?php the_author_posts_link(); ?>
                <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_tongji">
                <div class="author_card">
                    <span class="author_card_n"><?php the_author_posts(); ?></span>
                    <span class="author_card_t">文章数</span>
                </div>
                <div class="author_card">
                    <span class="author_card_n"><?php qgg_author_posts_views( get_the_author_meta('ID') ); ?></span>
                    <span class="author_card_t">浏览量</span>
                </div>
				<div class="author_card">
                    <span class="author_card_n"><?php qgg_author_posts_comments( get_the_author_meta('ID') ,get_the_author_meta('user_email')); ?></span>
                    <span class="author_card_t">评论数<?php echo get_the_author_meta('ID '); ?></span>
                </div>
            </div>
			<div class="author_des">
                <?php the_author_description(); ?>
            </div>
            <div class="author-social">
			    <span>
                <a href="<?php echo get_the_author_meta('user_url'); ?>" rel="nofollow" target="_blank"><i class="fa fa-user-o" aria-hidden="true"></i>&nbsp&nbsp作者博客</a>
				</span>
				<span>
				<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>" rel="nofollow" target="_blank"><i class="fa fa-file-text-o" aria-hidden="true"></i>&nbsp&nbsp博文专栏</a>
				</span>
            </div>
        </div>
		<div class="author-posts">
        <h3>最新文章:</h3>
            <ul>
            <?php
            $author_id = get_the_author_meta('ID');
            global $wpdb;
            $result = $wpdb->get_results("SELECT comment_count, ID, post_title, post_date FROM $wpdb->posts WHERE post_status='publish' AND post_type='post' AND post_author = '$author_id' ORDER BY ID DESC LIMIT 0 , 3");
            foreach ($result as $post) {
                setup_postdata($post);
                $postid = $post->ID;
                $title = $post->post_title;
            ?>
            <li class="author-list">
    	        <i class="fa fa-hand-o-right"></i>&nbsp&nbsp&nbsp<a href=”<?php echo get_permalink($postid); ?>” title=”<?php echo $title ?>”><?php echo $title ?></a>
	        </li>
            <?php } ?>
            </ul>
        </div>
    </div>
<?php
}
?>

这是这次主题修改的核心文件,其中的一些代码大家可根据自己需要进行删改,比如你想增加更多社交信息可修改102-109这段代码实现。

修改 widget-index.php 文件

DUX主题对其所有小工具的调用都是通过 widget-index.php 文件来实现的,添加完上述代码后我们需要在该文件中找到如下代码并添加上 ‘qggauthorinfo’, 这一字段。该数组中的每一个字段对应DUX主题 widgets 文件夹下的一个小工具,大家可对应了解。

$widgets = array(
	'sticky',
	'statistics',
	'ads',
	'textads',
	'comments',
	'posts',
	'readers',
	'tags'
);

值得注意的是,’tags’ 这个字段后面没有结束“,”符号,所以如果大家添加到该字段后注意一下。当然,为了避免大家添加中错误,建议添加到原有两个小工具对应字段中间,比如这里你可以添加到 ‘posts’, 与 ‘readers’, 之间。

修改 main.css 文件

添加如下代码至你主题的主样式文件中,DUX主题添加到 main.css 文件中即可。

/*作者信息小工具CSS样式*/
.author_box {
    background-color:#fff;
    border-radius:2px;
    clear:both;
    position:relative;
    margin:10px;
}
.author_info {
    display:inline-block;
    position:relative;
	width: 90%;
    height:auto;
    margin:auto 5%;
    color:#A09F9F;
    border:0px solid #eceef1;
}
.author_avatar img {
	width: 100%;
	height: 100%;
	display: block;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}
.author_avatar  {
    display: block;
    border-radius: 50%;
   -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}
.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_name {
    height: 26px;
    line-height: 26px;
    margin: 10px 0;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
}
.author_name span {
    font-size: 9px;
    background: #C0C0C0;
    color: #FFFFFF;
    padding: 1px 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    position: relative;
}
.author_tongji {
    position:relative;
    margin:15px 20px;
    left:3%;
}
.author_card {
    display:inline-block;
    position:relative;
    height:50px;
    width:30%;
    margin:0px;
    color:#555555;
    border-left:1px solid rgba(36, 160, 240, 1);
	border-right:1px solid rgba(36, 160, 240, 1);
}
.author_card_n {
	color:rgba(240, 66, 66, 1);
	font-size:16px;
	font-family:黑体;
	font-weight:bold;
    display:block;
	width:100%;
    height:25px;
    top:5px;
    text-align:center;
}
.author_card_t {
	font-size:18px;
	font-family: 楷体;
    display:block;
	width:100%;
    height:25px;
    position:absolute;
    top:25px;
	text-align:center;
}
.author_des {
	font-size:16px;
    padding:5px;
    height:60px;
    text-overflow:ellipsis;
    display:-webkit-box;
	-webkit-line-clamp:2;
    -webkit-box-orient:vertical;
	overflow:hidden;
    word-break: break-all;
	border-top:3px double rgba(36, 180, 240, 0.8);
	border-bottom:3px double rgba(36, 180, 240, 0.8);
}
.author-social {
	margin:18px 0px 0px;
    text-align:center;
}
.author-social a {
    border:1px rgba(0,0,0,0.15) solid;
	margin:3px;
    padding:8px 24px;
    cursor:pointer;
    background-color:#F74840;
    border:0px solid rgba(36, 180, 240, 1);
    color:#fff!important;
    height:36px;
    line-height:36px;
    font-size:16px;
    border-radius:999em;
}
.author-posts {
    background-color:#fff;
    border-radius:2px;
    clear:both;
    position:relative;
    margin:10px;
    -webkit-box-shadow:0px 3px 3px 0px rgba(0,0,0,0.05);
    -moz-box-shadow:0px 3px 3px 0px rgba(0,0,0,0.05);
    box-shadow:0px 3px 3px 0px rgba(0,0,0,0.05);
}
.author-posts h3 {
	background:none;
	border:0px solid rgba(36, 180, 240, 1);
	color:rgba(36, 160, 240, 1);
	font-size:18px;
	font-weight:bold;
}
.author-list {
	margin:3px 10px;
	font-size:14px;
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border:0px solid rgba(36, 180, 240, 1);
}

由于主题的不同及其他原因,样式代码可能会出现错位等现象,可能需要大家根据自己情况微调一下。

其他主题修改

对于其他 WordPress 主题直接使用上述代码可能无法在外观小工具下显示该工具,我们需要将 widget-qggauthorinfo.php 中注册小工具的代码打开,同时我们需要在 function.php 文件中添加如下代码加载这个 PHP 文件。注意修改下代码中的路径!

require_once get_stylesheet_directory() . '/widgets/widget-qggauthorinfo.php';

转自 蝈蝈要安静 http://blog.quietguoguo.com/

GXUZF.COM | 林澈思的茶
END

GXUZF.COM原创文章,作者:赵帆同学。如若转载,请注明出处:

文章标题:《WordPress添加作者信息小工具》,原文链接:https://www.gxuzf.com/2017/action/1050.html

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Mail:[email protected]
QQ:1207415775
Wechat:wolinxiao
Tel:15678896295

QR code