WordPress ile çalışmaya başladığımızda, JavaScript ve CSS eklemek oldukça basit görünüyordu. Kodu doğrudan temanıza veya eklentinize bırakır ve devam ederdiniz.
Ancak yıllar içinde, biz (ve birçok okuyucumuz) bu kestirme yolun ciddi sorunlara yol açabileceğini acı deneyimlerle öğrendik. Betiklerin birbiriyle çakışmasından bir güncellemeden sonra tüm sitelerin bozulmasına kadar her şeyi gördük.
İyi haber şu ki, WordPress'in betiklerinizi ve stillerinizi yüklemek için aslında doğru bir yolu var ve bunu öğrendiğinizde, gelecekte birçok baş ağrısından kurtulacaksınız.
Bu kılavuzda, WordPress'e JavaScript ve CSS'yi doğru şekilde nasıl ekleyeceğinizi göstereceğiz. Özel bir tema oluşturuyor veya ilk eklentinizi yapıyor olun, bu adımlar bunu güvenli ve güvenilir bir şekilde yapmanıza yardımcı olacaktır.
WordPress'e Betik ve Stil Sayfaları Eklerken Yapılan Yaygın Hatalar
Birçok yeni WordPress eklenti ve tema geliştiricisi, betiklerini veya satır içi CSS'lerini doğrudan eklentilerine ve temalarına ekleme hatasını yapar.
Bazıları betiklerini ve stil sayfalarını yüklemek için yanlışlıkla wp_head fonksiyonunu kullanır.
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
Yukarıdaki kod daha kolay görünse de, WordPress'e betik eklemenin yanlış yoludur ve gelecekte daha fazla çakışmaya yol açar.
Örneğin, jQuery'yi manuel olarak yüklerseniz ve başka bir eklenti jQuery'yi doğru yöntemle yüklerse, jQuery iki kez yüklenmiş olur. Eğer her sayfada yüklenirse, bu WordPress hızını ve performansını olumsuz etkiler.
İkisinin farklı sürümler olması da mümkündür, bu da çatışmalara neden olabilir.
Bunu söyledikten sonra, betikleri ve stil sayfalarını eklemenin doğru yoluna bir göz atalım.
WordPress'te Betikleri ve Stilleri Neden Sıraya Almalı?
WordPress'in güçlü bir geliştirici topluluğu vardır. Dünyanın dört bir yanından binlerce insan WordPress için tema ve eklenti geliştiriyor.
Her şeyin düzgün çalıştığından ve kimsenin birbirinin ayağına basmadığından emin olmak için WordPress'in bir sıraya alma sistemi vardır. Bu sistem, JavaScript ve CSS stil sayfalarını yüklemek için programlanabilir bir yol sağlar.
wp_enqueue_script ve wp_enqueue_style fonksiyonlarını kullanarak, bir dosyanın ne zaman yükleneceğini, nereye yükleneceğini ve bağımlılıklarının neler olduğunu WordPress'e bildirirsiniz.
Bu sistem ayrıca geliştiricilerin, aynı üçüncü taraf betiğini birden çok kez yüklemek yerine, WordPress ile birlikte gelen yerleşik JavaScript kitaplıklarından yararlanmalarını sağlar. Bu, sayfa yükleme süresini azaltır ve diğer eklentilerle ve temalarla olan çakışmaları önlemeye yardımcı olur.
WordPress'te Betikleri Düzgün Bir Şekilde Sıraya Nasıl Almalı?
WordPress'te betikleri düzgün bir şekilde yüklemek çok kolaydır. Aşağıda, eklentiler dosyanıza, temanızın functions.php dosyasına veya WordPress'te betikleri düzgün bir şekilde yüklemek için bir kod parçacığı eklentisine yapıştıracağınız örnek bir kod bulunmaktadır.
?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Açıklama:
Betik kaydımızı wp_register_script() fonksiyonu aracılığıyla yaparak başladık. Bu fonksiyon 5 parametre kabul eder:
- $handle – Handle, betiğinizin benzersiz adıdır. Bizimki “my_amazing_script” olarak adlandırıldı
- $src – src, betiğinizin konumudur. Eklenti klasörümüzün doğru URL'sini almak için plugins_url fonksiyonunu kullanıyoruz. WordPress bunu bulduğunda, o klasörde amazing_script.js dosya adımızı arayacaktır.
- $deps – deps bağımlılık içindir. Betiğimiz jQuery kullandığı için, bağımlılık alanına jQuery'yi ekledik. WordPress, siteye zaten yüklenmiyorsa jQuery'yi otomatik olarak yükleyecektir.
- $ver – Bu, betiğimizin sürüm numarasıdır. Bu parametre gerekli değildir.
- $in_footer – Betiğimizi altbilgide yüklemek istiyoruz, bu yüzden değeri true olarak ayarladık. Betiği üstbilgide yüklemek isterseniz, bunu false yapardınız.
wp_register_script içindeki tüm parametreleri sağladıktan sonra, her şeyi halleden wp_enqueue_script() içinde betiği çağırabiliriz.
Son adım, betiği gerçekten yüklemek için wp_enqueue_scripts eylem kancasını kullanmaktır. Bu bir örnek kod olduğu için, bunu diğer her şeyin hemen altına ekledik.
Bunu temanıza veya eklentinize ekliyorsanız, betiğin gerçekten gerekli olduğu yere bu eylem kancasını yerleştirebilirsiniz. Bu, eklentinizin bellek ayak izini azaltmanıza olanak tanır.
Şimdi bazıları neden önce betiği kaydettiğimizi ve sonra kuyruğa aldığımızı merak edebilir? Bunun nedeni, diğer site sahiplerinin eklentinizin temel kodunu değiştirmeden betiğinizi kaydını sildirmesine olanak tanımasıdır.
WordPress'te Stilleri Düzgün Bir Şekilde Kuyruğa Alma
Betikler gibi, stil sayfalarınızı da kuyruğa alabilirsiniz. Aşağıdaki örneğe bakın:
<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>
wp_enqueue_script yerine, stil sayfamızı eklemek için şimdi wp_enqueue_style kullanıyoruz.
Hem stiller hem de betikler için wp_enqueue_scripts eylem kancasını kullandığımızı unutmayın. Adına rağmen, bu işlev her ikisi için de çalışır.
Yukarıdaki örneklerde, kuyruğa almak istediğimiz betiğin veya stilin konumunu göstermek için plugins_url işlevini kullandık.
Ancak, temanızda kuyruğa alma betik işlevini kullanıyorsanız, bunun yerine basitçe get_template_directory_uri() kullanın. Bir çocuk teması ile çalışıyorsanız, get_stylesheet_directory_uri() kullanın.
Aşağıda bir örnek kod bulunmaktadır:
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Umarım bu makale, WordPress'e JavaScript ve stilleri doğru bir şekilde nasıl ekleyeceğinizi öğrenmenize yardımcı olmuştur. Gerçek hayattan kod örnekleri için en iyi WordPress eklentilerinin kaynak kodunu incelemek veya WordPress gönderilerine veya sayfalarına JavaScript'i kolayca nasıl ekleyeceğiniz hakkındaki rehberimize göz atmak 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
Bu gönderi biraz teknik ama WordPress geliştirme ile ilgilendiğim için çok hoşuma gitti, PHP kullanmayı ve stil sayfaları ile betikleri doğru bir şekilde eklemeyi daha fazla öğrenmemi sağladı. Gelecekte kodlar arasında çakışma olmaması için en iyi uygulamalar bu makalede verilmiş.
Schroedingers Katze
Şerefe, paylaştığınız için teşekkürler! Harika açıklama.
WPBeginner Desteği
You’re welcome
Yönetici
Jean-Michel
Merhaba,
Burada söylenenleri yaptım ama şimdi web sitemde boş beyaz bir sayfa alıyorum. Birisi bana bir ipucu verebilir mi?
Teşekkürler
WPBeginner Desteği
Kodu yanlış kopyalamışsınız veya sitenizdeki bir şeyle ilgili bir sorun olmuş gibi görünüyor. Kodu şu adresi kullanarak kaldırabilirsiniz: https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
Manuel olarak eklediyseniz, aksi takdirde şunu kullanabilirsiniz:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-wordpress-white-screen-of-death/
Yönetici
Orhan
Bu makale benim için çok faydalı oldu. Teşekkür ederim.
Mark
Okuduktan sonra öncesinden daha da kafası karışan tipik bir makale...
Zaved Hossain
Bu güzel, ancak benim normal uygulamam wp_enqueue_script/style'ı tek bir satırda kaydetmeden eklemektir. Kodlayıcıların parametreler konusunda dikkatli olması gerekir, belki bu konuda küçük bir açıklama yardımcı olacaktır. Örneğin, jquery'nin farklı sürümleri (sizin jquery betiğinizin wordpress'inkinden farklı bir sürüm gerektirebilir) ve nereye ekleneceği (başlık veya altbilgi, bu doğru/yanlış parametresi ile belirlenir). Jquery betiğinin başlığa eklenmesi gerekir (bu nedenle parametre değeri olarak 'false' geçilmelidir), aksi takdirde çalışmayabilir.
Hansjörg Leichsenring
Genellikle çok fazla style.css oluyor.
Enque ile doğru yükleme sırasını nasıl sağlayabilirim ve child css'in en son yüklendiğinden nasıl emin olabilirim?
Almanya'dan selamlar
Hansjörg
Carlos Araya
register_script'e boş parametreyi nasıl geçiririm? Betiğin sayfanın altına yüklenmesini sağlamak istiyorum ancak bunun varsayılan davranış olup olmadığına dair bilgi bulamıyorum.
Kerry Beeher
Merhaba,
Mükemmel kaynağınız için teşekkür ederim. Teşekkürler !!!
Biraz acemiyim ve PHP'yi ve WordPress'in JavaScript ve CSS eklemek için wp_enqueue_script ve wp_register_script'i nasıl kullandığını öğrenme yolculuğuma yeni başladım.
Örneklerinizi çalıştırmanıza yardımcı olmak için Easy Code Manager adlı bu ücretsiz eklentiyi kullanıyorum:
Ancak, kullanmak için doğru eklenti olup olmadığından emin değilim.
Daha önce functions.php'deki kodu değiştirmenin en iyi fikir olmadığını okumuştum, bu yüzden bunu yapmanın uygun olup olmadığını merak ediyorum?
Tema güncellemesinde değişmez mi?
Soru için üzgünüm, hala WordPress öğreniyorum.
Teşekkürler,
Kerry
Vaibhav Bansal
Bir Amazon Reklamı eklemek istiyorum
Metin widget'ına eklemeyi denedim, ancak boş görünüyor.
Kod aşağıdadır-
Sitem bu-
Bana yardım et. Siteme js nasıl eklerim?
WPBeginner Desteği
Merhaba Vaibhav,
WordPress sitenizde tema dosyalarınızı düzenlemeden reklam görüntülemek için bu eklentileri kullanabilirsiniz. WordPress için reklam yönetimi eklentileri listemize göz atın.
Yönetici
pradyumna
Bu eklentiyi kullanarak bir javascript ekledim ancak şimdi onu kaldırmam gerekiyor, eklentiyi kaldırıp devre dışı bırakmayı denedim ancak javascript hala çalışıyor
Vijay.Rajpal
Merhaba Bey, estem temasını kullanıyorum ve web siteme lightbox gibi bazı javascript işlevleri eklemek istedim. Bir alt tema oluşturdum ve kodlar aşağıdaki gibidir. functions.php dosyasında.
ve bir hata alıyorum:-Parse error: syntax error, unexpected '{' in E:\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themes\esteem-child\functions.php on line 18
Lütfen Yardım Edin, metin düzenleyici olarak sublime kullanıyorum.
Lütfen Yardım Edin!!!!!
WPBeginner Desteği
Kodda beklenmeyen bir { var. Fonksiyonlar dosyanızın 18. satırına gidin ve ardından kodu dikkatlice inceleyin. Eksik bir ; gibi küçük bir kod unutmuş olabilirsiniz.
Yönetici
Pramod
merhaba…..
wordpress'in js dizinine .js dosyası ekliyorum ve function.php'de referansını veriyorum
ancak çalışmıyor
wp_enqueue_script( ‘any-navigation’, get_template_directory_uri() . ‘/js/menu.js’);
Bobbie
Çok teşekkürler! Özel bir .js dosyası eklemeye çalışıyordum ancak register_script'in gerekli olduğunu açıklayan ilk açıklama bu oldu.
colkav
Hey, harika bir eğitim. Burada açıklandığı gibi Google Analytics ile ilgili bir javascript eklerken bir sorun yaşıyorum:
Betik, html'yi koddan çıkardıktan sonra çocuk temanızın 'js' klasörüne yerleştirdim.
Sayfayı yüklediğimde sürekli şu hatayı alıyorum:
ReferenceError: ga değişkeni bulunamıyor
(anonim fonksiyon)myscript.js:6
…ve belki de 'analytics.js'i bir bağımlılık olarak eklemem gerektiğini fark ettim!
Does that sounds right? And if so, how would I add analytics as a dependency for my script? I’ve tried experimenting here to no avail
Shoaib
Aynı şey için herhangi bir Eklenti var mı… Ben yeniyim ve kodlarla oynayamıyorum… Lütfen Yardım Edin Beyefendi
xavi
Merhaba.
Bu harika gönderi eğitimi için teşekkürler! Ancak "betiği nereye yükleyeceksiniz" dediğinizde, sadece başlık veya altbilgi (tüm web sayfalarında!) olarak tanımlayabilir misiniz? Belirli bir sayfada yüklenmesini tanımlayabilir misiniz? Sadece bir tanesine ihtiyacım var. Şimdiden teşekkürler ve çalışmaya devam edin! Sağlıcakla.
technofranchise
WordPress sitemde JavaScript veya JQuery kullanmak istiyorum. Fikirleriniz var mı?
Skye Barcus
JS konusunda tamamen acemiyim ama HTML biliyorum. Bunu bir wordpress sayfasına koymak istiyorum:
Temel olarak, bu bir GoToMeeting'e katılmak için bir widget. Bu, bir html sayfasının gövdesine attığınızda çalışır, ancak Wordpress'te bastırılır.
Bunun nasıl çalışacağını "Acemiler İçin" bir sürümünü verebilir misiniz?
Tyler Longren
Stil yükleme parçasında, 6. satırda, wp_register_script, sanırım wp_register_style olmalı.
WPBeginner Desteği
Tyler, no this will work too.
Yönetici
Pedro de Carvalho
neden _script kullanmayı seçtiniz?
Pali Madra
Neden _script ve _style değil de _script kullanıldığını ben de bilmek isterim? Herhangi bir faydası var mı yoksa ikisi de çalışır, bu yüzden herhangi biri kullanılabilir mi?
Dejan
Sitenizi gerçekten çok beğendim, faydalı ipuçlarıyla dolu, ancak CSS kuyruğa alma işlemini başlığınız bu şekilde söylese de doğru yapmıyor gibi görünüyorsunuz :=) Doğru yol şöyle olurdu:
wp_register_style( ‘my-css-style’, get_template_directory_uri() . ‘/css/style.css’, array(), ‘1.0’, ‘all’ );
wp_enqueue_style( ‘my-css-style’ );
İyi çalışmaları sürdürün… Selamlar!
Adrian Zumbrunnen
Bu çabanız için teşekkürler. Stil dosyalarını yüklemek için wp_enque_script kullanmak yanlış hissettiriyor. WordPress sonunda bunun için stil sayfası sözdizimi yerine betik çıktısı verebilir.
Gerçekten bu şekilde mi gömüyorsunuz?
WPBeginner Desteği
Bu eğitim, WordPress'teki temalarınız veya eklentileriniz için JavaScript ve stil dosyalarının nasıl yükleneceğini gösterir. Gömme ile makalelerde kodu nasıl gösterdiğimizi kastettiyseniz, bunun için Syntax Highlighter eklentisini kullanıyoruz.
Yönetici
oiveros
Merhaba, WordPress temalandırma konusunda yeniyim ve bu konuyu okurken, bununla ilgili bir şey sormak istedim. Jquery kütüphanesi bağlantısını güncellemek istersem bunu nasıl yaparım veya bağlantıyı nerede bulurum, denedim ama bulamadım. Yardımınız için şimdiden teşekkür ederim
WPBeginner Desteği
Jquery kütüphanesi bağlantısını güncellemekle, Google kütüphanesinden jquery eklemek istediğinizi kastediyorsanız. WordPress, jquery ile birlikte gelir ve temanızda yüklemek için temanızda şu satırı kullanın:
<?php wp_enqueue_script('jquery'); ?>Yönetici
oiveros
Tamam, yani en son jquery'yi istiyorsam, sadece bu satırı mı kullanmalıyım?, çünkü biri bana sadece bunun için bir eklenti kullanmamı söyledi, ama bir eklenti olmadan nasıl yapacağımı öğrenmek istedim
oliveros
Cevabınız için teşekkür ederim, bu sorunla ilgili gönderiyi sitenizde buldum.
Mark
Bu eğitim için çok teşekkürler.
Elliott Richmond
Faydalı Syed, teşekkürler.
Geçenlerde _underscore'u bir çerçeve olarak kullanarak bir css dosyası yüklerken bir sorun yaşadım, stil sayfası mycustomstyles.css olarak adlandırılmış olsa da tema mycustomstyles.css?ver=xx olarak çağırıyordu ve tema dosyanın adını ?ver=xx ekleyerek sonuna eklediği için dosyayı yüklemiyordu.
Bu, $ver varsayılanı ile ilgili bir şey mi?