wordpress小工具(侧边栏)开发

注册小工具区域

图片[1]-wordpress小工具(侧边栏)开发 - KEKC博客-KEKC博客

代码:

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' );
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' );
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 }
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 }
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 }

添加小工具

图片[2]-wordpress小工具(侧边栏)开发 - KEKC博客-KEKC博客

新建小工具示例:

/**
* 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 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 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' ); }

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

图片[3]-wordpress小工具(侧边栏)开发 - KEKC博客-KEKC博客
图片[4]-wordpress小工具(侧边栏)开发 - KEKC博客-KEKC博客

代码:

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' );
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' );
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;
}
.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;
}
.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; }

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

图片[5]-wordpress小工具(侧边栏)开发 - KEKC博客-KEKC博客

代码:

<?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

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 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' );
<?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' );
<?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;
}
/***************************************************
  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;
}
/*************************************************** 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; }

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
Youth means limitless possibilities.
年轻就是无限的可能
评论 共1条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称常用语 夸夸
夸夸
还有吗!没看够!
表情代码图片
    • KEKC的头像-KEKC博客KEKC徽章-人气大使-KEKC博客等级-LV6-KEKC博客作者0