Question

我使用html，css和javascript创建了具有两种模式的标头。将它们链接到html文档中。

我已决定创建一个wordpress主题，并将包括上述标题。我遵循的是Wordpress的主题开发人员手册，并只是将代码复制并粘贴到header.php等需要的地方。

这样做更合适，我创建了一个functions.php文件，并使用wp_enqueue_script添加了我的JavaScript。它不起作用。当我说不起作用时，我的意思是它甚至没有加载到页面上。

functions.php

  <?php

function k9stormdomestictheme_script_enqueue() {
  wp_enqueue_style( 'k9stormdomesticstyle', get_stylesheet_uri() );
  wp_enqueue_script( 'k9stormdomesticscript', get_template_directory_uri() . '/js/script.js', array (), 1.1, true);

}

add_action('wp_enqueue_scripts', 'k9stormdomestictheme_script_enqueue');

?>

index.php

<?php
    get_header();
    get_footer();
?>

script.js

var modalBtns = [...document.querySelectorAll(".button")];
modalBtns.forEach(function(btn){
  btn.onclick = function() {
    var modal = btn.getAttribute('data-modal');
    document.getElementById(modal).style.display = "block";
  }
});

var closeBtns = [...document.querySelectorAll(".close")];
closeBtns.forEach(function(btn){
  btn.onclick = function() {
    var modal = btn.closest('.modal');
    modal.style.display = "none";
  }
});

window.onclick = function(event) {
  if (event.target.className === "modal") {
    event.target.style.display = "none";
  }
}

非常感谢您的帮助。非常感谢你！

Answer 1

实际上，您根本没有将任何外部脚本加入到functions.php文件中。您需要将文件路径引用为wp_enqueue_script方法的第二个参数。

get_template_directory_uri()只是告诉方法转到主题文件夹的根，而没有指定要排队的javascript文件。它应该看起来像这样：

<?php

    function k9stormdomestictheme_script_enqueue() {
        wp_enqueue_style( 'style', get_stylesheet_uri() );
        wp_enqueue_script( 'script', get_template_directory_uri() . '*the-remaining-path-to-your-js-file*' );

    }

    add_action('wp_enqueue_scripts', 'k9stormdomestictheme_script_enqueue');

?>

作为参考，请查看WordPress代码参考上wp_enqueue_script函数的parameters部分： https://developer.wordpress.org/reference/functions/wp_enqueue_script/#parameters

主题开发：从functions.php链接时，JavaScript无法正常工作

1 个答案: