您的浏览器需要启用 JavaScript 才能正常访问此网站。
萨龙网络
登录
首页-WordPress文章-WordPress-正文

使用 wp_add_inline_script 函数向 WordPress 站点输出脚本

萨龙龙萨龙龙WordPress7年前001.62W
前面我们介绍了wpadd_inline_style函数的使用,并为主题添加自定义样式切换功能,既然有函数可以向站点输出 css 样式,同时也可以向站点输出 script 脚本,用到的是wp_add_inline_script 函数。 函数只有在脚本已经在队列中时才会添加代码,接受包含代码的字符串$data。如果将两个或更多的代码块添加到同一个脚本$handle中,它们将按照添加的顺序打印,也就是说,后者添加的代码可以重新声明前面的代码。

一、使用

wp_add_inline_script( $handle, $data );

二、参数

1、$handle (string) (必填)添加额外样式的脚本的名称,小写的字符串。默认值:无 2、$data (string) (必填)包含要添加的CSS的字符串。默认值:无 3、$position (string)(可选)是在 handle 之前还是之后添加内联脚本。默认值:after

三、来源

文件: wp-includes/functions.wp-scripts.php
function wp_add_inline_script( $handle, $data, $position = 'after' ) {
    _wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );
 
    if ( false !== stripos( $data, '' ) ) {
        _doing_it_wrong( __FUNCTION__, sprintf(
            /* translators: 1: [script], 2: wp_add_inline_script() */
            __( 'Do not pass %1$s tags to %2$s.' ),
            '[code]<script>[/code]',
            '[code]wp_add_inline_script()[/code]'
        ), '4.5.0' );
        $data = trim( preg_replace( '#[script[^>]*>(.*)[/script]#is', '$1', $data ) );
    }
 
    return wp_scripts()->add_inline_script( $handle, $data, $position );
}
注:HTML 标签会被站点直接解析,所以 code 的尖括号改成了中括号。

四、实例

1、下面的代码可以很容易地将Typekit’s JavaScript添加到您的主题中:
function mytheme_enqueue_typekit() {
   wp_enqueue_script( 'mytheme-typekit', 'https://use.typekit.net/.js', array(), '1.0' );
   wp_add_inline_script( 'mytheme-typekit', 'try{Typekit.load({ async: true });}catch(e){}' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_typekit' );
输出结果:
[script type="text/javascript" src="https://use.typekit.net/.js?ver=1.0"]
    try{Typekit.load({ async: true });}catch(e){}
[/script]
注:加载 JS 脚本标签由于站点会直接解析,所以将尖括号改成了中括号。 2、添加内联脚本
function theme_prefix_enqueue_script() {
   wp_enqueue_script( 'main-js', '/main.js', array(), '1.0' );
   wp_add_inline_script( 'main-js', 'alert("hello world");' );
}
add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_script' );
注:『main-js』需要与已加载的 JS 脚本名称一样,内联脚本将添加到已加载脚本之前或者之后的位置。 3、对于依赖于jquery的脚本,请使用以下命令:
function theme_prefix_enqueue_script() {
   if ( ! wp_script_is( 'jquery', 'done' ) ) {
     wp_enqueue_script( 'jquery' );
   }
   wp_add_inline_script( 'jquery-migrate', 'jQuery(document).ready(function(){});' );
}
add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_script' );
通过wp_add_inline_script函数,我们就可以在 PHP 代码中控制并输出 JS 脚本。原文地址
标签:
本文原创,作者:萨龙龙,其版权均为萨龙网络所有。
如需转载,请注明出处:https://salongweb.com/wp-add-inline-script.html
萨龙龙

萨龙龙

侠客
一个平平常常的人,热爱生活、旅行和摄影,骑行去过西藏,一直计划再去。14年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1412.38M457.18W4.42W
加载中…
分享:
禁用管理员通知『连接您的店铺到 WooCommerce.com 接受扩展更新和支持』
禁用管理员通知『连接您的店铺到 WooCommerce.com 接受扩展更新和支持』上一篇
WordPress 添加菜单项目描述下一篇
WordPress 添加菜单项目描述
相关文章
总数:114

WordPress一行代码允许重复评论的功能

默认情况下WordPress是不允许重复的评论提交,主要是为了防止垃圾评论。有些情况下又需要重复评论,最近用户需要在MNews Pro主题上定制…
萨龙龙萨龙龙WordPress2年前118.79K0

WordPress 主题选项框架 Codestar Framework Pro 2.0专业版使用

萨龙网络在2018年9月份就写了一篇《WordPress 简约实用的主题选项框架 Codestar Framework》文章来介绍 Codest…
萨龙龙萨龙龙WordPress7年前003.04W0

WordPress获取自定义文章类型分类下的文章并循环

Wordpress获取分类文章的函数有query_posts和WP_Query,两个函数的功能都很强大,推荐使用WP_Query函数来查询文章。…
萨龙龙萨龙龙WordPress10年前001.65W0

WordPress MU多站点网络域名绑定插件Domain Mapping的安装与使用

Wordpress MU是多站点的程序,新创建的站点地址都是基于主域名下的二级域名,而强大的Wordpress可以为每个站点绑定不同的域名,这时…
萨龙龙萨龙龙WordPress11年前002.31W0

WordPress判断文章分页第一页和最后一页

Perimg主题,最近开发的一个图片主题,与之前开发的主题又有很多的进步,以及更多的、少见的实用功能。主题文章中如果是多页就会显示上下篇、上下页…
萨龙龙萨龙龙WordPress10年前001.27W0

WordPress循环中判断为每篇文章设计不同的样式

新闻视频类Yewan主题的首页文章布局是不规则,文章的布局多样化,这是如何实现的?其实是很简单的,我们在循环中进行判断,每一篇文章都可以输出不同…
萨龙龙萨龙龙WordPress10年前001.29W0

WordPress 插入页面函数 wp_insert_post

萨龙网络已经开发了很多 WordPress 主题,LensNews 主题要创建的页面较多,所以导致很多用户来咨询如何设置用户中心,在最新上线的 …
萨龙龙萨龙龙WordPress8年前002.24W0

WordPress前台登录函数wp_login_form的用法

网站开放注册的站点都会添加一个前台登录与注册的表单或页面,这样方便用户登录站点,同时也保证网站后台的安全性。今天我们来介绍前台登录函数wp_lo…
萨龙龙萨龙龙WordPress9年前002.01W0

WordPress为所有文章自动添加自定义字段

Sixianqiu主题是专为诗歌设计开发的主题,有一些朋友也需要这样的多形式博客主题,就整理出来了。一开始所有的文章内容都是居中显示,这样对于其…
萨龙龙萨龙龙WooCommerce9年前001.77W0

WordPress 功能函数—— add_clean_index(向指定的表添加索引)

描述 向指定的表添加索引。 用法 add_clean_index( string $table, st…
萨龙龙萨龙龙WordPress Functions7年前001.02W0

WordPress 功能函数—— addslashes_gpc(添加斜杠以转义字符串)

描述 添加斜杠以转义字符串。 如果设置了magic_quotes_gpc,将首先删除斜杠。 用法 …
萨龙龙萨龙龙WordPress Functions7年前009.16K0

WordPress龙霄主题:AI一键翻译

基于 DeepSeek 大模型,为龙霄主题深度集成 AI 智能翻译引擎。在 WordPress 后台一键完成 Polylang 字符串、页面、文…
萨龙龙萨龙龙WordPress1个月前009220
评论表单游客 您好,欢迎参与讨论。
加载中…
评论列表
总数:0
萨龙网络
没有相关内容