WordPress’e Özel CSS ve JavaScript Nasıl Eklenir?

Özel CSS ve JavaScript, küçük bir tasarım veya davranış ihtiyacını tüm temayı değiştirmeden çözebilir. Kodu ana tema dosyasına doğrudan eklemek hızlı görünür, ancak bir tema güncellemesi değişikliği silebilir. Hatalı bir JavaScript kodu da yalnızca hedef sayfayı değil, ilgisiz sayfaları etkileyebilir.

WordPress özel kod eklemek için birden fazla güvenli yol sunar. Doğru yöntem; kodun ne yaptığına, ne kadar sık değişeceğine ve hangi sayfalarda çalışması gerektiğine bağlıdır. Birkaç satır CSS ile analiz kodu ya da siteye yeni işlev kazandıran bir özellik aynı yerde tutulmamalıdır.

Kısa bir görsel düzeltme için Ek CSS, genel entegrasyon kodları için yönetilen kod alanı, tema dosyaları için alt tema, yeni PHP işlevleri içinse özel eklenti daha uygundur. Seçim, kodun ne yaptığına ve nerede çalışması gerektiğine göre yapılmalıdır.

Özel CSS ve JavaScript ne işe yarar?

CSS bir sayfanın görünümünü belirler. Boşluklar, renkler, yazı tipleri, kenarlıklar ve mobil görünüm bu kapsamdadır. JavaScript ise davranışı yönetir. Bir menüyü açabilir, tıklamadan sonra mesaj gösterebilir veya analiz sistemine etkinlik gönderebilir.

İletişim butonunuz doğru çalışıyor ancak köşeleri fazla keskin görünüyorsa CSS yeterlidir. Aynı butonun özel bir pencere açması ve tıklamayı kaydetmesi gerekiyorsa JavaScript de devreye girer.

Bu iki dil kendi başına tehlikeli değildir. Risk; kod yanlış yere eklendiğinde, ihtiyaç olmadığı hâlde her sayfada çalıştırıldığında veya değişiklikten önce geri dönüş noktası oluşturulmadığında artar.

Kod eklemeden önce doğru yöntemi seçin

Görevi karşılayan en küçük yöntemi seçmek genellikle en güvenli yaklaşımdır. Bir renk düzeltmesi için alt tema kurmanız gerekmez. Uzun bir özellik kodunu genel bir header kutusunda tutmak da iyi bir çözüm değildir.

• Küçük görsel düzenleme:WordPress Ek CSS alanı.
• Analiz, doğrulama veya kısa üçüncü taraf kodu:kontrollü header, body veya footer ekleme aracı.
• Şablon ve kapsamlı tema stilleri:alt tema.
• Tekrar kullanılabilir site işlevi:özel eklenti.
• Haricî JavaScript dosyası:WordPress enqueue işlevleri.

Bu ayrım kodun sahibini ve amacını görünür tutar. Aylar sonra bile kodun nereden geldiğini ve nasıl kapatılacağını anlayabilirsiniz.

Siteyi hazırlayın ve geri dönüş yolunu koruyun

İlk olarak güncel bir yedek alın ve hangi ekranı veya dosyayı değiştireceğinizi not edin. Gelir üreten ya da yoğun ziyaret alan bir sitede kodu önce staging kopyasında deneyin. Staging, ziyaretçilerin görmediği test sitesidir.

Kodu güvenilir bir kaynaktan alın ve kaydetmeden önce okuyun. Örnek alan adlarını, kimlikleri ve CSS seçicilerini kendi sitenize göre değiştirin. Başka bir tema için yazılmış kod, sizin temanızdaki öğeleri bulamayabilir.

Her seferinde tek değişiklik yapın. Ardından ilgili sayfayı gizli pencerede açın; masaüstü ve mobil görünümü ayrı ayrı kontrol edin. Böylece sorun çıkarsa hangi değişikliğin buna yol açtığını kolayca bulursunuz.

Ek CSS ile küçük bir tasarım değişikliği yapın

Klasik bir tema kullanıyorsanız kısa tasarım düzenlemeleri için Görünüm → Özelleştir → Ek CSSyolunu izleyebilirsiniz. Blok temalarda stil ekranı farklı olabilir. Amaç, değişikliği ana tema dosyasının dışında tutmaktır.

.contact-button {
    border-radius: 10px;
    font-weight: 700;
}

Bu örnek, contact-buttonsınıfına sahip öğenin köşelerini yuvarlar ve metni kalınlaştırır. Butonun bağlantısını veya çalışma şeklini değiştirmez.

Yayımladıktan sonra ilgili sayfa önbelleğini temizleyin. Değişiklik görünmüyorsa hemen !importanteklemek yerine seçiciyi tarayıcı geliştirici araçlarıyla kontrol edin. Yanlış seçici, daha güçlü bir kuralla doğru hâle gelmez.

Kodları header, body veya footer alanına yerleştirin

Üçüncü taraf hizmetler genellikle kodun header bölümüne, açılış body etiketinin hemen sonrasına veya kapanış body etiketinden önce eklenmesini ister. Bu konumlar aynı değildir.

• Header:erken başlaması gereken doğrulama ve ölçüm kodlarında kullanılır.
• Body başlangıcı:bazı etiket yöneticileri veya erişilebilirlik araçları bunu ister.
• Footer:sayfa içeriğinden sonra yüklenebilen kritik olmayan kodlar için uygundur.

Hizmetin kendi kurulum talimatını izleyin. Bir ölçüm kodunu yalnızca hız amacıyla footer alanına taşımak ilk etkinliğin kaçırılmasına yol açabilir. Her kodu header bölümüne koymak ise görünen içeriğin yüklenmesini geciktirebilir.

Meta Pixel’i güvenli eklemeve header, body ve footer seçimihakkındaki yazılar bu iki yaygın durumu daha ayrıntılı açıklar.

Tema değişiklikleri için alt tema kullanın

Şablon dosyalarını değiştirecek, daha büyük bir stil dosyası yönetecek veya aktif temaya ait kod ekleyecekseniz alt tema daha doğru yerdir. Alt tema ana temanın özelliklerini kullanır, ancak sizin değişikliklerinizi ayrı dosyalarda saklar.

Alt temayı canlı sitede etkinleştirmeden önce kurulumunu tamamlayın ve test edin. Eksik yapılandırma menülerin, bileşenlerin veya şablon ayarlarının farklı görünmesine yol açabilir. Kopyaladığınız her dosyanın neden değiştirildiğini not edin.

Alt tema da bakım ister. Ana tema büyük bir güncelleme aldığında kopyalanmış şablonları karşılaştırın. Eski dosyanın sonsuza kadar uyumlu kalacağını varsaymayın.

JavaScript dosyasını wp_enqueue_script ile yükleyin

Geliştiriciler haricî bir JavaScript dosyasını şablona doğrudan <script>etiketi yazarak değil, WordPress yükleme sistemiyle eklemelidir. Bu sistem bağımlılıkları, sürümleri ve dosyanın konumunu daha düzenli yönetir. Özel CSS ve JavaScriptkodlarını kontrollü yüklemek, daha sonra tek bir değişikliği ilgisiz kodlara dokunmadan kapatmayı da kolaylaştırır.

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'site-interactions',
        get_stylesheet_directory_uri() . '/assets/site-interactions.js',
        array(),
        '1.0.0',
        true
    );
} );

Sondaki true, dosyanın footer bölümünde yüklenmesini ister. Kod jQuery kullanıyorsa yükleme sırasını şansa bırakmayın; bağımlılık dizisine 'jquery'ekleyin.

Resmî WordPress wp_enqueue_scripts belgesi, bu yöntemin kullanımını açıklar.

Kodu yalnızca gereken sayfalarda çalıştırın

Yalnız rezervasyon sayfasında kullanılan bir aracın sitenin tamamında yüklenmesi gerekmez. Koşullu yükleme gereksiz istekleri azaltır ve hatalı kodun etkisini sınırlar.

PHP tarafında dosyayı eklemeden önce is_page(), is_singular()veya şablon kontrolü kullanabilirsiniz. Kod ekleme aracında sayfa hedefleme özelliği varsa aynı mantığı orada uygulayın.

Kuralı gereğinden fazla daraltmayın. Çevrilmiş sayfalarda veya yeni açılan kampanya sayfasında kodun kaybolmaması için her dilde ve çıkış yapılmış oturumda test edin.

Hatalı koddan sonra siteyi kurtarın

Değişiklikten sonra ön yüz boş kalır veya yönetim ekranı açılmazsa ilk olarak son eklenen kodu geri alın. Aynı anda ilgisiz ayarları değiştirmek sorunun kaynağını gizler.

1. Son eklenen kodu devre dışı bırakın veya silin.
2. İlgili WordPress, sunucu ve CDN önbelleklerini temizleyin.
3. Tarayıcı konsolundaki ilk hatayı not edin.
4. Yönetim paneli açılmıyorsa önceki dosyayı yedekten geri yükleyin.
5. Kodu yeniden eklemeden önce sayfayı tamamen test edin.

Kod bir eklentideyse WordPress yönetimi açılmadığında eklenti klasörünü hosting dosya yöneticisi veya SFTP ile yeniden adlandırabilirsiniz. Alt tema hatasında tüm temayı silmek yerine yalnızca önceki dosyayı geri getirin. WordPress kod parçaları, her birinin amacı ve konumu açıkça yazıldığında daha kolay yönetilir.

Özel CSS ve JavaScript için hangi yöntem seçilmeli?

Site genelindeki CSS, JavaScript, analiz, doğrulama ve gömme kodlarının çoğu için Code Injection en pratik başlangıç noktasıdır; çünkü kodlar görünür ve birbirinden bağımsız biçimde yönetilebilir. Çok küçük bir görsel değişiklikte Ek CSS yeterlidir. Şablon dosyalarının değişmesi gerekiyorsa alt tema kullanılabilir. Özel eklenti ise ön yüz kodu eklemekten farklı olarak yeni PHP işlevleri geliştirildiğinde gerekli olur.

Özel CSS ve JavaScriptiçin en iyi yöntem, en karmaşık olan değildir. Kodu ekleyen kişi ayrıntıları unutsa bile çözüm anlaşılabilir, test edilebilir ve kapatılabilir kalmalıdır.

Kaynaklar

• WordPress Developer Resources: wp_enqueue_scripts kancası