Cách chính xác để enqueue jquery-ui

Tôi đang có một thời gian khó khăn bao gồm các tập lệnh và phong cách jquery-ui trong plugin của tôi. Dường như wp_enqueue_scriptcác cuộc gọi của tôi chỉ đơn giản là bị bỏ qua.

Đã có nhiều câu hỏi tương tự như câu hỏi này, nhưng tất cả các câu trả lời tôi đã tìm thấy cho đến nay sôi sục để gọi wp_enqueue_scriptbên trong wp_enqueue_scriptsmóc hành động, điều mà tôi đã làm.

Trong hàm tạo của lớp tôi gọi:

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts') );

và sau đó, bên dưới:

public function enqueue_scripts()
{    
  wp_enqueue_script( 'jquery-ui-core', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-widget', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-mouse', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-accordion', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-autocomplete', false, array('jquery'));
  wp_enqueue_script( 'jquery-ui-slider', false, array('jquery'));

Tôi đã kiểm tra xem mã thực sự được thực thi mỗi lần tải trang. Tuy nhiên, các trang thiếu các <link>thẻ cho thư viện jquery-ui. Tôi đã thử với và không có sự jqueryphụ thuộc được chỉ định rõ ràng trong đối số thứ ba của các wp_enqueue_scriptcuộc gọi.

Tôi cũng đã thử cài đặt WP 4.8 đơn giản mà không có plugin nào được cài đặt ngoài tôi và chỉ với hai mươi mười bảy chủ đề mặc định. Không có con xúc xắc.

Có gì sai với mã của tôi?

Trước hết, WordPress đăng ký jQuery UI thông qua wp_default_scripts(). Sự phụ thuộc đã được thiết lập, vì vậy bạn chỉ cần ghi lại kịch bản bạn thực sự cần (chứ không phải cốt lõi). Vì bạn không thay đổi số phiên bản hoặc bất cứ điều gì, chỉ nên sử dụng tay cầm.

// no need to enqueue -core, because dependancies are set
wp_enqueue_script( 'jquery-ui-widget' );
wp_enqueue_script( 'jquery-ui-mouse' );
wp_enqueue_script( 'jquery-ui-accordion' );
wp_enqueue_script( 'jquery-ui-autocomplete' );
wp_enqueue_script( 'jquery-ui-slider' );

Đối với các bảng định kiểu: WordPress không đăng ký các kiểu UI UI theo mặc định!

Trong các bình luận, butlerblog đã chỉ ra rằng theo Nguyên tắc Plugin

Thực thi mã bên ngoài trong một plugin khi không hoạt động như một dịch vụ không được phép, ví dụ:

• Gọi CDN của bên thứ ba vì những lý do khác ngoài vùi phông; tất cả JavaScript và CSS không liên quan đến dịch vụ phải được đưa vào cục bộ

Điều này có nghĩa là tải các kiểu qua CDN không được phép và phải luôn được thực hiện cục bộ. Bạn có thể làm như vậy bằng cách sử dụng wp_enqueue_style().

Nếu bạn đang mê hoặc kịch bản của riêng mình, bạn có thể chỉ cần thêm 'jquery-ui-accordion', ví dụ, vào danh sách các phụ thuộc. Tất cả các phụ thuộc cần thiết sẽ được thêm tự động. Thí dụ:

wp_enqueue_script( 'my-theme', get_stylesheet_directory_uri() . '/js/theme.js', array( 'jquery', 'jquery-ui-accordion' ) );

Sẽ tạo mã này:

<script type='text/javascript' src='/wp-includes/js/jquery/ui/core.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/widget.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/accordion.min.js'></script>
<script type='text/javascript' src='/wp-content/themes/theme/js/theme.js'></script>

Tôi đã sửa đổi kịch bản của bạn. Hãy thử với điều này, nó đang làm việc.

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts') );
public function enqueue_scripts()
{    
  wp_enqueue_script( 'jquery-ui-core');
  wp_enqueue_script( 'jquery-ui-widget');
  wp_enqueue_script( 'jquery-ui-mouse');
  wp_enqueue_script( 'jquery-ui-accordion' );
  wp_enqueue_script( 'jquery-ui-autocomplete');
  wp_enqueue_script( 'jquery-ui-slider');
}