WordPress主题DUX自定义小工具作者简介

重要：本文最后更新于2018-12-25 16:30:58，某些文章具有时效性，若有错误或已失效，请在下方留言或联系九月网。

好久没逛别人的博客了，今天看到一位站长的简介挺好看的，顺手扒之，已经被我做成WordPress主题DUX的小工具了，后台直接可以拖动，但HTML内容也在其中，喜欢的朋友可以拿去改成自己主题的小工具。

WordPress主题DUX自定义小工具作者简介

有能力的朋友也可以将下面的联系QQ按钮分成几个，像什么联系邮箱啊，联系电话呀等等。

小工具代码如下：

 'widget_ui_tags', 'description' => '显示热门标签' );
$this->WP_Widget( 'widget_ui_tags', 'D-标签云', $widget_ops );
}*/

function __construct(){
parent::__construct( 'widget_ui_js', 'DUX 作者介绍', array( 'classname' => 'widget_ui_js' ) );
}

function widget( $args, $instance ) {
extract( $args );

$zzname = apply_filters('zzname', $instance['zzname']);
$zzjj = isset($instance['zzjj']) ? $instance['zzjj'] : '喜欢代码的业余爱好者';
$QQnum = isset($instance['QQnum']) ? $instance['QQnum'] : '1016134519';
//echo $zzname.$zzjj.$QQnum;
//die();
global $wpdb;
$count_posts = wp_count_posts();
$comments = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments");
?>

.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.fa-qq:before {
content: "\f1d6";
}
.tesa{
display: inline-block;
width: 33.333%;
text-align: center;
font-size: 14px;
vertical-align: middle;
box-sizing: border-box;
padding: 10px 0px;
list-style: none;
}
.tesa >strong{
display: block;
margin: 0px auto;
font-family: Georgia;
font-weight: 400;
font-size: 18px;
margin-top: -2px;
}

 

" target="_blank"> 联系QQ

'九月网', 'zzjj' => '喜欢代码的业余爱好者', 'QQnum' => '1016134519' ); $instance = wp_parse_args( (array) $instance, $defaults ); ?>

名称： <input id="get_field_id('zzname'); ?>" name="get_field_name('zzname'); ?>" type="text" value="" class="widefat" />

自述： <input id="get_field_id('zzjj'); ?>" name="get_field_name('zzjj'); ?>" type="text" value="" class="widefat" />

联系QQ： <input id="get_field_id('QQnum'); ?>" name="get_field_name('QQnum'); ?>" type="text" value="" class="widefat" />

<?php } }

HTML代码如下：

.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.fa-qq:before {
content: "\f1d6";
}
.tesa{
display: inline-block;
width: 33.333%;
text-align: center;
font-size: 14px;
vertical-align: middle;
box-sizing: border-box;
padding: 10px 0px;
list-style: none;
}
.tesa >strong{
display: block;
margin: 0px auto;
font-family: Georgia;
font-weight: 400;
font-size: 18px;
margin-top: -2px;
}

 

" target="_blank"> 联系QQ

里面的PHP代码换成文字即可看到效果。

如果读者也是使用的dux主题，在你的主题目录下的widgets文件夹下新建一个文件名为widget_ui_js.php文件，再把上面的代码贴进去，然后打开widgets文件夹的widget_index.php文件，在里面的数组中新增名为js的成员，结果如下所示：

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