值得一看

WordPress如何给插件的主文件里引用当前插件目录的CSS文件?

我们在开发的过程中,创建了一个新的CSS文件,例如:style.css文件,我们如何可以在插件的主文件中进行引用呢?

认识wp_enqueue_script钩子

首先介绍一下WordPress程序的wp_enqueue_scripts钩子,wp_enqueue_scripts钩子是WordPress标准钩子,用于在前端页面中加载 CSS 和 JavaScript 脚本。它在 wp_head 钩子之后被触发,但在 wp_footer 钩子之前被触发。这意味着它是在网页头部加载样式和脚本文件的最佳时机。

使用wp_enqueue_script钩子

  1. 定义一个PHP函数名为:zibll_selectophobia_enqueue_styles
  2. 定义PHP函数的样子是这样的:function zibll_selectophobia_enqueue_styles() {
  3. 然后使用 wp_enqueue_style 函数加载一个名为 zibll-selectophobia-styles 的样式表文件,并将其位置设置为当前插件目录下的 style.css 文件。
  4. 成了wp_enqueue_style( ‘zibll-selectophobia-styles’, plugin_dir_url( FILE ) . ‘style.css’ );这样
  5. 上面代码以WP的wp_enqueue_style钩子函数开头,传入定义的PHP函数名 zibll-selectophobia-stylesplugin_dir_url( FILE ) . 'style.css'
  6. plugin_dir_url( __FILE__ ) 是一个 WordPress 函数,用于获取当前插件目录的 URL。它接收一个参数 __FILE__,表示当前文件的路径和文件名。
  7. 我们使用 plugin_dir_url( __FILE__ ) 来获取当前插件目录的 URL,并将其与 style.css 文件名组合在一起。这样就可以得到完整的样式表文件的 URL。
  8. plugin_dir_url( __FILE__ ) . 'style.css' 表示当前插件目录下的 style.css 文件的 URL。当我们使用 wp_enqueue_style 函数加载样式表时,就可以使用这个 URL 来指定要加载的文件。
  9. 然后使用}括号结束
  10. 最后带上钩子函数add_action( 'wp_enqueue_scripts', 'zibll_selectophobia_enqueue_styles' );
  11. add_action代表WordPress 中的动作钩子也是Action Hook函数之一
  12. 括号里传入第一个参数wp_enqueue_scripts是前面介绍到的WP的钩子,可以在 wp_head 钩子之后被触发

最后整体代码结果

function zibll_selectophobia_enqueue_styles() {
    wp_enqueue_style( 'zibll-selectophobia-styles', plugin_dir_url( __FILE__ ) . 'style.css' );
}
add_action( 'wp_enqueue_scripts', 'zibll_selectophobia_enqueue_styles' );
© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
发表回复 抢沙发

请登录后发表评论

    暂无评论内容