css - 创建一个 Wordpress 元框来控制每个帖子/页面的配色方案

Question

我目前正在研究如何创建一个带有选择标签的 WordPress 元框，用于控制每个帖子/页面的配色方案。我想创造一种情况，我可以使用 if 语句加载一个额外的 CSS 文件，该文件使用 functions.php 中的 wp_enqueue_style 函数覆盖原始 CSS 文件的颜色。

到目前为止，我使用了 WordPress codex 中的以下代码来添加元框并从 get_post_meta 输出值。代码目前以插件的形式存在。

元框代码:http://codex.wordpress.org/Function_Reference/add_meta_box

<?php

/**
 * Adds a box to the main column on the Post and Page edit screens.
 */
function myplugin_add_meta_box() {

	$screens = array( 'post', 'page' );

	foreach ( $screens as $screen ) {

		add_meta_box(
			'myplugin_sectionid',
			__( 'My Post Section Title', 'myplugin_textdomain' ),
			'myplugin_meta_box_callback',
			$screen
		);
	}
}
add_action( 'add_meta_boxes', 'myplugin_add_meta_box' );

/**
 * Prints the box content.
 * 
 * @param WP_Post $post The object for the current post/page.
 */
function myplugin_meta_box_callback( $post ) {

	// Add an nonce field so we can check for it later.
	wp_nonce_field( 'myplugin_meta_box', 'myplugin_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_meta_value_key', true );

	echo '<label for="myplugin_new_field">';
	_e( 'Description for this field', 'myplugin_textdomain' );
	echo '</label> ';
	echo '<input type="text" id="myplugin_new_field" name="myplugin_new_field" value="' . esc_attr( $value ) . '" size="25" />';
}

/**
 * When the post is saved, saves our custom data.
 *
 * @param int $post_id The ID of the post being saved.
 */
function myplugin_save_meta_box_data( $post_id ) {

	/*
	 * 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['myplugin_meta_box_nonce'] ) ) {
		return;
	}

	// Verify that the nonce is valid.
	if ( ! wp_verify_nonce( $_POST['myplugin_meta_box_nonce'], 'myplugin_meta_box' ) ) {
		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['myplugin_new_field'] ) ) {
		return;
	}

	// Sanitize user input.
	$my_data = sanitize_text_field( $_POST['myplugin_new_field'] );

	// Update the meta field in the database.
	update_post_meta( $post_id, '_my_meta_value_key', $my_data );
}
add_action( 'save_post', 'myplugin_save_meta_box_data' );

值输出:http://codex.wordpress.org/Function_Reference/get_post_meta

<?php 
$my_data = get_post_meta( $post->ID, '_my_meta_value_key', true );
// check if the custom field has a value
if( ! empty( $my_data ) ) {
  echo $my_data;
} 
?>

如果我决定将输入标签替换为带有颜色选项的选择标签，我将很难弄清楚如何更改代码逻辑，这些颜色选项将决定使用哪个 CSS 文件来覆盖原始文件.

感谢您的宝贵时间!

更新

在听从 patnz 的建议后，我将值输出更改为以下内容并让它开始工作。我现在开始将其整合到我的主题中。谢谢!

<?php 
$my_data = get_post_meta( $post->ID, '_my_meta_value_key', true );
// check if the custom field has a value
if( $my_data == val1 ) {
  echo $my_data;
} elseif ($my_data == val2) {
  echo $my_data;
}
?>

Answer 1

假设到目前为止一切正常，您只想用选择替换输入[type=text]，您的选择标签将如下所示:

//... continued from code above

// JUST REMOVE INPUT TAG - // echo '<input type="text" id="myplugin_new_field"...

 echo '<select id="myplugin_new_field" name="myplugin_new_field">';
 echo '<option value="">- select a value -</option>';
 echo '<option value="val1" '.selected("val1",esc_attr( $value )).'" >Value 1</option>';
 echo '<option value="val2" '.selected("val2",esc_attr( $value )).'" >Value 2</option>';
 echo '</select>';

• selected() 是一个 WordPress 函数，它比较两个值，如果值匹配，会将选定的属性添加到选项中。