求助：WordPress插件通过JS填充标题与Taxonomy字段失败

问题描述 #

我开发了一个WordPress插件，可在后台edit.php页面添加按钮，点击后从远程JSON文件获取数据填充字段。目前其他字段均能正常填充，但标题为空、Taxonomy标签未被分配，求解决办法。

现有代码 #

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('loadButton').addEventListener('click', function(event) {
        event.preventDefault();

        var imdbID = document.getElementById('imdb-title').value;
        var url = '/wp-content/plugins/imdb/get.php?id=' + imdbID;

        fetch(url)
            .then(response => response.json())
            .then(data => {
                //document.getElementById('name').value = data.name || '';
                document.getElementById('ratings-movie').value = data.score || '';
                document.getElementById('year-type').value = data.year || '';
                document.getElementById('period-time').value = data.duration || '';
                document.getElementById('rating').value = data.vote || '';
                document.getElementById('gross-worldwide-movie').value = data.boxoffice || '';  
                document.getElementById('age-limit').value = data.contentrating || '';
                document.getElementById('awards-series').value = data.awards || '';
                document.getElementById('metascore').value = data.metascore  || ''; 
                document.getElementById('top250-movies').value = data.imdbrate   || '';
                document.getElementById('budget-movie').value = data.budget  || '';
                //document.getElementById('title').value = data.name;
                var tags = '1,2,3,4,5,56,7';
                //var tags = data.tags || '';  
                var tagInput = document.getElementById('components-form-token-input-0'); 
                if (tags && tagInput) {
                tags.split(',').forEach(function(tag) {
                    tag = tag.trim();
                    if (tag) {
                        tagInput.value = tag;
                        document.getElementById('submit_tag').click();
                    }
                });
                }
        })
            .catch(error => {
                console.error('Error fetching data:', error);
                alert('Error loading JSON data.');
            });
    });
});

解决步骤 #

一、标题填充问题 #

1. 取消注释代码：先解除标题赋值代码的注释：

   document.getElementById('title').value = data.name || '';
   

2. 验证数据与元素ID：
   • 在then(data => {})中添加console.log(data)，确认返回的JSON里data.name是否有有效值；
   • 检查后台标题输入框的实际ID：默认文章类型的标题ID为post_title，自定义文章类型可能不同，右键检查输入框确认正确ID后替换。

二、Taxonomy标签分配问题 #

WordPress后台的标签输入组件（token input）不能通过直接设置value+点击提交按钮的方式添加标签，需适配组件逻辑：

1. 确认标签输入字段的正确选择器：

   • 默认文章标签的隐藏字段ID是post_tag，可见的token输入框选择器通常为#tags-input；自定义分类法的ID格式为{分类法别名}-input。

2. 替换标签添加逻辑：
   删除原有的标签循环代码，替换为以下方案之一：

   方案1：直接设置隐藏字段并触发变更事件

   var tags = data.tags || '1,2,3,4,5,56,7';
   var tagHiddenField = document.getElementById('post_tag'); // 替换为你的分类法隐藏字段ID
   if (tags && tagHiddenField) {
       tagHiddenField.value = tags;
       // 触发变更事件，让WordPress识别标签更新
       tagHiddenField.dispatchEvent(new Event('change'));
   }
   

   方案2：适配Token Input组件API

   WordPress的token输入组件内置添加标签的方法，可直接调用：

   var tags = data.tags || '1,2,3,4,5,56,7';
   // 获取token输入组件实例
   var tokenInput = document.querySelector('#tags-input').tokenInput;
   if (tags && tokenInput) {
       tags.split(',').forEach(tag => {
           tag = tag.trim();
           if (tag) {
               tokenInput.addTag(tag);
           }
       });
   }
   

内容的提问来源于stack exchange，提问作者pouyan Danesh