时间戳

首页 > 解决方案 > 用自定义帖子类型内的自定义分类法上的下拉选择器替换层次复选框

wordpress - 用自定义帖子类型内的自定义分类法上的下拉选择器替换层次复选框

问题描述

我看过几篇关于这个主题的博客文章，但未能成功实施它们。

我已经尝试了以下方法（也许其中一个是解决方案，我有点偏离）：

  1. https://pagecrafter.com/dropdown-menu-of-all-terms-in-custom-taxonomy-wordpress/
  2. Wordpress - 分类下拉列表不适用于分层
  3. https://www.noelsheppard.co.uk/create-dropdown-list-custom-taxonomy-terms/（基本上是例子1）
  4. https://shibashake.com/wordpress-theme/wordpress-custom-taxonomy-input-panels
  5. 最后，阅读这个

我有一个属性的 CPT，它具有三个自定义分类法：

  1. 客人
  2. 房间
  3. 城市（城市分类通过自定义函数填充，该函数监视第二个 CPT [目的地] 何时创建新帖子并将与分类相同的名称添加到 Properties City 条目）

我想确保在创建属性帖子并设置其城市时，只选择一个城市（目的地）。我想为此操作使用下拉列表。

按照上面的示例的第一个（或第三个）链接，我尝试了以下实现：

我的functions.php中用于初始化的函数：

// Creates dropdown taxonomy select for guest taxonomy in Properties.
function dropdown_tax_init(){

  $categories = get_categories('taxonomy=city');
  $select     = "<select name='cat' id='cat' class='top-tags-dropdown'>n";
  $select .= "<option value='-1'>Select Tag</option>n";
  foreach ($categories as $category) {
      if ($category->count > 0) {
          $select .= "<option value='" . $category->slug . "'>" . $category->name . "</option>";
      }
  }
  $select .= "</select>";
  echo $select;

}

add_action( 'init', 'dropdown_tax_init' );

我也通过我的functions.php调用js，如下所示：

function admin_footer_script() {
    wp_register_script('dropdown_tax_script', get_template_directory_uri() . '/js/taxonomy-dropdown.js', array('jquery'), '1.0.0'); // Conditional script(s)
    wp_enqueue_script('dropdown_tax_script'); // Enqueue it!
}

add_action( 'admin_footer', 'admin_footer_script' );

最后，我的js如下：

var dropdown = document.getElementById("cat");

function onCatChange() {
    if (dropdown.options[dropdown.selectedIndex].value != -1) {
        location.href = "<?php echo home_url();?>/city/" + dropdown.options[dropdown.selectedIndex].value + "/";
    }
}
dropdown.onchange = onCatChange;

我的 javascript 显示在管理页脚的检查中。

加载时下拉菜单闪烁，但当我的 function.php 中有该函数时，自定义分类法不会加载，这会破坏 Gutenberg 编辑器右侧边栏中自定义分类法的加载。他们从不出现。

很高兴了解更多细节，谢谢。

标签： wordpressdropdowncustom-post-typecustom-taxonomywordpress-gutenberg

解决方案

不确定这是否是主要原因，但无论如何你不能像这样从 Javascript 执行 PHP 代码：

location.href = "<?php echo home_url();?>/city/" + '...';

这将导致无效的 url 并导致重定向失败。如果您需要将一些值从 PHP 传输到 JS，请改用wp_localize_script()函数。在此处查看详细信息。

要调试其他潜在问题，您需要执行一些单独的测试：

  1. PHP端。确保您的$categories数组不为空并且它具有非空类别，或者只是检查$select输出（暂时没有执行任何相关的 JS）。
  2. JS端。记录对控制台的每次调用，onCatChange()以确保 onchange 事件：a) 正确触发，2) 不是由其他原因触发（例如在旧 IE 中失去焦点或其他棘手的意外）。然后记录分配给的字符串值location.href并确保它没有损坏并且是有效的 url。

附加提示：

  • 总是逃避你的输出（$category->slug，$category->name——它们并不总是可靠的，有时可能会破坏你的标记）；
  • 将换行符插入字符串时可能错过了反斜杠：应该是\n，而不仅仅是n？
  • 如果您调用带有依赖项的脚本array('jquery')，请随意使用 jQuery 而不是 vanilla JavaScript。这可以帮助您避免跨浏览器问题。

希望这可以帮助。

推荐阅读