Utiliser des taxonomies pour implémenter des boutons radio

La fonctionnalité de taxonomies personnalisées de WordPress est géniale et vous permet d'organiser vos publications dans diverses taxonomies, avec tout le travail acharné fait pour vous. Cependant, cela peut aussi être un peu limitant. Lors de la modification d'une publication, vos termes de taxonomie ont leurs propres méta-boîtes, qui apparaissent sous la forme d'une liste de cases à cocher (pour les taxonomies hiérarchiques) ou d'un nuage de tags (pour les taxonomies non hiérarchiques). Ce sont vos deux options.

Cela peut être problématique lorsque vous souhaitez vous assurer qu'un seul terme est sélectionné par publication. Bien sûr, vous pouvez vous connecter au fichier save_post 挂钩并删除任何“多余”术语，但这不是特别用户友好，并且肯定不会提供出色的用户界面。有时，以不同的方式呈现分类法在美学上会更合乎需要。本文将向您展示如何做到这一点，我们讨论的所有代码都应添加到主题中的 functions.php. Nous nous concentrerons sur les boutons radio, mais vous pouvez utiliser n'importe quelle autre méthode de saisie, comme un menu déroulant.

Étape 1Supprimez la méta-boîte de catégorie par défaut

WordPress génère automatiquement la méta-boîte de taxonomie, notre première tâche est donc de la supprimer afin que nous puissions générer notre propre méta-boîte de taxonomie à sa place. Je suppose que le nom de notre catégorie est « mytaxonomie » (vous pouvez le remplacer par « catégorie » ou « post_tag » si vous souhaitez modifier les balises WordPress ou la méta-boîte de catégorie).

Pour supprimer la méta-boîte nous utiliserons remove_meta_box，它应该从挂钩到 admin_menu 的函数内部调用。 remove_meta_box qui accepte trois paramètres.

1. ID : Il s'agit de l'attribut id donné à l'élément div contenant la méta-boîte. Généralement, il s'agit de « mytaxonomydiv » pour les taxonomies hiérarchiques et de « tagsdiv-mytaxonomy » pour les taxonomies non hiérarchiques.
2. Type de publication : Le type de publication affiché par la méta-boîte (par exemple "Post" ou "Page", etc.). Si votre méta-boîte apparaît pour plusieurs types de publication différents, vous devrez appeler la fonction remove_meta_box pour chaque type.
3. Contexte : Normal, Avancé ou Côté.

add_action( 'admin_menu', 'myprefix_remove_meta_box');
function myprefix_remove_meta_box(){
   remove_meta_box('mytaxonomydiv', 'post', 'normal');
}

Étape 2 Ajoutez votre propre Metabox

Ici, nous utilisons une fonction pour concaténer le add_meta_boxes 钩子，该函数将添加我们的元框。为此，该函数将调用 add_meta_box correctement nommé qui prend un certain nombre de paramètres, notamment :

1. ID : Comme ci-dessus, donnez-lui quelque chose d'unique.
2. Titre : Le titre de la méta-boîte.
3. Callback : Le nom de la fonction qui va générer la structure interne de la métabox.
4. Type de publication : identique à ci-dessus. Encore une fois, vous devez appeler cette fonction individuellement pour chaque type de publication.
5. Contexte : Idem que ci-dessus.
6. Priorité : La priorité dans le contexte dans lequel la boîte doit être affichée.

 
//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';
  }

Dans l'ensemble, ce qui précède devrait supprimer la méta-boîte par défaut et la remplacer par votre propre méta-boîte. Actuellement, il ne fait rien d'autre que d'afficher le message "Ceci est ma méta-boîte de catégorie". L'étape suivante consiste à modifier la fonction de rappel pour afficher ce que nous voulons.

Étape 3 Générer des boutons radio

Nous voulons que la méta-boîte ressemble et se comporte autant que possible comme la méta-boîte par défaut. En approfondissant les fichiers principaux de WordPress, vous découvrirez ici où les métabox sont générées en interne. La fonction personnalisée ci-dessous imitera la fonction principale, mais avec quelques modifications dans la façon dont les termes sont affichés.

Examinons notre fonction en détail une par une. Le premier bit définit certaines variables. Il vous suffit de changer $taxonomy 变量以匹配您的分类名称。另请注意 $name 变量。我们为输入字段指定名称 tax_input[mytaxonomy]. Il s'agit du nom saisi dans la méta-boîte par défaut. En faisant cela, WordPress gérera automatiquement les mises à jour des termes de taxonomie de la publication.

//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));

Nous avons besoin de l'identifiant de la durée actuelle du poste (nous n'en attendons qu'un).

 
$postterms = get_the_terms( $post->ID,$taxonomy );
$current = ($postterms ? array_pop($postterms) : false);
$current = ($current ? $current->term_id : 0);

Si vous regardez la méta-boîte des catégories dans WordPress, vous remarquerez qu'un onglet affichera les termes « les plus couramment utilisés ». Pour recréer cela, nous avons besoin des 10 termes les plus populaires. Nous utilisons à nouveau la fonction get_terms, mais cette fois nous sélectionnons jusqu'à 10 termes et trions par nombre (nombre de publications avec cette classification).

$popular = get_terms( $taxonomy, array( 'orderby' => 'count', 'order' => 'DESC', 'number' => 10, 'hierarchical' => false ) );

Ensuite, nous souhaitons afficher les onglets Toutes les catégories et Les plus utilisées (la meilleure pratique consiste à utiliser les balises de catégorie autant que possible). Si vous n'avez pas besoin d'onglets, vous pouvez simplement supprimer ce bit :

<!-- 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>

Ensuite, nous souhaitons définir ce qui s'affiche dans l'onglet Toutes les catégories :

<!-- 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>

Cela affiche essentiellement une liste à l'intérieur d'un élément div, chaque élément de liste étant une option radio. Bien sûr, vous pouvez simplement remplacer cette liste par un menu déroulant ou tout autre élément de votre choix.

Maintenant, nous faisons la même chose avec l'onglet Les plus utilisés :

<!-- 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 上完整代码的链接。它是本教程中使用的代码的类实现，因此开始时您只需要更改顶部的类的静态变量。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!