我想你最终会得到这样的结果：
主题方式
如果你想把这个逻辑放在你的模板中，正如你在问题中所说的那样，有相当多的编码。
您需要：
创建元盒在该元盒中创建内容（字段和描述）-在元盒文档中称为“回调”，创建从元盒保存数据的逻辑在前端检索数据
/**
* Adds a box to "advanced" part on the Post and Page edit screens.
* - See the different screens defined in $screens array.
*/
function mybackground_add_meta_box() {
$screens = array( \'post\', \'page\' );
foreach ( $screens as $screen ) {
// https://codex.wordpress.org/Function_Reference/add_meta_box - add_meta_box(), see for further params
add_meta_box(
\'background_of_box\', // HTML \'id\' attribute of the edit screen section
__( \'Box background\', \'mytheme_textdomain\' ), // Title of the edit screen section, visible to user
\'mybackground_meta_box_callback\', // Function that prints out the HTML for the edit screen section.
$screen // Which writing screen (\'post\',\'page\',\'dashboard\',\'link\',\'attachment\',\'custom_post_type\',\'comment\')
);
}
}
add_action( \'add_meta_boxes\', \'mybackground_add_meta_box\' );
在这里您可以看到，添加了一个动作，该动作在
add_meta_boxes - 这意味着，当Wordpress构建用于书写屏幕的元框时，它将调用我们的自定义
mybackground_add_meta_box() 功能也一样。
创建内容
/**
* Prints the box content.
*
* @param WP_Post $post The object for the current post/page.
*/
function mybackground_meta_box_callback( $post, $box ) {
// Add a nonce field so we can check for it later.
wp_nonce_field( \'mybackground_meta_box_data\', \'mybackground_meta_box_nonce\' );
/*
* Use get_post_meta() to retrieve an existing value
* from the database and use the value for the form.
*/
$value = get_post_meta( $post->ID, \'_my_background\', true );
// Enqueues all scripts, styles, settings, and templates necessary to use all media JavaScript APIs.
wp_enqueue_media();
?>
<p>
<label for="meta-image"><?php _e( \'Background pick\', \'mytheme_textdomain\' )?></label>
<?php if ( isset ( $value ) ) : ?>
<img src="<?php echo $value ?>" alt="Preview" width="50" height="50" id="background-image-preview">
<?php endif; ?>
<input type="hidden" name="background-image" id="background-image" value="<?php echo ( isset ( $value ) ? $value : \'\' ); ?>" />
<input type="button" id="background-image-button" class="button" value="<?php _e( \'Choose or Upload background\', \'mytheme_textdomain\' )?>" />
</p>
<script type="text/javascript">
/*
* Attaches the image uploader to the input field
*/
jQuery(document).ready(function($){
// Instantiates the variable that holds the media library frame.
var background_image_frame;
// Runs when the image button is clicked.
$(\'#background-image-button\').click(function(e){
// Prevents the default action from occuring.
e.preventDefault();
// If the frame already exists, re-open it.
if ( background_image_frame ) {
background_image_frame.open();
return;
}
// Sets up the media library frame
background_image_frame = wp.media.frames.background_image_frame = wp.media({
title: \'<?php _e( \'Background selection\', \'mytheme_textdomain\' )?>\',
button: { text: \'<?php _e( \'Pick background image\', \'mytheme_textdomain\' )?>\' },
library: { type: \'image\' }
});
// Runs when an image is selected.
background_image_frame.on(\'select\', function(){
// Grabs the attachment selection and creates a JSON representation of the model.
var media_attachment = background_image_frame.state().get(\'selection\').first().toJSON();
// Sends the attachment URL to our custom image input field.
$(\'#background-image\').val(media_attachment.url);
// Sets the preview image to the same value
$(\'#background-image-preview\').attr(\'src\', media_attachment.url);
});
// Opens the media library frame.
background_image_frame.open();
});
});
</script>
<?php
}
好的，这里有很多代码，因为还有用于媒体选择器的javascript逻辑。此特定WP API记录在
Codex, 但对于这个具体的例子，我用了这个
guide, 在那里它被描述得很好。此外，您可能会发现，在该函数中加载所有这些javascript逻辑平原是一种糟糕的方法，最好将其作为一个独立文件放在一边<请注意，这不必挂接，因为它定义为add\\u meta\\u box\\u函数的回调
保存数据
/**
* When the post is saved, saves our custom data.
*
* @param int $post_id The ID of the post being saved.
*/
function mybackground_meta_box_box_data( $post_id, $post ) {
// SECURITY AND AUTOSAVE
/*
* We need to verify this came from our screen and with proper authorization,
* because the save_post action can be triggered at other times.
*/
// Check if our nonce is set.
if ( ! isset( $_POST[\'mybackground_meta_box_nonce\'] ) ) {
return;
}
// Verify that the nonce is valid.
if ( ! wp_verify_nonce( $_POST[\'mybackground_meta_box_nonce\'], \'mybackground_meta_box_data\' ) ) {
return;
}
// If this is an autosave, our form has not been submitted, so we don\'t want to do anything.
if ( defined( \'DOING_AUTOSAVE\' ) && DOING_AUTOSAVE ) {
return;
}
// Check the user\'s permissions.
if ( isset( $_POST[\'post_type\'] ) && \'page\' == $_POST[\'post_type\'] ) {
if ( ! current_user_can( \'edit_page\', $post_id ) ) {
return;
}
} else {
if ( ! current_user_can( \'edit_post\', $post_id ) ) {
return;
}
}
/* OK, it\'s safe for us to save the data now. */
// Make sure that it is set.
if ( ! isset( $_POST[\'background-image\'] ) ) {
return;
}
// HERE STARTS THE ACTUAL FUNCTIONALITY
// Sanitize user input.
$my_data = sanitize_text_field( $_POST[\'background-image\'] );
// Update the meta field in the database.
update_post_meta( $post_id, \'_my_background\', $my_data );
}
add_action( \'save_post\', \'mybackground_meta_box_box_data\' );
这是另一个钩子，save\\u post和我们的自定义逻辑。基本上是1:1
Codex 对于add\\u meta\\u box（）函数，只需交换POST字段名称。
检索数据
最后，当您需要在前端获取数据时，您可以转到模板并使用类似以下内容：
$background_image_url = get_post_meta( get_the_ID(), \'_my_background\', true );
get_post_meta() 使用您当前的帖子ID、要检索的字段的键（可选）以及只需要一个或所有元的任何内容（可选-未设置返回所有自定义字段）。
也就是说，我实际上会选择插件的方式。
通过用户界面设置元框。
检索数据
要检索数据，您可以使用函数get\\u field（）或the\\u field（）-无论您想立即返回值还是打印值（与WP中的命名约定相同）。
get_field(\'your_field_name\');
来源和进一步阅读
http://themefoundation.com/wordpress-meta-boxes-guide/https://codex.wordpress.org/Function_Reference/add_meta_boxhttp://www.smashingmagazine.com/2011/10/04/create-custom-post-meta-boxes-wordpress/