WordPress’e CSS nasıl eklenir: 5 yöntem
CSS uygulamak ve sitenizin stilini düzenlemek ister misiniz? Eğer öyleyse, bu yazı tam size göre. Bu kılavuzda, web sitenizi ayarlayabilmeniz ve ziyaretçilerinize bir izlenim bırakabilmeniz için WordPress’e CSS eklemenin çeşitli yollarını göstereceğiz. WordPress’in kullanabileceğiniz birçok tema ve şablon olmasına rağmen, sitenizin görünümünü değiştirmek istiyorsanız, er ya da geç CSS kodunu ekleyeceksiniz. CSS eklemek web sitesine oldukça kolaydır. Daha önce bir tarayıcı geliştiricisi kullanarak CSS’nin nasıl uygulanacağını görmüştük, ancak başka yollar da var. Tüm bu farklı yöntemler artıları ve eksileri vardır, bu nedenle yeni başlayanların özel durumları için CSS eklemenin en iyi yolu olduğunu anlaması zordur. Bu nedenle, bu kılavuzda, WordPress web sitesine CSS stilleri eklemenin çeşitli yollarını göstereceğiz.
WordPress’e CSS nasıl eklenir CSS stilini WordPress sitesine uygulamanın birkaç yolu vardır:
Temaları ayarlayarak
Çocuk Tema Dosyalarını Düzenleme
Kendi CSS dosyanızı yükleyin
Bir kanca ile başlığa CSS uygulayın
Arka uç için CSS ekleyin
Her yönteme bakalım, böylece sizin için en uygun olanı seçebilirsiniz. Not: Bu yazıdaki CSS yapısını ayrıntılı olarak açıklamayacağız, bu nedenle bu kılavuzu sorunsuz bir şekilde takip edebilmek için CSS hakkında temel bir anlayışa sahip olmanızı öneririz. CSS uygulamak için önceki bir adım olarak, değiştirmek istediğiniz belirli HTML öğelerini bulmak için bir tarayıcı geliştiricisi kullanmanızı öneririz. Nasıl yapacağınızdan emin değilseniz, bir tarayıcı geliştiricisi kullanarak CSS’nin nasıl uygulanacağına dair kılavuzumuza bakın.1) WordPress’e özel bir CSS kodu eklemenin en kolay ve en hızlı yoluna CSS uygulayın, ek bir CSS düzenleyicisine koymaktır. tema ayarından. Bu varsayılan bir WordPress CSS düzenleyicisidir ve varsayılan olarak tüm web sitelerinde bulunur. Ancak, bazı temaların ve eklentilerin bu özelliği devre dışı bırakabileceğini unutmayın. CSS’nizi tema ayarını kullanarak uygulamak için, gösterge tablonuzu açın ve görünümden açın> Özelleştir> CSS düzenleyicisini açmak için ek CSS. Orada, sitenizin CSS kodunu göreceksiniz ve kodunuzu ekleyebilirsiniz.
Bu yöntemin en büyük avantajlarından biri, CSS özelleştirmesinin ekranın sağ tarafında gerçek zamanlı sonuçlarını görebilmenizdir.
CSS uzantısı olan yeni bir dosya oluşturun ve kodunuzu oraya yapıştırın. Bu örnekte, my-styles.css dosyasını adlandırdık. Kodunuzu koyduktan sonra dosyayı kaydedin ve bir sonraki adıma devam edin Veya doğrudan ilk çocuk temasının dizinine yükleyebilirsiniz. Çocuk tema klasöründeki konum hakkında endişelenmeyin, bir sonraki adımda dosya yolunu hedefleyeceğiz. Şimdi dosya yüklemek için FileZilla gibi cPanel veya FTP istemcisi kullanın. LocalHost sunucusundaysanız, LocalHost Server genel klasörünüzde bulunan Child tema klasörüne dosyaları kopyalayıp ekleyebilirsiniz.
Örneğimizi takip ederek, My-Styles.css dosyamızı alt temaya koyacağız. 3.3) Özel .css dosyanızı girin Şimdi özel CSS dosyanızı işlevi sağlamak için çocuğunuzun temasından functions.php dosyasında sıralamanız gerekir. Function.php gönderir. My_styles function () {
wp_register_style (‘Style-ukai’, get_stylesheet_directory_uri (). ‘/gaya-sai.css’);
wp_enqueue_style (‘Style-ukai’);
Add_action (‘wp_enqueue_scripts’, ‘my_styles’); Yeni oluşturulan dosyanın yol tarafından doğru bir şekilde çağrıldığından emin olun, dosyanın tema dizininde hangi olduğuna bağlıdır. Ayrıca, dosya adını değiştirmeyi unutmayın (bu örnekte my-styles.css).
Yolun doğru olup olmadığını kontrol etmek için aşağıdaki snippet’leri kullanabilirsiniz. Add_action (‘wp_head’, function () {
echo get_stylesheet_directory_uri (). ‘/My-styles.css’;
});
İşte burada! Kendi CSS dosyanızı yükleyerek WordPress’e CSS’yi bu şekilde uygulayabilirsiniz. 4) Bir kanca kullanarak başlığa CSS uygulayın Bazı kodlama becerileriniz varsa, kancaları kullanarak sitenize CSS ekleyebilirsiniz. WP_head () web siteleri geliştirirken çok kullanışlıdır. Komut dosyasını HTML etiketine dahil etmek için kullanmanız önerilmese de, bu, testi hızlı bir şekilde yapmanıza ve hata ayıklamanıza izin verir. Birkaç sayfa CSS veya karmaşık bir web sitesinde çalışıyorsanız ve bazıları çalışmıyorsa Beklendiği gibi, CSS kodunuzu bu kancayı kullanarak bölümünde ekleyebilirsiniz. Add_action (‘wp_head’, ‘my_head_css’);
İşlev my_head_css () {
Echo ” .
Arka plan: kırmızı;
Genişlik: 200 piksel;
Rulman: 11 piksel;
Sınırlar: 23px; }
“;} Örneğin, bu komut dosyasıyla, başlığın boyutunu, arka plan rengini, sınırını ve dolguyu değiştiririz. Bu şekilde, CSS komut dosyasının diğer CSS dosyalarının üzerindeki Frontnd’e uygulanmasını veya Web sitesi başka şekillerde bile.
5) CSS ekleyin Son arka ucuna, CSS stilini WordPress’e eklemenin bir yolu daha var. Admin_head () kancasını kullanarak arka uç için özel CSS uygulayabilirsiniz: add_action (‘admin_head’, ‘my_custom_fonts’);
İşlev my_custom_fonts () {
Gema ‘
#adminmenu {
Arka plan: #602e93;}
‘;
} Bu örnekte, arka plan rengini değiştiriyoruz (#602E93). Yöntemler 4 ve 5 çok yararlı olabilir ve html bölümüne CSS komut dosyalarını ekleyerek zamandan tasarruf etmenize yardımcı olabilir. Ancak, bu önerilen bir uygulama değildir ve stili kalıcı olarak uygulamak için bu yöntemi kullanmamalısınız. Genel olarak, küçük bir CSS ile sitenizin görünümünü ayarlayabilirsiniz. CSS eklemek kolaydır, ancak bunu yapmanın birkaç yolu vardır, bu nedenle hangi yöntemi kullanmanız gerektiğini bulmak zor olabilir. Bu öğreticide, WordPress sitenize CSS eklemek için beş farklı yöntem gösterdik:
Temaları ayarlayarak
Çocuk Tema Dosyalarını Düzenleme
Kendi CSS dosyanızı yükleyin
Bir kanca ile başlığa CSS uygulayın
Arka uç için CSS ekleyin
Her yöntemin artıları ve eksileri vardır. Örneğin, temayı ayarlamaktan CSS eklemek kolaydır ve gerçek zamanlı olarak donatılmıştır. Ancak, bu, CSS kurallarının büyük bir listesi için önerilen bir uygulama değildir. Veya çocuğunuzun tema dosyasını düzenleyebilir veya kendi CSS dosyanızı çocuğunuzun temasına yükleyebilirsiniz. Bu uygulama önerilmemesine rağmen, hızlı test yapmak ve sitenizi hata ayıklamak için komut dosyasını html etiketine dahil etmek için kancayı kullanabilirsiniz. Web sitenize CSS eklediniz mi? Hangi yöntemi kullanıyorsunuz? Eklememiz gereken diğer yöntemleri biliyor musunuz? Bize aşağıdaki yorumlarda anlatın!
