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

IT技术 javascript jquery css wordpress
2021-02-07 13:21:45

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

6个回答

对于样式 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用于登录页面的操作。

请您向我们提供与实现它的新方式相关的良好文档的任何链接;) !!! 谢谢
2021-03-14 13:21:45
我必须在 enqueue 命令之后重新初始化某些东西吗?或者只是重新加载页面?
2021-03-21 13:21:45
如何使样式表仅在特定插件上工作?
2021-03-24 13:21:45
对于我们这些不熟悉插件开发的人,您能否澄清“您希望 css 加载到哪里?” 我们是否必须为每个我们想要调用它的页面创建页面模板,然后在标题中手动调用它?
2021-03-29 13:21:45
@user658182 use add_action('init', 'function_name');,其中 function_name 是一个将资源排入队列的函数。
2021-04-07 13:21: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');

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

干杯

这段代码去哪里了?函数.php?插件.php?
2021-03-29 13:21:45
@user658182 您的 wordpress 插件可能应该在 wp-content/plugins/ 中有自己的 .php 文件或文件夹
2021-04-05 13:21:45

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

希望有帮助。

接受的答案不完整。你应该使用正确的钩子: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");
谢谢!我一直在努力解决这个问题。
2021-03-28 13:21:45

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

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

add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files");

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