注册小工具区域
![图片[1]-wordpress小工具(侧边栏)开发 - KEKC博客-KEKC博客](https://www.kekc.cn/wp-content/uploads/2022/08/d2b5ca33bd204152.png)
代码:
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博客](https://www.kekc.cn/wp-content/uploads/2022/08/d2b5ca33bd211705.png)
新建小工具示例:
/*** 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博客](https://www.kekc.cn/wp-content/uploads/2022/08/d2b5ca33bd213618.png)
![图片[4]-wordpress小工具(侧边栏)开发 - KEKC博客-KEKC博客](https://www.kekc.cn/wp-content/uploads/2022/08/d2b5ca33bd213643.png)
代码:
class kinsta_Cta_Widget extends WP_Widget {//widget constructor functionfunction __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 formfunction 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 widgetfunction 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 sitefunction widget( $args, $instance ) {//define variables$title = apply_filters( 'widget_title', $instance['title'] );$text = $instance['text'];$link = $instance['link'];//output codeecho $args['before_widget'];?><div class="cta"><?php if ( ! empty( $title ) ) {echo $before_title . $title . $after_title;};echo '<a href="' . $link . '">' . $text . '</a>';?></div><?phpecho $args['after_widget'];}}//function to register the widgetfunction 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博客](https://www.kekc.cn/wp-content/uploads/2022/09/d2b5ca33bd172638.png)
代码:
<?phpadd_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 functionfunction __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 formfunction 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 widgetfunction 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 sitefunction widget( $args, $instance ) {//define variables$title = apply_filters( 'widget_title', $instance['title'] );$text = $instance['text'];$link = $instance['link'];//output codeecho $args['before_widget'];?><div class="cta"><?php if ( ! empty( $title ) ) {echo $before_title . $title . $after_title;};echo '<a href="' . $link . '">' . $text . '</a>';?></div><?phpecho $args['after_widget'];}}//function to register the widgetfunction 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
- 最新
- 最热
只看作者