快速掌握WordPress中加载JavaScript脚本的方法

在 WordPress 中加载脚本（为 CSS 和 JS，下同）文件，大多数人的做法是直接在 header.php 文件中添加 link 标签，或者把 link 标签通过 wp_head 钩子直接添加到 head 标签里，这种做法是不符合官方规范的。

标准的脚本加载方式应该是使用 WordPress 官方提供的函数（后边会说），统一标准有几个好处，首先就是更加安全和利于管理，其次是更加的方便快捷，而且不仅主题能挂载脚本，插件也可以，并且还能管理脚本，并且调整挂载顺序和位置和其它内容。

在哪个钩子加载？

在调用加载脚本函数之前，我们首先要确定函数在哪个钩子处执行，有四个常用的脚本加载钩子，分别是 wp_enqueue_scripts（在前台加载）、admin_enqueue_scripts（在后台加载）、login_enqueue_scripts（在登录页加载）和 init（全局加载）。

最常用的应该是 wp_enqueue_scripts 了，挂载到这上面，脚本只在前台加载。

加载 JavaScript 脚本

比如说我想在前台加载一个 JS，是主题根目录 JS 文件夹的 themes.js 文件。首先需要使用 wp_register_script() 函数把 JS 添加到脚本库里边（注册脚本），然后再使用 wp_enqueue_script() 函数挂载脚本。

function Bing_enqueue_scripts(){
  wp_register_script( 'themes_js', get_bloginfo( 'template_directory' ) . '/js/themes_js.js' );//注册 ID 为 themes_js 的 JS 脚本
  wp_enqueue_script( 'themes_js' );//挂载脚本
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

加载 CSS 脚本

function Bing_enqueue_scripts(){
  wp_register_style( 'style', get_bloginfo( 'template_directory' ) . '/style.css' );
  wp_enqueue_style( 'style' );
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

小结

本文只是非常简单的讲解了怎么加载脚本，合理的利用脚本排队机制，可以让程序变得灵活，也可以加快效率。

赞 (0)

相关推荐

  • 几个优化WordPress中JavaScript加载体验的插件介绍

    WordPress 本身以及主题和插件通常需要加载一些 JavaScript 来实现某些特殊功能.为了最大限度地保证兼容性,不至于出现 JavaScript 失效的情况,所以一般在页头加载 JavaScript 文件.但是根据 Yahoo 开发者论坛的建议,加载 JavaScript 应该尽量在页尾以提高页面的显示(响应.渲染)速度.本文根据作者的使用经验介绍几个相关插件,并说明如何在某些特殊页面仍然在页头加载 JavaScript. 下面先简单介绍几个相关的优化 JavaScript 的 Wo

  • WordPres对前端页面调试时的两个PHP函数使用小技巧

    函数esc_js()(过滤 Html 内嵌 JS) 参数 $text (字符串)(必须)要过滤的字符串. 默认值:None 返回值 (字符串)返回过滤后的字符串. 例子 <input type="text" value="<?php echo esc_attr( $instance['input_text'] ); ?>" id="subbox" onfocus="if ( this.value == '<?ph

  • wordpress之js库集合研究介绍

    今天给大家介绍一下 wordpress用到的js效果库 1.fat.js实现颜色的渐变效果 首先包含fat.js文件,只要在你要实现效果的元素上加上class="fade-FFFF33″形式就可以了.FFFF33是开始的颜色,会从这个颜色渐变到元件的背景色. 2. dbx.js 轻松实现div层拖动效果 只要包括dbx.js文件后,对层设置class=dbx-box,dbx-handle就可以了,具体请参考 http://www.brothercake.com/site/resources/sc

  • 以JavaScript来实现WordPress中的二级导航菜单的方法

    以JavaScript来实现WordPress中的二级导航菜单的方法

    导航菜单 导航菜单早已 "深入民心", 在博客上的应用日益重要且多样. 从本文开始, 我将开展几个关于 WordPress 导航菜单的话题, 讨论如何在 WordPress 上使用和加强导航菜单, 话题间有一定的承接关系, 难度也会逐步增加. WordPress 上的导航菜单一般有两种, 页面导航菜单和分类导航菜单. 可曾记得? WordPress 是可以撰写独立页面的, 页面导航菜单就是以首页和各个独立页面组成的菜单. 而分类导航菜单则是以首页和各个分类组成的菜单. 这是效果演示 既

  • 用js代码和插件实现wordpress雪花飘落效果的四种方法

    用js代码和插件实现wordpress雪花飘落效果的四种方法

    冬天到了,很多的博客空间都加了雪花的效果,于是去看了看他们的效果实现.有好几个效果代码,就拿过来了,有需要的朋友可以拿过去试试看. 雪花大图片: 效果代码一 <script type="text/javascript" language="javascript"> (function() { function k(a, b, c) { if (a.addEventListener) a.addEventListener(b, c, false); els

  • 快速掌握WordPress中加载JavaScript脚本的方法

    在 WordPress 中加载脚本(为 CSS 和 JS,下同)文件,大多数人的做法是直接在 header.php 文件中添加 link 标签,或者把 link 标签通过 wp_head 钩子直接添加到 head 标签里,这种做法是不符合官方规范的. 标准的脚本加载方式应该是使用 WordPress 官方提供的函数(后边会说),统一标准有几个好处,首先就是更加安全和利于管理,其次是更加的方便快捷,而且不仅主题能挂载脚本,插件也可以,并且还能管理脚本,并且调整挂载顺序和位置和其它内容. 在哪个钩子

  • 在C++中加载TorchScript模型的方法

    本教程已更新为可与PyTorch 1.2一起使用 顾名思义,PyTorch的主要接口是Python编程语言.尽管Python是合适于许多需要动态性和易于迭代的场景,并且是首选的语言,但同样的,在许多情况下,Python的这些属性恰恰是不利的.后者通常适用的一种环境是要求生产-低延迟和严格部署.对于生产场景,即使只将C ++绑定到Java,Rust或Go之类的另一种语言中,它也是经常选择的语言.以下各段将概述PyTorch提供的从现有Python模型到可以完全从C ++加载和执行的序列化表示形式的

  • 异步安全加载javascript文件的方法

    本文实例讲述了异步安全加载javascript文件的方法.分享给大家供大家参考.具体如下: 使用方法: (function() { __safeLoadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", function() { alert(jQuery); }); })(); JavaScript实现代码: window.__safeLoadScript = function(src, c

  • jQuery实现动态加载(按需加载)javascript文件的方法分析

    本文实例讲述了jQuery实现动态加载(按需加载)javascript文件的方法.分享给大家供大家参考,具体如下: 为了提高网页程序的性能,在很多情况下javascript 是按需加载,而不是全部写在 <head>里面.利用jQuery可以很方便的实现按需加载js. $("#load").click(function(){ $.getScript('helloworld.js', function() { $("#content").html('js 加

  • 详解Django模版中加载静态文件配置方法

    1.settings.INSTALLED_APPS下添加:django.contrib.staticfiles 2.settings.py下添加:STATIC_URL = '/static/' 3. (1)在APP下新建文件夹static,然后在这个static文件夹下创建一个当前APP的名字的文件夹,再把静态文件放到这个文件夹下:(类似于Templates配置) 在模板中这样调用: {% load static %} <img src="{% static 'front/logo.jpg

  • 在Vue.js中加载字体的正确方法

    在Vue.js中加载字体的正确方法

    添加字体不应该对性能产生负面影响.在本文中,我们将探讨在 Vue 应用程序中加载字体的最佳实践. 正确声明 font-face 的字体 确保正确声明字体是加载字体的重要方面.这是通过使用 font-face 属性来声明你选择的字体来实现的.在你的 Vue 项目中,这个声明可以在你的根 CSS 文件中完成.在进入这个问题之前,我们先来看看 Vue 应用的结构. /root public/ fonts/ Roboto/ Roboto-Regular.woff2 Roboto-Regular.woff

  • 使用jQuery异步加载 JavaScript脚本解决方案

    JavaScript 加载器在 Web 开发中是非常强大和有用的工具.目前流行的几个加载器,像 curljs.LABjs 和 RequireJS 使用都很广泛.他们功能强大的,但有些情况下可以有更简单的方案. 如果你正在使用 jQuery,有一个内置的方法可以用来加载脚本.如果你想延迟加载插件或任何其他类型的脚本,都可以使用这种方法.下面给大家介绍如何使用它. 实现方法 jQuery 内置有 getScript 方法来加载一个脚本,处理返回的结果可以有几种方法来实现.最基本的用法 jQuery.

  • IOS开发中加载大量网络图片优化方法

    IOS开发中加载大量网络图片如何优化 1.概述 在IOS下通过URL读一张网络图片并不像其他编程语言那样可以直接把图片路径放到图片路径的位置就ok,而是需要我们通过一段类似流的方式去加载网络图片,接着才能把图片放入图片路径显示.比如: -(UIImage *) getImageFromURL:(NSString *)fileURL { //NSLog(@"执行图片下载函数"); UIImage * result; NSData * data = [NSData dataWithCont

  • Flash中加载外部文件的方法

    Flash可以通过帧.按扭.影片剪辑来调用外部文件.调用的外部文件包括:外部文本文件.外部程序文件.外部*.swf文件.外部图片文件.外部音乐文件.外部脚本文件 .现总结如下: [loadMovieNum()函数] [用法]:loadMovieNum("url",level [, variables])  [功能]: 函数:在播放原来加载的 SWF 文件的同时将 SWF 文件或 JPEG 文件加载到 Flash Player 中的某个级别.  [参数]:首先我们可以看到该函数有3个参数

  • Lua5.1中加载dll动态链接库的方法

    一.加载专门为lua写的扩展dll 使用require或package.loadlib方法,在此不做过多解释. 二.加载不是专为lua写的扩展dll "不是专为lua写的扩展dll"是指:dll中并没有以lua注册函数的方式导出接口,而是以__declspec(dllexport)形式导出的接口.这样就不能使用"package.loadlib"方法调用,而要使用lua5.1封装过的"alien.load()"方法.(Lua\5.1\lua\ali

随机推荐