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

How To Include CSS and jQuery in my WordPress plugin?

提问by faressoft

How To Include CSS and jQuery in my WordPress plugin ?

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

回答by Darren

For styles wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );

对于样式 wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );

Then use: wp_enqueue_style('namespace');wherever you want the css to load.

然后使用：wp_enqueue_style('namespace');在您希望 css 加载的任何地方。

Scripts are as above but the quicker way for loading jquery is just to use enqueue loaded in an init for the page you want it to load on: wp_enqueue_script('jquery');

脚本如上，但加载 jquery 的更快方法只是使用在 init 中加载的 enqueue 来加载您希望它加载的页面： wp_enqueue_script('jquery');

Unless of course you want to use the google repository for jquery.

除非您当然想将 google 存储库用于 jquery。

You can also conditionally load the jquery library that your script is dependent on:

您还可以有条件地加载您的脚本所依赖的 jquery 库：

wp_enqueue_script('namespaceformyscript', 'http://locationofscript.com/myscript.js', array('jquery'));

wp_enqueue_script('namespaceformyscript', 'http://locationofscript.com/myscript.js', array('jquery'));

Update Sept. 2017

2017 年 9 月更新

I wrote this answer a while ago. I should clarify that the best place to enqueue your scripts and styles is within the wp_enqueue_scriptshook. So for example:

不久前我写了这个答案。我应该澄清一下，将脚本和样式放入队列的最佳位置是在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' ) );
}

The wp_enqueue_scriptsaction will set things up for the "frontend". You can use the admin_enqueue_scriptsaction for the backend (anywhere within wp-admin) and the login_enqueue_scriptsaction for the login page.

该wp_enqueue_scripts操作将为“前端”进行设置。您可以将admin_enqueue_scripts操作用于后端（在 wp-admin 中的任何位置）和login_enqueue_scripts用于登录页面的操作。

回答by Calimero

Put it in the init()function for your plugin.

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

It took me also some time before I found the (for me) best solution which is foolproof imho.

我也花了一些时间才找到（对我来说）最好的解决方案，这是万无一失的 imho。

Cheers

干杯

回答by Ryan S

To include CSS and jQuery in your plugin is easy, try this:

在你的插件中包含 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' );
}

I found this great snipped from this site How to include jQuery and CSS in WordPress – The WordPress Way

我从这个网站上发现了这个很棒的片段如何在 WordPress 中包含 jQuery 和 CSS – WordPress 方式

Hope that helps.

希望有帮助。

回答by pixeline

Accepted answer is incomplete. You should use the right hook: wp_enqueue_scripts

接受的答案不完整。你应该使用正确的钩子：wp_enqueue_scripts

Example:

例子：

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

回答by John T

Just to append to @pixeline's answer (tried to add a simple comment but the site said I needed 50 reputation).

只是为了附加到@pixeline 的答案（试图添加一个简单的评论，但该网站说我需要 50 个声望）。

If you are writing your plugin for the admin section then you should use:

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

add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files");

The admin_enqueueu_scripts is the correct hook for the admin section, use wp_enqueue_scripts for the front end.

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

回答by powtac

See http://codex.wordpress.org/Function_Reference/wp_enqueue_script

见http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Example

例子

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

回答by Bikesh M

First you need to register the style and css using wp_register_script() and wp_register_style() functions

首先，您需要使用 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__ ) );

After this you can call the wp_enqueue_script() and wp_enqueue_style() functions for loading the js and css in required page

在此之后，您可以调用 wp_enqueue_script() 和 wp_enqueue_style() 函数来加载所需页面中的 js 和 css

wp_enqueue_script('mysample');
wp_enqueue_style('mysample');

I fount a nice example here http://wiki.workassis.com/wordpress-create-advanced-custom-plugin-using-oop/

我在这里找到了一个很好的例子http://wiki.workassis.com/wordpress-create-advanced-custom-plugin-using-oop/

回答by MD. Shafayatul Haque

Very Simple:

很简单：

Adding JS/CSS in the Front End:

在前端添加 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');

Adding JS/CSS in WP Admin Area:

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

回答by Mr. HK

You can use the following function to enqueue script or style from plugin.

您可以使用以下函数从插件中排队脚本或样式。

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');

回答by Chandan Kumar Thakur

You can add scripts and css in back end and front end with this following code: This is simple class and the functions are called in object oriented way.

您可以使用以下代码在后端和前端添加脚本和 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();
}