【WordPress教程】网站使用钩子添加JavaScript代码

什么是 JavaScript？

JavaScript 是一种编程语言，不在您的服务器上运行，而是在用户的浏览器上运行。这种客户端编程允许开发人员在不降低网站速度的情况下做很多很酷的事情。

典型的 JavaScript 代码段可能如下所示：

<script type="text/javascript">
// Some JavaScript code
</script>
<!-- Another Example: --!>
<script type="text/javascript" src="/path/to/some-script.js"></script>

使用代码手动添加 JavaScript 代码

首先，我们来看看如何将代码添加到 WordPress 网站的页眉中。您只需要根据以下情况添加相应代码到主题的 functions.php 文件或特定于站点的插件中即可。

1、添加 JS 代码整个网站顶部

function wpb_hook_javascript() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');

function wpb_hook_javascript() {
if (is_single ('16')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');

function wpb_hook_javascript() {
if (is_page ('10')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');

function wpb_hook_javascript_footer() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

function add_custom_scripts() {  

   wp_enqueue_script( 'jquery-ui', 'https://ajax.lug.ustc.edu.cn/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js', array(), '1.12.1', false);

}

add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );

4.2 主题目录，get_template_directory_uri() 为当前主题目录，可以自行修改

function tone_front_cssscript(){
    //全局加载CSS样式
    wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
    //全局加载js脚本
    wp_enqueue_script( 'jquery-min', get_template_directory_uri() .'/js/jquery.min.js' );
}
add_action( 'wp_enqueue_scripts', 'tone_front_cssscript' );

wp_enqueue_scripts钩子主要用来前台调用css和js文件

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>