将 Javascript 和 SCSS 文件添加到 wordpress 插件答案

【问题标题】：Adding Javascript and SCSS files to wordpress plugin将 Javascript 和 SCSS 文件添加到 wordpress 插件
【发布时间】：2020-04-28 08:00:35
【问题描述】：

我为预订流程创建了一个插件，但我无法添加我一直在使用的样式或 JS 文件。

CSS 文件位于 "css/style.css"，JS 文件位于 "js/script.js"。

我正在工作的插件 PHP 文件是：

<?php
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;

function sc_booking_process() {

    return 'html code...';
}
add_shortcode('cinema-booking', 'sc_booking_process');
?>

它只是不适用于样式和 js 文件。

谢谢。

【问题讨论】：

标签： javascript php html css sass

【解决方案1】：

您是否尝试在插件文件中添加 wp_enqueue_scripts？

https://developer.wordpress.org/reference/functions/wp_enqueue_scripts/

<?php
function my_scripts_and_css() {
    wp_enqueue_style( 'my-plugin-css', 'css/style.css'  );
    wp_enqueue_script( 'my-plugin-js', 'js/script.js', array('jquery'), '20200110' );       
}
add_action( 'wp_enqueue_scripts', 'my_scripts_and_css' );
?>

根据需要更新文件路径

【讨论】：

我试过这个。将它放在defined( 'ABSPATH' ) || exit; 和function sc_booking_process() { 之间，但它仍然没有出现。
您确定添加的路径正确吗？这就是我一直使用的代码，它对我有用
是的，我有一个名为 css 的文件夹，style.css 就在其中。与 script.js 相同，它位于 JS 文件夹中。
是否应该将其放入与我的问题中的代码相同的文件中？我试过了，即使文件路径正确，它也不起作用。

【解决方案2】：

试试下面的代码：

public function enqueue_styles() {
    wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/syner-public.css', array(), $this->version, 'all' );
}

public function enqueue_scripts() {
        wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/syner-public.js', array( 'jquery' ), $this->version, false );
}

【讨论】：

这会和上面的插件代码在同一个文件中吗？如果是这样，这对我不起作用