wordpress文章单页如何添加表格字段

---

这是一个非常难的问题。我们现在来把它解决！

添加表格分两种情况，一种是带table header的，另外一种直接是空表格，自己可以填的。

我们现在以空表格的方式来添加。

我们首先在inc文件夹下面，新建metaboxes.php文件。（我喜欢文件都分门别类而不是都挤在一个functions.php，这样维护效率很低，代码运行效率低）。

在metaboxes.php文件里面，首先添加metabox:

function add_custom_meta_box() {
    add_meta_box(
        'custom_table_fields',
        'Table Fields',
        'render_custom_meta_box',
        'product',
        'normal',
        'default'
    );
}
add_action( 'add_meta_boxes', 'add_custom_meta_box' );

然后添加后台字段：

function render_custom_meta_box( $post ) {
    wp_nonce_field( 'save_custom_meta_box_data', 'custom_meta_box_nonce' );

    $table_fields = get_post_meta( $post->ID, 'table_fields', true );
    if ( ! $table_fields ) {
        $table_fields = array(
            array( 'column1' => '', 'column2' => '' ) // Default initial row
        );
    }
    ?>
    <table id="custom-table">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ( $table_fields as $index => $row ) : ?>
                <tr>
                    <td><input type="text" name="table_fields[<?php echo $index; ?>][column1]" value="<?php echo esc_attr( $row['column1'] ); ?>" /></td>
                    <td><input type="text" name="table_fields[<?php echo $index; ?>][column2]" value="<?php echo esc_attr( $row['column2'] ); ?>" /></td>
                    <td><button class="delete-row">Delete</button></td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
    <button id="add-row">Add Row</button>
    <script>
        jQuery(document).ready(function($){
            $('#add-row').click(function(e){
                e.preventDefault();
                var newRow = '<tr><td><input type="text" name="table_fields[' + Date.now() + '][column1]" value="" /></td><td><input type="text" name="table_fields[' + Date.now() + '][column2]" value="" /></td><td><button class="delete-row">Delete</button></td></tr>';
                $('#custom-table tbody').append(newRow);
            });

            $('#custom-table').on('click', '.delete-row', function(e){
                e.preventDefault();
                var row = $(this).closest('tr');
                var rowIndex = row.index();
                row.remove();
                $('input[name^="table_fields[' + rowIndex + ']"]').remove();
            });
        });
    </script>
    <?php
}

保存字段：

function save_custom_meta_box_data( $post_id ) {
    // Verify the nonce
    if ( ! isset( $_POST['custom_meta_box_nonce'] ) || ! wp_verify_nonce( $_POST['custom_meta_box_nonce'], 'save_custom_meta_box_data' ) ) {
        return;
    }

    // Check if the table_fields data is present
    if ( isset( $_POST['table_fields'] ) ) {
        $table_fields = $_POST['table_fields'];

        // Sanitize and update the table_fields data
        foreach ( $table_fields as $index => $row ) {
            $table_fields[ $index ]['column1'] = sanitize_text_field( $row['column1'] );
            $table_fields[ $index ]['column2'] = sanitize_text_field( $row['column2'] );
        }

        update_post_meta( $post_id, 'table_fields', $table_fields );
    }
}
add_action( 'save_post', 'save_custom_meta_box_data' );

---