Cara yang benar untuk melakukan enqueue jquery-ui

Saya mengalami kesulitan termasuk skrip dan gaya jquery-ui di plugin saya. Tampaknya wp_enqueue_scriptpanggilan saya diabaikan.

Sudah ada banyak pertanyaan yang mirip dengan yang ini, tetapi semua jawaban yang saya temukan sejauh ini bermuara wp_enqueue_scriptdi dalam wp_enqueue_scriptskait tindakan, yang sudah saya lakukan.

Dalam konstruktor kelas saya saya sebut:

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

dan kemudian, di bawah ini:

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

Saya telah memeriksa bahwa kode tersebut benar-benar dijalankan setiap pemuatan halaman. Namun halaman tersebut tidak memiliki <link>tag untuk perpustakaan jquery-ui. Saya sudah mencoba dengan dan tanpa jqueryketergantungan yang secara eksplisit ditentukan dalam argumen ketiga wp_enqueue_scriptpanggilan.

Saya juga sudah mencoba dengan instalasi WP 4.8 tanpa menginstal plugin selain milik saya, dan dengan tema standar dua puluh tujuh belas saja. Tidak ada dadu.

Apa yang salah dengan kode saya?

Pertama-tama, WordPress mendaftarkan jQuery UI via wp_default_scripts(). Dependensi sudah diatur, jadi Anda hanya perlu membuat skrip yang Anda butuhkan (dan bukan intinya). Karena Anda tidak mengubah nomor versi atau apa pun, tidak apa-apa hanya menggunakan pegangan.

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

Adapun stylesheet: WordPress secara default tidak mendaftarkan gaya UI jQuery!

Dalam komentar, butlerblog menunjukkan bahwa sesuai dengan Panduan Plugin

Menjalankan kode luar dalam plugin ketika tidak bertindak sebagai layanan tidak diizinkan, misalnya:

• Memanggil CDN pihak ketiga untuk alasan selain penyertaan font; semua JavaScript dan CSS yang tidak terkait layanan harus dimasukkan secara lokal

Ini berarti memuat gaya melalui CDN tidak diizinkan dan harus selalu dilakukan secara lokal. Anda dapat melakukannya dengan menggunakan wp_enqueue_style().

Jika Anda membuat skrip Anda sendiri, Anda bisa menambahkan 'jquery-ui-accordion', misalnya, ke daftar dependensi. Semua dependensi yang diperlukan akan ditambahkan secara otomatis. Contoh:

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

Akan menghasilkan kode ini:

<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>

Saya telah memodifikasi skrip Anda. coba dengan ini, ini berfungsi.

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