Home WP教程 WordPress添加自定义小工具

WordPress添加自定义小工具

发布于 2019-02-23

WordPress添加自定义小工具

WP教程 2019年2月23日 95 次浏览 0 条评论

最近给博客添加了一个显示作者信息的小工具，网上也有很多关于边栏显示作者信息的实现方式，但是大多都需要我们再修改代码中的一些信息，很是麻烦，于是自己借鉴了很多网上的代码并优化成了目前我所使用的这款显示作者信息小工具。

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

//自定义用户信息小工具
function author_info_methods( $contactmethods ) {
    $contactmethods['weibo'] = '微博';
    return $contactmethods;
}
add_filter('user_contactmethods','author_info_methods',10,1);

下面是小工具前端显示的截图，希望你喜欢。

好了，现在我们来看下作者信息小工具的具体实现。

新增 widget-authorinfo.php 文件

新建一个 widget-authorinfo.php 的文件，并在其中添加如下代码：

<?php
/*
 Widget Name:作者信息
 Description:显示当前文章的作者信息
 Version:1.0
 */
//DUX主题直接使用此代码即可，其他主题可能需要使用下面的代码注册小工具
//add_action('widgets_init', create_function('', 'return register_widget("widget_ui_authorinfo");'));

class widget_ui_authorinfo extends WP_Widget {
    
    function widget_ui_authorinfo() {
        $widget_ops = array('description' => '显示当前文章的作者信息！');
        $this->WP_Widget('widget_ui_authorinfo', '作者信息', $widget_ops);
    }
    
    function update($new_instance, $old_instance) {
        return $new_instance;
    }
    
    function widget($args, $instance) {
        extract( $args );
        echo $before_widget;
        echo widget_ui_authorinfo();
        echo $after_widget;
    }
}

//获取作者所有文章浏览量
if(!function_exists('author_posts_views')) {
    function 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('author_posts_comments')) {
    function 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_authorinfo(){
    ?>

    <section class="author_info">
        <div class="widget_avatar" style="background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/img/author-img.jpg);">
            <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>" title="<?php the_author(); ?>" class="widget_avatar">
                <?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>
                <i title="<?php the_author(); ?>" class="author-ident author1"></i>
            </a>
        </div>
        <div class="author_name">
            <?php the_author(); ?>
            <span class="admin_field">
                <?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-social">
            <span class="author-weixin"> 
                <a title="微信"><i class="fa fa-weixin"></i><em style="background-image: url(https://www.pieruo.com/wp-content/uploads/2019/01/wechat-qrcode.jpg);"></em></a>
            </span> 
            <span class="author-qq"> 
                <a href="//wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes" rel="nofollow" target="_blank" title="QQ联系我"><i class="fa fa-qq"></i></a>
            </span> 
            <span class="author-diy"> 
                <a href="http://weibo.com/123456789" rel="nofollow" target="_blank" title="微博"><i class="fa fa-weibo"></i></a>
            </span>
        </div>
        <p id="hitokoto"><?php the_author_description(); ?></p>
    </section>

    <section class="author_count">
        <ul>
            <li><span>文章数</span><strong><?php the_author_posts(); ?></strong></li>
            <li><span>浏览量</span><strong><?php author_posts_views( get_the_author_meta('ID') ); ?><?php echo get_the_author_meta('ID '); ?></strong></li>
            <li><span>评论数</span><strong><?php author_posts_comments( get_the_author_meta('ID') ,get_the_author_meta('user_email')); ?></strong></li>
        </ul>
    </section>
  
<?php
}
?>

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

修改 widget-index.php 文件

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

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

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

修改 main.css 文件

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

/*作者信息小工具CSS样式*/
.author_info {text-align:center;}
.widget_avatar {position:relative;height:100px;background-repeat:no-repeat;background-position:center center;margin-bottom:54px;}
a.widget_avatar {display:block;position:absolute;top:54px;left:50%;margin-left:-46px;padding:6px;background-color:transparent;border-radius:100%;}
a.widget_avatar img {width:80px;height:80px;border-radius:100%;}
.weiyu_main i.weiyu-author,a.widget_avatar i.author1 {background-position: -50px -0px;}
a.widget_avatar img:hover {opacity: 1;-ms-transform: scale(1.08);transform: scale(1.08);-webkit-transition: all .3s ease-out 0s;-o-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s;}
i.weiyu-author,
i.author-ident {display:inline-block;background-image:url(../img/avatar_img.png);background-repeat:no-repeat;width:20px;height:20px;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,.3);vertical-align:-2px;background-position:-50px -25px;position:absolute;bottom:14px;right:5px;}
.author-social {text-align:center;padding:10px 0 20px;position: relative;}
.author-social span {display:inline-block;margin:0 10px;border-radius:2px;}
.author-social span:hover {background:#363e49;}
span.author-weixin {background-color:#4CAF50;}
span.author-weixin a em {position:absolute;z-index:99;bottom:61px;left:0;margin-left:26px;width:100px;height:100px;background-color:#fff;-webkit-background-size:95% auto;background-size:95% auto;background-position:center center;background-repeat:no-repeat;border:1px solid #DDDDDD;display:none;-webkit-transition:all .2s ease-out .1s;-o-transition:all .2s ease-out .1s;transition:all .2s ease-out .1s;}
span.author-weixin a em:after {position:absolute;bottom:-16px;left:50%;width:0;height:0;margin-left:-8px;line-height:0;border:8px solid transparent;border-top:8px solid #dddddd;content:'';}
span.author-weixin a:hover em {display:block;-webkit-transition:all .2s ease-out .1s;-o-transition:all .2s ease-out .1s;transition:all .2s ease-out .1s;}
span.author-qq {background-color:#ff5e5c;}
span.author-diy {background-color:#3690cf;}
.author-social span a {padding:6px 20px;font-size:16px;color:#fff;display:inline-block;}
.author_info .author_name {text-align:center;margin-bottom:12px;font-size:22px;line-height:26px;}
span.admin_field {background-color:#ffa600;color:#fff;font-size:12px;display:inline-block;vertical-align:middle;margin-left:6px;padding:0 6px;line-height:24px;border-radius:2px;}
.author_info p {padding:0 20px;font-weight:500;text-align:justify;margin-bottom:18px;}
.author_count {background-color:#fff;border-top:1px #efefef solid;}
.author_count ul {display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;text-align:center;}
.author_count ul li {float:left;list-style:none;width:33.333%;border-right:1px #efefef solid;padding:8px 0;font-weight:300;}
.author_count ul li:last-child {border-right:1px solid transparent;}
.author_count ul li span {display:block;font-size:14px;color:#999;}
.author_count ul li strong {font-weight:bold;}

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

其他主题修改

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

require_once get_stylesheet_directory() . '/widgets/widget-authorinfo.php';
喜欢 2
夏日阳光
奋楫笃行，臻于至善！

相关文章
WP教程

BEGIN 主题搜索结果页面添加标题图片

2022年8月4日 967 次浏览 0 条评论
BEGIN 主题可以给文章分类页面、独立页面以及文章详情页面添加标题图片，但是在搜索结果页面及 404 页面却无法通过配置添加标题图片，本文简单分享一下给搜索结果页面和 404 页面添加标题图片，以及...
阅读全文
WP教程

WordPress 文章评论设置分页按时间倒序排序

2020年8月30日 501 次浏览 1条评论
WordPress 评论默认是按发布的时间顺序排列的，如果我们想按照时间倒序排列，可以根据本文的方法修改。 1、修改comment-template.php 编辑文件 wp-includes/comm...
阅读全文
WP教程

BEGIN 主题最新文章页面添加加载更多按钮

2020年7月10日 202 次浏览 0 条评论
使用 Begin 主题的博主可能都发现过这样一个问题：如果设置杂志布局，博客页面（本站叫最新文章）是不显示加载更多按钮图标的，而其他所有带分页的页面都显示。如果不显示加载更多按钮图标的话，我们就只能通...
阅读全文
WP教程

使用 LetterAvatar 脚本生成首字图片替代默认评论头像

2020年5月13日 215 次浏览 0 条评论
Gravatar 是全球通用头像，如果我们没有设置 Gravatar 头像，那么在网站上留言或评论就会显示默认的头像或者随机头像，这样的话用户体验不是很好。今天为大家分享一下使用 LetterAvat...
阅读全文
WP教程

WordPress 文章链接地址 ID 不连续解决方法

2020年1月23日 197 次浏览 0 条评论
Wordpress 默认情况下发布的文章 ID 不是连续的，是因为 Wordpress 自动草稿、文章修订版、页面、菜单、媒体等功能都要占用 ID，所以发布的文章 ID 一般是不连续的。今天为大家分享...
阅读全文
WP教程

使用 iconfont 阿里矢量图标为网站添加图标的方法

2020年1月22日 220 次浏览 0 条评论
Iconfont 是一个开源的矢量图标管理平台，它的图标库非常丰富，大概有一百三十多万个。Iconfont 可以按照需求定制图标字体库，还能随时修改，最重要的字体图标库只有 100 多 K。今天就来为...
阅读全文

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注