如何在选中的自定义元框中设置单选按钮？

Posted 2023-03-05

【中文标题】如何在选中的自定义元框中设置单选按钮？

【英文标题】：How to set radio buttons in custom meta box checked?

【发布时间】：2014-10-20 18:09:06

【问题描述】：

我创建了一个自定义元框，您可以在其中从一些单选按钮中选择一个值并将其保存到 wordpress 数据库中的 post_meta 表中。使用以下代码保存值：

function save_value_of_my_custom_metabox ($post_id, $post)
    $post_id = get_the_ID();
    $new_meta_value = ( isset( $_POST['the_name_of_the_radio_buttons'] ) ? sanitize_html_class( $_POST['the_name_of_the_radio_buttons'] ) : '' );
    $meta_key = 'my_key';
    update_post_meta( $post_id, $meta_key, $new_meta_value );

但如果要再次编辑帖子，我希望选中设置当前值的单选按钮。最好的方法是什么？这是显示元框的函数：

function my_custom_meta_box( $object, $box ) 
    $post_id=get_the_ID();
    $key='my_key';
    $the_value_that_should_be_set_to_checked=get_post_meta( $post_id, $key);
    //$the_value_that_should_be_set_to_checked[0] returns the value as string
    ?>    
    <label for="my_custom_metabox"><?php _e( "Choose value:", 'choose_value' ); ?></label>
    <br />  
      <input type="radio" name="the_name_of_the_radio_buttons" value="value1">Value1<br>
      <input type="radio" name="the_name_of_the_radio_buttons" value="value2">Value2<br>
      <input type="radio" name="the_name_of_the_radio_buttons" value="value3">Value3<br>
      <input type="radio" name="the_name_of_the_radio_buttons" value="value4">Value4<br>

        <?php

我可以在每一行写if(isset($the_value_that_should_be_set_to_checked[0])=="value of that line") echo "checked='checked'"; 之类的东西，但这对我来说似乎不是很优雅。在 wordpress 中使用 javascript 也非常复杂，因为我必须使用钩子，将脚本排入队列，并且只是为了用一行 javascript 更改选中的属性，这是不值得的。最好的做法是什么？

【问题讨论】：

提供你用过的动作钩子。

add_action('load-post.php', 'my_custom_meta_box_setup'); add_action('load-post-new.php', 'my_custom_meta_box_setup');并在设置函数中： add_action( 'add_meta_boxes', 'my_custom__meta_box' );和 add_action( 'save_post', 'save_value_of_my_custom_metabox', 10, 2 );

【参考方案1】：

我假设您正在尝试为“帖子”添加自定义元框。下面的代码将为您工作。它将在添加新帖子或编辑帖子屏幕上显示单选按钮。请阅读代码中的 cmets。它将帮助您理解代码。

您可以使用 WordPress 的 checked 函数来决定是否选择单选按钮。

如果您有任何疑问，请随时询问。

/**
 * Adds a box to the main column on the Post add/edit screens.
 */
function wdm_add_meta_box() 

        add_meta_box(
                'wdm_sectionid', 'Radio Buttons Meta Box', 'wdm_meta_box_callback', 'post'
        ); //you can change the 4th paramter i.e. post to custom post type name, if you want it for something else



add_action( 'add_meta_boxes', 'wdm_add_meta_box' );

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

        // Add an nonce field so we can check for it later.
        wp_nonce_field( 'wdm_meta_box', 'wdm_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_key', true ); //my_key is a meta_key. Change it to whatever you want

        ?>
        <label for="wdm_new_field"><?php _e( "Choose value:", 'choose_value' ); ?></label>
        <br />  
        <input type="radio" name="the_name_of_the_radio_buttons" value="value1" <?php checked( $value, 'value1' ); ?> >Value1<br>
        <input type="radio" name="the_name_of_the_radio_buttons" value="value2" <?php checked( $value, 'value2' ); ?> >Value2<br>
        <input type="radio" name="the_name_of_the_radio_buttons" value="value3" <?php checked( $value, 'value3' ); ?> >Value3<br>
        <input type="radio" name="the_name_of_the_radio_buttons" value="value4" <?php checked( $value, 'value4' ); ?> >Value4<br>

        <?php



/**
 * When the post is saved, saves our custom data.
 *
 * @param int $post_id The ID of the post being saved.
 */
function wdm_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['wdm_meta_box_nonce'] ) ) 
                return;
        

        // Verify that the nonce is valid.
        if ( !wp_verify_nonce( $_POST['wdm_meta_box_nonce'], 'wdm_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 ( !current_user_can( 'edit_post', $post_id ) ) 
                return;
        


        // Sanitize user input.
        $new_meta_value = ( isset( $_POST['the_name_of_the_radio_buttons'] ) ? sanitize_html_class( $_POST['the_name_of_the_radio_buttons'] ) : '' );

        // Update the meta field in the database.
        update_post_meta( $post_id, 'my_key', $new_meta_value );



add_action( 'save_post', 'wdm_save_meta_box_data' );

【讨论】：

非常感谢！我希望避免在每一行中检查它，但我想这是不可能的。但是我正在使用 WP 的 selected() 来动态添加行，因此它很棒。并感谢有关 wp nonce 安全问题的 cmets。我仍然需要整合它。

【参考方案2】：

我找到了一个可行的解决方案，但我认为这不是你应该做的。仍然开放寻求更好的解决方案；）

此代码是在上面的 php 代码下添加的：

if(isset($$the_value_that_should_be_set_to_checked[0]))
     $the_value_that_should_be_set_to_checked= $the_value_that_should_be_set_to_checked[0]; 
 
else
     $the_value_that_should_be_set_to_checked='';

这是我在单选按钮下方添加的代码：

<script type="text/javascript">
    jQuery(document).ready(function ()             
       var checked_value= <?php echo json_encode($the_value_that_should_be_set_to_checked);?>;
       if(checked_value!=='')                    
          jQuery("input[name=the_name_of_the_radio_buttons][value="+checked_value+"]").attr('checked', 'checked');                    
       
    );
</script>

P.S.：$ 选择器将不起作用，但这可能取决于您使用的主题。