찾다

집 >백엔드 개발 >PHP 튜토리얼 >분류법을 사용하여 라디오 버튼 구현

분류법을 사용하여 라디오 버튼 구현

王林
王林원래의
2023-09-04 14:45:08982검색

분류법을 사용하여 라디오 버튼 구현

WordPress의 사용자 정의 분류 기능은 훌륭하며 모든 노력을 기울여 게시물을 다양한 분류로 정리할 수 있습니다. 그러나 약간 제한적일 수도 있습니다. 게시물을 편집할 때 분류 용어에는 확인란 목록(계층적 분류의 경우) 또는 태그 클라우드(비계층적 분류의 경우)로 표시되는 자체 메타 상자가 있습니다. 두 가지 옵션이 있습니다.

게시물당 하나의 용어만 선택하려는 경우 문제가 될 수 있습니다. 물론 save_post 挂钩并删除任何“多余”术语，但这不是特别用户友好，并且肯定不会提供出色的用户界面。有时，以不同的方式呈现分类法在美学上会更合乎需要。本文将向您展示如何做到这一点，我们讨论的所有代码都应添加到主题中的 functions.php 파일에 연결할 수도 있습니다. 우리는 라디오 버튼에 초점을 맞추겠지만 드롭다운 메뉴와 같은 다른 입력 방법을 사용할 수 있습니다.

1단계기본 카테고리 메타박스 삭제

WordPress에서는 분류 메타 상자가 자동으로 생성되므로 첫 번째 작업은 해당 위치에 자체 분류 메타 상자를 생성할 수 있도록 이를 제거하는 것입니다. 저는 카테고리 이름이 "mytaxonomy"라고 가정합니다(WordPress 태그나 카테고리 메타 상자를 변경하려는 경우 이를 "category" 또는 "post_tag"로 바꿀 수 있습니다).

메타 상자를 제거하기 위해 세 가지 매개변수를 허용하는 remove_meta_box，它应该从挂钩到 admin_menu 的函数内部调用。 remove_meta_box를 사용합니다.

  1. ID: 메타박스를 포함하는 div 요소에 부여되는 id 속성입니다. 일반적으로 이는 계층적 분류의 경우 "mytaxonomydiv"이고 비계층적 분류의 경우 "tagsdiv-mytaxonomy"입니다.
  2. 게시물 유형: 메타 상자에 표시되는 게시물 유형(예: "게시물" 또는 "페이지" 등). 여러 게시물 유형에 대해 메타 상자가 나타나는 경우 각 유형에 대해 Remove_meta_box 함수를 호출해야 합니다.
  3. Context: 일반, 고급 또는 측면.
으아아아

2단계 나만의 Metabox 추가

여기서는 다음을 포함한 꽤 많은 매개변수를 사용하는 적절한 이름의 add_meta_boxes 钩子，该函数将添加我们的元框。为此，该函数将调用 add_meta_box을 연결하는 함수를 사용합니다.

  1. ID: 위와 동일합니다. 고유한 이름을 지정하세요.
  2. Title: 메타박스의 제목입니다.
  3. Callback: 메타박스의 내부 구조를 생성할 함수의 이름입니다.
  4. 게시물 유형: 위와 동일합니다. 다시 말하지만, 각 게시물 유형에 대해 개별적으로 이 함수를 호출해야 합니다.
  5. Context: 위와 동일합니다.
  6. 우선순위: 상자가 표시되어야 하는 컨텍스트의 우선순위입니다.
으아아아

전반적으로 위의 내용은 기본 메타 상자를 제거하고 자신만의 메타 상자로 대체해야 합니다. 현재는 "이것은 내 카테고리 메타 상자입니다"라는 메시지만 표시할 뿐입니다. 다음 단계는 원하는 것을 표시하도록 콜백 함수를 변경하는 것입니다.

3단계 라디오 버튼 생성

우리는 메타 박스가 가능한 한 기본 메타 박스와 비슷하게 보이고 동작하기를 원합니다. WordPress 핵심 파일을 더 자세히 살펴보면 여기에서 메타박스가 내부적으로 생성되는 위치를 찾을 수 있습니다. 아래의 사용자 정의 함수는 핵심 기능을 모방하지만 용어가 표시되는 방식을 일부 변경합니다.

우리의 기능을 한 번에 하나씩 자세히 살펴보겠습니다. 첫 번째 비트는 몇 가지 변수를 설정합니다. $taxonomy 变量以匹配您的分类名称。另请注意 $name 变量。我们为输入字段指定名称 tax_input[mytaxonomy] 바꾸기만 하면 됩니다. 기본 메타박스에 입력된 이름입니다. 이렇게 하면 WordPress에서 게시물의 분류 용어 업데이트를 자동으로 처리합니다.

으아아아

현재 게시물의 ID가 필요합니다(한 개만 예상).

으아아아

워드프레스의 카테고리 메타 상자를 보면 탭에 "가장 일반적으로 사용되는" 용어가 표시되는 것을 알 수 있습니다. 이를 재현하려면 가장 많이 사용되는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Laravel의 MySQL 테이블에 새 사용자를 삽입하는 방법은 무엇입니까?다음 기사：Laravel의 MySQL 테이블에 새 사용자를 삽입하는 방법은 무엇입니까?

관련 기사

더보기