WordPress 加载Javascript和CSS的方法
我们知道正常一个网页加载Javascript和CSS，一般的方法是在head中通过下面的方法来加载
1 2 | <script type="text/javascript" src="js文件路径"></script> <link rel="stylesheet" type="text/css" href="css文件路径"> |
但在wordpress中有更加高效的加载方式，在function.php里进行动态的加载。官方文档很多内容，包括register注册和enqueue队列两种，通过wordprss官方文档里的解释有非常多，复杂难明。没有直接了当的说明什么时候用什么。但我在官方主题的引用方法里得出结论：
1、CSS，官方主题里直接用的enqueue队列方式；
2、Javascript，建议直接使用enqueue队列方式。
总之，不知道的话就使用队列加载。
贴上我的加载实例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //加载样式表和jquery库 function mytheme_scripts() { wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), $theme_version );//加载主样式表 wp_enqueue_style( 'font-awesome' , get_template_directory_uri() . '/font-awesome/css/font-awesome.min.css' );//加载font-awesome //全局加载js脚本 wp_enqueue_script( 'min-script', get_template_directory_uri() . '/js/jquery.min.js', array( 'jquery' ) );//加载本地JS库，如果要加载远程库，替换成具体网址 //页面、文章页面等加载灯箱效果 if ( is_singular() ) { wp_enqueue_style( 'fancybox-style', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css');//灯箱 wp_enqueue_script( 'fancybox-script', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js'); } // 评论回复样式表. if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {//如果在页面评论加载comment-reply脚本 wp_enqueue_script( 'comment-reply' ); } } add_action( 'wp_enqueue_scripts', 'mytheme_scripts' ); |
wp_enqueue_script和wp_register_script分别什么时候使用
网上通用的说法是：当我们有一个脚本, 它会在多个地方被引用, 我们就应该先使用wp_register_script进行注册, 然后通过wp_enqueue_script进行引用, 这样做可以有效的对脚本进行统一管理, 避免硬编码, 这就好比我们使用枚举来替代魔法数一样. 万一我们需要修改脚本路径的时候, 只需要在wp_register_script注册的函数中修改一次, 而不需要在wp_enqueue_script进行多次修改。
而且分别加载，不需要的时候不加载，能有增加加载速度的作用。
我们看看官方主题是如何加载的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | function twenty_twenty_one_scripts() { // 兼容IE加载不同的样式表 global $is_IE, $wp_scripts; if ( $is_IE ) { // 如果是IE就加载下面的样式表 wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) ); } else { // 如果不是IE就加载标准的样式表 wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) ); } // 加载RTL 样式表. wp_style_add_data( 'twenty-twenty-one-style', 'rtl', 'replace' ); // 加载Print styles. wp_enqueue_style( 'twenty-twenty-one-print-style', get_template_directory_uri() . '/assets/css/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' ); // 评论回复样式表. if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {//如果在页面评论加载comment-reply脚本 wp_enqueue_script( 'comment-reply' ); } // Register the IE11 polyfill file. wp_register_script( 'twenty-twenty-one-ie11-polyfills-asset', get_template_directory_uri() . '/assets/js/polyfills.js', array(), wp_get_theme()->get( 'Version' ), true ); // Register the IE11 polyfill loader. wp_register_script( 'twenty-twenty-one-ie11-polyfills', null, array(), wp_get_theme()->get( 'Version' ), true ); wp_add_inline_script( 'twenty-twenty-one-ie11-polyfills', wp_get_script_polyfill( $wp_scripts, array( 'Element.prototype.matches && Element.prototype.closest && window.NodeList && NodeList.prototype.forEach' => 'twenty-twenty-one-ie11-polyfills-asset', ) ) ); // 加载菜单脚本. if ( has_nav_menu( 'primary' ) ) { wp_enqueue_script( 'twenty-twenty-one-primary-navigation-script', get_template_directory_uri() . '/assets/js/primary-navigation.js', array( 'twenty-twenty-one-ie11-polyfills' ), wp_get_theme()->get( 'Version' ), true ); } // Responsive embeds script. wp_enqueue_script( 'twenty-twenty-one-responsive-embeds-script', get_template_directory_uri() . '/assets/js/responsive-embeds.js', array( 'twenty-twenty-one-ie11-polyfills' ), wp_get_theme()->get( 'Version' ), true ); } add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_scripts' ); |
从上面的代码我们可以看出来，全局性的css和Javascript他都是直接使用wp_enqueue_scripts来加载，单独注册再列队的也有，所以个人认为可以只使用wp_enqueue_scripts来加载Javascript并不会影响使用。当然如果你先使用wp_register_script注册, 再使用wp_enqueue_script进行引入，那一定是正确的。
引用文档：
1、https://blog.csdn.net/qq_39482708/article/details/122519611
2、https://developer.wordpress.org/reference/functions/wp_enqueue_script/
文章评论（2 条）