如何在Widget中动态添加输入文本字段?

时间:2017-08-03 作者:Owaiz Yusufi

我制作了一个带有输入字段的小部件。我想制作一个添加更多按钮来动态添加输入字段第一个输入字段是默认值。我怎样才能做到这一点?

以下是我的小部件代码:

<?php 
class ExampleClasss extends WP_Widget {
    function __construct() {
        // Widget settings
        $widget_ops = array( \'classname\' => \'exampleclass\', \'description\' => esc_html__( \'This is Just a practice widget\', \'ex\' ) );
        // Create the widget
        parent::__construct( \'exampleclass\', __(\'Example widget\', \'ex\'), $widget_ops );
    }

    function widget( $args, $instance ) {
        extract( $args, EXTR_SKIP );
        $title = apply_filters( \'widget_title\', $instance[\'title\'] );
        $link1 = empty( $instance[\'link1\'] ) ? \'\' : $instance[\'link1\'];
        echo $before_widget;
        if ($title)
            echo $before_title . $title . $after_title; ?>
        <div class=""><?php echo wp_kses_post( $link1 ); ?></div>
        <?php
        echo $after_widget;
    }

    function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance[\'title\'] = sanitize_text_field( $new_instance[\'title\'] );
        $instance[\'link1\'] = sanitize_text_field( $new_instance[\'link1\'] );
        return $instance;
    }


    function form( $instance ) {
        $instance = wp_parse_args( (array) $instance, array( \'Title\' => esc_html__( \'About Me\', \'ex\' ) ) );

        $title = ( !empty($instance[\'title\']) ? esc_attr( $instance[\'title\'] ) : \'Title\' );
        $link1 = ( !empty($instance[\'link1\']) ? esc_textarea( $instance[\'link1\'] ) : \'Link 1\' );

        #   T I T L E
        $output = "<p>";
        $output .= "<label for=\'" . esc_attr( $this->get_field_id(\'title\') ) . "\'>".esc_html__( \'Title\', \'ex\')."</label>";
        $output .= "<input type=\\"text\\" class=\\"widefat\\" id=\'". esc_attr( $this->get_field_id( \'title\' ) ) ."\' name=\'". esc_attr( $this->get_field_name(\'title\') ) ."\' value=\'".$title."\'></p>";

        #   A B O U T    M E     T E X T
        $output .= "<p>";
        $output .= "<label for=\'" . esc_attr( $this->get_field_id(\'link1\') ) . "\'>".esc_html__( \'Link 1 \' , \'ex\' )."</label>&times;";
        $output .= "<input type=\\"text\\" class=\\"widefat\\" id=\'". esc_attr( $this->get_field_id( \'link1\' ) ) ."\' name=\'". esc_attr( $this->get_field_name(\'link1\') ) ."\' value=\'".$link1."\'></p>";

        echo $output;
    }
}
function Example() {
    register_widget( \'ExampleClasss\' );
}
add_action( \'widgets_init\', \'Example\' );


?>
这是我的截图。希望这能澄清我的问题!

enter image description here

1 个回复
SO网友:Alexander

jQuery怎么样append 方法要生成计数器,只需递增i 变量每次单击。

$(\'body\').on(\'click\', \'.add-more-button\', function() {
  var i = 2;
  $(\'.widget-input\').append(\'<label>Link\' + i + \'</label><input>\');
  i++;
}
这只是一个想法,我想有经验的人可以进一步发展。

结束

相关推荐

Using add_filter() in Widgets

只需查询引用add_filter() 作用您可以在WordPress小部件类中使用此函数吗。Example我有一个带有动态创建代码的小部件,我想将其传递给插件中创建的另一个函数。这能实现吗?<?php /** * Display the actual Widget * * @param Array $args * @param Array $instance */ public function widget($args, $inst