WordPress自定义字段：用单选按钮控制前台分类条件显示

感谢用户@kofeigen的帮助，他完美实现了我需要的系统功能。

需求背景 #

我在分类编辑页面添加了带单选选项的自定义字段，希望通过单选按钮选择控制对应分类是否在前台分类列表中显示。但我无法动态添加checked属性来保存单选按钮的选中状态，同时需要调整前台已有的分类列表，根据单选选项设置展示条件。我是PHP和JavaScript新手，对JavaScript更不熟悉，希望得到帮助。

问题详情 #

我知道单选按钮的选择需要通过PHP或JavaScript记录，前台查询时调用选中的选项，但保存分类时无法保留单选按钮的标记状态。

初始单选按钮代码 #

add_action ( 'subjects_edit_form_fields', 'subjects_edit_tab_fields_callback', 10, 2 );
function subjects_edit_tab_fields_callback($tag, $taxonomy) {
$tab_id = $tag->term_id;
$cat_meta = get_option( "subjects_$tab_id");
?>
<tr class="form-field">
    <th scope="row" valign="top"><label for="tab_menu_select"><?php _e('option to show in category list'); ?></label></th>
    <span class="description"><?php _e('Appear in the category list?'); ?></span>
    <td>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked>
            <label class="form-check-label" for="flexRadioDefault1">Show in Tab Menu</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
            <label class="form-check-label" for="flexRadioDefault2">Doesn't Show in Tab Menu</label>
        </div>
    </td>
</tr>
<?php
}

明确需求 #

• 管理员在分类编辑页选择“显示分类”单选按钮并更新分类。
• 网站首页自定义标签菜单不显示通过单选按钮指定为“不显示”的分类名称。
• 避免首页标签菜单因列出所有分类而过长，且不想在同一区域展示所有分类。

解决思路 #

1. 在分类编辑页添加带单选按钮的自定义字段（已完成）。
2. 通过单选按钮选择“显示/不显示”并保存选中状态——核心问题。
3. 标记为“不显示”的分类，在前台分类列表中不展示——分类列表已有，解决单选按钮问题后添加条件判断即可实现。

注：用单个复选按钮也可实现相同效果：选中则显示/不选中则不显示，或相反逻辑。

单个复选按钮尝试代码 #

add_action ( 'subjects_edit_form_fields', function( $tag ){
  $radio_select = get_term_meta( $tag->term_id, 'tab_menu_select', true );
  ?>
  <tr class='form-field'>
    <th scope='row'><label for='tab_menu_select_list'><?php _e('Showing in tab menu'); ?></label></th>
    <td>
      <input type='checkbox' name='radio_select' id='radio_select' value='<?php echo $radio_select; ?>' <?php if ($_POST['radio_select'] == 'radio_select') echo 'checked'; ?>>
    </td>
    </tr> <?php
  });
add_action ( 'edited_subjects', function( $term_id ) {
  if ( isset( $_POST['radio_select'] ) )
    update_term_meta( $term_id , 'tab_menu_select', $_POST['radio_select'] );
});

前台分类标签菜单代码 #

<div class="container-fluid text-center my-5 px-md-5">
  <div class="nav nav-tabs d-flex flex-column flex-md-row justify-content-center" id="nav-tab" role="tablist">
    <?php $i = 0; ?>
    <?php
    $cats = get_terms([
      'taxonomy'       =>'subjects',
      'hide_empty'     =>false,
      'orderby'        =>'name',
      'posts_per_page' => -1,
      'order'          =>'DESC']);
      ?>
      <?php foreach($cats as $cat) { ?>
        <?php $i++; ?>
        <style>a.nav-link.active{background-color: #26ae61ba!important;color: #fff!important;border: none;}</style>
        <a class="nav-link <?php echo ($i == 1) ? 'active': ''; ?>" id="nav-startup-tab" data-bs-toggle="tab" href="#<?php echo $cat->slug ?>" role="tab" aria-controls="nav-startup" aria-selected="true"> <?php echo esc_html( $cat->name ); ?></a>
      <?php } ?>
    </div>

    <div class="tab-content" id="nav-tabContent">
      <?php $i = 0; ?>
      <?php foreach($cats as $cat){ ?>
        <?php $i++; ?>
        <?php
        $args = array(
          'post_type'       => 'custompost',
          'post_status'     => 'publish',
          'posts_per_page'  => -1,
          'tax_query'       =>array(
            array('taxonomy'  => 'subjects',
              'field'           =>'term_id',
              'terms'           =>$cat->term_id,
              'operator'        => 'IN'
            ),
          ),
        ); ?>
        <div class="tab-pane <?php echo ($i == 1) ? 'active show': 'fade'; ?>" id="<?php echo $cat->slug ?>" role="tabpanel" aria-labelledby="nav-startup-tab">
          <div class="row">
            <?php
            $the_query = new WP_Query($args);
            if( $the_query->have_posts()){
              while( $the_query->have_posts()): $the_query->the_post();
                $imagepath = wp_get_attachment_image_src(get_post_thumbnail_id(),'large');
                ?>
                <div class="col-md-3">
                  <img class="mt-4 mb-2" src="<?php echo $imagepath[0];?>" alt="Tab Menu Category Post Image">
                  <a href="<?php the_permalink(); ?>"><h6><?php the_title();?></h6></a>
                </div>
              <?php endwhile; } ?>
              <?php wp_reset_postdata();?>
            </div>
          </div>
        <?php } ?>
      </div>
    </div>

内容的提问来源于stack exchange，提问作者wws34