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,如需转载请自行联系原作者

相关文章
|
1月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
19天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
10天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
10天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
50 1
|
19天前
|
前端开发 JavaScript
如何在 CSS 变量中使用函数?
【10月更文挑战第28天】虽然CSS变量本身不能像传统编程语言中的函数那样直接进行复杂的运算和逻辑处理,但通过CSS预处理器、`calc()` 函数以及与JavaScript的结合,可以在很大程度上实现类似函数的功能,提高CSS样式的灵活性和可维护性,满足各种不同的页面设计和交互需求。
|
15天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
28 3
|
19天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
26天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
78 6
|
25天前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
39 5
|
1月前
|
XML 搜索推荐 机器人
五个 WordPress 插件可提高网站参与度
五个 WordPress 插件可提高网站参与度
下一篇
无影云桌面