长沙网站建设为您详解wp_enqueue_script函数(wordpress主题制作最佳引用静态脚本js文件函数)

2020年07月11日 wordpress 58点热度 0人点赞 0条评论

wp_enqueue_script函数是wordpress主题最佳引用静态文件的方法,今天长沙网站建设公司建站我帮您为您详细讲解wordpress的wp_enqueue_script函数的使用方法。

大部分人在制作wordpress主题引用js文件时,会直接在header.php或footer.php文件中添加js、css等这些静态文件代码,但是更好的实现方法其实是在制作wordpress主题时使用wp_enqueue_script函数来引用这些静态资源。通过该函数可以安全地将javascript代码加入到WordPress创建的页面中,这样不仅可以最大限度地保证兼容性,还是可以提高wordpress性能效率的一个方法。

wordpress主题制作

wp_enqueue_script语法结构

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

wp_enqueue_script参数详解

$handle – 调用的脚本名称,用于区别其它js,因此不能和其它js文件命名相同。
$src – 静态资源文件的路径(即url),不要直接使用域名url,要使用路径函数,如parent theme使用get_template_directory_uri,child theme使用get_stylesheet_directory_uri。
(WP模板路径相关的函数中,通常带有template的是指parent theme,带有stylesheet的指向child theme)
$deps – 依赖关系,加载的js文件所依存的其它js的标识字串数组(array:string),即需要在本代码之前加载的代码的名称
(如js脚本依赖jquery库,那么这里要用数组的形式写上jquery),非必需。
$ver – 加载js文件的版本号,作为查询字串附加在路径的末尾,作用是确保正确的版本信息传递给了客户端,以免受到缓存的影响
(如js脚本发生变化时,通过更改版本号可以强制客户浏览器更新缓存),默认为false,调用当前wordpress程序的版本号,如果不想显示,则设置为NULL(不推荐)。
$in_footer – boolean类型,设置js文件调用代码是否放置在html底部,设置为ture则放在底部,设置为false则放置在head部分。提示需要模板正确放置wp_footer()函数。

wp_enqueue_script 在主题中的调用方式

长沙网站建设提示:通过wp_enqueue_script函数加载静态资源文件时,我们需要给它分配一个wordpress的钩子。如果静态资源文件只在前台调用,使用钩子wp_enqueue_scripts  如果引用的静态资源文件只在后台调用,使用admin_enqueue_scripts

只在前台引用的实现方法:

<?php
function tone_front_script() {  
   wp_enqueue_script( 'boot', get_template_directory_uri() . '/js/bootstrap.js');
}
add_action( 'wp_enqueue_scripts', 'tone_front_script' );
?>

只在后台引用的方法:

<?php
function tone_admin_script() {  
   wp_enqueue_script('boot', get_template_directory_uri() . '/js/bootstrap.js');
}
add_action('admin_enqueue_scripts', 'tone_admin_script');
?>

另外一种方法,使用wp_head钩子和admin_head钩子

// 为WordPress后台添加js代码
<?php
    function admin_jscss() {
        wp_enqueue_style( 'admin-myjscss', get_template_directory_uri() . '/css/bootstrap.css' );
        wp_enqueue_script('admin-myjscss', get_template_directory_uri() . '/js/bootstrap.js' );
        wp_enqueue_script( 'admin-myjscss', get_template_directory_uri() . '/js/jquery.min.js' );
    }
    add_action('admin_head', 'admin_jscss');
?>

以上就是长沙网站建设为您讲解的关于wordpress主题制作最佳引用静态文件函数wp_enqueue_script的使用方法。长沙网站建设提醒您,一个好的wordpress主题的制作是十分耗费心力和时间的,方方面面都需要考虑到,所以在网站建设的时候选择一个技术资深的程序员是十分有必要的!

建站我帮您

保持饥渴的专注,追求最佳的品质

文章评论