How to Load Custom Javascript Script in WordPress

最新推荐文章于 2025-12-10 20:37:40 发布

转载最新推荐文章于 2025-12-10 20:37:40 发布 · 899 阅读

文章标签：

#javascript #stylesheet #wp #wordpress

stylesheet 专栏收录该内容

1 篇文章

订阅专栏

本文将指导您如何在WordPress中正确加载自定义JavaScript脚本，并通过使用特定函数实现脚本的高效加载，提升用户体验和网站性能。

While there are a number of articles out there showing you how to properly load jquery in WordPress, none of them seem to show you how to load a custom javascript script in WordPress.

This is how you load custom javascript / jquery script into WordPress in Genesis.

/** Load the scripts at the bottom of the page to increase performance and user experience 
This is Genesis specific and may vary depending on WordPress theming framework*/
add_action('genesis_after_footer', 'load_custom_js');

function load_custom_js() {
//Only load the scripts on non-admin pages
if (!is_admin()){
	//Load jquery core from Jquery.com directly
	wp_enqueue_script('my_jquery','http://code.jquery.com/jquery-1.10.1.min.js',array( 'jquery' ));		
	//Load custom jquery or js script from child theme folder 
	wp_enqueue_script('my_custom_js',get_stylesheet_directory_uri().'/js/customjs.js',array( 'jquery' ));
	}
}

The most important line in the above code snippet is:
wp_enqueue_script(‘my_custom_js’,get_stylesheet_directory_uri().’/js/customjs.js’,array( ‘jquery’ ));

my_custom_js is the script handler. Could call it anything.

get_stylesheet_directory_uri() is an inbuilt WP function that gets the file url of your stylesheet directory, which is especially useful in the Genesis framework as this gets your child theme directory file url.

js/customjs.js is the name of your custom js script and the folder it is stored in (js).