Yakın zamanda bir kullanıcı, WordPress web sitesinin performansını optimize etmek için ipuçları istedi. Önerilerimizden biri, varsayılan WordPress jQuery betiğini Google Barındırılan Kütüphaneler'den jQuery ile değiştirmekti.
WordPress, varsayılan olarak çekirdek yazılımla birlikte jQuery'yi içerir. Ancak, bunu Google kütüphanesinden en son jQuery sürümüyle değiştirmemizin performansı artırabileceğini bulduk.
Bu makalede, performansı ve hızı artırmak için varsayılan WordPress jQuery betiğini Google kütüphanesi ile nasıl kolayca değiştireceğinizi göstereceğiz.
Varsayılan WordPress jQuery'yi Neden ve Ne Zaman Değiştirmelisiniz
jQuery, geliştiricilerin güzel web uygulamaları oluşturmak için kullandığı popüler bir JavaScript kütüphanesidir. WordPress'te kaydırıcılar, açılır pencereler ve çok daha fazlası gibi özellikler eklemek için oldukça sık kullanılır.
WordPress, çekirdek WordPress yazılımıyla birlikte paketlenmiş bir jQuery kütüphanesi içerir. En iyi WordPress eklentilerinin çoğu ve en popüler WordPress temalarının çoğu, temel işlevsellik ve özellikler için bu kütüphaneye dayanmaktadır.
Ancak, jQuery'yi bir paylaşımlı barındırma sunucusuna yüklemek kaynak yoğun olabilir ve sitenizi yavaşlatabilir, özellikle de WordPress en iyi uygulamalarını takip etmeyen kötü kodlanmış WordPress temaları veya eklentileri kullanıyorsanız.
WordPress ile birlikte gelen jQuery sürümünü kullanmanın bir diğer sorunu da WordPress onu güncellemedikçe güncellenmeyecek olmasıdır. Performans veya güvenlik düzeltmeleri içeren daha yeni jQuery sürümleri olabilir, ancak bunlar bir WordPress güncellemesine dahil edilene kadar bunlara erişemezsiniz.
Bunu düzeltmek için birkaç geçici çözüm vardır. Örneğin, jQuery'yi Google sunucuları veya jQuery'nin resmi CDN'si aracılığıyla yükleyebilirsiniz.
Google Hosted Libraries is a good choice because their servers are stable, updated, and highly optimized for speed which allows jQuery to load much faster on your WordPress site.
Bunu söyledikten sonra, varsayılan WordPress jQuery'yi Google kütüphanesi ile nasıl kolayca değiştireceğimize bir göz atalım.
Varsayılan WordPress jQuery'yi Google Kitaplığı ile Değiştirin
WordPress, betikleri ve stil sayfalarını kolayca eklemek için yerleşik bir yöntemle birlikte gelir. Bu, yerleşik yöntemle yüklenen betikleri veya stil sayfalarını güvenli bir şekilde kaldırmanıza da olanak tanır.
WordPress'in varsayılan jQuery'sini devre dışı bırakmak için bu yöntemi kullanacağız. Ardından, WordPress'e jQuery'yi Google kütüphanesi üzerinden yüklemesini söyleyeceğiz.
Şu kodu temanızın functions.php dosyasına, bir siteye özel eklentiye veya bir kod parçacıkları eklentisine eklemeniz gerekecektir.
function wpb_modify_jquery() {
//check if front-end is being viewed
if (!is_admin()) {
// Remove default WordPress jQuery
wp_deregister_script('jquery');
// Register new jQuery script via Google Library
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', false, '3.6.0');
// Enqueue the script
wp_enqueue_script('jquery');
}
}
// Execute the action when WordPress is initialized
add_action('init', 'wpb_modify_jquery');
Bu kodu WordPress'e eklemek için WPCode kod parçacığı eklentisini kullanmanızı öneririz. Ücretsizdir, kullanımı kolaydır ve bir şeyler ters giderse web sitenizi bozmaz.
Not: Ayrıca, kod revizyonları, otomatik dönüşüm pikselleri, zamanlanmış kod parçacıkları, özel bir bulut kitaplığı ve daha fazlası gibi gelişmiş özellikler sunan WPCode'un premium sürümü de mevcuttur.
Başlamak için WPCode'u yüklemeniz ve etkinleştirmeniz gerekir. Yardıma ihtiyacınız olursa, WordPress eklentisinin nasıl kurulacağına dair kılavuzumuza bakın.
Eklenti etkinleştirildikten sonra, WordPress kontrol panelinizden Kod Parçacıkları » Parçacık Ekle bölümüne gidin.
Oradan, 'Özel Kodunuzu Ekleyin (Yeni Parça)' seçeneğini bulun ve altındaki '+ Özel Parça Ekle' düğmesine tıklayın.
Ardından, ekranda görünen seçenekler listesinden bir kod türü seçmeniz gerekir.
Bu eğitim için 'PHP Snippet' seçeneğini seçin.
Ardından, kod parçacığınız için bir başlık ekleyebilirsiniz. Bu, kodun ne işe yaradığını hatırlamanıza yardımcı olacak herhangi bir şey olabilir.
Bundan sonra, yukarıdaki kodu 'Kod Önizleme' kutusuna yapıştırmanız yeterlidir.
Son olarak, anahtarı 'Etkin Değil'den 'Etkin' konumuna getirin ve 'Parçacık Kaydet' düğmesine tıklayın.
That’s all! WordPress will now replace the default jQuery and load it via Google library instead.
Not: Bu yöntem, URL'de belirtilen jQuery sürümünü yüklemeye devam edecektir. Gelecekte daha yeni bir jQuery sürümü kullanmak için Google kitaplık URL'sini değiştirmeniz gerekebilir.
Temanız veya eklentileriniz farklı bir sürüme bağlı olabileceğinden uyumluluk sorunlarına neden olabileceği için Google sürüm numarasını sizin için otomatik olarak güncellemez.
En son URL'yi Google tarafından barındırılan kütüphaneler web sitesini ziyaret ederek bulabilirsiniz.
Oradan, gerekirse sorun giderme için kullanabileceğiniz jQuery'nin eski sürümlerinin URL'lerini de bulabilirsiniz.
Diğer Varsayılan jQuery Kütüphanelerini Değiştirme
Temel jQuery kütüphanesinin yanı sıra, WordPress ayrıca bir dizi başka jQuery betiği de içerir. jQuery Mobile ve jQuery UI gibi bu betiklerden bazıları Google kütüphanesinde barındırılır.
Diğer kütüphaneler için, bunları çok daha hızlı yüklemek üzere jQuery'nin kendi CDN sunucularını kullanabilirsiniz. Aşağıdaki örnekte, WordPress jquery-ui-core betiğini resmi jquery-ui sürümüyle değiştirdik.
function wpb_modify_jquery_ui() {
if (!is_admin()) {
wp_deregister_script('jquery-ui-core');
wp_register_script('jquery-ui-core', 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', false, '1.12.1');
wp_enqueue_script('jquery-ui-core');
}
}
add_action('init', 'wpb_modify_jquery_ui');
Google kütüphaneleri gibi, betiğin en son sürümünü kullanmak için bir süre sonra URL'yi değiştirmeniz gerekecektir.
WordPress'te jQuery'yi Tamamen Devre Dışı Bırak
Geniş kullanımı nedeniyle, WordPress web sitenizde jQuery'yi tamamen devre dışı bırakmanızı önermiyoruz. WordPress temanız jQuery kullanmasa bile, birçok popüler WordPress eklentisi buna ihtiyaç duyar.
Ancak, web sitenizin jQuery'ye ihtiyacı olmadığından eminseniz, onu güvenle devre dışı bırakabilirsiniz.
Kodu temanızın functions dosyasına, siteye özel bir eklentiye veya WPCode gibi bir kod parçacığı eklentisine eklemeniz yeterlidir.
if ( !is_admin() ) wp_deregister_script('jquery');
That’s all. This code simply disables the jQuery script from loading on the front end of your WordPress website.
WordPress'te jQuery ile İlgili Sorunları Giderme
jQuery'nin yeni sürümleri bazen eski yöntemleri ve fonksiyonları kullanımdan kaldırabilir veya kaldırabilir. Web sitenizdeki bir WordPress eklentisi eski bir yöntem kullanıyorsa, bu potansiyel olarak sorunlara yol açabilir.
Denetleme aracı'nın Konsol alanında uyarılar fark edebilir veya bazı özelliklerin çalışmayı durdurduğunu görebilirsiniz.
WordPress, eski jQuery sürümleriyle geriye dönük uyumluluk sağlamak için eskiden jQuery-migrate adlı bir betik kullanırdı. Ancak, WordPress 5.5'ten bu yana bu betik WordPress'ten kaldırıldı.
jQuery-migrate betiğini geri eklemek veya farklı jQuery sürümleri arasında sorun gidermek istiyorsanız, aşağıdaki yöntemi deneyebilirsiniz.
Sadece Version Control for jQuery eklentisini kurun ve etkinleştirin. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.
Etkinleştirdikten sonra, Ayarlar » jQuery Sürüm Kontrolü sayfasını ziyaret etmeniz gerekir. Buradan kullanmak istediğiniz jQuery sürümünü seçebilirsiniz.
Eklenti, bu sürümü resmi jQuery CDN'den otomatik olarak yükleyecektir.
Eklenti ayrıca jQuery migrate betiğini de yükleyecektir. İsterseniz, sorun giderme sırasında devre dışı bırakabilirsiniz.
Değişikliklerinizi kaydetmek için lütfen 'Değişiklikleri Kaydet' düğmesine tıklamayı unutmayın.
Umarım bu makale, varsayılan WordPress jQuery'yi Google kütüphanesiyle nasıl değiştireceğinizi öğrenmenize yardımcı olmuştur. Ayrıca bu kullanışlı WordPress kullanıcıları için jQuery eğitimlerine veya eksiksiz WordPress performans optimizasyonu rehberimize bakmak isteyebilirsiniz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Mrteesurez
WordPress'in yeni güncellemelerini manuel olarak değiştirirken, WordPress sürümünü yayınlayabilir ve bence tüm gerekli güncellemeler yayınlanmadan önce yapılmalıdır, yoksa bununla ilgili herhangi bir gerçek var mı?
Ayrıca, bu makalede belirttiğiniz gibi, Google kütüphanesinden kullanmadan önce jQuery'yi tamamen devre dışı bırakmam gerekiyor mu, çünkü yerleşik olanın paylaşılan bir barındırmada web sitesini özellikle yavaşlatabileceğini söylediniz?
WPBeginner Desteği
WordPress de bir güncelleme yayınlayabilir ancak bu, jQuery'nin daha yeni bir sürümünü isteyip istemediğine bireyin ihtiyaçlarına bağlıdır.
Bu makaledeki adımları kullanıyorsanız, aynı anda birden fazla jQuery sürümünün çalışmasını ve çakışmaya neden olmasını önlemek için eski sürümü devre dışı bırakmanızı öneririz.
Yönetici
Mrteesurez
Teşekkürler. Yanıtınız ve rehberliğiniz için minnettarım. Çakışmayı hiç düşünmemiştim, iki eklentinin siteyi tamamen yavaşlatıp yavaşlatmayacağını düşünüyordum. Uygulama yaparken talimatlarınıza uyacağım. Zaman ayırıp cevap verdiğiniz için teşekkürler.
ALEX
Merhaba,
Çin'de bir sunucumuz var ve Google'dan gelen tüm kaynaklar Çin hükümeti güvenlik duvarı tarafından engelleniyor.
Ancak, Jquery ve Yazı Tipi kaynakları artık varsayılan olarak Google'dan WordPress'e yükleniyor ve bu durum sitede ciddi gecikmelere neden oluyor.
Peki, Js veya CSS kaynaklarının yerel sunucudan yüklenmesini zorlamanın bir yolu var mı lütfen?
Teşekkürler
WPBeginner Desteği
Yerel bir sunucudaki jquery dosyaları için bir web adresiniz varsa, o zaman kod parçasındaki url'yi jquery'nin bulunduğu yere işaret edecek şekilde değiştirmeniz gerekir.
Yönetici
Wilbur
Hey, sorry for haling this post out of the grave…
How relevant is this still? In Terms of the latest P Core versions?
Teşekkürler
Jorge
Merhaba,
İşte daha gelişmiş bir uygulama:
add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
function register_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery-core’);
wp_register_script(‘jquery-core’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
wp_enqueue_script(‘jquery-core’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
wp_enqueue_script(‘jquery-migrate’);
}
}
Burada “cdn.yourdomain.com” ifadesi, daha iyi bir sonuç için CDN kullanarak dosya yolu ile değiştirilmelidir.
Saygılarımla,
Jorge Ortiz
Simon
Hem gönderinin çözümü hem de bu çözüm sitemi bozuyor
Plato39
Jorge'nin kodu benim için işe yaradı – ancak tırnak işaretleri değiştirilmelidir. Şunu deneyin:
add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
function register_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery-core’);
wp_register_script(‘jquery-core’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
wp_enqueue_script(‘jquery-core’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
wp_enqueue_script(‘jquery-migrate’);
}
}
Plato39
Tamam – süslü tırnakları ekleyen bu web sayfası. Metin düzenleyicinizde 'bul ve değiştir' yapın (veya tırnakları düz olanlarla manuel olarak değiştirin) ve kod temanızın functions.php dosyasında çalışacaktır.
Shaurya
cdn'im yoksa url'ye ne koymalıyım?
olacak
merhaba
yazınız için çok teşekkür ederim, değiştirmeyi denedim ve iyi yapıp yapmadığımı bilmiyorum çünkü web sitem şimdi 2 saniye daha yavaş
İyi yapıp yapmadığımı ve google kütüphanelerini kullanıp kullanmadığımı nasıl kontrol edebilirim?
Ihsan
Yukarıdaki kodu test ettim ve çalışması ve daha iyi olması için son satırı bununla değiştirdim
add_action( ‘wp_print_scripts’, ‘modify_jquery’, 100 );
Alejandro
Merhaba, İpuçlarınız için teşekkürler. Bu fonksiyonu kullandığımda jQuery'nin Google'dan neden iki kez yüklendiğini bilmiyorum, yani bir yerine iki HTTP isteği alıyorum. İşte test: http://tools.pingdom.com/fpt/#!/dROQaF/http://elbauldelprogramador.com.
jquery.easing ile aynı şey olur, ancak bu sefer aynı dosya için 3 HTTP isteğiyle.
Herhangi bir fikriniz var mı? Kodu inceledim ama wp_enqueue_script();'nin çoğaltıldığını bulamadım.
Şimdiden teşekkürler
Alejandro
Yalnızca oturum açtığımda Google'dan gelen jquery'nin yalnızca bir kez yüklendiğini fark ettim.
Mathieu
Teşekkürler! Yönetici işlevselliğimi bozan jQuery artık çözüldü.
Mitch
Çok teşekkürler, minnettarım.
Joseph Chambers
Ziyaretçinin sayfamızı hangi HTTP veya HTTPS üzerinde ziyaret ettiğine bağlı olarak ikisinden birini yüklemek istersem ne olur?
çoğu şey için değiştirebiliriz: http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js -> //ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js ve çalışıyor. Ancak; wp_register_script() içindeki bir şey, bunu değiştirdiğimde bir hata (Beyaz sayfa ve üzerinde: Hata kelimesi) veriyor. Düşünceler, çözümler?
Sajid Iqbal
Bu harika yazı için teşekkürler Syed. Bana çok zaman kazandırdı.
Matt Ogborne
Çok yardımcı oldu, Teşekkürler!
Matt
Riversatile
Merhaba,
İşte googleapi jquery dosyasının en son sürümü.
Yukarıdaki kodu kopyalayıp yapıştırırken, jquery URL'sini şununla değiştirmeyi unutmayın:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
Ardından “1.4.4” yerine “1.6.2” yazın
Şöyle:
// jQuery'yi Google API'ye Yüklemefunction modify_jquery() { if (!is_admin()) { // Yerel jQuery kopyasını yüklemek için sonraki iki satırı yorum satırı yapın wp_deregister_script(‘jquery’); wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js’, false, ‘1.6.2’); wp_enqueue_script(‘jquery’); }}add_action(‘init’, ‘modify_jquery’);
vnu
Bir eklenti olan thethefly'ın sekmeleri ve akordeonları gibi bir eklenti kullanırsam, (!is_admin) ayarını "minimum" yetkiye mi değiştirmem gerektiğini bana söyleyebilir misiniz? Böylece sayfalarda oluşturulan sekmeler herkes tarafından görüntülenebilir mi?
Teşekkürler!
Melissa Cleaver
Kod için çok teşekkürler, ancak functions.php dosyamda kullanmaya çalıştığımda, kodun neresine koyarsam koyayım ölümcül bir hata aldım. Burada bir şey mi yanlış yapıyorum?
Yayın Kadrosu
Az önce yayınladığımız yeni kodu deneyin.
Yönetici
swanie
Question: does Google Library do a good job at pulling in the alt tag info from the media library? … I have several professional themes that use a main page jQuery slider, but they don’t pull in the alt tag … thus, the source code look like: alt=”” … which of course, is an seo no-no. I’ve never used the Google Library script … I’d be curious how that works. What’s your experience?
Yayın Kadrosu
Ne için Alt etiketi? Bu sadece javascript'i değiştiriyor...
Yönetici
swanie
Tamam… sanırım özellikle jQuery kaydırıcılarından bahsediyorum… Birkaç profesyonel tema satın aldım ve ana sayfada jQuery kaydırıcısı var… işte bunlardan biri: http://coloradospringsautomechanics.com … kaynak kodunu görüntülediğinizde, resimleri çekiyor ama alt etiketlerini çekmiyor… alt etiketi boş.
Sanırım bu gönderiyi okuyarak, bu Google Kütüphanesi yaklaşımı bunu çözebilir.
Başka bir çözüm, eklenti dosyalarını açıp alt etiketine eklemek olabilir, bu yüzden şöyle olmalı:
img src=”file.jpg” alt=”” title=””
Bu jQuery kaydırıcılarının neden alt etiketlerini çekmediğini merak ediyorum. Mantıklı mı? Konu dışı mı kaldım?
Siz harikasınız, bu arada.
Aamir Rizwan
Siteniz Google tarafından “kötü amaçlı yazılım” olarak işaretlendi.
Geraldo
//Konu dışı
@Swanie
Buraya bak: http://sitecheck.sucuri.net/results/coloradospringsautomechanics.com/
Güvenlik raporu (Uyarılar bulundu):
hata Engellenmiş: Evet
hata Muhtemelen ele geçirilmiş: Evet
//Konuyla ilgili
JQuery betiklerimizin tümünü “paketleyemez” miyiz? Her betik için ayrı ayrı çağrı yapmamız mı gerekiyor?
WPBeginner Desteği
@Geraldo : bağımlılıkları çözebilirsiniz. Örneğin, bir jQuery betiği yüklüyorsanız, bu açıkça jQuery'ye ihtiyaç duyacaktır, bu nedenle bunu bir bağımlılık olarak eklersiniz ve WordPress bunu sizin için kuyruğa alır.