1

我正在创建一个带有自定义帖子类型的 wordpress 插件，并在该帖子中键入自定义元框。

在元框中，我有一个让用户输入的表单：日期、媒体、标题。

表格如下所示：

$mc_date = get_post_meta($_GET['post'],'mc_date',true);
$mc_media = get_post_meta($_GET['post'],'mc_media',true);
$mc_title = get_post_meta($_GET['post'],'mc_title',true);

echo '<form id="add_media_form">';
echo '<table>';
echo    '<tr>';
echo        '<td>Date</td><td>Media</td><td>Title</td>';
echo    '</tr>';
echo  '<tr>';
echo        '<td><input type="text" name="mc_date" value="'.$mc_date.'" class="datepicker"/></td>';
echo        '<td><input type="text" name="mc_media" value="'.$mc_media.'" /></td>';
echo        '<td><input type="text" name="mc_title" value="'.$mc_title.'" /></td>';
echo        '<td><a href="#" class="add_new_media" rel="'.WP_PLUGIN_URL.'/mc"><img src="'.WP_PLUGIN_URL.'/mc/plus.png" /></a></td>';
echo  '</tr>';
echo '</table>';
echo '</form>';
echo '<div class="addmedianotify"></div>';

jQuery：

jQuery('.add_new_media').click(function(e){
    var plug = jQuery(this).attr('rel');
    e.preventDefault();
    jQuery.post(plug + '/ajax_add_media.php',jQuery('#add_media_form').serialize(),function(data){
        jQuery('.addmedianotify').html('<span>'+data+'</span>');
    });
});

我想要做的是，当用户单击“add_new_media”链接/图像时，会出现一组新的日期、媒体和标题文本框。

我主要担心的是，命名这些动态输入的诀窍是什么。并保存和检索其中的自定义数据。

4

1 回答 1

4

因为当用户单击“更新”时页面仍会更新，所以您需要能够将字段保存在 save_post 和 ajax 中。为此使用 ajax 可能不是最好的方法，因为您需要两次保存该数据，从而为自己做更多的工作。我会放弃 ajax 并简单地使用一个html 数组，这样您就可以添加字段并在用户单击“更新”时进行一次提交。要根据用户需要添加新行，我只需克隆您的 tr 并将其附加到单击事件中的表中。就像是...

PHP 和 HTML

<a href="#" class="add_new_media"><img src="'.WP_PLUGIN_URL.'/mc/plus.png" /></a>
<table>
    <tr>
        <td>Date</td>
        <td>Media</td>
        <td>Title</td>
        <td></td>
    </tr>
    <?php
    //$mcs will be a multi-dimensional array with this method
    $mcs = get_post_meta($post->ID,'mcs',true);

    //Loop through each set of saved mc data (date, media, and title per item) and output inputs so the saved values can be edited and resaved. 
    foreach ($mcs as $mc) : ?>
    <tr>
        <td><input type="text" name="mc[][date]" value="<?php echo $mc['date'] ?>" class="datepicker"/></td>
        <td><input type="text" name="mc[][media]" value="<?php echo $mc['media'] ?>" /></td>
        <td><input type="text" name="mc[][title]" value="<?php echo $mc['title'] ?>" /></td>
        <td><a href="#" class="remove">Remove</a></td>
    </tr>
    <?php endforeach ?>
</table>

Javascript

<script>
    (function($){
        //Grab the first 
        $('.add_new_media').click(function(e) {
            //Use the first tr as a cookiecutter and add another cookie to the bowl :) 
            $('table tr:first-child')
                .clone()
                .appendTo($('table'))
                .find('input')
                    .val('')
        }
        $('.remove').click(function(){
            $(this).parent().parent().remove()
        })
    })(jQuery)
</script>

表单提交时的 PHP

<?php
    if ($_POST) : 

        //$_POST['mc'] is a multi-dimensional array of all the date/media/title input rows
        print_r($_POST['mc']);
        /*
            ..would look something like
            Array (
                [0] => Array (
                    'date' => 'some value',
                    'media' => 'some value',
                    'title' => 'some value'
                ),
                [1] => Array ( ... ),
                [2] => Array ( ... ) ... and so on
            )
        */

        //RUN INPUT VALIDATION!!

        //Update the list
        update_post_meta($post->ID, 'mcs', $_POST['mc']);
    endif;
?>
于 2012-06-30T21:35:51.770 回答