萨龙网络
登录
首页-WordPress文章-WordPress-正文

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

萨龙龙萨龙龙
WordPress
7年前
0
0
1.48W
前面我们介绍了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年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1342.16M456.59W3.85W
分享:
禁用管理员通知『连接您的店铺到 WooCommerce.com 接受扩展更新和支持』
禁用管理员通知『连接您的店铺到 WooCommerce.com 接受扩展更新和支持』上一篇
WordPress 添加菜单项目描述下一篇
WordPress 添加菜单项目描述
相关文章
总数:107

如何把WordPress数据迁移至WordPress MU

前面我们介绍了如果安装WordPressMU,安装完成后我们就需要把每个独立站点的数据转移到MU中,在MU中最原始的站点数据是不需要改动,只需…
萨龙龙萨龙龙
WordPress
10年前
0
0
1.32W
0

WordPress MU多站点从子域名转子目录

使用WordPressMU多站点来管理所有的站点确实很方便,可以省去很多重复的工作,节省资源。萨龙网络使用MU多站点已经很久,已经爱不释手,也…
萨龙龙萨龙龙
WordPress
9年前
0
0
2.38W
0

WordPress+Nuxt.js+Vue.js开发的前端node项目被停止的处理方案

SlhaoPro主题前端上线后每天能收到宝塔的提示,说项目已经停止,找了很久没有发现问题。在查看node项目网站日志中的响应日志和错误日志时,…
萨龙龙萨龙龙
Nuxt.js, Vue.js, WordPress
1年前
1
1
9.73K
0

WordPress为分类添加自定义值

在开发一些比较独特的主题过程中,需要自定义很多内容,本文是如何为分类添加自定义缩略图。 将如下代码添加到主题functions.php中:…
萨龙龙萨龙龙
WordPress
8年前
0
0
1.03W
0

WordPress 判断是否在循环中的函数 in_the_loop

WordPress主题开发中,很多时间需要在文章与列表中进行判断从而输出不同的内容,比如文章分类,只想在列表中显示,文章中不显示。列表页面可直…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.01W
0

WordPress 获取用户 ID 的8种方法

在WordPress主题的开发过程中,获取用户ID的频率是很高的,可在WordPress中查看用户信息,也可以通过代码直接获取。 …
萨龙龙萨龙龙
WordPress
4年前
0
0
4.83W
0

WordPress MU多站点设置子站点上传路径和文件的URL地址

为了提高网站的访问速度,萨龙网络也将所有的媒体文件放置在二级域名下,WordPress3.5以上的版本,隐藏了后台的媒体(Media)设置页面…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.50W
0

解决网站嵌入优酷视频堆叠顺序的问题

很多网站都会插入优酷或其它网站的在线视频到自己的网站中,默认情况下优酷视频的堆叠顺序并不受CSS样式z-index属性的影响,在视频页面有滚动、…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.26W
0

WooCommerce 通过woocommerce_cart_item_thumbnail钩子修改购物车缩略图

在开发基于WooCommerce的商城主题时,我们一般会将模板文件添加到主题中来进行修改,对于有钩子或接口的地方,就没有必要再修改模板代码了…
萨龙龙萨龙龙
WooCommerce
5年前
0
0
1.58W
0

萨龙网络站点群所有网站使用https访问

HTTPS(全称:HyperTextTransferProtocoloverSecureSocketLayer),是以安全为目标的…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.39W
0

WordPress按角色获取可分页的用户列表并显示最新文章

最近开发了一款多功能的新闻视频类Wordpress主题Yewan,客户的网站用户也比较多,要求设计一个按权限(管理员、编辑、作者、投稿者、订阅者…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.23W
0

WordPress使用WP-Cron函数定时执行任务

WordPress本身一直有WP-Cron(计划任务)的功能,可以设置每隔一段时间来执行,不过WP-Cron功能是基于页面浏览的,所以时…
萨龙龙萨龙龙
WordPress
6年前
0
0
1.76W
0
评论表单游客 您好,欢迎参与讨论。
请输入昵称
请输入邮箱
请输入网址
0 / 0
评论列表
总数:0
萨龙网络
没有相关内容