我正在尝试创建一个新的wordpress模板，并在其中添加了一个控制面板，在这个控制面板中有一个选项，允许用户选择他想要在地图上放置的位置，我试图解释：用户可以通过控制面板设置div的左属性和顶部属性。现在我知道了如何添加iframe，该iframe可以显示更改的预览，但它不能按我所希望的那样工作（如何添加预览？请阅读此处：Modify CSS via Theme Control Panel) 我想补充的是real time 预览只要用户修改顶部或左侧属性，预览就必须显示正在发生的情况，而不向“实时”博客显示。

这是我的功能。php：

array( "name" => "Before we start",
    "type" => "section"),
array( "type" => "open"),
array( "name" => "Where is the map?",
    "desc" => "Insert map page url",
    "id" => $shortname."_pama",
    "type" => "text",
    "std" => "http://examplepage.com"),
array( "type" => "close"),
array( "name" => "Zona 1",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Activate zona 1?",
    "desc" => "Choose yes or no",
    "id" => $shortname."_zona1c",
    "type" => "checkbox",
    "std" => "false"),
array( "name" => "Zona 1 X-Axis",
    "desc" => "Where do you want it on x-axis?",
    "id" => $shortname."_zona1x",
    "type" => "text",
    "std" => "Left:???"),
array( "name" => "Zona 1 Y-Axis",
    "desc" => "Where do you want it on y-axis?",
    "id" => $shortname."_zona1y",
    "type" => "text",
    "std" => "Top:???"),
array( "type" => "close"),
array( "name" => "Zona 1",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Activate zona 2?",
    "desc" => "Choose yes or no",
    "id" => $shortname."_zona1c",
    "type" => "checkbox",
    "std" => "false"),
array( "name" => "Zona 2 X-Axis",
    "desc" => "Choose where you want it on X-Axis",
    "id" => $shortname."_zona2x",
    "type" => "text",
    "std" => "Left:???"),
array( "name" => "Zona 2 Y-Axis",
    "desc" => "Choose where you want it on Y-Axis",
    "id" => $shortname."_zona2y",
    "type" => "text",
    "std" => "Top:???"),
array( "type" => "close"),
array( "type" => "close"),
);

这是我用来显示控制面板内部预览的iframe：

<iframe src="<?php echo clean_url(apply_filters(\'preview_post_link\', add_query_arg(\'preview\', \'true\', get_option(\'appacqua_pama\')))); ?>" width="100%" height="600" ></iframe>

好的，现在最大的问题是有一种逐步添加实时预览的方法（我不知道如何更好地解释它，我真的很抱歉…），您认为使用ajax有什么可能？（我听说了，但我不是程序员，所以请用虚拟证明的方式写！！！）我是否还需要添加预览按钮而不是仅添加保存按钮？如何添加？你知道digitalnature的神秘主题吗？像这样的东西会很棒！如果你不能在这里写，为什么不在你的网站上写一个很好的，一步一步的教程呢？关于如何为wordpress 3创建一个具有许多功能的非常好的主题选项面板，目前还没有好的文章。也许你会是下一个，你也会帮助我们。。。可怜的noobs：-）非常感谢您的时间和耐心！

function mystique_get_site_preview() {
  check_ajax_referer("site_preview"); ?>
  <iframe id="themepreview" name="themepreview" src="<?php echo get_option(\'home\'); ?>/?preview=1"></iframe>
  <?php die();
}

$nonce = wp_create_nonce(\'site_preview\');
?>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#$zona1y").change(function() {// if a user changed the y-Axis
            check_preview_refresh();
            }
        );
        jQuery("#$zona1x").change(function() {// if a user changed the x-Axis
            check_preview_refresh();
            }
        );
    });

    function check_preview_refresh(){
        if (jQuery("#zona1y").val() != \'\' && jQuery("#zona1x").val() != \'\' ){
            jQuery.ajax({
                type: "post",url: "admin-ajax.php",data: { action: \'site_preview\', _ajax_nonce: \'<?php echo $nonce; ?>\' },
                success: function(html){
                    jQuery("#themepreview").html(html);
                    jQuery("#themepreview").show();
                }
            });
        }
    }
</script>

add_action(\'wp_ajax_site_preview\', \'mystique_get_site_preview\');

<input name="page_width" />

// event can be anything, click/change/input or a custom colorpicker event...
$("input[name=\'page_width\']").change(function(){

  // get the value entered by the user
  var current_page_width = $(this).val();

  // send this value trough postMessage to the iframe document
  pm({
    target: window.frames["themepreview"],  // this needs to be the iframe ID
    type: \'page_width\',
    data: current_page_width
  });
});

// first argument should be the "type" from above
pm.bind(\'page_width\', function(data){

  // data that\'s being received is the \'current_page_width\', so just set the new width to the element you need to
  $(\'#page\').css(\'width\', data + \'px\');

});