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

我使用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";
  }
}

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

javascript参考方案

实际上，您实际上并没有将所有外部脚本放入您的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函数的parameter部分：
https://developer.wordpress.org/reference/functions/wp_enqueue_script/#parameters

更新：2019/06/20

由于已将其标识为子主题，因此您需要指向CHILD主题的脚本源目录。

使用get_template_directory_uri()引用将指向父主题的目录，而不是子主题实例，而get_stylesheet_uri()指向子主题的样式表（style.css）文件。

这是最终参考的外观：

<?php

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

    add_action('wp_enqueue_scripts', 'k9stormdomestictheme_script_enqueue');

?>

提交初始化后删除某些帖子数据 - javascript

在初始化提交之后但在将数据发送到处理页面之前，是否可以过滤$ _POST表单数据？我想象过程的方式：提交->收集$ _POST数据->发送数据我想做的事：提交->收集$ _POST数据->删除某些元素->发送数据这样就不必更改处理页面以过滤掉不希望接收的元素了吗？ javascript大神给出的解决方案 当然可以，您可以在JS …

如何使用Javascript将字典列表解析为JSON格式？ - javascript

我正在尝试解析JSON格式的词典列表，以便可以使用它们的数据创建一组列表项，其中使用此数据生成文本和ID。我将以下内容传递到我的网页，并在投放之前将其存储在隐藏的div中： [{'text': 'org1', 'id': 'org1ID'}, {'text':…

如何在没有for循环的情况下在Javascript中使用Django模板标签 - javascript

我想在JavaScript中使用模板变量：我的问题是在javascript代码中使用for循环，for循环之间的所有事情都会重复..但我不想要....下面粘贴了我的代码..有人可以告诉我更好的方法吗这..因为这看起来很丑..这是我的代码： {% block extra_javascript %} <script src="/static/js…

将字符串值添加到php / javascript - javascript

您好，我有一些代码需要在其中插入一些字符串值，但是每次我输入字母时，脚本都无法正常工作。<script type="text/javascript"> "use strict"; var values = [1,2,3,4,5,6,7,8,9]; /*add string values here*/ var…

使用C＃和JavaScript绑定HTML - javascript

我想从C＃绑定HTML。我尝试了下面的代码HtmlTextWriter.write("<a onclick=\"window.open('', '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes…