Rumah  >  Artikel  >  pembangunan bahagian belakang  >  Menggunakan taksonomi untuk melaksanakan butang radio

Menggunakan taksonomi untuk melaksanakan butang radio

王林
王林asal
2023-09-04 14:45:08974semak imbas

Menggunakan taksonomi untuk melaksanakan butang radio

Ciri taksonomi tersuai WordPress adalah hebat dan membolehkan anda mengatur siaran anda dalam pelbagai taksonomi, dengan semua kerja keras dilakukan untuk anda. Walau bagaimanapun, ia juga boleh menjadi sedikit mengehadkan. Semasa mengedit siaran, istilah taksonomi anda mempunyai kotak meta sendiri, yang muncul sebagai senarai kotak semak (untuk taksonomi hierarki) atau awan teg (untuk taksonomi bukan hierarki). Ini adalah dua pilihan anda.

Ini boleh menjadi masalah apabila anda ingin memastikan bahawa hanya satu penggal dipilih setiap siaran. Sudah tentu, anda boleh mengaitkan cangkuk save_post dan mengalih keluar sebarang istilah "tambahan", tetapi itu tidak begitu mesra pengguna dan pastinya tidak menyediakan antara muka pengguna yang hebat. Kadangkala adalah lebih estetik untuk mempersembahkan taksonomi dengan cara yang berbeza. Artikel ini akan menunjukkan kepada anda cara untuk melakukan ini, semua kod yang kita bincangkan hendaklah ditambahkan pada fail functions.php dalam tema anda. Kami akan menumpukan pada butang radio, tetapi anda boleh menggunakan sebarang kaedah input lain, seperti menu lungsur. 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


Langkah 1Padamkan kotak kategori lalai

WordPress menjana kotak meta taksonomi secara automatik, jadi tugas pertama kami ialah mengalih keluarnya supaya kami boleh menjana kotak meta taksonomi kami sendiri sebagai gantinya. Saya mengandaikan nama kategori kami ialah "mytaxonomy" (anda boleh menggantikannya dengan "kategori" atau "post_tag" jika anda ingin menukar tag WordPress atau kotak meta kategori).

Untuk mengalih keluar kotak meta kami akan menggunakan remove_meta_box yang harus dipanggil dari dalam fungsi yang disambungkan ke admin_menu. remove_meta_box menerima tiga parameter.

  1. ID: Ini ialah atribut id yang diberikan kepada elemen div yang mengandungi kotak meta. Biasanya ini ialah "mytaxonomydiv" untuk taksonomi hierarki dan "tagsdiv-mytaxonomy" untuk taksonomi bukan hierarki.
  2. Jenis siaran: Jenis siaran yang ditunjukkan dalam kotak meta (cth. "Siaran" atau "Halaman" dsb.). Jika kotak meta anda muncul untuk berbilang jenis siaran yang berbeza, anda perlu memanggil fungsi remove_meta_box untuk setiap jenis.
  3. Konteks: Biasa, Lanjutan atau Bersebelahan.
$popular = get_terms( $taxonomy, array( 'orderby' => 'count', 'order' => 'DESC', 'number' => 10, 'hierarchical' => false ) );

Langkah 2 Tambahkan Metabox anda sendiri

Di sini kami menyambungkan cangkuk add_meta_boxes yang sesuai menggunakan fungsi yang akan menambah kotak meta kami. Untuk melakukan ini, fungsi memanggil add_meta_box yang memerlukan beberapa parameter, termasuk:

  1. ID: Sama seperti di atas, berikan apa sahaja yang unik.
  2. Tajuk: Tajuk kotak meta.
  3. Panggil balik: Nama fungsi yang akan menjana struktur dalaman kotak meta.
  4. Jenis siaran: Sama seperti di atas. Sekali lagi, anda perlu memanggil fungsi ini secara individu untuk setiap jenis siaran.
  5. Konteks: Sama seperti di atas.
  6. Keutamaan: Keutamaan dalam konteks di mana kotak harus muncul.
<!-- 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>
Secara keseluruhan, perkara di atas harus mengalih keluar kotak meta lalai dan menggantikannya dengan kotak meta anda sendiri, pada masa ini ia tidak melakukan apa-apa selain memaparkan mesej "Ini adalah kotak meta kategori saya". Langkah seterusnya ialah menukar fungsi panggil balik untuk memaparkan apa yang kita mahu.


Langkah 3 Jana butang radio

Kami mahu kotak meta kelihatan dan berkelakuan sama seperti kotak meta lalai yang mungkin. Menggali lebih dalam ke dalam fail teras WordPress, di sinilah anda akan menemui tempat metabox dijana secara dalaman. Fungsi tersuai di bawah akan meniru fungsi teras, tetapi dengan beberapa perubahan pada cara istilah dipaparkan. 🎜 🎜Mari kita lihat fungsi kami secara terperinci satu demi satu. Bit pertama menetapkan beberapa pembolehubah. Anda hanya perlu menukar pembolehubah $taxonomy agar sepadan dengan nama taksonomi anda. Perhatikan juga pembolehubah $name. Kami memberikan medan input nama tax_input[mytaxonomy]. Ini adalah nama yang dimasukkan dalam kotak meta lalai. Dengan melakukan ini, WordPress akan secara automatik mengendalikan kemas kini kepada syarat taksonomi siaran. 🎜
<!-- 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>
🎜Kami memerlukan ID tempoh semasa siaran (kami menjangkakan hanya satu). 🎜
<!-- 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>
🎜Jika anda melihat kotak meta kategori dalam WordPress, anda akan melihat bahawa tab akan memaparkan istilah "paling biasa digunakan". Untuk mencipta semula ini, kami memerlukan 10 istilah paling popular. Kami menggunakan fungsi get_terms sekali lagi, tetapi kali ini pilih sehingga 10 istilah dan isi mengikut kiraan (bilangan siaran dengan klasifikasi ini). 🎜
//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
}
🎜Seterusnya, kami ingin memaparkan tab Semua Kategori dan Paling Digunakan (amalan terbaik ialah menggunakan tag kategori apabila boleh). Jika anda tidak memerlukan tab, anda boleh mengalih keluar bit ini: 🎜
add_action('admin_enqueue_scripts','myprefix_radiotax_javascript');
🎜Seterusnya, kami ingin menetapkan perkara yang dipaparkan pada tab Semua Kategori: 🎜
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' );
}
🎜Ini pada asasnya hanya memaparkan senarai di dalam elemen div, setiap elemen senarai menjadi pilihan radio. Sudah tentu, anda boleh menggantikan senarai ini dengan menu lungsur turun atau apa sahaja yang anda suka. 🎜 🎜Kini kami melakukan perkara yang sama dengan tab Paling Digunakan: 🎜
<!-- 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 上完整代码的链接。它是本教程中使用的代码的类实现,因此开始时您只需要更改顶部的类的静态变量。

Atas ialah kandungan terperinci Menggunakan taksonomi untuk melaksanakan butang radio. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn