当前位置:筱凯博客 > 技术分享 > 正文
吴凯旋

作者:吴凯旋

不要只因一次失败,就放弃你原来决心想达到的目的。

手机扫码查看

为DUX二开/Vieu等基于DUX的主题侧边栏添加作者信息小工具

为DUX二开/Vieu等基于DUX的主题侧边栏添加作者信息小工具

本文章转自新路程博客<源代码简学网络>由新路程博客站长简化发布

一、widget-authorinfo.php的修改

1.首先你要停用所有缓存插件和压缩、合并css和js,在完成后启用插件时请关闭使用牛X的压缩和更小的压缩,启用一般压缩即可,避免css样式在前端显示错位。

2.备份一份widget-authorinfo.php文件,避免改动较大导致无法还原。

3.修改主题widgets文件夹下widget-authorinfo.php,代码如下:

<?php
/*
Widget Name:本文作者
Description:显示当前文章的作者信息
Version:1.0
Author:zhattyt
Author URI:https://www.zhattyt.com
*/
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_authorinfo();
echo $after_widget;
}
}
 
function widget_authorinfo(){
?>
<div class="author-info">
<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' ); }?><i title="博主认证 " class="author-ident"></i>
</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><?php
	if(author_can($post->ID,'install_plugins')){
		echo '<span>博主</span>';
		}
	elseif(author_can($post->ID,'edit_others_posts')){
		echo '<span>管理编辑</span>';
		}
	elseif(author_can($post->ID,'publish_posts')){
		echo '<span>作者</span>';
		}
	elseif(author_can($post->ID,'delete_posts')){
		echo '<span>投稿者</span>';
		}
	elseif(author_can($post->ID,'read')){
		echo '<span>订阅者</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-index.php添加代码(基于DUX二开修改函数版本)

添加’authorinfo’,

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

三、CSS样式修改

把下面样式代码添加到main.css文件里,每个主题不同,所以可能需要微调,另外图片调用路径根据自己主题来修改(css中图片需自行寻找修改)。

/* 本文作者小工具 */
.author-info{
width: 100%;
color: #888;
font-size: 12px;
background: url(../img/author_banner.jpg) #fff center top no-repeat;
position: relative;
background-size: 100%;
}
.author-avatar{
padding-top: 45px;
}
.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-ident {
display: inline-block;
background-image: url(../img/icon.png);
background-repeat: no-repeat;
width: 20px;
height: 20px;
border-radius: 50%;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
vertical-align: -2px;
background-position: -50px -25px;
position: absolute;
bottom: 170px;
right: 130px;
}
.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{
padding:3px 15px;
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;
}

如果还想要更炫酷的颜色或者渐变的,请自行在前台完整工业控制器修改好,可以参照css写的内容甄别,跳到后台按照提示路径和行数修改。

四、在functions.php添加代码

//增加个人简介信息
function my_new_contactmethods( $contactmethods ) {
$contactmethods['weibo'] = '微博';
return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);

五、注意事项:

Vieu等基于原生Dux函数的主题样式中,widget-index.php内最后一个参数’tags’是没有半角逗号,所以要添加’authorinfo’,于上方任意两个参数中间,这样避免主题整体无法在前台反应。

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

六、清除浏览器缓存后,在后台小工具里添加作者一栏置于侧边栏,再打开首页就可以看到新的样式啦!

将所有文件打包放在网盘咯,可自行下载,另外还有个彩蛋,就是那个icon是可以调整css修改v的样式哦,自行测试下吧!

 

抱歉,隐藏内容 回复 后刷新可见
未经允许不得转载:

作者:吴凯旋, 转载或复制请以 超链接形式 并注明出处 筱凯博客
原文地址:《为DUX二开/Vieu等基于DUX的主题侧边栏添加作者信息小工具》 发布于2019-01-19

分享到:
赞(3) 打赏

评论 9

7 + 5 =
  1. #1

    很不错实用

    记磊2个月前 (01-19)回复
  2. #2
    qq_avatar

    带走了 :fan:

    小仙女4周前 (02-23)回复
  3. #3
    qq_avatar

    拿去骚一下

    8.254周前 (02-24)回复
  4. #4
    qq_avatar

    看看一下。。

    小仙女4周前 (02-25)回复
  5. #5
    qq_avatar

    看看

    译丶浅夏3周前 (03-01)回复
  6. #6
    qq_avatar

    zc支持支持

    8.252周前 (03-05)回复
  7. #7
    qq_avatar

    老鹰2周前 (03-11)回复
  8. #8
    qq_avatar

    下载看看

    饮者,醉6天前回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

筱凯博客全新启航

专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

了解一下

正在获取,请稍候...
00:00/00:00

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册