将 Javascript 文件与 wordpress 插件链接

Question

I am struggling with finishing a basic plugin I created.

I have a plugin folder with the following structure:

Folder_name: Booking
booking.php
js - script.js
css - style.css
js and css are sub folders in the Booking folder. 

I have the following function in the booking.php file:

function sc_booking_process() {
    return 'html content which uses divs which connect to js and css files';
}
 add_shortcode('cinema-booking', 'sc_booking_process');
?>

The booking.php needs to link to the javascript and css files to work properly but no matter what method I do it wont work.

I have tried putting the following before the above function but they still aren't linked to it:

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

Any advise would be really appreciated.

Answer 1

function my_scripts_and_css() {

  wp_enqueue_style( 'my-plugin-css', plugin_dir_url( __FILE__ ).'/css/style.css' );
  wp_enqueue_script( 'my-plugin-js', plugin_dir_url( __FILE__ ).'/js/script.js', array('jquery'), '20200110' );       

}

add_action( 'wp_enqueue_scripts', 'my_scripts_and_css' );

You call wrong dir for css and js, please try this one! hope it will work for you

Answer 2

function my_scripts_and_css() {

  wp_enqueue_style( 'my-plugin-css', plugins_url( '/css/style.css', __FILE__ ) );
  wp_enqueue_script( 'my-plugin-js', plugins_url( '/js/script.js',__FILE__ ), array('jquery'), '20200110' );       

}
add_action( 'wp_enqueue_scripts', 'my_scripts_and_css' );

It should work now! Please try with this