如何在WordPress文章中实现树木年龄计算器？脚本解析异常求助

一、确认脚本是否正确加载 #

• 打开浏览器开发者工具（F12），切换到网络标签页，刷新页面后搜索tree-age-calculator.js，查看是否以200状态码成功加载。
• 若未加载到：
  • 核对文件路径：确认主题目录下js/tree-age-calculator.js文件真实存在；如果使用子主题，需将get_template_directory_uri()替换为get_stylesheet_directory_uri()，后者指向子主题路径。
  • 检查入队代码：确认wp_enqueue_scripts钩子绑定无误，函数名无拼写错误。

二、修复JS函数无法触发的问题 #

• 确保页面元素ID与JS代码完全匹配：直径输入框ID必须为diameter，树种输入/选择框ID必须为species，结果展示段落ID必须为result。
• 避免DOM未加载完成时执行JS：修改JS代码，确保在DOM加载完成后绑定事件，同时增加输入验证：

  document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('calculate-btn').addEventListener('click', calculateAge);
  });
  
  function calculateAge() {
     const diameter = parseFloat(document.getElementById('diameter').value);
     const species = parseFloat(document.getElementById('species').value);
  
     if (isNaN(diameter) || isNaN(species) || species <= 0) {
         document.getElementById('result').innerHTML = '请输入有效的直径和树种系数';
         return;
     }
  
     const age = (diameter / species) * 60;
     document.getElementById('result').innerHTML = '树木年龄约为 ' + age.toFixed(2) + ' 年';
  }
  

  • 页面计算按钮需添加对应ID：<button id="calculate-btn">计算树龄</button>

三、解决文章中PHP代码无法执行的问题 #

WordPress文章默认禁止直接执行PHP代码，可通过以下两种方式解决：

1. 使用短代码：在主题functions.php中添加短代码函数：

   function tree_age_shortcode() {
       ob_start();
       ?>
       <div class="tree-age-calculator">
           <label>树木直径：<input type="number" id="diameter" step="0.1" placeholder="输入直径数值"></label>
           <label>树种系数：<input type="number" id="species" step="0.1" placeholder="输入树种系数"></label>
           <button id="calculate-btn">计算树龄</button>
           <p id="result"></p>
       </div>
       <?php
       return ob_get_clean();
   }
   add_shortcode('tree_age_calculator', 'tree_age_shortcode');
   

   之后在文章中插入[tree_age_calculator]短代码即可渲染计算器。
2. 使用自定义页面模板：创建自定义页面模板文件，将PHP与HTML代码写入模板，再给目标页面选择该模板。

四、额外排查项 #

• 切换到WordPress默认主题（如Twenty Twenty-Four）测试，排除主题脚本冲突。
• 禁用所有插件后逐步启用，定位可能存在冲突的插件。

内容的提问来源于stack exchange，提问作者Atiq 69