首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

WordPress 通过模板文件和自带函数引入 cssjs 两种方法

WordPress 引入css/js 是我们制作主题时首先面对一个难点,任何一款主题都要加载自己 css,js,甚至很有可能还需要加载 Jquery 文件,网上方法特多,说法不一,我们今天借鉴 wordpress...该参数只在WordPress不了解脚本情况时使用。默认值:None $deps(数组)(可选)脚本所依靠句柄组成数组;加载该脚本前需要加载其它脚本。若没有依赖关系,返回false。..., $src, $deps, $ver );,若脚本没有注册直接使用 wp_enqueue_script,需要先调用 add 方法,也就是说重复 enqueue 一个脚本就会运行多次 add 方法,降低了程序效率...在 WordPress 中,注册样式是“可选”。如果你样式不会被其他插件使用,或者你不打算使用任何代码来再次加载它,你可以自由地排队样式而不需要注册它。继续看看它是如何实现。...wp_enqueue_script() 与 wp_print_scripts() 区别是: wp_enqueue_script() 是告诉 WordPress “我在这个页面上需要用到某个 JavaScript

1.7K30

WordPress 函数:wp_enqueue_script() 安全引入 JS

WordPress 主题最佳引用 js 文件方法是使用 WordPress 内置 wp_enqueue_script() 函数,通过该函数可以安全地将javascript 代码加入到 WordPress...创建页面中,不仅可以最大限度地保证兼容性,还是提高 WordPress 性能效率一个方法。...> 参数 $handle – 调用脚本名称,用于区别其它js,因此不能和其它js文件命名相同。...(array:string),即需要在本代码之前加载代码名称 (如js脚本依赖jquery库,那么这里要用数组形式写上jquery),非必需。...$ver – 加载js文件版本号,作为查询字串附加在路径末尾,作用是确保正确版本信息传递给了客户端,以免受到缓存影响 (如js脚本发生变化时,通过更改版本号可以强制客户浏览器更新缓存),默认为false

79420
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    WordPress 教程:如何正确引用 JavaScript 和 CSS 文件

    在开发 WordPress 插件或者是制作 WordPress 主题时候,都会引用一些 JavaScript 和 CSS 脚本资源。...通常大家直接使用 link、script 标签写进 HTML 当中,其实 WordPress 内置了比较完善引用脚本函数和方法。...WordPress 排队引用(Enqueue Scripts)资源机制 在 WordPress 中引用资源,应该使用 wp_enqueue_script 这个函数,函数名中有个单词 enqueue 是排队或者排序意思...此外,WordPress 中内置了一些常用库(例如 jQuery、jQuery UI 等),我们可以使用 wp_enqueue_script 这个函数直接调用内置库,可以节约代码量,更加清晰规范。...> 在 WordPress 主题开发中使用 wp_enqueue_script 引入资源 上面的例子都是以插件开发引用资源为例,在主题中引用方法相似,主要区别就在于使用对应函数获取主题目录从而得到主题下面的资源文件地址

    1.2K40

    WordPress 教程:使用 wp_localize_script 从 PHP 传递参数给 JavaScript

    中,然后 JS 脚本就用该对象去输出对应语言文本了。...JSSDK jweixin.js 和我们自己写 weixin.js: wp_enqueue_script('jweixin', 'http://res.wx.qq.com/open/js/jweixin...wp_localize_script('weixin', 'weixin_data', $weixin_data); wp_localize_script 函数一共有三个参数: 第一个是:$handle,需把数据附加到脚本...将 wp_localize_script 从 PHP 传递给 JavaScript 参数不编码成 unicode 但是从上面可以看到中文都编码成 unicode,虽然使用上没有什么问题,但是看起来总是不爽...wp_localize_script 在最后 data 参数中提供了一个叫做 l10n_print_after key,它可以无任何干扰直接输出值,我们把 data 参数,使用 json_encode

    2.8K20

    指定 WordPress 页面按需加载 JavaScript

    wordpress 主题或插件中加载 JavaScript 时,官方推荐方法是使用 wp_enqueue_script() 来加载,该函数可以指定 JavaScript 依赖库,指定 JavaScript...但是,该插件缺少指定在某些页面加载 JavaScript 设置参数。所幸是,我们可以通过 WordPress 函数自己动手来实现这个功能。...当一个比较大库只在某一个或几个页面使用时,我们不需要在每个页面上加载所有脚本,而只需要在特定页面模板中加载即可,以免其他页面加载不需要 JavaScript 文件而影响页面打开速度,增加服务器开销...(){ wp_enqueue_script('jquery'); // 加载每个页面都需要 JavaScript 文件 wp_enqueue_script('my_second_script.../js/imagesloaded.js'); ... } } } 在实际 WordPress 主题开发工作中,并不是每个主题都需要这么操作。

    2.2K10

    替换WordPress 自带默认 jQuery库, jQuery库页脚加载

    在开发WordPress 主题或者WordPress 插件时候,常常要通过wp_enqueue_script这个钩子挂载WordPress 自带 jQuery库而非是通过硬编码方式来加载,毕竟是为了避免多次加载...但在实际操作中,常常会有各种各样问题出现。...详见《WordPressjQuery库不起作用相关问题》。再者,为了速度上考虑,加载一个80kb+jQuery 库最好是通过第三方来(如google、SAE)——特别是主机不给力网站。...接下来代码就是解决上面提到问题。...is_admin() )是为了确保这些脚本和css只在前端加载,不会在后台管理界面加载。 第三方jQuery 库一般都有CDN 驱动,可以保证最大速度。

    2.3K100

    WordPress面试题

    添加样式和脚本: 创建一个style.css文件来定义主题样式。 使用wp_enqueue_style和wp_enqueue_script函数在主题中添加样式和脚本。...-- Your HTML, CSS, and JavaScript code goes here --> 使用 WordPress 函数: 你还可以使用 WordPress 提供函数来加载外部脚本和样式...问题五 在 WordPress 中,密码通常是使用加密算法进行哈希处理,而不仅仅是 MD5。...然而,如果你知道用户密码 MD5 散列值,并且想要手动修改密码,可以尝试以下步骤: 请注意,在进行任何更改之前,请务必备份您 WordPress 站点,以防发生意外情况。...清除缓存: 在 WordPress 中,清除任何缓存以确保新密码立即生效。 问题六 作为一个科班学生,一直觉得拥有自己独立网站是一件十分酷事情!

    34740

    WordPress 技巧:只有指定 Shortcode 存在时才载入相关脚本文件

    WordPress 3.6 版本增加了一个新函数 has_shortcode(),这个函数主要功能就是检测指定内容里是否存在指定 Shortcode 使用,带来好处就是只在有使用指定 Shortcode...文章页面才载入相关脚本文件,这样细微纠结虽然不能给页面载入带来可见载入速度提升,但锱铢必较向来是我癖好,好习惯总能带来不错效果。...(){ global $post; if( has_shortcode( $post->post_content, 'your-shortcode') ){ wp_enqueue_script...('has_shortcode') AND has_shortcode( $post->post_content, 'your-shortcode') ){ wp_enqueue_script(...'whatever'); }else{ wp_enqueue_script( 'whatever'); } } add_action( 'wp_enqueue_scripts', 'wpjam_shortcode_scripts

    21320

    WordPress 技巧:社会化评论插件多说提速技巧

    分享几个社会化评论插件多说提速技巧:1. 不再查询 WordPress 原生留言。 2. 不再加载 comment-reply.js,3.把多说 JavaScript 脚本移到 footer。...不再查询 WordPress 原生留言 我们知道使用多说这样社会化评论服务之后,WordPress 本地留言除了备份之外,其他已经没有什么作用了。...也就没有必要了,我们可以删除当前主题下 header 中调用代码实现 WordPress 更快加载。...一般 comment-reply.js 加载代码如下: if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script...把多说 JavaScript 脚本移到 footer 多说默认是在 Head 输出它相关 JavaScript 脚本,但是有时候因为多说服务器不稳定问题,会引起整个博客速度被拖累,所以我们应该把多说

    48820

    WordPress二次开发之调用ajax

    以字体样式插件为例,当用户输入字体颜色值时异步判断值类型是否合法 引入JS 通过wp_enqueue_script方法引入 wp_enqueue_script( $handle, $src, $deps..., $ver, $in_footer ); $handle:(必需)脚本名称。...默认值:None $src:(可选)WordPress网站根目录下JS路径。如:”/wp-includes/js/xxx.js”。...默认值:None $deps:(可选)依赖关系数组;加载该脚本前需要加载其它脚本。默认值:array() $ver:(可选)指明脚本版本号字符串(若存在版本号)。默认为false。...}) }) 上面js实现了当颜色输入框离开焦点时,对输入值进行判断 ajaxs使用url 为 wp_localize_script函数产生对象 需要注意是,这里必须使用jQuery.document.ready

    85910

    WPJAM「静态文件」:一键合并 WordPress 插件和主题 JS 和 CSS 文件,加快页面加载速度

    每个插件和主题可能有自己 CSS 和 JavaScript 内联代码或者文件,如果 CSS 和 JavaScript 内联代码或者文件一多,就开始出现了两个比较难受问题: 前端静态文件问题 1....一键合并 JS 和 CSS 文件 有没有什么更好方法来解决这些问题呢?有的,今天推出 WPJAM「静态文件」插件就是要专门来解决这个问题。...激活之后,在 WordPress 后台「WPJAM」菜单下就会新增「静态文件」子菜单,点击进入: 首先勾选「合并静态文件」按钮,然后保存,当然如果有额外脚本和样式也可以先填入,保存之后,页面就会出现当前系统将会合并那些文件和内联代码...如果已经安装了 WPJAM 「静态文件」插件,并激活合并功能之后,我们就不需要 WordPress 原来注册脚本和样式,而是通过 wpjam_register_static(key, args) 把静态文件注册到合并列表中...Script Loader 通过恢复 WordPress 联合加载方式来优化 WordPress 后台脚本加载。 外部链接 将文章或评论中外部链接加上安全提示中间页。

    7K30

    php 获取连续id,WordPress文章ID连续及ID重新排列方法

    解决Wordpress 文章 ID连续问题,同时让Wordpress 文章 ID重新排列。在用以下方法前,先备份好网站文件和数据库文件,以免操作不当造成损失。...’, false); 二、打开wp-admin下 post-new.php(第46行)和post.php(第177行)这两个文件 将其wp_enqueue_script(‘autosave’); 删除或者注释...,建议注释// wp_enqueue_script(‘autosave’); 三、打开wp-admin\includes\post.php文件 找到if ( create_in_db ),在它前一行添加...如果以前Wordpress发表过文章造成ID不连续,我想让ID连续有什么办法,当然有咯。请看让Wordpress文章ID重新排列方法介绍。...现在就顺便介绍让Wordpress文章ID重新排列方法。

    9.2K40

    不仅能帮你写 WordPress 插件,ChatGPT 还能一步一步教你写 WordPress 主题

    昨天尝试了 ChatGPT 之后,他帮我写了一个插件,运行完全没有问题,如果自己简单改改完全可以拿来用,今天继续尝试使用 ChatGPT 来写 WordPress 主题,没想到竟然这么强大,可以一步一步教我写...不过,我可以回答您关于 WordPress 主题开发问题,并给您一些建议和指导。...我让它继续: ChatGPT 让我们在主题目录下创建 functions.php 文件,然后使用了 WordPress 提供 wp_enqueue_style 和 wp_enqueue_script...函数加载了样式表和脚本文件;使用了 register_nav_menus 函数注册了菜单;使用了 add_theme_support 函数启用了特色图像。...这次它竟然知道 WordPress template-parts 功能,这个功能可以在同一个 WordPress 主题中使用多种不同模板,以满足不同需求,这已经是非常个性化需求了。

    61230

    WordPress主题中加载jQuery最佳方法

    原因很简单,HTTP / 1.1规范表明浏览器不能并行下载两个以上组件。 在WordPress模板中加载JavaScript和jQuery最佳方法是使用wp_enqueue_script。...这样可以更好控制JavaScript文件加载时间点和加载位置。下图是我在丘壑博客上添加用于代码语法高亮JavaScript,放在子主题functions.php文件中。...在Wordpress中注册prism.js 速度优化 在下面的代码片段中,我们先把WordPress中默认自带jQuery库取消注册,然后在页面最后部分加载国内CDN版本。...使用CDN版本jQuery可以提升加载速度 ,使用户可以就近取得所需内容,提高用户访问网站响应速度。将下面的代码放在子主题functions.php文件中即可。 ?...然后在打开Chrome开发工具,选择查看Network 。你应该看到jQuery脚本已成功加载,并且已经移到了页面最后,也命中了CDN缓存,如下所示。

    2.5K31

    php更换wordpress用户头像,将用户本地上传头像功能集成到WordPress主题中

    之前让WordPress支持注册用户上传自定义头像功能 一文,通过安装Simple Local Avatars和 WP User Avatar插件,可以让注册用户本地上传头像代替默认Gravatar...头像,不过一般都认为插件安装多了,会影响速度,那么我们就以WP默认主题Twenty Fifteen为例,把这个功能集成到WordPress主题中,即可方便用户,也显示得主题高大上。...第三步,打开插件 simple-local-avatars.php 文件,将大约第178行wp_enqueue_script( ‘simple-local-avatars’, plugins_url...$script_name_append . ‘.js’, array(‘jquery’), false, true ); 替换为: wp_enqueue_script( ‘simple-local-avatars...文件下载 未经允许不得转载:肥猫博客 » php更换wordpress用户头像,将用户本地上传头像功能集成到WordPress主题中

    96130
    领券