如何在文档准备/加载后将自定义JS插入到WP中

Question

我真的很恼火的是，通常用于在Wordpress主题中添加自定义JS的块/部分非常小，不便于编写。

寻找一种方法来添加更大的代码，没有子主题，在一种方式，它不会被覆盖后更新，并比小方框中:自定义->通用->自定义CSS&JS更方便。

Answer 1

最后，我使用了代码片段插件，但当使用它们的示例添加js时，它会在文档加载之前加载开头的代码。这样，我就不能编辑现有的页面/样式/块/标签。

这并不是很复杂，但这里有一个小的补充：

// ensure that query has been loaded to use: jQuery / $()
add_action( 'wp_enqueue_script', function () {
    wp_enqueue_script( 'jquery' );
} );

// add your custom function
add_action( 'wp_head','my_custom_function'); 

function my_custom_function() { 
?>

<script>

  jQuery(document).ready(function() {
    // ...
    // write your custom javascript code here
    // ...
  }

</script>
<?php }

Answer 2

在文件中，你正在编写的代码必须在body标签之前和html代码之后被调用。不过，如果你想在同一个文件中使用，那么可以在setTimeout中使用下面的代码。

    // ensure that query has been loaded to use: jQuery / $()
add_action( 'wp_enqueue_script', function () {
    wp_enqueue_script( 'jquery' );
} );

// add your custom function
add_action( 'wp_head','my_custom_function'); 

function my_custom_function() { 
?>

<script>

  jQuery(document).ready(function() {
    setTimeout(function(){
        // ...
        // write your custom javascript code here
        // ...
    },1000);
  }

</script>
<?php }