Bagaimana Menghubungkan file jQuery / Javascript Eksternal dengan WordPress

15

Jadi saya menggunakan Starkers untuk mendasarkan tema WP saya berikutnya dan saya telah mengalami masalah kecil, saya memasukkan versi jQuery saya sendiri dalam header.phpfile tersebut tetapi ketika memeriksa situs saya menggunakan Firebug saya perhatikan jquery sedang diunduh dua kali, saya melakukan sedikit penggalian dan memperhatikan bahwa saya tidak hanya menyertakan file tetapi juga wp_head()fungsinya.

Dalam mencoba untuk memperbaiki masalah saya perhatikan komentar di file header, yang berasal dari tema Twenty Ten:

/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head>, such 
 * as styles, scripts, and meta tags
 */

Jadi inilah masalah saya, saya mendapat kesan bahwa file jQuery harus diatur sebelum file lain yang ingin menggunakannya dan itu wp_head()harus menjadi hal terakhir dalam <head>elemen, saya sedikit bingung sekarang karena saya bertanya-tanya apakah seharusnya Saya menempatkan wp_head()di bagian atas sehingga file WP termasuk jQuery akan digunakan untuk semua plugin saya, meskipun ia mengatakan tidak melakukannya.

Saya memang mengomentari baris jQuery dalam wp_head()fungsi tapi itu diperlukan untuk halaman admin jadi saya harus mengembalikannya.

Saya juga ingin menggunakan (setidaknya bereksperimen) dengan menggunakan jQuery versi Google CDN, tetapi tidak ingin memasukkannya dua kali!

Saya harap Anda mengerti apa yang saya coba jelaskan, setiap saran tentang bagaimana saya bisa menyelesaikan masalah ini akan sangat dihargai. Saya juga menghargai saran apa pun tentang cara Anda menangani file JavaScript dengan file header.

Terima kasih!

themes customization theme-development jquery wp-head Ben Everard
sumber
Ini harus diberi judul ulang untuk sesuatu seperti "Bagaimana Menghubungkan file jQuery / Javascript Eksternal dengan WordPress."
MikeSchinkel
Saya setuju, saya tidak yakin harus menyebutnya apa karena saya tidak terlalu akrab dengan masalah yang saya alami :-)
Ben Everard

Jawaban:

9

Dari kata-kata pertanyaan Anda, Anda harus menambahkan skrip dengan menulis <script>tag di templat Anda. Tambahkan skrip Anda sendiri wp_enqueue_script()di dalam templat Anda functions.php, atur ketergantungan pada jQuery dengan tepat, dan wp_head()akan menambahkan skrip untuk Anda.

function my_scripts() {
    wp_enqueue_script( 'my-sweet-script', get_bloginfo('template_directory') . '/script.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

Lihat halaman codex untuk info lebih lanjut.

Annika Backstrom
sumber
Anda benar dalam berpikir bahwa saya menambahkan skrip menggunakan <script>tag, ini adalah alternatif yang saya cari, terima kasih banyak! :-)
Ben Everard
3
Jika Anda ingin menambahkan skrip Anda hanya di ujung depan, kaitkan 'template_redirect'bukan 'init'.
John P Bloch
Bagus, saya akan memperbarui jawaban saya. Saya hampir menyarankan untuk memasukkan enqueue is_admin().
Annika Backstrom
Saya biasanya membuat skrip dalam file templat di atas get_header(), melakukannya di functions.phpenqueue pada setiap halaman yang mungkin tidak diperlukan. Jika saya memiliki yang global, saya meminta header.phpsebelumnya wp_head()disebut. Dengan cara itu enqueues adalah di mana Anda akan mengharapkan mereka berada di<head>
Joe Hoyle
Terkadang lebih baik menambahkan skrip di bagian bawah halaman. Ini adalah parameter terakhir dari codex.wordpress.org/Function_Reference/wp_enqueue_script (5th, $ in_footer), setel menjadi true. Info kecil untuk mereka yang membutuhkan lebih banyak kontrol.
hakre
7

Saya sarankan melihat 5 Tips untuk menggunakan jQuery dengan WordPress . Antara lain, ini menunjukkan kode yang diperlukan untuk memuat jQuery dari perpustakaan Google:

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

Anda juga dapat memeriksa plugin Use Google Libraries .

Travis Northcutt
sumber
1
Ini sebenarnya jawaban yang lebih baik, karena ini menunjukkan cara mengantri versi Google CDN jQuery. Padahal, seperti yang disarankan John di tempat lain, jika Anda hanya ingin melakukan ini di front-end, kaitkan ke template_redirectalih-alih init.
EAMann
Poin bagus tentang tempat memuatnya. Meskipun sungguh, area admin juga menggunakan jQuery, kan? Either way, terima kasih telah menunjukkan cara mengendalikannya.
Travis Northcutt
Ya saya baru saja menemukan 5 tips untuk posting jquery / wp, terima kasih atas jawaban Anda :-)
Ben Everard
5 Tips untuk menggunakan jQuery dengan WordPress - tautannya tidak berfungsi lagi.
hakre
CATATAN: Contoh ini termasuk versi "lebih lama" dari jQuery, versi WP saat ini (3.0.1) sedang menjalankan jQuery 1.4.2 ...
t31os
1

Meskipun @tnorthcutt benar bahwa Anda harus dequue jquery asli WP dengan benar jika Anda ingin memuat sendiri, Anda yakin akan mengalami masalah ketika Anda memuat versi jquery berbeda yang menggunakan WP core. Baik inti dan plugin mengandalkannya ada di sana. Jadi, jika Anda tidak memperbarui tema Anda dengan jquery terbaru setiap kali WP diperbarui, situs Anda mungkin rusak.

Kode berikut akan memastikan tema Anda selalu memuat versi jquery yang benar, dengan terlebih dahulu mencari versi WP yang digunakan dan kemudian memuat yang dari Google:

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');
cjbj
sumber