创建WordPress小部件多个实例


Create wordpress Widget multiple instances

我创建了一个wordpress小部件(一个有2个字段的表单)并将其显示在后台。

一切正常,我可以使用它只创建一个记录并将其显示在前面,但我真正想做的是能够使用它从后台创建许多记录(如帖子)并将它们显示到网站的前台。

前台出版记录:(我想要的)

Record1               |     Record2               |     Record3
-------------------------------------------------------------------------------
Title:    Title1      |     Title:    Title2      |     Title:    Title3
Price:    Price1      |     Price:    Price2      |     Price:    Price3

前台出版记录:(我实际拥有的)

Record               
----------------------
Title:    Title      
Price:    Price      

这是我的代码:

class wp_ikbal extends WP_Widget {
    // constructor
    function wp_ikbal() {
        parent::WP_Widget(false, $name = __('Ikbal Widget', 'wp_ikbal') );
    }
    // widget form creation
    function form($instance) {  
        // Check values
        if( $instance) {
            $Title = esc_attr($instance['text']);
            $Price = esc_textarea($instance['textarea']);
        } else {
            $Title = '';
            $Price = '';
        }
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('Title'); ?>"><?php _e('Nom Produit:', 'wp_ikbal'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('Title'); ?>" name="<?php echo $this->get_field_name('Title'); ?>" type="text" value="<?php echo $Title; ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('Price'); ?>"><?php _e('Price:', 'wp_ikbal'); ?></label>
            <textarea class="widefat" id="<?php echo $this->get_field_id('Price'); ?>" name="<?php echo $this->get_field_name('Price'); ?>"><?php echo $Price; ?></textarea>
        </p>
        <?php
    }
    // widget update
    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        // Fields
        $instance['Title'] = strip_tags($new_instance['Title']);
        $instance['Price'] = strip_tags($new_instance['Price']);
        return $instance;
    }
    // widget display
    function widget($args, $instance) {
        extract( $args );
        // these are the widget options
        $text = $instance['Title'];
        $textarea = $instance['Price'];
        echo $before_widget;
        // Display the widget
        echo '<div class="widget-text wp_widget_plugin_box">';
        // Check if text is set
        if( $Title ) {
            echo '<p class="wp_widget_plugin_text">'.$Title.'</p>';
        }
        // Check if textarea is set
        if( $Price ) {
            echo '<p class="wp_widget_plugin_textarea">'.$Price.'</p>';
        }
        echo '</div>';
        echo $after_widget;
    }
}
// register widget
add_action('widgets_init', create_function('', 'return register_widget("wp_ikbal");'));

我该怎么做?谢谢。

你需要可重复字段,这里的答案是WPSE中这个的逐字记录。基本上:

  1. 在 Widget 构造函数中添加一个admin_enqueue_scripts来加载所需的 jQuery(或者您可以将其内联放在 form() 中)。

  2. form()添加标记以具有输入的"模板",jQuery使用该模板来复制字段。

  3. update() 中,循环访问已发布的字段并相应地保存。

资源:

  • 根据需要创建更多元框 - WPSE 问答

  • 自定义元框:在一个可重复字段中存储两个值 - WPSE 问答

  • 元框中的可重复自定义字段 - 要点

  • 元框中的可重复自定义字段 - 另一个要点。这个有对字段进行排序的代码。

PS:你可能会发现 jQuery 在第一次将小部件放入侧边栏时不起作用。解决方案就在这里。