如何在我的 WordPress 插件中包含 CSS 和 jQuery?
如何在我的 WordPress 插件中包含 CSS 和 jQuery?
对于样式 wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );
然后使用:wp_enqueue_style('namespace');
在您希望 css 加载的任何地方。
脚本如上,但加载 jquery 的更快方法只是使用在 init 中加载的 enqueue 来加载您希望它加载的页面: wp_enqueue_script('jquery');
除非您当然想将 google 存储库用于 jquery。
您还可以有条件地加载您的脚本所依赖的 jquery 库:
wp_enqueue_script('namespaceformyscript', 'http://locationofscript.com/myscript.js', array('jquery'));
2017 年 9 月更新
不久前我写了这个答案。我应该澄清一下,将您的脚本和样式放入队列的最佳位置是在wp_enqueue_scripts
钩子内。例如:
add_action('wp_enqueue_scripts', 'callback_for_setting_up_scripts');
function callback_for_setting_up_scripts() {
wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );
wp_enqueue_style( 'namespace' );
wp_enqueue_script( 'namespaceformyscript', 'http://locationofscript.com/myscript.js', array( 'jquery' ) );
}
该wp_enqueue_scripts
操作将为“前端”进行设置。您可以将admin_enqueue_scripts
操作用于后端(在 wp-admin 中的任何位置)和login_enqueue_scripts
用于登录页面的操作。
把它放在init()
你插件的函数中。
function your_namespace() {
wp_register_style('your_namespace', plugins_url('style.css',__FILE__ ));
wp_enqueue_style('your_namespace');
wp_register_script( 'your_namespace', plugins_url('your_script.js',__FILE__ ));
wp_enqueue_script('your_namespace');
}
add_action( 'admin_init','your_namespace');
我也花了一些时间才找到(对我来说)最好的解决方案,这是万无一失的 imho。
干杯
在你的插件中包含 CSS 和 jQuery 很容易,试试这个:
// register jquery and style on initialization
add_action('init', 'register_script');
function register_script() {
wp_register_script( 'custom_jquery', plugins_url('/js/custom-jquery.js', __FILE__), array('jquery'), '2.5.1' );
wp_register_style( 'new_style', plugins_url('/css/new-style.css', __FILE__), false, '1.0.0', 'all');
}
// use the registered jquery and style above
add_action('wp_enqueue_scripts', 'enqueue_style');
function enqueue_style(){
wp_enqueue_script('custom_jquery');
wp_enqueue_style( 'new_style' );
}
我从这个网站上发现了这个很棒的片段如何在 WordPress 中包含 jQuery 和 CSS – WordPress 方式
希望有帮助。
接受的答案不完整。你应该使用正确的钩子:wp_enqueue_scripts
例子:
function add_my_css_and_my_js_files(){
wp_enqueue_script('your-script-name', $this->urlpath . '/your-script-filename.js', array('jquery'), '1.2.3', true);
wp_enqueue_style( 'your-stylesheet-name', plugins_url('/css/new-style.css', __FILE__), false, '1.0.0', 'all');
}
add_action('wp_enqueue_scripts', "add_my_css_and_my_js_files");
只是为了附加到@pixeline 的答案(试图添加一个简单的评论,但该网站说我需要 50 个声望)。
如果您正在为管理部分编写插件,那么您应该使用:
add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files");
admin_enqueueu_scripts 是管理部分的正确钩子,前端使用 wp_enqueue_scripts。