如何在我的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');

除非你想使用谷歌资料库的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中的任何位置)使用login_enqueue_scripts操作,对login页面使用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'); 

我花了一段时间才find了最适合我的最佳解决scheme。

干杯

要在你的插件中包含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的方式

希望有所帮助。

只是追加@ pixeline的答案(试图添加一个简单的评论,但该网站说我需要50声望)。

如果您正在编写pipe理部分的插件,那么您应该使用:

 add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files"); 

admin_enqueueu_scripts是pipe理部分的正确钩子,前端使用wp_enqueue_scripts。

请参阅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'); ?> 

接受的答案是不完整的。 你应该使用正确的钩子: 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"); 

首先,您需要使用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/