使用分类法来实现单选按钮
- 王林原创
- 2023-09-04 14:45:08964浏览
WordPress 的自定义分类功能非常出色，允许您以各种分类法组织您的帖子，所有艰苦的工作都已为您完成。然而，它也可能有点限制。编辑帖子时，您的分类术语有自己的元框，它们显示为复选框列表（对于分层分类法）或标签云（对于非分层分类法）。这是你的两个选择。
当您想要确保每个帖子只能选择一个术语时，这可能会出现问题。当然，您可以挂钩 save_post 挂钩并删除任何“多余”术语，但这不是特别用户友好，并且肯定不会提供出色的用户界面。有时，以不同的方式呈现分类法在美学上会更合乎需要。本文将向您展示如何做到这一点，我们讨论的所有代码都应添加到主题中的 functions.php 文件中。我们将重点关注单选按钮，但您可以使用任何其他输入方法，例如下拉菜单。
第 1 步删除默认分类元框
WordPress 会自动生成分类元框，因此我们的首要任务是删除它，以便我们可以在其位置生成我们自己的分类元框。我假设我们的分类名称是“mytaxonomy”（如果您想更改 WordPress 标签或类别元框，则可以将其替换为“category”或“post_tag”）。
要删除元框，我们将使用 remove_meta_box，它应该从挂钩到 admin_menu 的函数内部调用。 remove_meta_box 接受三个参数。
- ID：这是赋予包含元框的 div 元素的 id 属性。通常，对于层次分类法，这将是“mytaxonomydiv”；对于非层次分类法，这将是“tagsdiv-mytaxonomy”。
- 帖子类型：元框显示的帖子类型（例如“帖子”或“页面”等）。如果您的元框针对多种不同的帖子类型出现，您将需要为每种类型调用remove_meta_box 函数。
- 上下文：正常、高级或侧面。
add_action( 'admin_menu', 'myprefix_remove_meta_box');
function myprefix_remove_meta_box(){
remove_meta_box('mytaxonomydiv', 'post', 'normal');
}
第 2 步 添加您自己的 Metabox
在这里，我们使用一个函数来连接适当命名的 add_meta_boxes 钩子，该函数将添加我们的元框。为此，该函数将调用 add_meta_box ，它需要相当多的参数，其中包括：
- ID：与上面相同，给它任何唯一的东西。
- 标题：元框的标题。
- 回调：将生成元盒内部结构的函数的名称。
- 帖子类型：同上。同样，您需要为每种帖子类型单独调用此函数。
- 上下文：同上。
- 优先级：框应显示的上下文中的优先级。
//Add new taxonomy meta box
add_action( 'add_meta_boxes', 'myprefix_add_meta_box');
function myprefix_add_meta_box() {
add_meta_box( 'mytaxonomy_id', 'My Radio Taxonomy','myprefix_mytaxonomy_metabox','post' ,'side','core');
}
function myprefix_mytaxonomy_metabox( $post ) {
echo 'This is my taxonomy metabox';
}
总的来说，上面的内容应该删除默认的元框并将其替换为您自己的元框，当前它除了显示消息“这是我的分类元框”之外什么也不做。下一步是更改回调函数以显示我们想要的内容。
步骤 3 生成单选按钮
我们希望元框的外观和行为尽可能类似于默认元框。深入研究 WordPress 核心文件，您会在这里找到元盒内部的生成位置。下面的自定义函数将模仿核心函数，但对术语的显示方式进行一些更改。
让我们一次详细地浏览一下我们的函数。第一个位设置一些变量。您只需要更改 $taxonomy 变量以匹配您的分类名称。另请注意 $name 变量。我们为输入字段指定名称 tax_input[mytaxonomy]。这是默认元框中输入的名称。通过这样做，WordPress 将自动处理帖子分类术语的更新。
//Set up the taxonomy object and get terms
$taxonomy = 'mytaxonomy';
$tax = get_taxonomy($taxonomy);//This is the taxonomy object
//The name of the form
$name = 'tax_input[' . $taxonomy . ']';
//Get all the terms for this taxonomy
$terms = get_terms($taxonomy,array('hide_empty' => 0));
我们需要帖子当前术语的 ID（我们期望只有一个）。
$postterms = get_the_terms( $post->ID,$taxonomy ); $current = ($postterms ? array_pop($postterms) : false); $current = ($current ? $current->term_id : 0);
如果您查看 WordPress 的类别元框，您会注意到一个选项卡将显示“最常用”术语。为了重现这一点，我们需要 10 个最流行的术语。我们再次使用 get_terms 函数，但这次最多选择 10 个术语并按计数（具有此分类的帖子数）排序。
$popular = get_terms( $taxonomy, array( 'orderby' => 'count', 'order' => 'DESC', 'number' => 10, 'hierarchical' => false ) );
接下来，我们要显示“所有类别”和“最常用”选项卡（最佳做法是尽可能使用分类标签）。如果您不需要制表符，您可以简单地删除此位：
<!-- Display tabs--> <ul id="<?php echo $taxonomy; ?>-tabs" class="category-tabs"> <li class="tabs"><a href="#<?php echo $taxonomy; ?>-all" tabindex="3"><?php echo $tax->labels->all_items; ?></a></li> <li class="hide-if-no-js"><a href="#<?php echo $taxonomy; ?>-pop" tabindex="3"><?php _e( 'Most Used' ); ?></a></li> </ul>
接下来，我们要设置在“所有类别”选项卡上显示的内容：
<!-- Display taxonomy terms -->
<div id="<?php echo $taxonomy; ?>-all" class="tabs-panel">
<ul id="<?php echo $taxonomy; ?>checklist" class="list:<?php echo $taxonomy?> categorychecklist form-no-clear">
<?php foreach($terms as $term){
$id = $taxonomy.'-'.$term->term_id;
echo "<li id='$id'><label class='selectit'>";
echo "<input type='radio' id='in-$id' name='{$name}'".checked($current,$term->term_id,false)."value='$term->term_id' />$term->name<br />";
echo "</label></li>";
}?>
</ul>
</div>
这实际上只是在 div 元素内显示一个列表，每个列表元素都是一个单选选项。当然，您可以简单地用下拉菜单或您喜欢的任何其他内容替换此列表。
现在我们对“最常用”选项卡执行相同的操作：
<!-- Display popular taxonomy terms -->
<div id="<?php echo $taxonomy; ?>-pop" class="tabs-panel" style="display: none;">
<ul id="<?php echo $taxonomy; ?>checklist-pop" class="categorychecklist form-no-clear" >
<?php foreach($popular as $term){
$id = 'popular-'.$taxonomy.'-'.$term->term_id;
echo "<li id='$id'><label class='selectit'>";
echo "<input type='radio' id='in-$id'".checked($current,$term->term_id,false)."value='$term->term_id' />$term->name<br />";
echo "</label></li>";
}?>
</ul>
</div>
第4步我们完整的回调函数
将其拼凑在一起，我们的完整功能是
//Callback to set up the metabox
function myprefix_mytaxonomy_metabox( $post ) {
//Get taxonomy and terms
$taxonomy = 'mytaxonomy';
//Set up the taxonomy object and get terms
$tax = get_taxonomy($taxonomy);
$terms = get_terms($taxonomy,array('hide_empty' => 0));
//Name of the form
$name = 'tax_input[' . $taxonomy . ']';
//Get current and popular terms
$popular = get_terms( $taxonomy, array( 'orderby' => 'count', 'order' => 'DESC', 'number' => 10, 'hierarchical' => false ) );
$postterms = get_the_terms( $post->ID,$taxonomy );
$current = ($postterms ? array_pop($postterms) : false);
$current = ($current ? $current->term_id : 0);
?>
<div id="taxonomy-<?php echo $taxonomy; ?>" class="categorydiv">
<!-- Display tabs-->
<ul id="<?php echo $taxonomy; ?>-tabs" class="category-tabs">
<li class="tabs"><a href="#<?php echo $taxonomy; ?>-all" tabindex="3"><?php echo $tax->labels->all_items; ?></a></li>
<li class="hide-if-no-js"><a href="#<?php echo $taxonomy; ?>-pop" tabindex="3"><?php _e( 'Most Used' ); ?></a></li>
</ul>
<!-- Display taxonomy terms -->
<div id="<?php echo $taxonomy; ?>-all" class="tabs-panel">
<ul id="<?php echo $taxonomy; ?>checklist" class="list:<?php echo $taxonomy?> categorychecklist form-no-clear">
<?php foreach($terms as $term){
$id = $taxonomy.'-'.$term->term_id;
echo "<li id='$id'><label class='selectit'>";
echo "<input type='radio' id='in-$id' name='{$name}'".checked($current,$term->term_id,false)."value='$term->term_id' />$term->name<br />";
echo "</label></li>";
}?>
</ul>
</div>
<!-- Display popular taxonomy terms -->
<div id="<?php echo $taxonomy; ?>-pop" class="tabs-panel" style="display: none;">
<ul id="<?php echo $taxonomy; ?>checklist-pop" class="categorychecklist form-no-clear" >
<?php foreach($popular as $term){
$id = 'popular-'.$taxonomy.'-'.$term->term_id;
echo "<li id='$id'><label class='selectit'>";
echo "<input type='radio' id='in-$id'".checked($current,$term->term_id,false)."value='$term->term_id' />$term->name<br />";
echo "</label></li>";
}?>
</ul>
</div>
</div>
<?php
}
第 5 步一点 JavaScript...
我在回调函数中对 ID 和单选按钮的命名非常谨慎。如果您现在尝试上述所有操作，您会发现 WordPress 会自动处理帖子术语的更新。此外，WordPress 的 javascript 自动处理选项卡导航。有一个轻微的问题。 “所有类别”单选按钮与“最常用的”单选按钮不同步。如果您决定放弃“最常用”选项卡，那么您可以忽略此部分。否则，我们只需要添加一点点 JavaScript 就可以解决这个问题。
我们想要向页面添加一些 javascript，因此在回调函数中，我们将使用一个钩子，当在管理中添加 javascript 时会触发该钩子。即 admin_enqueue_scripts 挂钩。由于我们将函数添加到回调函数内的此钩子上，因此仅在需要时才加载它。只需在上面的回调函数顶部添加这一行：
add_action('admin_enqueue_scripts','myprefix_radiotax_javascript');
当管理页面加载 JavaScript 时，这将触发我们的函数。这个函数只不过是注册我们的 javascript 并将其排入队列，我们希望将其加载到页脚中：
function myprefix_radiotax_javascript(){
wp_register_script( 'radiotax', get_template_directory_uri() . '/js/radiotax.js', array('jquery'), null, true ); // We specify true here to tell WordPress this script needs to be loaded in the footer
wp_enqueue_script( 'radiotax' );
}
现在对于我们实际需要的 javascript，在主题的 js 文件夹中创建一个文件。我们将其命名为 radiotax.js，下面是要放入其中的代码：
jQuery(document).ready(function($) {
var taxonomy = 'mytaxonomy';
$('#' + taxonomy + 'checklist li :radio, #' + taxonomy + 'checklist-pop :radio').live( 'click', function(){
var t = $(this), c = t.is(':checked'), id = t.val();
$('#' + taxonomy + 'checklist li :radio, #' + taxonomy + 'checklist-pop :radio').prop('checked',false);
$('#in-' + taxonomy + '-' + id + ', #in-popular-' + taxonomy + '-' + id).prop( 'checked', c );
});
});
那么这几行代码有什么作用呢？每当您选中一个单选按钮时，它都会取消选中所有其他单选按钮（在两个选项卡上），然后检查与该术语相对应的单选按钮。
结论
这样我们就完成了。 WordPress 为我们处理剩下的所有事情。不过还有改进的空间...添加新术语怎么样？我已经从我们的元框中省略了这一点，因为它实际上非常棘手。它将涉及更多的 JavaScript 以及服务器端的一些操作。
更新：
根据 Roberto 的要求，这里是 GitHub 上完整代码的链接。它是本教程中使用的代码的类实现，因此开始时您只需要更改顶部的类的静态变量。
以上是使用分类法来实现单选按钮的详细内容。更多信息请关注PHP中文网其他相关文章！