wordpress小工具（侧边栏）开发

12120

注册小工具区域

图片[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' );

调用：

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

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

图片[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' );

上面代码的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;
}

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

图片[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
/**
* 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;
}

© 版权声明
文章版权声明 1、本网站名称：KEKC博客
2、本站网址：https://www.kekc.cn
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ2551654928进行删除处理。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报

THE END
wordpress技术分享
喜欢就支持一下吧
点赞0 分享
KEKC的头像-KEKC博客
子比主题附加组件-KEKC博客
子比主题附加组件
子比主题附加组件
11个月前 5018
解决deepl不给白嫖-KEKC博客
解决deepl不给白嫖
解决deepl不给白嫖
5个月前 4016
收集的15个QQ机器人框架源码-KEKC博客
收集的15个QQ机器人框架源码
收集的15个QQ机器人框架源码
9个月前 3099
子比主题附加组件重构版插件-KEKC博客
子比主题附加组件重构版插件
子比主题附加组件重构版插件
5个月前 3094
让流量消失，耗尽手机、服务器流量-KEKC博客
让流量消失，耗尽手机、服务器流量
让流量消失，耗尽手机、服务器流量
11个月前 2655
学习通自动签到&极速抢答神器下载-KEKC博客
学习通自动签到&极速抢答神器下载
学习通自动签到&极速抢答神器下载
3年前 1997
相关推荐
子比主题附加组件-KEKC博客
子比主题附加组件
子比主题附加组件
11个月前 5018
子比主题附加组件重构版插件-KEKC博客
子比主题附加组件重构版插件
子比主题附加组件重构版插件
5个月前 3094
简单实现子比主题卡密充值余额和积分（已修复并支持PHP8.1）-KEKC博客
简单实现子比主题卡密充值余额和积分（已修复并支持PHP8.1）
简单实现子比主题卡密充值余额和积分（已修复并支持PHP8.1）
1年前 1613
WordPress2022 后台美化 QuarterAdmin-KEKC博客
WordPress2022 后台美化 QuarterAdmin
WordPress2022 后台美化 QuarterAdmin
1年前 754
WordPress广告小工具低级版-kadl-KEKC博客
WordPress广告小工具低级版-kadl
WordPress广告小工具低级版-kadl
9个月前 619
wordpress 为自定义类型文章新增自定义字段-KEKC博客
wordpress 为自定义类型文章新增自定义字段
wordpress 为自定义类型文章新增自定义字段
2年前 563
评论 共1条
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
常用语
请选择评论常用语：
  • 1、谢谢博主分享！
  • 2、博主NB，666
  • 3、感谢楼主分享！
  • 4、感谢大佬分享！
  • 5、教程很好用，谢谢！
 夸夸
夸夸
还有吗！没看够！
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][se][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片
    只看作者
    • KEKC的头像-KEKC博客KEKC徽章-人气大使-KEKC博客等级-LV6-KEKC博客作者0
      666666666666666
      中国陕西西安 电信9个月前回复
随机文章

1将反转WooCommerce产品评论的显示顺序

2超详细的腾讯云LOGO 改版记录全过程！揭秘LOGO设计流程

3用一行代码-重装Windows系统

4你还在为LOGO发愁？几个一键生成logo的工具网站分享给你

5woocommerce订单结账后执行操作

6PHP 实现图片 Base64 编码与解码