如何在我的wordpress插件中包含CSS和jQuery？

Question

如何在我的wordpress插件中包含CSS和jQuery？

Answer 1

对于款式 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登录页面的操作.

Answer 2

把它放在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');

我花了一些时间才发现(对我来说)最好的解决方案,这是万无一失的.

干杯

Answer 3

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

希望有所帮助.

Answer 4

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

Answer 5

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

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

add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files");

admin_enqueueu_scripts是admin部分的正确挂钩,使用wp_enqueue_scripts作为前端.

Answer 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");

Answer 7

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