wordpress小工具（侧边栏）开发

wordpress 小工具 （侧边栏）开发

注册小工具区域

代码：

function my_custom_sidebar() {
register_sidebar(
array (
'name' => __( '自定义小工具区域', '区域名称' ),
'id' => 'custom-side-bar',
'description' => __( '这是我自定义的小工具区域', '区域描述' ),
'before_widget' => '<div class="widget-content">',
'after_widget' => "</div>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
)
);
}
add_action( 'widgets_init', 'my_custom_sidebar' );

调用：

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>
aside class="after-content widget-area full-width" role="complementary">
<?php dynamic_sidebar( 'after-content-widget-area' ); ?>
</aside>
<?php }

添加小工具

新建小工具示例：

/**
* Class WPDocs_New_Widget
*/
class WPDocs_New_Widget extends WP_Widget {
/**
* Constructs the new widget.
*
* @see WP_Widget::__construct()
*/
function __construct() {
// Instantiate the parent object.
parent::__construct( false, __( 'My New Widget Title', 'textdomain' ) );
}
/**
* The widget's HTML output.
*
* @see WP_Widget::widget()
*
* @param array $args     Display arguments including before_title, after_title,
*                        before_widget, and after_widget.
* @param array $instance The settings for the particular instance of the widget.
*/
function widget( $args, $instance ) {}
/**
* The widget update handler.
*
* @see WP_Widget::update()
*
* @param array $new_instance The new instance of the widget.
* @param array $old_instance The old instance of the widget.
* @return array The updated instance of the widget.
*/
function update( $new_instance, $old_instance ) {
return $new_instance;
}
/**
* Output the admin widget options form HTML.
*
* @param array $instance The current widget settings.
* @return string The HTML markup for the form.
*/
function form( $instance ) {
return '';
}
}
add_action( 'widgets_init', 'wpdocs_register_widgets' );
/**
* Register the new widget.
*
* @see 'widgets_init'
*/
function wpdocs_register_widgets() {
register_widget( 'WPDocs_New_Widget' );
}

上面的不能设置，只能将小工具拖过去，下面放个可以拖动后设置的小工具：

代码：

class kinsta_Cta_Widget extends WP_Widget {
//widget constructor function
function __construct() {
$widget_options = array (
'classname' => 'kinsta_cta_widget',
'description' => 'Add a call to action box with your own text and link.'
);
parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );
}
//function to output the widget form
function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : '';
$link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
$text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>
<p>
<label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" />
</p>
<?php }
//function to define the data saved by the widget
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['text'] = strip_tags( $new_instance['text'] );
$instance['link'] = strip_tags( $new_instance['link'] );
return $instance;
}
//function to display the widget in the site
function widget( $args, $instance ) {
//define variables
$title = apply_filters( 'widget_title', $instance['title'] );
$text = $instance['text'];
$link = $instance['link'];
//output code
echo $args['before_widget'];
?>
<div class="cta">
<?php if ( ! empty( $title ) ) {
echo $before_title . $title . $after_title;
};
echo '<a href="' . $link . '">' . $text . '</a>';
?>
</div>
<?php
echo $args['after_widget'];
}
}
//function to register the widget
function kinsta_register_cta_widget() {
register_widget( 'kinsta_Cta_Widget' );
}
add_action( 'widgets_init', 'kinsta_register_cta_widget' );

上面代码的css样式：

.kinsta_cta_widget .cta {
clear: both;
width: 96%;
margin: 10px 0;
padding: 10px 2%;
font: arial, sans-serif;
font-size: 1.4rem;
text-align: center;
line-height: 1.8rem;
background-color: #fff;
}
.kinsta_cta_widget .cta a:link,
.kinsta_cta_widget .cta a:visited {
text-decoration: none;
color: #f78a04;
}
.kinsta_cta_widget .cta a:hover,
.cta a:active {
text-decoration: underline;
color: #512e03;
}

下面我们放个别人写的小工具例子：

代码：

<?php
add_action('widgets_init', 'widget_chojiang_top');
function widget_chojiang_top()
{
register_widget('widget_ui_user_points');
}
/////用户列表-----
class widget_ui_user_points extends WP_Widget
{
public function __construct()
{
$widget = array(
'w_id'        => 'widget_ui_user_points',
'w_name'      => _name('用户积分排行榜'),
'classname'   => '',
'description' => '显示网站用户积分排行榜余额排行榜，建议侧边栏显示。',
);
parent::__construct($widget['w_id'], $widget['w_name'], $widget);
}
public function widget($args, $instance)
{
extract($args);
$defaults = array(
'title'        => '',
'mini_title'   => '',
'more_but'     => '<i class="fa fa-angle-right fa-fw"></i>更多',
'more_but_url' => '',
'in_affix'     => '',
'include'      => '',
'exclude'      => '',
'hide_box'     => false,
'number'       => 10,
'orderby'      => 'points',
'order'        => 'DESC',
);
$instance   = wp_parse_args((array) $instance, $defaults);
$mini_title = $instance['mini_title'];
if ($mini_title) {
$mini_title = '<small class="ml10">' . $mini_title . '</small>';
}
$title    = $instance['title'];
$more_but = '';
if ($instance['more_but'] && $instance['more_but_url']) {
$more_but = '<div class="pull-right em09 mt3"><a href="' . $instance['more_but_url'] . '" class="muted-2-color">' . $instance['more_but'] . '</a></div>';
}
$mini_title .= $more_but;
if ($title) {
$title = '<div class="box-body notop"><div class="title-theme">' . $title . $mini_title . '</div></div>';
}
$in_affix = $instance['in_affix'] ? ' data-affix="true"' : '';
$class = !$instance['hide_box'] ? ' zib-widget' : '';
echo '<div' . $in_affix . ' class="theme-box">';
echo $title;
echo '<div class="text-center  user_lists' . $class . '">';
$shu = $instance['number'];
$orderby = $instance['orderby'];
$isorderby = $instance['orderby']=='points'?'积分':'余额';
$order = $instance['order'];
global $wpdb;
$used =  $wpdb->get_results("SELECT meta_value,user_id,meta_key FROM {$wpdb->usermeta} WHERE meta_key='$orderby' ORDER BY --meta_value $order LIMIT $shu ");
arsort($used);
$i = 0;
foreach ($used as $k)
{
$i++;
$user = zib_get_user_name_link($k->user_id);
$userimg = zib_get_avatar_box($k->user_id, 'avatar-img forum-avatar');
$html = '<div class="posts-mini border-bottom  relative ">';
$html .= $userimg;
$html .='<div class="posts-mini-con em09 ml10 flex xx jsb"> <p class="flex jsb">';
$html .= '<span class="flex1 flex"><name class="inflex ac relative-h">'.$user.'</name></p>';
$html .= '<div class="mt6 flex jsb muted-2-color">'.$isorderby.':'. $k->meta_value.'</div></div> ';
$html .= '<div class="flex jsb xx text-right flex0 ml10"><div class="text-right em5"><span class="img-badge jb-yellow muted-2-color">TOP '.$i.'</span></div></div></div>';
echo $html;
}
}
public function form($instance)
{
$defaults = array(
'title'        => '',
'mini_title'   => '',
'more_but'     => '<i class="fa fa-angle-right fa-fw"></i>更多',
'more_but_url' => '',
'in_affix'     => '',
'include'      => '',
'exclude'      => '',
'number'       => 10,
'hide_box'     => '',
'orderby'      => 'points',
'order'        => 'DESC',
);
$instance = wp_parse_args((array) $instance, $defaults);
$page_input[] = array(
'name'  => __('标题：', 'zib_language'),
'id'    => $this->get_field_name('title'),
'std'   => $instance['title'],
'style' => 'margin: 10px auto;',
'type'  => 'text',
);
$page_input[] = array(
'name'  => __('副标题：', 'zib_language'),
'id'    => $this->get_field_name('mini_title'),
'std'   => $instance['mini_title'],
'style' => 'margin: 10px auto;',
'type'  => 'text',
);
$page_input[] = array(
'name'  => __('标题右侧按钮->文案：', 'zib_language'),
'id'    => $this->get_field_name('more_but'),
'std'   => $instance['more_but'],
'style' => 'margin: 10px auto;',
'type'  => 'text',
);
$page_input[] = array(
'name'  => __('标题右侧按钮->链接：', 'zib_language'),
'id'    => $this->get_field_name('more_but_url'),
'std'   => $instance['more_but_url'],
'desc'  => '设置为任意链接',
'style' => 'margin: 10px auto;',
'type'  => 'text',
);
$page_input[] = array(
//    'name'  => __('显示背景盒子', 'zib_language'),
'id'    => $this->get_field_name('hide_box'),
'std'   => $instance['hide_box'],
'desc'  => '不显示背景盒子',
'style' => 'margin: 10px auto;',
'type'  => 'checkbox',
);
echo zib_edit_input_construct($page_input);
?>
<p>
<label>
<input style="vertical-align:-3px;margin-right:4px;" class="checkbox" type="checkbox" <?php checked($instance['in_affix'], 'on');?> id="<?php echo $this->get_field_id('in_affix'); ?>" name="<?php echo $this->get_field_name('in_affix'); ?>"> 侧栏随动（仅在侧边栏有效）
</label>
</p>
<p>
<label>
显示数目：
<input style="width:100%;" id="<?php echo $this->get_field_id('number');
?>" name="<?php echo $this->get_field_name('number');
?>" type="number" value="<?php echo $instance['number'];
?>" size="24" />
</label>
</p>
<p>
<label>
显示类型：
<select style="width:100%;" id="<?php echo $this->get_field_id('orderby');
?>" name="<?php echo $this->get_field_name('orderby');
?>">
<option value="points" <?php selected('points', $instance['orderby']);
?>>积分</option>
<option value="balance" <?php selected('balance', $instance['orderby']);
?>>余额</option>
</select>
</label>
</p>
<p>
<label>
排序顺序：
<select style="width:100%;" id="<?php echo $this->get_field_id('order');
?>" name="<?php echo $this->get_field_name('order');
?>">
<option value="ASC" <?php selected('ASC', $instance['order']);
?>>升序</option>
<option value="DESC" <?php selected('DESC', $instance['order']);
?>>降序</option>
</select>
</label>
</p>
<?php
}
}

还有个别人写的插件：

<?php
/**
* Plugin Name:   Call to Action Widget
* Plugin URI:    https://kinsta.com/
* Description:   Adds a widget for a call to action box
* Version:       1.0
* Author:        Rachel McCollin
* Author URI:    http://rachelmccollin.com
*
*
*/
/*********************************************************************************
Enqueue stylesheet
*********************************************************************************/
function kinsta_widget_enqueue_styles() {
wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) );
wp_enqueue_style( 'widget_cta_css' );
}
add_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );
/*********************************************************************************
Widget
*********************************************************************************/
class kinsta_Cta_Widget extends WP_Widget {
//widget constructor function
function __construct() {
$widget_options = array (
'classname' => 'kinsta_cta_widget',
'description' => 'Add a call to action box with your own text and link.'
);
parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );
}
//function to output the widget form
function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : '';
$link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
$text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>
<p>
<label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" />
</p>
<?php }
//function to define the data saved by the widget
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['text'] = strip_tags( $new_instance['text'] );
$instance['link'] = strip_tags( $new_instance['link'] );
return $instance;
}
//function to display the widget in the site
function widget( $args, $instance ) {
//define variables
$title = apply_filters( 'widget_title', $instance['title'] );
$text = $instance['text'];
$link = $instance['link'];
//output code
echo $args['before_widget'];
?>
<div class="cta">
<?php if ( ! empty( $title ) ) {
echo $before_title . $title . $after_title;
};
echo '<a href="' . $link . '">' . $text . '</a>';
?>
</div>
<?php
echo $args['after_widget'];
}
}
//function to register the widget
function kinsta_register_cta_widget() {
register_widget( 'kinsta_Cta_Widget' );
}
add_action( 'widgets_init', 'kinsta_register_cta_widget' );

插件中的CSS文件代码：

/***************************************************
Widget plugin - styling for cta box
***************************************************/
.kinsta_cta_widget .cta {
clear: both;
width: 96%;
margin: 10px 0;
padding: 10px 2%;
font: arial, sans-serif;
font-size: 1.4rem;
text-align: center;
line-height: 1.8rem;
background-color: #fff;
}
.kinsta_cta_widget .cta a:link,
.kinsta_cta_widget .cta a:visited {
text-decoration: none;
color: #f78a04;
}
.kinsta_cta_widget .cta a:hover,
.cta a:active {
text-decoration: underline;
color: #512e03;
}

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。