分類法を使用してラジオ ボタンを実装する

WordPress のカスタム分類機能は優れており、さまざまな分類で投稿を整理でき、面倒な作業はすべて行われます。ただし、少し制限がある場合もあります。投稿を編集する場合、分類用語には独自のメタ ボックスがあり、チェックボックス リスト (階層分類の場合) またはタグ クラウド (非階層分類の場合) として表示されます。これらは 2 つの選択肢です。

これは、投稿ごとに 1 つの用語のみが選択されるようにしたい場合に問題になる可能性があります。もちろん、save_post フックをフックして「余分な」用語を削除することもできますが、それは特にユーザーフレンドリーではなく、優れたユーザー インターフェイスを提供するものではありません。場合によっては、別の方法で分類法を提示する方が美的に望ましい場合があります。この記事では、これを行う方法を説明します。ここで説明するすべてのコードは、テーマの functions.php ファイルに追加する必要があります。ここではラジオ ボタンに焦点を当てますが、ドロップダウン メニューなどの他の入力方法を使用することもできます。

---

ステップ 1デフォルトのカテゴリボックスを削除します

WordPress は分類メタ ボックスを自動的に生成するため、最初のタスクはそれを削除して、代わりに独自の分類メタ ボックスを生成できるようにすることです。カテゴリ名は「mytaxonomy」であると仮定します（WordPress タグまたはカテゴリメタボックスを変更したい場合は、これを「category」または「post_tag」に置き換えることができます）。

メタ ボックスを削除するには、remove_meta_box を使用します。これは、admin_menu にフックされた関数内から呼び出す必要があります。 remove_meta_box 3 つのパラメータを受け入れます。

1. ID: これは、メタ ボックスを含む div 要素に与えられる id 属性です。通常、これは階層型タクソノミーの場合は「mytaxonomydiv」、非階層型タクソノミーの場合は「tagsdiv-mytaxonomy」になります。
2. 投稿タイプ: メタ ボックスに表示される投稿タイプ (例: 「投稿」または「ページ」など)。メタボックスが複数の異なる投稿タイプに表示される場合は、タイプごとにremove_meta_box関数を呼び出す必要があります。
3. コンテキスト: ノーマル、アドバンスト、またはサイド。

リーリー

---

ステップ 2 独自のメタボックスを追加する

ここでは、メタ ボックスを追加する関数を使用して、適切な名前の add_meta_boxes フックを接続します。これを行うには、関数は add_meta_box を呼び出します。これには、次のようなかなりの数のパラメータが必要です。

1. ID: 上記と同様に、一意の値を付けます。
2. タイトル: メタボックスのタイトル。
3. Callback: メタボックスの内部構造を生成する関数の名前。
4. 投稿タイプ: 上記と同じ。繰り返しますが、この関数は投稿タイプごとに個別に呼び出す必要があります。
5. コンテキスト: 上記と同じ。
6. Priority: ボックスが表示されるコンテキストにおける優先度。
リーリー

全体として、上記はデフォルトのメタ ボックスを削除し、独自のメタ ボックスに置き換える必要があります。現時点では、「これは私のカテゴリ メタ ボックスです」というメッセージが表示されるだけです。次のステップは、必要なものを表示するようにコールバック関数を変更することです。

---

ステップ 3 ラジオ ボタンを生成する

メタ ボックスは、デフォルトのメタ ボックスとできるだけ同じように見え、動作するようにしたいと考えています。 WordPress コア ファイルをさらに詳しく調べると、内部でメタボックスが生成される場所がわかります。以下のカスタム関数はコア関数を模倣していますが、用語の表示方法がいくつか変更されています。

関数を 1 つずつ詳しく見てみましょう。最初のビットはいくつかの変数を設定します。

$taxonomy 変数をタクソノミー名と一致するように変更するだけです。 $name 変数にも注目してください。入力フィールドに tax_input[mytaxonomy] という名前を付けます。これはデフォルトのメタボックスに入力された名前です。これにより、WordPress は投稿の分類用語の更新を自動的に処理します。 リーリー

投稿の現在の用語の ID が必要です (1 つだけが必要です)。

リーリー

WordPress のカテゴリ メタ ボックスを見ると、タブに「最も一般的な」用語が表示されていることがわかります。これを再現するには、最もよく使われる 10 個の用語が必要です。

get_terms 関数を再度使用しますが、今回は最大 10 個の用語を選択し、カウント (この分類の投稿数) で並べ替えます。 リーリー

次に、[すべてのカテゴリ] タブと [よく使用される] タブを表示します (ベスト プラクティスは、可能な限りカテゴリ タグを使用することです)。タブが必要ない場合は、このビットを削除するだけです:

リーリー

次に、[すべてのカテゴリ] タブに表示する内容を設定します。

リーリー

これは基本的に、各リスト要素がラジオ オプションである 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 中国語 Web サイトの他の関連記事を参照してください。