WordPress Web Sitenize Özel CSS ve JS Kodunu Kolayca Nasıl Eklersiniz?

Yayınlanan: 2021-11-26

Özelleştirme, bir web sitesi sahibinin ihtiyaç duyduğu tek şeydir.

En işlevsel veya popüler temayı indirmiş olsanız bile, web sitenizde işinizin nişine göre ince ayar yapmak isteyeceğiniz bir şey vardır ve bunun için özelleştirme önemli bir ihtiyaç haline gelir.

Teknik bir WordPress geliştiricisiyseniz, özel CSS veya HTML eklemek birkaç dakikalık iş olabilir, ancak teknoloji konusunda bilgili olmayan web sitesi sahipleri ne olacak?

WordPress özelleştirme CSS eklemek için özel CSS WordPress eklentisini indirerek teknik kodlama bilgisi olmadan yönetebilirsiniz.

Kimin özel CSS, HTML ve JS Kodu eklemesi gerekiyor?

Dünya çapında maksimum web sitesi sahibi WordPress'i seçiyor. WordPress'i seçme nedenleri çoktur, ancak yaklaşan site lansmanınız için WordPress'i seçmenin en yaygın nedenlerinden biri, özelleştirmenin kolay olmasıdır.

Web sitesinin işlevselliği, kullanıcı katılımı için oldukça önemlidir. Web sitesi sahipleri genellikle, özel bir CSS sınıfı eklemeleri gereken genel site işlevselliği de dahil olmak üzere web sitesinin ön ucunu geliştirmek ister.

Ayrıca, birçok web sitesi sahibi basit bir WordPress teması indirir ve daha sonra özel CSS ve JS kodlamasını kullanarak özelleştirmeye karar verir. Bu harika bir fikir ve bu blog, bir uzmana danışmadan web sitenizi nasıl özelleştireceğinizi bilmenize yardımcı olacak.

Önemli olan, WordPress web sitenizde özel CSS ve js kullandığınızda, değişikliklerinizi kaybetmeden temanızı/eklentinizi kolayca güncelleyebilirsiniz.

Herhangi bir teknik yardım olmadan özel CSS sınıfı ve JS kodları eklemenize yardımcı olan WordPress Eklenti Dizini ile farklı Özel CSS eklentileri mevcuttur. En çok indirilen 'Custom CSS' WordPress eklentilerinden biri hakkında konuşalım.

Essential Plugin'den Özel CSS ve JS PRO

Özel CSS ve JS PRO eklentisi, WordPress web sitenizi herhangi bir teknik yardım olmadan özelleştirmenize yardımcı olmak için burada. Mevcut web sitenizde gerekli ince ayarları yapmanıza yardımcı olacak özel özelliklere sahiptir. Web sitenizi özelleştirmek için özel CSS ve JS eklentimizi kullanırken mevcut temanız veya WordPress Eklentileri dosyalarınız olduğu gibi kalır.

Essential Plugin'in Özel CSS'si ve JS PRO'su, web sitenize ayrı ayrı özel CSS stilleri ve JavaScript kodu eklemenize yardımcı olur. Orijinal temanın üzerine yazılmaz, bunun için WordPress temalarınızın gelecekteki güncellemeleri kolayca yönetilebilir.

Eklenti Özellikleri

  • Herhangi bir teknik yardım olmadan kurulumu oldukça kolaydır
  • CSS, HTML ve JS kodlaması yardımıyla mevcut WordPress web sitenize özelleştirme uygulamanıza yardımcı olur.
  • Sözdizimi vurgulamalı metin düzenleyiciyi edinin
  • Kullanıcılar "head" bölümünde komut dosyalarını ve stilleri yazdırabilir
  • “body” etiketinin kapanmasından önce komut dosyalarının ve stilinin yazdırılmasına yardımcı olur
  • "body" etiketinin açılmasından hemen sonra komut dosyalarını ve stilleri yazdırın
  • Kullanıcılar sınırsız kod ekleyebilir. Rakam kısıtlaması yok
  • Temayı değiştirdiğinizde de değişikliklerinizi saklayın
  • Google Analytics kodunu web sitenize uygulamanıza yardımcı olur
  • Bunu kullanarak web siteniz Facebook Piksel kodunu ekleyebilir; bunun dışında kullanıcılar Twitter, LinkedIn ve Google etiket yöneticisi kodlarını da ekleyebilir.

Mevcut Web Sitenize CSS Stilleri Ekleme

Stil eklemek için ideal konum Web Sitesi Başlığıdır. İşte WordPress web sitenize başlık komut dosyaları ve stil eklemenize yardımcı olacak bir ekran görüntüsü. Herhangi bir stil özelleştirmesi eklemek için kodu stilin içine girin.

Mevcut Web Sitenize Komut Dosyası Ekleme

Komut dosyaları eklemek için ideal konum Web Sitesi Alt Bilgisidir. İşte WordPress web sitenize altbilgi komut dosyaları ve stil eklemenize yardımcı olacak bir ekran görüntüsü. Herhangi bir stil özelleştirmesi eklemek için kodu komut dosyasına girin.

CSS, HTML ve JS gibi Komut Dosyalarını Birlikte Ekleme

CSS'yi HTML ve JS'ye dahil etmenin basit sürecini anlamanıza yardımcı olacak örnek bir resim.

Belirli Bir Sayfa için Komut Dosyası, Stil veya HTML Ekleme

WordPress temaları, belirli bir sayfa için komut dosyası, stil veya HTML eklemenize olanak tanır. İşte bunu gerçekleştirmek için basit bir işlem.

  1. İlk olarak Eklenti Ayarı > Genel Ayarlar Bölümüne gitmeniz gerekir.
  2. Artık “Mesaj Türlerini” görebilirsiniz.
  3. Lütfen Sayfa vb. ilgili gönderi türünü işaretleyin.
  4. Kutuyu işaretlediğinizde, belirli sayfalarda düzenlediğinizde aynı ayarı görebilirsiniz.

Neden Özel CSS ve JS Eklentisi?

Genellikle, herhangi bir web sitesi sahibi mevcut WordPress temasında küçük değişiklikler yapmak istediğinde alt tema oluşturulur.

Bu nedenle, tüm değişiklikler, gümrük stilleri ve kodlama ile birlikte alt temada yapılır. Custom CSS and JS Plugin'i indirdiğinizde, bir alt temanız olması gerekmez.

Essential Plugin, bir alt tema olmadan mevcut WordPress web sitelerinde değişiklik yapmanıza yardımcı olan Özel CSS ve JS Pro ile yerleşik bir düzenleyici sunar.

Web sitesi sahipleri, web sitesinin üstbilgi ve altbilgisine kolayca özel CSS ve JS kodları ekleyebilir ve değişiklikleri uygulamak için başarıyla kaydedebilir.

Eklenti düzenleyicisine yanlış bir şey girerseniz endişeleniyor musunuz? Özel CSS ve JS eklentilerinin yardımıyla, eklenti düzenleyicisine yanlış bir şey girme konusunda endişelenmenize gerek yok.

Bu durumda, orijinal web sitesinde hiçbir şey etkilenmeyecektir; Yapmanız gereken tek şey eklenti düzenleyicisini ziyaret etmek ve değişiklikleri uygulamak için yanlış öğeyi değiştirmek.

Bu nedenle, özel CSS kodunu kullanmak, özel bir CSS WordPress eklentisi yardımıyla oldukça kolay ve basittir.

DEMO'ya mı ihtiyacınız var?

WordPress web sitenize indirmeden önce Essential Plugin ile Özel CSS ve JS Pro'nun hızlı bir PRO Demosunu edinin.

Yine de, çevrimiçi web sitenizde etkinleştirmek ve çalıştırmak için en güvenli WordPress Eklentilerinden biridir. Bununla birlikte, bir Özel CSS sınıfı veya JS eklentisi eklemek için WordPress uzmanlarımıza da danışabilirsiniz.

Ayrıca, Hakkında Daha Fazlasını Okuyun:

WordPress Eklentilerini Yüklemek İçin Başlangıç ​​Kılavuzu: Türleri ve Faydaları

WordPress Kaydırıcıları Mükemmel Çalışmıyor mu? İşte Neden? & Nasıl Düzeltilir?

Bir PSD Şablonunu WordPress Temasına Dönüştürün