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

我发现这个很棒的片段来自这个网站How to include jQuery and CSS in WordPress – The WordPress Way

希望对您有所帮助。

Answer 4

接受的答案不完整。你应该使用正确的钩子：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 5

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

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

add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files");

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

Answer 6

见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 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/

Answer 8

非常简单：

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

Answer 9

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

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

Answer 10

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