将自定义帖子与元对象和下拉列表一起使用

时间:2012-03-14 作者:Mike

在使用自定义帖子和添加Metabox时,我想知道如何添加一个下拉菜单来填充用户添加的数据。

例如,我希望能够使用下拉列表为帖子选择一个“源”,但我希望用户能够在该下拉列表中添加源。我曾尝试自己使用分类法对源代码进行分类,并尝试用这些分类法填充下拉列表,但我可能做错了。

你知道我该怎么做吗?

1 个回复
SO网友:Eric Allen

NOTE: 现在有点晚了,所以代码可能并不完美,但它应该会让您走上正确的轨道。

理论上,您可以只设置一个自定义分类法,然后用户可以只使用底部的文本框,然后使用分类法选择区域中的复选框。

我将假设您对这些内容使用标准的Post类型,但您可以在register\\u taxonomy调用中对其进行调整。

类似于:

register_taxonomy("post_source", array("post"), array("hierarchical" => true, "label" => "Sources", "singular_label" => "Source", "rewrite" => true));
但是,如果您设置在下拉列表中,则需要进行稍微不同的设置。

下面的代码将使用Ajax将新添加的源代码发送到DB,如果成功,则将该源代码添加到下拉列表中并自动选择。

Step 1: Create a Table for Storing Sources

您需要创建一个用于存储这些数据的表,以便在用户尝试添加新源时可以引用这些数据,并确保它不在数据库中。

而且,您需要将它们存储在某个位置,以便您可以将它们拉入下拉列表。

Step 2: Create the Meta Box

//run this function on admin_init
add_action(\'admin_init\',\'add_post_source_box\');
//add source selection box to post editor
function add_post_source_box() {
     add_meta_box("post_source_meta", "Post Source", "post_source", "post", "side", "high");
}

Step 3: Populate the Meta Box

//populate the post_source box
function post_source() {
     global $post;
     $custom = get_post_custom($post->ID);
 $post_source = $custom[\'post_source\'][0]; ?>

     <script type="text/javascript">
          jQuery(function() {
               jQuery("#post_source_add_button").click(function() {
                    var new_source = jQuery("$post_source_add").val();
                    var add_source = {"ajaxurl":"<?php echo get_bloginfo(\'wp_url\'); ?>/wp-admin/admin-ajax.php"};
                    if(new_source.length) {
                         jQuery.post(
                              add_source.ajaxurl,
                              {
                                  action: \'add_source\',
                                  source: new_source 
                              },
                              function(response,source_id) {
                                   if(response == \'success\') {
                                        $("#post_source_dropdown").append(\'<option></option>\').val(source_id).text(new_source);
                                        $("#post_source_dropdown").find(\'option\').each(function() {
                                             if(jQuery(this).is(\'selected\') {
                                                  jQuery(this).attr(\'selected\',\'false\');
                                             } else if(jQuery(this).attr(\'id\') == source_id) {
                                                  jQuery(this).attr(\'selected\',\'true\');
                                             }
                                        });
                                   } else {
                                        alert(\'Error adding source.\');
                                   }
                              }
                         );
                    }
               });
          });
     </script>

     <table cellpadding="0" cellspacing="5" border="0">
          <tr>
               <td><label for="post_source_dropdown">Post Source</label></td>
          </tr>
          <tr>
               <td>
                   <select name="post_source_dropdown" id="post_source_dropdown">
                        <option value="">Select a Source</option>

                        <?php //get the various sources already added
                        $global wpdb;
                        $sources = $wpdb->get_results("SELECT * FROM wp_post_sources ORDER BY source_name");
                        foreach($sources as $source) {
                             if($source->id == $post_source) {
                                  $selected = \' selected\';
                             } else {
                                  $selected = \'\';
                             }
                             echo \'<option value="\' . $source->id . \'"\' . $selected . \'>\' . $source->source_name . \'</option>\';
                        } ?>
               </td>
          </tr>
          <tr>
               <td><label for="post_source_add">Add New Source</label></td>
          </tr>
          <tr>
               <td>
                    <input type="text" name="post_source_add" id="post_source_add" value="" />
                    <br />
                    <input type="button" id="post_source_add_button" name="post_source_add_button" value="Add Source" />
               </td>
          </tr>
     </table>

<?php }
//populate the post_source box
function post_source() {
     global $post;
     $custom = get_post_custom($post->ID);
 $post_source = $custom[\'post_source\'][0]; ?>

     <script type="text/javascript">
          jQuery(function() {
               jQuery("#post_source_add_button").click(function() {
                    var new_source = jQuery("$post_source_add").val();
                    var add_source = {"ajaxurl":"<?php echo get_bloginfo(\'wp_url\'); ?>/wp-admin/admin-ajax.php"};
                    if(new_source.length) {
                         jQuery.post(
                              add_source.ajaxurl,
                              {
                                  action: \'add_source\',
                                  source: new_source 
                              },
                              function(response,source_id) {
                                   if(response == \'success\') {
                                        $("#post_source_dropdown").append(\'<option></option>\').val(source_id).text(new_source);
                                        $("#post_source_dropdown").find(\'option\').each(function() {
                                             if(jQuery(this).is(\'selected\') {
                                                  jQuery(this).attr(\'selected\',\'false\');
                                             } else if(jQuery(this).attr(\'id\') == source_id) {
                                                  jQuery(this).attr(\'selected\',\'true\');
                                             }
                                        });
                                   } else {
                                        alert(\'Error adding source.\');
                                   }
                              }
                         );
                    }
               });
          });
     </script>

     <table cellpadding="0" cellspacing="5" border="0">
          <tr>
               <td><label for="post_source_dropdown">Post Source</label></td>
          </tr>
          <tr>
               <td>
                   <select name="post_source_dropdown" id="post_source_dropdown">
                        <option value="">Select a Source</option>

                        <?php //get the various sources already added
                        $global wpdb;
                        $sources = $wpdb->get_results("SELECT * FROM wp_post_sources ORDER BY source_name");
                        foreach($sources as $source) {
                             if($source->id == $post_source) {
                                  $selected = \' selected\';
                             } else {
                                  $selected = \'\';
                             }
                             echo \'<option value="\' . $source->id . \'"\' . $selected . \'>\' . $source->source_name . \'</option>\';
                        } ?>
               </td>
          </tr>
          <tr>
               <td><label for="post_source_add">Add New Source</label></td>
          </tr>
          <tr>
               <td>
                    <input type="text" name="post_source_add" id="post_source_add" value="" />
                    <br />
                    <input type="button" id="post_source_add_button" name="post_source_add_button" value="Add Source" />
               </td>
          </tr>
     </table>

<?php }
 我建议您使用admin_enque_scripts 动作我只是在这里直接写了这个例子。

This post 在插件中使用Ajax有一个很大的缺陷,我真诚地建议您将其转化为插件,而不是将其丢弃到函数中。php。这样,如果您想要交换主题,就不必担心要记住从函数中移动内容。旧主题的php。

Step 5: Process the New Source via Ajax

我现在就把这件事交给你,因为已经很晚了,把所有这些东西都放在这里比我预期的要花更长的时间。只需确保将响应和添加到数据库的源ID发送回数据库即可。

编辑:我忘记了一个非常重要的部分,它在我链接的那篇文章中有概述,但应该再次指出,因为它确实是整个Ajax提交工作的关键。

//run this function when admin-ajax receives the action \'add_source\'
add_action(\'wp_ajax_add_source\',\'add_source_to_db\');
//add the new source to the db
function add_source_to_db() {
     //get the source from the $_POST array and then add it to the db
     //create the response object to send back to the JS function
}
现在,只需填写add\\u source\\u to\\u db函数,就可以了。

HINT: 您需要使用全局$wpdb对象插入新源,然后使用$wpdb->insert\\u id获取刚刚插入的源的id。

希望我所提供的可以让你开始。

如果您需要有关处理文件的帮助,请告诉我,我将尝试提供一些代码。然而,关于Ajax插件的链接应该包含使其工作所需的一切。

结束