如何在我的WordPress插件中包含CSS和jQuery?
答案 0 :(得分:59)
对于样式wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );
然后在您希望加载css的任何地方使用:wp_enqueue_style('namespace');
。
脚本如上所述,但加载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
操作会为“前端”设置内容。您可以对后端(wp-admin中的任何位置)使用admin_enqueue_scripts
操作,为登录页面使用login_enqueue_scripts
操作。
答案 1 :(得分:45)
将其放入插件的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');
在我找到(对我来说)最好的解决方案之前,我花了一些时间才是万无一失的。
干杯
答案 2 :(得分:17)
要在插件中包含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' );
}
我从这个网站How to include jQuery and CSS in WordPress – The WordPress Way
发现了这个很棒的内容希望有所帮助。
答案 3 :(得分:7)
请参阅http://codex.wordpress.org/Function_Reference/wp_enqueue_script
示例
<?php
function my_init_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
}
add_action('init', 'my_init_method');
?>
答案 4 :(得分:7)
只是附加@ pixeline的答案(试图添加一个简单的评论,但该网站说我需要50个声誉)。
如果您正在为管理部分编写插件,那么您应该使用:
add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files");
admin_enqueueu_scripts是admin部分的正确挂钩,使用wp_enqueue_scripts作为前端。
答案 5 :(得分:6)
接受的答案不完整。你应该使用正确的钩子: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");
答案 6 :(得分:5)
首先,您需要使用wp_register_script()和wp_register_style()函数注册样式和css
//registering javascript and css
wp_register_script ( 'mysample', plugins_url ( 'js/myjs.js', __FILE__ ) );
wp_register_style ( 'mysample', plugins_url ( 'css/mystyle.css', __FILE__ ) );
在此之后你可以调用wp_enqueue_script()和wp_enqueue_style()函数来加载所需页面中的js和css
wp_enqueue_script('mysample');
wp_enqueue_style('mysample');
我在这里举了一个很好的例子http://wiki.workassis.com/wordpress-create-advanced-custom-plugin-using-oop/
答案 7 :(得分:1)
您可以使用以下函数将插件中的脚本或样式排入队列。
function my_enqueued_assets() {
wp_enqueue_script('my-js-file', plugin_dir_url(__FILE__) . '/js/script.js', '', time());
wp_enqueue_style('my-css-file', plugin_dir_url(__FILE__) . '/css/style.css', '', time());
}
add_action('wp_enqueue_scripts', 'my_enqueued_assets');
答案 8 :(得分:1)
非常简单:
在前端中添加JS / CSS:
function enqueue_related_pages_scripts_and_styles(){
wp_enqueue_style('related-styles', plugins_url('/css/bootstrap.min.css', __FILE__));
wp_enqueue_script('releated-script', plugins_url( '/js/custom.js' , __FILE__ ), array('jquery','jquery-ui-droppable','jquery-ui-draggable', 'jquery-ui-sortable'));
}
add_action('wp_enqueue_scripts','enqueue_related_pages_scripts_and_styles');
在WP 管理区域中添加JS / CSS:
function enqueue_related_pages_scripts_and_styles(){
wp_enqueue_style('related-pages-admin-styles', get_stylesheet_directory_uri() . '/admin-related-pages-styles.css');
wp_enqueue_script('releated-pages-admin-script', plugins_url( '/js/custom.js' , __FILE__ ), array('jquery','jquery-ui-droppable','jquery-ui-draggable', 'jquery-ui-sortable'));
}
add_action('admin_enqueue_scripts','enqueue_related_pages_scripts_and_styles');
答案 9 :(得分:0)
您可以使用以下代码在后端和前端添加脚本和CSS: 这是简单的类,函数以面向对象的方式调用。
class AtiBlogTest {
function register(){
//for backend
add_action( 'admin_enqueue_scripts', array($this,'backendEnqueue'));
//for frontend
add_action( 'wp_enqueue_scripts', array($this,'frontendEnqueue'));
}
function backendEnqueue(){
wp_enqueue_style( 'AtiBlogTestStyle', plugins_url( '/assets/css/admin_mystyle.css', __FILE__ ));
wp_enqueue_script( 'AtiBlogTestScript', plugins_url( '/assets/js/admin_myscript.js', __FILE__ ));
}
function frontendEnqueue(){
wp_enqueue_style( 'AtiBlogTestStyle', plugins_url( '/assets/css/front_mystyle.css', __FILE__ ));
wp_enqueue_script( 'AtiBlogTestScript', plugins_url( '/assets/js/front_myscript.js', __FILE__ ));
}
}
if(class_exists('AtiBlogTest')){
$atiblogtest=new AtiBlogTest();
$atiblogtest->register();
}