Cara memasukkan efek jquery-ui dengan benar di wordpress

25

Saya sudah mencoba untuk memasukkan efek jquery ui (lebih khusus efek goyang) pada tema wordpress saya. Sejauh ini, saya hanya bisa memasukkan skrip jQuery, tapi saya benar-benar tidak tahu di mana harus menempatkan skrip ui dan bagaimana membuat enqueue.

Ini adalah kode yang saya miliki. Jelas tidak bekerja:

    <?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j("#manita-imagen").mouseover(function(){
            //$j(this).animate({ opacity: "hide" })
            // alert('asd');
            $j(this).effect("shake", { times:3 }, 300);
        });
    });

 </script>

Terima kasih atas bantuan Anda!

jquery wp-enqueue-script dabito
sumber
5
Satu catatan: Anda tidak perlu enqueue jquery, karena sudah terdaftar sebagai ketergantungan jquery-ui-core.
Goldenapple

Jawaban:

36

Meskipun WordPress memang menyertakan pustaka UI jQuery, itu tidak menyertakan pustaka UI / Efek. Perpustakaan itu terpisah dan berdiri sendiri. Anda harus menyertakan salinan file effects.core.js dan membuatnya secara terpisah.

Perhatikan bahwa Anda harus menamainya jquery-effect-core saat en-antri, untuk penamaan konsistensi.

Anda dapat memasukkannya seperti ini:

wp_enqueue_script("jquery-effects-core",'http://example.com/whatever/effects.core.js', array('jquery'), '1.8.8');

Sunting : Jawaban ini ditulis sebelum WordPress 3.3, yang sekarang menyertakan berbagai pustaka efek sebagai bagian dari inti. Anda cukup membuat bagian-bagian pustaka efek yang perlu Anda gunakan sekarang.

Daftar siput untuk file-file ini dapat ditemukan di wp-include / script-loader.php, tetapi siput inti adalah jquery-effect-core.

wp_enqueue_script("jquery-effects-core");
Otto
sumber
1
Ketahuilah bahwa untuk efek yang sebenarnya (blind, bounce, fade, ..) Anda harus mengaktifkan efek itu secara eksplisit. Seperti untuk 'fade':wp_enqueue_script( 'jquery-effects-fade' );
SunnyRed
Pengguna harus menempatkan Javascript mereka sendiri ke dalam file terpisah dan kemudian memberikan file itu dan mendaftar dependensi yang dibutuhkan. Dengan begitu, WordPress (dan plugin kinerja) mengetahui urutan yang diperlukan untuk memuat skrip ini dan akan menempatkannya dalam urutan yang benar di halaman.
Dave Hilditch
8

@dabito,

Anda tidak memuat skrip Anda dengan benar ... Jangan panggil wp_enqueue_script()di dalam file templat tema Anda (sepertinya ini header.php). Anda perlu memanggil fungsi ini dari pengait terpisah.

Dalam functions.phpfile tema Anda , tempatkan kode berikut:

function my_add_frontend_scripts() {
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-core');
}
add_action('wp_enqueue_scripts', 'my_add_frontend_scripts');

Jika kedua skrip terdaftar dengan benar, ini akan memuatnya dengan baik (dengan menambahkan <script />tag yang sesuai di header. Kemudian kode JavaScript Anda yang lain harus berfungsi.

Jika Anda ingin menambahkan skrip ke sisi admin , tambahkan tindakan Anda admin_enqueue_scriptssebagai gantinya.

EAMann
sumber
1
Tidak sepenuhnya benar. Selama dia memanggil mereka sebelum panggilan wp_head (), itu akan berfungsi dengan baik. Mereka tidak harus ketagihan, dan mereka tidak seharusnya ketagihan toit. Jika Anda akan menghubungkan mereka di suatu tempat, kaitkan mereka ke kait tindakan 'wp_enqueue_scripts'. Untuk itulah ia ada.
Otto
1
@Otto Apa yang Anda katakan terdengar masuk akal. Tetapi apakah Anda memiliki penjelasan mengapa dalam naskah kuno itu tertulis apa yang @EAMann tulis - "Gunakan tindakan init untuk memanggil fungsi ini."? Dan contohnya diambil dari sana ... codex.wordpress.org/Function_Reference/wp_enqueue_script
Lea Cohen
Kodeks itu serampangan di beberapa tempat. Tindakan terbaik untuk menggunakan ini adalah 'wp_enqueue_scripts' untuk ujung depan, atau 'admin_enqueue_scripts' di ujung belakang. Menghubungkan ke init akan berhasil, tetapi itu akan membuat skrip di seluruh situs sia-sia.
Otto
Saya telah memperbarui potongan kode saya sesuai. Awalnya itu adalah reaksi yang cepat dan berdasarkan pada referensi Codex ... menggunakan wp_enqueue_scriptsjelas merupakan cara yang lebih baik untuk pergi dan menghindari memerlukan pemeriksaan tambahan is_admin().
EAMann
Ini juga cara yang salah - plugin kinerja perlu mengetahui dependensinya. Penulis harus menulis file .js mereka sendiri dan meminta itu dan memberi nama dependensi - WordPress akan menangani sisanya.
Dave Hilditch
7

Anda juga dapat membuat seluruh UI jQuery secara langsung dari Google. Beginilah cara saya melakukannya:

wp_enqueue_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', array('jquery'), '1.8.6');

Dan karena jQuery terdaftar sebagai dependensi untuk jQuery UI, Anda tidak perlu membuatnya secara manual. WordPress akan melakukannya secara otomatis untuk Anda.

Rodrigo Sieiro
sumber
3
Anda bahkan dapat memuat semua lib jQuery dari Google CDN, bukan situs Anda sendiri.
Jan Fabry
Saya akan sangat mencegah memuat skrip dari sumber asing. Saya melakukan itu cukup lama dan itu (jarang) terjadi bahwa tuan rumah sedang down, sehingga banyak pelanggan memiliki masalah dengan halaman mereka sekaligus.
Julian F. Weinert
1
@ JulianF.Weinert itu adalah pedang bermata dua, dengan cdn yang baik berarti latensi yang lebih rendah tetapi tidak memiliki kontrol jika gagal. Yang mengatakan, jika CDN Google turun setengah Internet akan gagal sehingga Anda tidak akan menjadi satu-satunya. Kemungkinan itu akan turun dan tidak di-cache pada browser pengguna yang ramping sekalipun. Untuk sebagian besar situasi menggunakan cdn adalah keuntungan.
Alex
Benar. Saya tidak berbicara tentang CDN penuh sesak nafas, yang, tentu saja, akan baik-baik saja di sini, karena itu dirancang untuk penggunaan yang tepat. Memuat skrip dari john-doe.com apa pun agak berisiko, saya pikir
Julian F. Weinert
3

Tampaknya tidak ada beban default untuk pustaka jQuery ini (daftar lengkap di sini ) sehingga Anda mungkin harus mendaftarkan skrip sebelum Anda membuatnya terlebih dahulu.

editor
sumber
1
Saya pikir Anda mungkin benar (kadang-kadang nama WP register skrip di bawah berbeda dari nama standar yang digunakan) tetapi dalam kasus ini mendaftar 'jquery-ui-core' harus bekerja. Yang terdaftar di core.trac.wordpress.org/browser/branches/3.0/wp-includes/…
goldenapples
Poin bagus! Saya berasumsi ia ingin memuat hanya itu jQuery perpustakaan, dalam hal pemuatan sisanya akan menjadi bloaty sedikit.
editor
3

Hanya sedikit tips. Saat Anda membuat skrip, skrip untuk seluruh situs termasuk panel admin. Jika Anda tidak ingin skrip di panel admin, Anda hanya dapat memasukkannya ke situs di frontend.

function my_add_frontend_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
}

add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');
Tareq
sumber
4
Anda seharusnya tidak menggunakan kait init untuk melakukan enqueueing. Gunakan kait wp_enqueue_scripts untuk ujung depan saja atau kait admin_enqueue_scripts untuk ujung belakang.
Otto
Tidak tahu bahwa wp_enqueue_scriptstindakan hanya untuk ujung depan. Terima kasih :)
Tareq
0

Semua jawaban di sini, sementara mereka bekerja, secara teknis salah.

Cara yang benar untuk memasukkan jquery-ui dan perpustakaan lain adalah dengan memasukkannya sebagai dependensi skrip Anda sendiri.

Ini penting, karena alat kinerja dapat memeriksa dependensi ini untuk mengubah urutan pemuatan skrip Anda untuk mengoptimalkan situs.

Jadi, jika Anda ingin menggunakan jquery dan jquery-ui, buat file skrip .js Anda sendiri dan enqueue seperti ini, dengan dependensi yang tercantum - tidak perlu perintah enqueue terpisah untuk setiap perpustakaan yang Anda gunakan:

wp_enqueue_script('your-script-handle', 
 plugins_url('your-script-file.js', __FILE__), 
 array('jquery', 'jquery-effects-core', 'jquery-ui-core')
);

Anda dapat menemukan daftar semua skrip yang tersedia untuk ditambahkan sebagai dependensi di sini: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Dave Hilditch
sumber
1
Anda benar. Menggunakan dependensi dalam panggilan wp_enqueue_script Anda sendiri adalah cara yang benar untuk menyertakan jquery / jquery-ui / etc. Tidak perlu membuat mereka secara terpisah.
Michae Pavlos Michael
Dan jika Anda membuatnya secara terpisah ketika skrip Anda bergantung pada skrip tersebut, skrip Anda dapat / akan merusak situs yang mengoptimalkan kinerja - misalnya jika skrip digabungkan menjadi satu skrip untuk mempercepat pemuatan, atau jika skors tersebut ditangguhkan atau diperkecil (tergantung pada minifcation tetapi pesanan bisa berubah). Jika Anda belum memberi tahu WordPress bahwa skrip Anda bergantung pada skrip lain, Anda tidak dapat menjamin urutan kemunculannya.
Dave Hilditch