大家好，几天来我一直在尝试向我的主题选项面板添加一些新功能，您可以在这里看到我的问题：
- How to add an export function to a custom Option Theme Page
- Add a preview to a Wordpress Control Panel
- Modify CSS via Theme Control Panel
无论如何，我的新想法是增加拖动的可能性&；放下一些div，把它们放在地图上，保存它们的位置，并在我的网站中显示它们。
我试着更好地解释它。
实际上，在我的选项面板中，我有10个功能：zona1、zona2、zona3。。。。。有4个值：
选中zona1c=复选框以选择是否要显示它，zona1x=X Axys位置（更改左侧CSS属性）
zona1y=X Axys位置（更改底部CSS属性） - zona1l=用户必须写入链接到此点的帖子的URL，因此，如果我在zona1x中写入值，zona1c设置为TRUE，则会显示我网站中的div。
但我想改进这一点，因为有时我会犯错，所以我不想在一切都好之前“活下去”。
我想让你教我的是如何添加该页面的预览，如果zona1c设置为true，我希望能够在预览中移动此DIV（在我的管理面板中可见），选择正确的位置，将其删除并保存。
对于我的问题，有什么简单的或循序渐进的（请，我想学习一些新的）解决方案吗？
非常感谢大家！
让我们从代码开始：
这是我的职能。php：http://pastebin.com/8cVmne1s
这是我的管理面板。php：http://pastebin.com/xX8G4Zxr 或：
这是我想用DRAG&；移动的div的css样式表；滴(only in backend): http://pastebin.com/pih7yaT1 或：<?php /** Declare the themename and shortname -- Ecco il nome del template e la sua abbreviazione **/ $themename = "Appartamenti Acquario"; $shortname = "appaqua"; /** Set the array with all the theme options -- Impostiamo l\'array con tutte le opzioni del tema **/ $options = array ( array( "desc" => "<h3>IMPOSTAZIONI GENERALI</h3>", "type" => "title"), array( "name" => "Prima di cominciare", "type" => "section"), array( "type" => "open"), array( "name" => "Link pagina mappa", "desc" => "Inserisci il link alla pagina della mappa", "id" => $shortname."_pama", "type" => "text", "std" => " "), array( "type" => "close"), array( "name" => "General", "type" => "section"), array( "type" => "open"), array( "name" => "Logo URL", "desc" => "Inserisci il link all\'immagine del tuo logo", "id" => $shortname."_logo", "type" => "text", "std" => " "), array( "type" => "close"), array( "name" => "Homepage", "type" => "section"), array( "type" => "open"), array( "name" => "Homepage Immagine Slide 1", "desc" => "Inserisci il link alla prima immagine degli slide", "id" => $shortname."_header_img", "type" => "text", "std" => "http://nextube.info/images/ImmijQuery/image-1.jpg"), array( "name" => "Homepage Immagine Slide 2", "desc" => "Inserisci il link alla seconda immagine degli slide", "id" => $shortname."_header_img2", "type" => "text", "std" => "http://nextube.info/images/ImmijQuery/image-2.jpg"), array( "name" => "Homepage Immagine Slide 3", "desc" => "Inserisci il link alla terza immagine degli slide", "id" => $shortname."_header_img3", "type" => "text", "std" => "http://nextube.info/images/ImmijQuery/image-3.jpg"), array( "name" => "Homepage Immagine Slide 4", "desc" => "Inserisci il link alla quarta immagine degli slide", "id" => $shortname."_header_img4", "type" => "text", "std" => "http://nextube.info/images/ImmijQuery/image-4.jpg"), array( "name" => "Homepage Immagine Slide 5", "desc" => "Inserisci il link alla quinta immagine degli slide", "id" => $shortname."_header_img5", "type" => "text", "std" => "http://nextube.info/images/ImmijQuery/image-5.jpg"), array( "name" => "Homepage Immagine Slide 6", "desc" => "Inserisci il link alla sesta immagine degli slide", "id" => $shortname."_header_img6", "type" => "text", "std" => "http://nextube.info/images/ImmijQuery/image-6.jpg"), array( "type" => "close"), array( "name" => "Footer", "type" => "section"), array( "type" => "open"), array( "name" => "Google Analytics Code", "desc" => "Inserisci il tuo codice Google Analytics per tracciare le visite che ricevi.", "id" => $shortname."_ga_code", "type" => "textarea", "std" => ""), array( "type" => "close"), array( "name" => "Social", "type" => "section"), array( "type" => "open"), array( "name" => "Indirizzo Feed", "desc" => "Feedburner è un sistema fornito da Google per ottimizzare la distribuzione dei tuoi feed, inserisci qui il link al tuo feed", "id" => $shortname."_feedburner", "type" => "text", "std" => get_bloginfo(\'rss2_url\')), array( "name" => "Facebook URL", "desc" => "Inserisci il link alla tua pagina Facebook", "id" => $shortname."_facebook", "type" => "text", "std" => "http://facebook.com/pages/Downloadtaky/325661998362"), array( "name" => "Twitter URL", "desc" => "Inserisci il link al tuo account Twitter", "id" => $shortname."_twitter", "type" => "text", "std" => "http://twitter.com/downloadtaky"), array( "type" => "close"), array( "name" => "Punti sulla mappa", "type" => "section"), array( "type" => "open"), /** Copia da qui per aggiungere un nuovo punto - start copy to add a new point on the map **/ array( "name" => "Zona 1", "type" => "section"), array( "type" => "open"), array( "name" => "Attivare zona 1?", "desc" => "Seleziona se vuoi il primo fermaposto", "id" => $shortname."_zona1c", "type" => "checkbox", "std" => "false"), array( "name" => "Zona 1 Nome", "desc" => "Inserisci il nome del primo appartamento", "id" => $shortname."_zona1n", "type" => "text", "std" => "Nome dell\'appartamento"), array( "name" => "Zona 1 Asse x", "desc" => "Scegli dove posizionare il primo punto, se attivato asse x", "id" => $shortname."_zona1x", "type" => "text", "std" => "Left:???"), array( "name" => "Zona 1 Asse y", "desc" => "Scegli dove posizionare il primo punto, se attivato asse y", "id" => $shortname."_zona1y", "type" => "text", "std" => "Top:???"), array( "name" => "Zona 1 URL", "desc" => "Inserisci il link al post della zona 1", "id" => $shortname."_zona1l", "type" => "text", "std" => "Indirizzo del post qui"), array( "type" => "close"), /** Copia fino a qui e rinomina progressivamente in zona2, zona3, zona4 ecc -- Copy from here to add a new zone like zone3, zone 4 and so on**/ array( "name" => "Zona 2", "type" => "section"), array( "type" => "open"), array( "name" => "Attivare zona 2?", "desc" => "Seleziona se vuoi il secondo fermaposto", "id" => $shortname."_zona2c", "type" => "checkbox", "std" => "false"), array( "name" => "Zona 2 Nome", "desc" => "Inserisci il nome del secondo appartamento", "id" => $shortname."_zona2n", "type" => "text", "std" => "Nome dell\'appartamento"), array( "name" => "Zona 2 Asse x", "desc" => "Scegli dove posizionare il secondo punto, se attivato asse x", "id" => $shortname."_zona2x", "type" => "text", "std" => "Left:???"), array( "name" => "Zona 2 Asse y", "desc" => "Scegli dove posizionare il secondo punto, se attivato asse y", "id" => $shortname."_zona2y", "type" => "text", "std" => "Top:???"), array( "name" => "Zona 2 URL", "desc" => "Inserisci il link al post della zona 2", "id" => $shortname."_zona2l", "type" => "text", "std" => "Indirizzo del post qui"), array( "type" => "close"), array( "name" => "Zona 3", "type" => "section"), array( "type" => "open"), array( "name" => "Attivare zona 3?", "desc" => "Seleziona se vuoi il terzo fermaposto", "id" => $shortname."_zona3c", "type" => "checkbox", "std" => "false"), array( "name" => "Zona 3 Nome", "desc" => "Inserisci il nome del terzo appartamento", "id" => $shortname."_zona3n", "type" => "text", "std" => "Nome dell\'appartamento"), array( "name" => "Zona 3 Asse x", "desc" => "Scegli dove posizionare il terzo punto, se attivato asse x", "id" => $shortname."_zona3x", "type" => "text", "std" => "Left:???"), array( "name" => "Zona 3 Asse y", "desc" => "Scegli dove posizionare il terzo punto, se attivato asse y", "id" => $shortname."_zona3y", "type" => "text", "std" => "Top:???"), array( "name" => "Zona 3 URL", "desc" => "Inserisci il link al post della zona 3", "id" => $shortname."_zona3l", "type" => "text", "std" => "Indirizzo del post qui"), array( "type" => "close"), array( "name" => "Zona 4", "type" => "section"), array( "type" => "open"), array( "name" => "Attivare zona 4?", "desc" => "Seleziona se vuoi il quarto fermaposto", "id" => $shortname."_zona4c", "type" => "checkbox", "std" => "false"), array( "name" => "Zona 4 Nome", "desc" => "Inserisci il nome del quarto appartamento", "id" => $shortname."_zona4n", "type" => "text", "std" => "Nome dell\'appartamento"), array( "name" => "Zona 4 Asse x", "desc" => "Scegli dove posizionare il quarto punto, se attivato asse x", "id" => $shortname."_zona4x", "type" => "text", "std" => "Left:???"), array( "name" => "Zona 4 Asse y", "desc" => "Scegli dove posizionare il quarto punto, se attivato asse y", "id" => $shortname."_zona4y", "type" => "text", "std" => "Top:???"), array( "name" => "Zona 4 URL", "desc" => "Inserisci il link al post della zona 4", "id" => $shortname."_zona4l", "type" => "text", "std" => "Indirizzo del post qui"), array( "type" => "close"), array( "name" => "Zona 5", "type" => "section"), array( "type" => "open"), array( "name" => "Attivare zona 5?", "desc" => "Seleziona se vuoi il quinto fermaposto", "id" => $shortname."_zona5c", "type" => "checkbox", "std" => "false"), array( "name" => "Zona 5 Nome", "desc" => "Inserisci il nome del quinto appartamento", "id" => $shortname."_zona5n", "type" => "text", "std" => "Nome dell\'appartamento"), array( "name" => "Zona 5 Asse x", "desc" => "Scegli dove posizionare il quinto punto, se attivato asse x", "id" => $shortname."_zona5x", "type" => "text", "std" => "Left:???"), array( "name" => "Zona 5 Asse y", "desc" => "Scegli dove posizionare il quinto punto, se attivato asse y", "id" => $shortname."_zona5y", "type" => "text", "std" => "Top:???"), array( "name" => "Zona 5 URL", "desc" => "Inserisci il link al post della zona 5", "id" => $shortname."_zona5l", "type" => "text", "std" => "Indirizzo del post qui"), array( "type" => "close"), array( "name" => "Zona 6", "type" => "section"), array( "type" => "open"), array( "name" => "Attivare zona 6?", "desc" => "Seleziona se vuoi il sesto fermaposto", "id" => $shortname."_zona6c", "type" => "checkbox", "std" => "false"), array( "name" => "Zona 6 Nome", "desc" => "Inserisci il nome del sesto appartamento", "id" => $shortname."_zona6n", "type" => "text", "std" => "Nome dell\'appartamento"), array( "name" => "Zona 6 Asse x", "desc" => "Scegli dove posizionare il sesto punto, se attivato asse x", "id" => $shortname."_zona6x", "type" => "text", "std" => "Left:???"), array( "name" => "Zona 6 Asse y", "desc" => "Scegli dove posizionare il sesto punto, se attivato asse y", "id" => $shortname."_zona6y", "type" => "text", "std" => "Top:???"), array( "name" => "Zona 6 URL", "desc" => "Inserisci il link al post della zona 6", "id" => $shortname."_zona6l", "type" => "text", "std" => "Indirizzo del post qui"), array( "type" => "close"), array( "name" => "Zona 7", "type" => "section"), array( "type" => "open"), array( "name" => "Attivare zona 7?", "desc" => "Seleziona se vuoi il settimo fermaposto", "id" => $shortname."_zona7c", "type" => "checkbox", "std" => "false"), array( "name" => "Zona 7 Nome", "desc" => "Inserisci il nome del settimo appartamento", "id" => $shortname."_zona7n", "type" => "text", "std" => "Nome dell\'appartamento"), array( "name" => "Zona 7 Asse x", "desc" => "Scegli dove posizionare il settimo punto, se attivato asse x", "id" => $shortname."_zona7x", "type" => "text", "std" => "Left:???"), array( "name" => "Zona 7 Asse y", "desc" => "Scegli dove posizionare il settimo punto, se attivato asse y", "id" => $shortname."_zona7y", "type" => "text", "std" => "Top:???"), array( "name" => "Zona 7 URL", "desc" => "Inserisci il link al post della zona 7", "id" => $shortname."_zona7l", "type" => "text", "std" => "Indirizzo del post qui"), array( "type" => "close"), array( "name" => "Zona 8", "type" => "section"), array( "type" => "open"), array( "name" => "Attivare zona 8?", "desc" => "Seleziona se vuoi l/\'ottavo fermaposto", "id" => $shortname."_zona8c", "type" => "checkbox", "std" => "false"), array( "name" => "Zona 8 Nome", "desc" => "Inserisci il nome dell/\'ottavo appartamento", "id" => $shortname."_zona8n", "type" => "text", "std" => "Nome dell\'appartamento"), array( "name" => "Zona 8 Asse x", "desc" => "Scegli dove posizionare l/\'ottavo punto, se attivato asse x", "id" => $shortname."_zona8x", "type" => "text", "std" => "Left:???"), array( "name" => "Zona 8 Asse y", "desc" => "Scegli dove posizionare l/\' ottavo punto, se attivato asse y", "id" => $shortname."_zona8y", "type" => "text", "std" => "Top:???"), array( "name" => "Zona 8 URL", "desc" => "Inserisci il link al post della zona 8", "id" => $shortname."_zona8l", "type" => "text", "std" => "Indirizzo del post qui"), array( "type" => "close"), array( "name" => "Zona 9", "type" => "section"), array( "type" => "open"), array( "name" => "Attivare zona 9?", "desc" => "Seleziona se vuoi il nono fermaposto", "id" => $shortname."_zona9c", "type" => "checkbox", "std" => "false"), array( "name" => "Zona 9 Nome", "desc" => "Inserisci il nome del nono appartamento", "id" => $shortname."_zona9n", "type" => "text", "std" => "Nome dell\'appartamento"), array( "name" => "Zona 9 Asse x", "desc" => "Scegli dove posizionare il nono punto, se attivato asse x", "id" => $shortname."_zona9x", "type" => "text", "std" => "Left:???"), array( "name" => "Zona 9 Asse y", "desc" => "Scegli dove posizionare il nono punto, se attivato asse y", "id" => $shortname."_zona9y", "type" => "text", "std" => "Top:???"), array( "name" => "Zona 9 URL", "desc" => "Inserisci il link al post della zona 9", "id" => $shortname."_zona9l", "type" => "text", "std" => "Indirizzo del post qui"), array( "type" => "close"), array( "name" => "Zona 10", "type" => "section"), array( "type" => "open"), array( "name" => "Attivare zona 10?", "desc" => "Seleziona se vuoi il decimo fermaposto", "id" => $shortname."_zona10c", "type" => "checkbox", "std" => "false"), array( "name" => "Zona 10 Nome", "desc" => "Inserisci il nome del decimo appartamento", "id" => $shortname."_zona10n", "type" => "text", "std" => "Nome dell\'appartamento"), array( "name" => "Zona 10 Asse x", "desc" => "Scegli dove posizionare il decimo punto, se attivato asse x", "id" => $shortname."_zona10x", "type" => "text", "std" => "Left:???"), array( "name" => "Zona 10 Asse y", "desc" => "Scegli dove posizionare il decimo punto, se attivato asse y", "id" => $shortname."_zona10y", "type" => "text", "std" => "Top:???"), array( "name" => "Zona 10 URL", "desc" => "Inserisci il link al post della zona 10", "id" => $shortname."_zona10l", "type" => "text", "std" => "Indirizzo del post qui"), array( "type" => "close"), array( "type" => "close"), ); function appaqua_add_admin() { global $themename, $shortname, $options; if ( $_GET[\'page\'] == basename(__FILE__) ) { if ( \'save\' == $_REQUEST[\'action\'] ) { foreach ($options as $value) { update_option( $value[\'id\'], $_REQUEST[ $value[\'id\'] ] ); } foreach ($options as $value) { if( isset( $_REQUEST[ $value[\'id\'] ] ) ) { update_option( $value[\'id\'], $_REQUEST[ $value[\'id\'] ] ); } else { delete_option( $value[\'id\'] ); } } header("Location: admin.php?page=admin-panel.php&saved=true"); die; } else if( \'reset\' == $_REQUEST[\'action\'] ) { foreach ($options as $value) { delete_option( $value[\'id\'] ); } header("Location: admin.php?page=admin-panel.php&reset=true"); die; } } add_menu_page($themename, $themename, \'administrator\', basename(__FILE__), \'appaqua_admin\'); } function appaqua_add_init() { $file_dir=get_bloginfo(\'template_directory\'); wp_enqueue_style("functions", $file_dir."/includes/css/functions.css", false, "1.0", "all"); wp_enqueue_script("rm_script", $file_dir."/includes/js/rm_script.js", false, "1.0"); wp_enqueue_script("site_preview", $file_dir."/includes/js/preview.js", false, "1.0"); }; function appaqua_admin() { global $themename, $shortname, $options; $i=0; if ( $_REQUEST[\'saved\'] ) echo \'<div id="message" class="updated fade"><p><strong>\'.$themename.\' settings saved.</strong></p></div>\'; if ( $_REQUEST[\'reset\'] ) echo \'<div id="message" class="updated fade"><p><strong>\'.$themename.\' settings reset.</strong></p></div>\'; ?> <div class="wrap rm_wrap"> <h2><?php echo $themename; ?> Settings</h2> <div class="rm_opts"> <form method="post"> <?php foreach ($options as $value) { switch ( $value[\'type\'] ) { case "open": ?> <?php break; case "close": ?> </div> </div> <br /> <?php break; case "title": ?> <p>To easily use the <?php echo $themename;?> theme, you can use the menu below.</p> <?php break; case \'text\': ?> <div class="rm_input rm_text"> <label for="<?php echo $value[\'id\']; ?>"><?php echo $value[\'name\']; ?></label> <input name="<?php echo $value[\'id\']; ?>" id="<?php echo $value[\'id\']; ?>" type="<?php echo $value[\'type\']; ?>" value="<?php if ( get_settings( $value[\'id\'] ) != "") { echo stripslashes(get_settings( $value[\'id\']) ); } else { echo $value[\'std\']; } ?>" /> <small><?php echo $value[\'desc\']; ?></small><div class="clearfix"></div> </div> <?php break; case \'textarea\': ?> <div class="rm_input rm_textarea"> <label for="<?php echo $value[\'id\']; ?>"><?php echo $value[\'name\']; ?></label> <textarea name="<?php echo $value[\'id\']; ?>" type="<?php echo $value[\'type\']; ?>" cols="" rows=""><?php if ( get_settings( $value[\'id\'] ) != "") { echo stripslashes(get_settings( $value[\'id\']) ); } else { echo $value[\'std\']; } ?></textarea> <small><?php echo $value[\'desc\']; ?></small><div class="clearfix"></div> </div> <?php break; case \'select\': ?> <div class="rm_input rm_select"> <label for="<?php echo $value[\'id\']; ?>"><?php echo $value[\'name\']; ?></label> <select name="<?php echo $value[\'id\']; ?>" id="<?php echo $value[\'id\']; ?>"> <?php foreach ($value[\'options\'] as $option) { ?> <option <?php if (get_settings( $value[\'id\'] ) == $option) { echo \'selected="selected"\'; } ?>><?php echo $option; ?></option><?php } ?> </select> <small><?php echo $value[\'desc\']; ?></small><div class="clearfix"></div> </div> <?php break; case "checkbox": ?> <div class="rm_input rm_checkbox"> <label for="<?php echo $value[\'id\']; ?>"><?php echo $value[\'name\']; ?></label> <?php if(get_option($value[\'id\'])){ $checked = "checked=\\"checked\\""; }else{ $checked = "";} ?> <input type="checkbox" name="<?php echo $value[\'id\']; ?>" id="<?php echo $value[\'id\']; ?>" value="true" <?php echo $checked; ?> /> <small><?php echo $value[\'desc\']; ?></small><div class="clearfix"></div> </div> <?php break; case "section": $i++; ?> <div class="rm_section"> <div class="rm_title"><h3><img src="<?php bloginfo(\'template_directory\')?>/includes/css/images/trans.png" class="inactive" alt="""><?php echo $value[\'name\']; ?></h3><span class="submit"><input name="save<?php echo $i; ?>" type="submit" value="Save changes" /> </span><div class="clearfix"></div></div> <div class="rm_options"> <?php break; } } ?> <input type="hidden" name="action" value="save" /> </form> <form method="post"> <p class="submit"> <input name="reset" type="submit" value="Reset" /> <input type="hidden" name="action" value="reset" /> </p> </form> <div style="font-size:9px; margin-bottom:10px;">Icons: <a href="http://www.woothemes.com/2009/09/woofunction/">WooFunction</a></div> </div> <iframe id="themepreview" name="themepreview" src="<?php echo get_option(\'appaqua_pama\'); ?>/?preview=1"></iframe> <?php } ?> <?php $nonce = wp_create_nonce(\'site_preview\'); ?> <?php add_action(\'admin_init\', \'appaqua_add_init\'); add_action(\'admin_menu\', \'appaqua_add_admin\'); ?>
我希望有人能帮助我，如果你需要更多信息，请询问。。。非常感谢大家！<?php define(\'WP_USE_THEMES\', true); require(\'./wp-blog-header.php\');?> .mappa{width:960px;height:394px;background:url(<?php bloginfo(template_url);?>/mappa/images/mappa.png);margin:0 auto;} #zona1{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option(\'appaqua_zona1x\');?>px;left:<?php echo get_option(\'appaqua_zona1y\');?>px;} #zona2{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option(\'appaqua_zona2x\');?>px;left:<?php echo get_option(\'appaqua_zona2y\');?>px;} #zona3{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option(\'appaqua_zona3x\');?>px;left:<?php echo get_option(\'appaqua_zona3y\');?>px;} #zona4{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option(\'appaqua_zona4x\');?>px;left:<?php echo get_option(\'appaqua_zona4y\');?>px;} #zona5{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option(\'appaqua_zona5x\');?>px;left:<?php echo get_option(\'appaqua_zona5y\');?>px;} #zona6{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option(\'appaqua_zona6x\');?>px;left:<?php echo get_option(\'appaqua_zona6y\');?>px;} #zona7{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option(\'appaqua_zona7x\');?>px;left:<?php echo get_option(\'appaqua_zona7y\');?>px;} #zona8{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option(\'appaqua_zona8x\');?>px;left:<?php echo get_option(\'appaqua_zona8y\');?>px;} #zona9{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option(\'appaqua_zona9x\');?>px;left:<?php echo get_option(\'appaqua_zona9y\');?>px;} #zona10{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option(\'appaqua_zona10x\');?>px;left:<?php echo get_option(\'appaqua_zona10y\');?>px;}