首頁 > 後端開發 > php教程 > 使用分類法來實現單選按鈕

使用分類法來實現單選按鈕

王林
發布: 2023-09-04 14:46:02
原創
994 人瀏覽過

使用分類法來實現單選按鈕

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. 上下文:正常、進階或側面。
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 ,它需要相當多的參數,其中包括:

  1. ID:與上面相同,給它任何唯一的東西。
  2. 標題:元框的標題。
  3. 回呼:將產生元盒內部結構的函數的名稱。
  4. 帖子類型:同上。同樣,您需要為每種帖子類型單獨調用此函數。
  5. 上下文:同上。
  6. 優先權:框應顯示的上下文中的優先權。
 
//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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板