Wordpress用get_current_screen函数来选择性加载插件中的JS和CSS

简介:

很多人都说过,“一个良好的 WordPress 使用者只加载他们需要的文件。” 这个原则既适用于前端,也适用于后端。当你只是想 CSS 和 JS 出现在你所创建的那个页面,就没有必要在后台也加载了。

“绝对不要在所有的管理界面上都允许 CSS 和 JS 文件,这会引起与其他插件的冲突。”

WordPress 函数就能解决这个问题

几乎所有的管理员页面都有一个唯一的 URL,所以要做到在需要的页面上加载 JS 和 CSS 文件并不难。可以使用 $_SERVER['REQUEST_URI'] 或者是 $_GET['action'] 参数。其实还有一种更快捷,简单而又标准化的方式来实现这个目的。那就是 get_current_screen 函数。

关于 get_current_screen function 你需要了解的事情

  • 是在 WordPress 3.1 引入的,所以如果你在更旧版本上使用,会返回 call to undefined function 错误。如果不确定,可以用 function_exists 函数来检查一下是否可用。
  • 在 admin_init 和 init 挂钩上不可用。因为这是在那些挂钩请求之后才会初始化的。
  • 这个函数会返回 一个包含很多信息的叫 WP_Screen 的目标,但是我们需要的只是上面的 id 。
  • 在后端不可用。

几行代码就能使之大不相同

我们假设你的插件在设置菜单下有一个选项页面你是用下面这行代码写的:

add_options_page('My Plugin', 'My Plugin', 'manage_options', 'my_plugin', 'my_plugin_options');

此时,你需要添加额外的 CSS 和 JavaScript 到这个页面,代码如下:

复制代码
// Bad code below! Don't copy/paste!
add_action('admin_enqueue_scripts', 'my_plugin_scripts');
 
function my_plugin_scripts() {
    wp_enqueue_style('farbtastic');
    wp_enqueue_script('farbtastic');
}
复制代码

 

上面是个很糟糕的方案,不要那样做。上面一段代码会让包含 CSS 和 JS 的 Farbtastic 颜色选择器出现在管理员界面的每一页。如果别的插件不需要你的 CSS 和 JS, 他们就必须用 wp_dequeue_* 函数来移除。这很没有必要而且很鲁莽,因为这是可以有更好的代码的。代码如下:

复制代码
add_action('admin_enqueue_scripts', 'my_plugin_scripts');
 
function my_plugin_scripts() {
    // Include JS/CSS only if we're on our options page
    if (is_my_plugin_screen()) {
        wp_enqueue_style('farbtastic');
        wp_enqueue_script('farbtastic');
    }
}
 
// Check if we're on our options page
function is_my_plugin_screen() {
    $screen = get_current_screen();
    if (is_object($screen) && $screen->id == 'settings_page_my_plugin') {
        return true;
    } else {
        return false;
    }
}
复制代码

 

要实现这个功能很简单

使用 get_current_screen 函数来选择性加载 JS 和 CSS

如果你看到上图我们写的改进的代码,你会发现只加了一个 if 语句以及一个简单的函数 is_my_plugin_screen(这是用来确认是否打开的是插件选项页面)。控制 WP_Screen 的变量 $screen 有很多属性值,但是我们感兴趣的就只有 id 。这个 id 有一个 前缀 settings_page_,该前缀在所有的设置页面都是一样的。而字符串 my_plugin 是唯一的,因为我们在调用 add_options_page 函数的时候把它定位为第四个参数了。

代码很简单而且在所有的管理员界面都适用。可以很方便的看见转存到 $screen 的 id 是什么

echo '<pre>' . print_r(get_current_screen(), true) . '</pre>';
 

总结

  • 1、不要在所有的管理页面上都加载 CSS 或 JS 文件。这会引起与其他插件的冲突。
  • 2、在 init 函数之后使用 get_current_screen 来识别你的管理界面什么时候是可见的,可见的时候加载额外的东西。
  • 3、核心管理页面的 ID 可在 Codex 的这个页面上找到 Admin Screen Reference 。
  • 4、不要引用 <script> 或者 <style> 标签;要用 wp_enqueue_* 函数。
  • 5、先到 Codex 检查是不是你的脚本已经在 WP core 上面了。

原文:Quick Tip: Conditionally Including JS and CSS With get_current_screen

本文由 CloudCheung 翻译,转载请以可点击的超链接形式注明源地址。




本文转自黄聪博客园博客,原文链接:http://www.cnblogs.com/huangcong/archive/2013/03/23/2977349.html,如需转载请自行联系原作者

相关文章
|
10月前
|
存储 SQL 编解码
WordPress插件:WPJAM Basic优化设置
WPJAM Basic插件的「优化设置」凝聚了我爱水煮鱼博客多年使用WordPress的经验,涵盖功能屏蔽与增强优化两大模块。功能屏蔽部分可关闭如文章修订、Trackbacks、XML-RPC服务等冗余或潜在风险功能;增强优化则包括Google字体与Gravatar加速、防止Frame嵌入等实用设置,大幅提升网站性能与安全性,同时简化分类链接、添加图片时间戳等功能进一步优化用户体验。该插件是WordPress用户不可或缺的高效工具。
275 2
|
10月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1535 58
|
8月前
|
安全 机器人 API
【转】WordPress防垃圾评论:Akismet插件安装教程
Akismet 是 WordPress 官方推荐的反垃圾评论插件,由 Automattic 开发,全球安装量超 500 万次。它能智能识别并拦截垃圾评论与恶意链接,保护网站整洁与 SEO 排名。本文详解其安装、注册与配置步骤,助你轻松启用这一强大工具,为网站安全保驾护航。
269 5
|
8月前
|
前端开发 UED
【转】WordPress 评论解锁插件开发教程
本文介绍如何开发一款WordPress评论解锁插件,实现“评论后查看隐藏内容”功能。通过短代码封装、Cookie识别评论状态、样式加载等核心逻辑,帮助网站提升互动性与内容价值。插件支持自定义提示语和样式,兼顾用户体验与安全性,适用于资源分享、文章互动等场景。
161 0
|
11月前
|
前端开发 数据安全/隐私保护
“WP页面水印助手”的WordPress插件
“WP页面水印助手”的WordPress插件
249 14
|
11月前
|
存储 监控 安全
用户为啥跳出页面?装这个WordPress插件,直接看回放!
nicen-replay 是一款强大的用户行为监控与回放插件,可完整记录用户在网站上的操作,如点击、滚动、输入等,并以视频形式呈现,助您深度分析用户行为。支持表单填写回放(隐私脱敏)、轻量无感监控,且数据存储于本地服务器,安全合规。适用于电商、内容创作、企业官网等多种场景,帮助优化用户体验和提升转化率。
253 3
|
API 网络架构
WordPress定时发布插件
这是一款用于WordPress的定时发布插件,可将后台、REST API及草稿箱中的文章按设定时间自动发布,避免文章立即上线。支持指定或随机延迟发布,以及周期性发布草稿箱内容。插件依赖WordPress计划任务功能,确保稳定运行。附产品截图展示设置界面。
318 10
|
文件存储 对象存储 CDN
WordPress果果对象存储插件
将网站静态资源上传至七牛云对象存储,可减轻服务器压力、提升访问速度。功能包括自动/手动上传文件、链接替换、格式限制、第三方文件处理等。注意路径一致性、私有空间访问要求及卸载插件时的设置影响。产品截图展示设置界面与手动上传操作。
229 9
|
搜索推荐 数据库 SEO
WordPress生成长尾关键词插件
这是一款强大的长尾关键词获取工具,支持从百度、360、搜狗、头条、必应、Yandex、Google等搜索引擎抓取长尾关键词。具备寄生模式,仅需少量种子关键词即可持续扩展;支持自动或手动获取关键词,可将结果导出至文件、数据库表、分类或标签。功能全面,适用于SEO优化与内容创作。产品截图展示了设置界面与长尾关键词获取效果。
252 4
WordPress标签导入插件
本工具可将TXT文件中的标签或分类导入网站,支持标签与分类关联文章。主要功能包括:1. 导入上传的TXT文件或指定文件夹下的标签/分类文件;2. 支持导入至自定义分类/标签;3. 分类或标签可关联已有文章,支持随机或完整关联;4. 可设置关联文章类型、匹配字段及最大关联数量。产品截图展示导入标签或分类的实际效果。
209 3