Wordpress 自定义元字段,最后一个输入字段获得“未定义索引”,但在重新发布后有效

Wordpress custom meta fields, last input field gets "undefined index" but works after re-post

提问人:user3528972 提问时间:4/13/2014 更新时间:4/14/2014 访问量:1052

问:

我是 php 的新手,我的代码有一些问题。 几天来我一直在为此苦苦挣扎,研究、编辑没有运气...... 请帮助一个兄弟并解释如何解决我的问题!

代码的目的

将自定义元字段添加到仪表板帖子页面,以便用户可以将图像添加到帖子中。

问题

该代码有效,但不是 100% 有效。 将图像添加到元字段时,会发生以下情况

  • 只添加一张图片,一切正常。
  • 添加多个图像,最后一个图像“src 字段”得到这个 输入字段中的错误:

"...未定义的索引:src in...函数.php行123”

第 123 行是:

<td><input type="text" class="widefat" name="src[]" value="<?php if ($field['src'] != '') echo esc_attr( $field['src'] ); ?>" /></td>

数组如下所示:

Array
(
    [0] => Array
        (
            [title] => image-name1.gif
            [alt] => image description 1
            [src] => http://my-host.com/art/wp-content/uploads/2014/04/test1.gif
        )

    [2] => Array
        (
            [title] => image-nam2.gif
            [alt] => image description 2
            [src] => http://my-host.com/art/wp-content/uploads/2014/04/test3.gif
        )

    [3] => Array
        (
            [title] => image-name3.gif
            [alt] => image description 3
        )

)
  • 再次添加最后一张图片并更新帖子时 工程!

研究

我认为它必须与函数有关,该函数以某种方式检查 src 输入字段是否获得任何值,因为它仅在输入字段引用时才起作用。

在保存元字段之前,创建数组的最后一个 for 循环也可能有问题。

函数.php:

// add meta box to screen
function add_meta_boxes() {
    add_meta_box( 'image-meta-fields', 
                 'Add Image to Post', 
                 'image_meta_field_display', 
                 'post', 
                 'normal', 
                 'high');
}
add_action('admin_init', 'add_meta_boxes', 1);

// output the meta box content
function image_meta_field_display() {
    global $post;

    $image_meta_fields = get_post_meta($post->ID, 'image_meta_fields', true);

    wp_nonce_field( 'image_meta_field_nonce', 'image_meta_field_nonce' );

    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('.add-row').on('click', function() {
                var row = $('.empty-row.screen-reader-text').clone(true);
                row.removeClass('empty-row screen-reader-text');
                row.insertBefore('#image-meta-field-one tbody>tr:last');
                return false;
            });
            $('.remove-row').on('click', function() {
                $(this).closest('tr').next().remove();
                $(this).closest('tr').remove();

                return false;
            });

            // 
            $('.add-image').click(function() {

                var send_attachment_bkp = wp.media.editor.send.attachment;
                var button = $(this);

                wp.media.editor.send.attachment = function(props, attachment) {

                $(button).closest('tr').prev().children('td').eq(0).find('input').val(attachment.title); //set title
                $(button).closest('tr').prev().children('td').eq(1).find('input').val(attachment.alt); // set alt (description)
                $(button).closest('td').prev().children().val(attachment.url); // set url

                wp.media.editor.send.attachment = send_attachment_bkp;
                }
                wp.media.editor.open();
                return false;       
            });
        });
    </script>

    <table id="image-meta-field-one" width="100%">
        <thead>
            <tr>
                <th width="30%">Name</th>
                <th width="50%">Description</th>
                <th width="10%"></th>
            </tr>
        </thead>
    <tbody>
    <?php

    if ( $image_meta_fields ) :

    foreach ( $image_meta_fields as $field ) {
    ?>
    <tr>
        <td><input type="text" class="widefat" name="title[]" value="<?php if ($field['title'] != '') echo esc_attr( $field['title'] ); ?>" /></td>
        <td><input type="text" class="widefat" name="alt[]" value="<?php if ($field['alt'] != '') echo esc_attr( $field['alt'] ); ?>" /></td>
        <td><a class="button remove-row" href="#">DEL</a></td>
    </tr>
    <tr>
        <th width="30%"></th>
        <td><input type="text" class="widefat" name="src[]" value="<?php if ($field['src'] != '') echo esc_attr( $field['src'] ); ?>" /></td>
        <td><a class="button add-image" href="#" value="" >ADD IMAGE</a></td>
    </tr>
    <?php
    }
    else :
        // show a blank one
    ?>
        <tr>
            <td><input type="text" class="widefat" name="title[]" /></td>
            <td><input type="text" class="widefat" name="alt[]" /></td>
            <td><a class="button remove-row" href="#">DEL</a></td>
        </tr>
        <tr>
            <th width="30%"></th>
            <td><input type="text" class="widefat" name="src[]" value=""/></td>
            <td><a class="button add-image" href="#">ADD IMAGE</a></td>
        </tr>
    <?php endif; ?>

            <!-- empty hidden one for jQuery -->
        <tr class="empty-row screen-reader-text">
            <td><input type="text" class="widefat" name="title[]" /></td>
            <td><input type="text" class="widefat" name="alt[]" /></td>
            <td><a class="button remove-row" href="#">DEL</a></td>
        </tr>
        <tr class="empty-row screen-reader-text">
            <th width="30%"></th>
            <td><input type="text" class="widefat" name="src[]" value="" /></td>
            <td><a class="button add-image" href="#">ADD IMAGE</a></td>
        </tr>
    </tbody>
    </table>

    <p><a class="button add-row" href="#">Add More Images</a></p>
    <?php
}

add_action('save_post', 'image_meta_field_save');

function image_meta_field_save($post_id) {
    if ( !isset( $_POST['image_meta_field_nonce'] ) ||
        ! wp_verify_nonce( $_POST['image_meta_field_nonce'], 'image_meta_field_nonce' ) )
    return;

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
    return;

    if (!current_user_can('edit_post', $post_id))
    return;

    $old = get_post_meta($post_id, 'image_meta_fields', true);
    $new = array();

    $titles = $_POST['title'];
    $alts = $_POST['alt'];
    $srcs = $_POST['src'];

    $count = count( $titles );

    for ( $i = 0; $i < $count; $i++ ) {
        if ( $titles[$i] != '' ) :
                $new[$i]['title'] = wp_filter_post_kses( $titles[$i] );

        if ( $alts[$i] != '' ) 
                $new[$i]['alt'] = wp_filter_post_kses ( $alts[$i] );

        if ( $srcs[$i] != '' ) 
                $new[$i]['src'] = wp_filter_post_kses( $srcs[$i] );
        endif;
    }

    if ( !empty( $new ) && $new != $old )
        update_post_meta( $post_id, 'image_meta_fields', $new );
    elseif ( empty($new) && $old )
        delete_post_meta( $post_id, 'image_meta_fields', $old );
}

在前端输出元数组,如下所示:

<?php 
    $get_images = get_post_meta( get_the_id(), 'image_meta_fields', true ); 

        if ( !empty( $get_images ) ) {
            foreach ( $get_images as $key => $image ) :
                    if ( $key === 0 )
                        echo "<img class='post-image' title='" . $image['title'] . "' alt='" . $image['alt'] . "' src='" . $image['src'] . "'/>";
                    else
                        echo "<img class='post-thn' title='" . $image['title'] . "' alt='" . $image['alt'] . "' src='" . get_image_thumbnail($image['src']) ."'/>";
            endforeach;
        } 
    ?>    
php wordpress 高级自定义字段 未定义索引

评论


答:

1赞 brasofilo 4/14/2014 #1

检查此变量:

$titles = $_POST['title'];
$alts = $_POST['alt'];
$srcs = $_POST['src'];

我看到了,就出来了:$titles$alts

enter image description here

问题是当你克隆这个块时:

<!-- empty hidden one for jQuery -->
<tr class="empty-row screen-reader-text">
    <td><input type="text" class="widefat" name="title[]" /></td>
    <td><input type="text" class="widefat" name="alt[]" /></td>
    <td><a class="button remove-row" href="#">DEL</a></td>
</tr>
<tr class="empty-row screen-reader-text">
    <th width="30%"></th>
    <td><input type="text" class="widefat" name="src[]" value="" /></td>
    <td><a class="button add-image" href="#">ADD IMAGE</a></td>
</tr>

它变成了这样:

<!-- empty hidden one for jQuery -->
<tr class="empty-row screen-reader-text">
    <td><input type="text" class="widefat" name="title[]" /></td>
    <td><input type="text" class="widefat" name="alt[]" /></td>
    <td><a class="button remove-row" href="#">DEL</a></td>
</tr>
    <tr class="">
        <td><input type="text" class="widefat" name="title[]" /></td>
        <td><input type="text" class="widefat" name="alt[]" /></td>
        <td><a class="button remove-row" href="#">DEL</a></td>
    </tr>
    <tr class="">
        <th width="30%"></th>
        <td><input type="text" class="widefat" name="src[]" value="" /></td>
        <td><a class="button add-image" href="#">ADD IMAGE</a></td>
    </tr>
<tr class="empty-row screen-reader-text">
    <th width="30%"></th>
    <td><input type="text" class="widefat" name="src[]" value="" /></td>
    <td><a class="button add-image" href="#">ADD IMAGE</a></td>
</tr>

取而代之的是:

    <tr class="">
        <td><input type="text" class="widefat" name="title[]" /></td>
        <td><input type="text" class="widefat" name="alt[]" /></td>
        <td><a class="button remove-row" href="#">DEL</a></td>
    </tr>
    <tr class="">
        <th width="30%"></th>
        <td><input type="text" class="widefat" name="src[]" value="" /></td>
        <td><a class="button add-image" href="#">ADD IMAGE</a></td>
    </tr>
<!-- empty hidden one for jQuery -->
<tr class="empty-row screen-reader-text">
    <td><input type="text" class="widefat" name="title[]" /></td>
    <td><input type="text" class="widefat" name="alt[]" /></td>
    <td><a class="button remove-row" href="#">DEL</a></td>
</tr>
<tr class="empty-row screen-reader-text">
    <th width="30%"></th>
    <td><input type="text" class="widefat" name="src[]" value="" /></td>
    <td><a class="button add-image" href="#">ADD IMAGE</a></td>
</tr>

可以解决在第一个 ID 中添加一个 ID 的问题:<tr>

<!-- empty hidden one for jQuery -->
<tr id="clonable" class="empty-row screen-reader-text">

并在以下方面进行调整:$('.add-row').on('click', ...);

row.removeClass('empty-row screen-reader-text');
row.removeAttr('id');
row.insertBefore('#clonable');