Harici jQuery / Javascript dosyalarını WordPress ile bağlama


15

Bu yüzden bir sonraki WP temamı temel almak için Starkers kullanıyorum ve küçük bir sorunla karşılaştım, header.phpdosyaya kendi jQuery sürümümü ekledim ama Firebug kullanarak sitemi incelerken jquery'nin iki kez indirildiğini fark ettim, biraz kazma yaptı ve sadece dosya dahil değil, aynı zamanda wp_head()işlevi olduğunu fark ettim .

Sorunu gidermeye çalışırken, yirmi On temasından kaynaklanan başlık dosyasında bir yorum fark ettim:

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

İşte benim sorunum, jQuery dosyasının kullanmak isteyen başka bir dosyadan önce ayarlanması gerektiği izlenimi altındayım ve bu öğedeki wp_head()son şey olmalı <head>, merak ediyorum gibi şimdi biraz kafam karıştı wp_head()WP dahil jQuery dosyası, tüm eklentilerim için kullanılacak, ancak bunu söylemese de en üste koydum .

Ben wp_head()fonksiyonu jQuery satır yorum yaptım ama geri koymak zorunda yönetici sayfası için gereklidir.

Ayrıca jQuery Google CDN sürümünü kullanarak (en azından deneme) kullanmak istiyorum, ancak iki kez dahil etmek istemiyorum!

Umarım ne anlatmaya çalıştığımı anlarsın, bu sorunu nasıl çözebileceğime dair herhangi bir öneri çok takdir edilecektir. JavaScript dosyalarınızı başlık dosyasıyla nasıl ele aldığınıza ilişkin önerilerinizi de takdir ediyorum.

Teşekkürler!


Bu, "Harici jQuery / Javascript dosyalarını WordPress ile bağlama" gibi bir şeye yeniden eklenmelidir.
MikeSchinkel

Kabul ediyorum, ben ne sorun çok aşina değildi gibi ne diyeceğime emin değildi :-)
Ben Everard

Yanıtlar:


9

Sorunuzun ifadesinden, <script>şablonunuza etiketler yazarak komut dosyaları eklemeniz gerekir . wp_enqueue_script()Şablonunuzda kendi komut dosyalarınızı ekleyin, functions.phpjQuery'ye bağımlılıkları uygun şekilde ayarlayın wp_head()ve komut dosyalarını sizin için ekler.

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

Daha fazla bilgi için kodeks sayfasına bakınız .


<script>Etiketi kullanarak komut dosyaları eklediğimi düşünürken haklısın, aradığım alternatif bu, çok teşekkürler! :-)
Ben Everard

3
Senaryonuzu sadece ön tarafa eklemek istiyorsanız, 'template_redirect'yerine takın 'init'.
John P Bloch

İyi şeyler, cevabımı güncelleyeceğim. Neredeyse enqueue'yu sarmayı önerdim is_admin().
Annika Backstrom

Genellikle yukarıdaki şablon dosyasındaki komut dosyalarını enqueue get_header(), bunu yapmak functions.phpgerekli olmayabilir her sayfada enqueue olacaktır. Eğer küresel bir tane varsa, daha header.phpönce wp_head()çağrılıyorum. Bu şekilde, enqueues onların olmasını beklediğiniz yerde<head>
Joe Hoyle

Bazen sayfanın altına komut dosyası eklemek daha iyidir. Codex.wordpress.org/Function_Reference/wp_enqueue_script (5th, $ in_footer) öğesinin son parametresidir, true olarak ayarlayın. Daha fazla kontrole ihtiyaç duyanlar için çok az bilgi.
hakre

7

WordPress ile jQuery kullanmak için 5 ipuçlarına göz atmanızı öneririm . Diğer şeylerin yanı sıra, jQuery'yi Google'ın kitaplığından yüklemek için gerekli kodu gösterir:

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

Ayrıca Google Kütüphanelerini Kullan eklentisine de göz atabilirsiniz .


1
Bu aslında daha iyi bir yanıttır, çünkü jQuery'nin Google CDN sürümünü nasıl sıraya alabileceğini gösterir. John'un başka bir yerde önerdiği gibi, bunu sadece ön uçta yapmak istiyorsanız, template_redirectyerine asın init.
EAMann

Nerede yüklü olduğu hakkında iyi bir nokta. Gerçekten de, yönetici alanı jQuery'den de yararlanıyor, değil mi? Her iki durumda da, nasıl kontrol edeceğinizi gösterdiğiniz için teşekkürler.
Travis Northcutt

Evet, jquery / wp gönderi için 5 ipucu buldum, cevabınız için teşekkürler :-)
Ben Everard

5 jQuery'yi WordPress ile kullanma hakkında ipuçları - bağlantı artık çalışmıyor.
hakre

NOT: Örnek,
jQuery'nin

1

@Tnorthcutt, kendi yüklemenizi istiyorsanız, WP'nin yerel jquery'sini düzgün bir şekilde ayıklamanız gerektiği doğru olsa da, WP çekirdeğinden farklı bir jquery sürümü yüklerken sorunla karşılaşacaksınız. Hem çekirdek hem de eklentiler orada olmasına güveniyor. Dolayısıyla, WP her güncellendiğinde temanızı en yeni jquery ile güncellemezseniz, siteniz bozulabilir.

Aşağıdaki kod, önce WP'nin hangi sürümü kullandığını arayarak ve ardından bunu Google'dan yükleyerek temanızın her zaman jquery'nin doğru sürümünü yüklediğinden emin olacaktır:

$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');
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.