Question

我正在创建一个带有自定义帖子类型的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”链接/图片时，会出现一组新的日期，媒体和标题文本框。

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

Answer 1

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

PHP＆amp; 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;
?>

使用jquery $ .post在Wordpress自定义元框中添加“添加另一个”选项

1 个答案: