将 Javascript 文件与 wordpress 插件链接

Question

我正在努力完成我创建的基本插件。

我有一个具有以下结构的插件文件夹：

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

我在booking.php文件中有以下功能：

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

booking.php 需要链接到 javascript 和 css 文件才能正常工作，但无论我做什么方法都行不通。

我曾尝试将以下内容放在上述功能之前，但它们仍然没有链接到它：

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

任何建议将不胜感激。

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

你为css和js调用了错误的目录，请试试这个！ 希望它对你有用

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

它现在应该可以工作了！ 请试试这个