Kế thừa thuộc tính của plugin WP User Frontend

WP User Frontend là plugin có thể giúp bạn tạo form bên ngoài frontend. Bạn có thể tạo form đăng bài viết, form đăng nhập, form đăng ký cho thành viên,…

<?php
defined( 'ABSPATH' ) || exit;

if ( class_exists( 'WPUF_Form_Field_File' ) ) {
    class FB_Form_Field_File_Table extends WPUF_Form_Field_File {
        public function __construct() {
            parent::__construct();
            $this->name       = __( 'File Upload Table', Featured_Birthdays_Constants::TEXT_DOMAIN );
            $this->input_type = 'file_upload';
            $this->icon       = 'upload';
        }

        public function render_field_data( $data, $field ) {
            ob_start();

            if ( Featured_Birthdays()->array_has_val( $data ) ) {
                $label = $field['label'] ?? '';
                ?>
                <li class="file-upload-table" data-name="<?php echo esc_attr( $field['name'] ); ?>">
                    <label class="label"><?php echo $label; ?></label>
                    <ul class="value">
                        <?php
                        foreach ( $data as $id ) {
                            if ( is_array( $id ) ) {
                                foreach ( $id as $sub ) {
                                    ?>
                                    <li>
                                        <a href="<?php wp_get_attachment_url( $sub ) ?>"><?php echo get_the_title( $sub ); ?></a>
                                    </li>
                                    <?php
                                }
                            } else {
                                ?>
                                <li>
                                    <a href="<?php wp_get_attachment_url( $id ) ?>"><?php echo get_the_title( $id ); ?></a>
                                </li>
                                <?php
                            }
                        }
                        ?>
                    </ul>
                </li>
                <?php
            }

            return ob_get_clean();
        }

        public function get_field_props() {
            $defaults = parent::get_field_props(); // TODO: Change the autogenerated stub

            $defaults['template'] = 'file_upload_table';

            return $defaults;
        }
    }
}

Dùng 2 filter để thêm mục mới vào danh sách các trường của plugin WPUF:

add_filter( 'wpuf-form-fields', array( $this, 'register_wpuf_fields' ) );
add_filter( 'wpuf-form-fields-custom-fields', array( $this, 'add_to_wpuf_custom_fields' ) );

public function add_to_wpuf_custom_fields( $fields ) {
    return array_merge( $fields, array( 'file_upload_table' ) );
}

public function register_wpuf_fields( $fields ) {
    if ( ! class_exists( 'FB_Form_Field_File_Table' ) ) {
        require_once __DIR__ . '/class-field-file-table.php';
    }

    $fields['file_upload_table'] = new FB_Form_Field_File_Table();

    return $fields;
}

Thêm JS Template để hiện thị trong admin:

add_action( 'wpuf-form-builder-add-js-templates', function () {
    ?>
    <script type="text/x-template" id="tmpl-wpuf-form-file_upload_table">
        <div class="wpuf-fields">
            <div :id="'wpuf-img_label-' + field.id + '-upload-container'">
                <div class="wpuf-attachment-upload-filelist" data-type="file" data-required="yes">
                    <a class="button file-selector wpuf_img_label_148" href="#">
                        <?php _e( 'Select Files', $this->textdomain ); ?>
                    </a>
                </div>
            </div>

            <span v-if="field.help" class="wpuf-help" v-html="field.help"/>
    </script>
    <?php
} );

Mục đích của đoạn code trên là kế thừa lại trường File Upload của plugin WPUF. Bây giờ bạn có thể sử dụng trường mới File Upload Table để chỉnh sửa hiển thị bên ngoài frontend thông qua thuộc tính render_field_data của lớp.

Cuối cùng, thêm script vào admin bằng cách sử dụng hook wpuf-form-builder-enqueue-after-components.

add_action( 'wpuf-form-builder-enqueue-after-components', array( $this, 'custom_admin_enqueue_scripts' ), 99 );

public function custom_admin_enqueue_scripts() {
    global $pagenow;
    wp_enqueue_script( $this->textdomain . '-backend', $this->get_base_url() . '/custom/js/backend.js', array(
        'jquery',
        'wpuf-form-builder-components-pro',
        'wpuf-form-builder-components',
        'wpuf-form-builder-mixins-pro',
        'wpuf-form-builder-mixins'
    ), false, true );
}

(function ($) {
    /**
     * Field template: File upload table
     */
    Vue.component('form-file_upload_table', {
        template: '#tmpl-wpuf-form-file_upload_table',

        mixins: [
            wpuf_mixins.form_field_mixin
        ]
    });

    /**
     * Field template: Date Range
     */
    Vue.component('form-date_range', {
        template: '#tmpl-wpuf-form-date_range',

        mixins: [
            wpuf_mixins.form_field_mixin
        ]
    });

})(jQuery);