WordPress web sitenizi nasıl ayarlayabilirsiniz CSS
WordPress siteniz için seçtiğiniz tema ne olursa olsun, aynı tasarımı kullanan başka siteler de olacaktır. Ve bugün birçok tema tarafından sağlanan kapsamlı ayar seçeneği olsa bile, sitenizi daha belirgin hale getirmek isteyebilirsiniz. Sitenizin gerçekten bir parçası olarak görünmesini sağlamak için, opsiyon veya tema ayarları aracılığıyla sunulan standart ayarı aşmanız gerekir. WordPress CSS’nizi ayarlamak, tasarımınızı siteniz için gerçekten benzersiz olacak şekilde değiştirmenizi sağlar. Bu makalede, Divi gibi gelişmiş temaları kullanmak, çocuk temalarını yapmak ve ayarlamak, varsayılan WordPress ayarlamalarını ve WordPress CSS eklentilerini kullanarak WordPress CSS’nizi ayarlamanın çeşitli yollarını tartışacaktır.
CSS: Temeller ve WordPress’in ilk önce nasıl kullandığı ilk şey: CSS, sizin için kısaltmadan daha mantıklı olmayabilecek basamaklı stil sayfalarının kısaltmasıdır. Öyleyse, yok edelim. Stil sayfası, diğer belgelerin sunumu için kullanılacak gücü (yazı tipleri, renkler vb.) Açıklayan bir belgedir. Bizim durumumuzda bir web sayfası düzenliyoruz. Adın “basamaklı” bölümü çok güçlü bir yerdir. Web sayfaları, daha düşük bir sayfa daha yüksek bir kuvvet ekleyerek veya değiştirerek, katmanlı şelaleler gibi çeşitli stiller ile düzenlenebilir. Bu önemlidir, çünkü temanız tarafından sağlanan orijinal stili düzenlemeden kendi tarzınızı bu şekilde ekleyebilirsiniz – hemen tartışacağız.
CSS, web sayfalarının yapısını görünüşünden ayırmanızı sağlar. Web tarayıcıları tarafından okunan kurallar olarak yazılan ve sayfalara uygulanan ayrı CSS dosyalarında yer alan tüm stil bilgileri. Kurallar, aşağıdaki resimde gösterildiği gibi uygulanacak HTML öğelerini (seçmen olarak adlandırılır) ve uygulanacak stilleri (beyan olarak adlandırılacak) açıklar: CSS kural yapısı (W3Schools’tan)
Çoğu WordPress teması, sitenizi style.css adlı bir dosyada görüntülemek için kullanılan CSS içerecektir. Dosyayı açarsanız, temanız için stil kurallarının eksiksiz bir listesini görürsünüz. Ne yaparsanız yapın, bu dosyada herhangi bir değişiklik yapma! Bir sonraki temanız için bir güncelleme yüklediğinizde, değişikliğin üzerine yazılacak, temanızın stilini orijinal tasarımcıya geri ayarlayacaktır. WordPress temanıza özel CSS eklemenin birkaç yolu vardır, böylece değişikliğiniz tema güncellemesinden kurtulur. Bölünelim! CSS’nin ne olduğunu ve WordPress temasının onu nasıl kullandığını daha iyi anladıktan sonra WordPress CSS’nizi nasıl ayarlayabilirsiniz, CSS’yi (belirli bir sipariş olmadan) ayarlama seçeneklerinize bakalım ve her yöntemin güçlü ve zayıf yönlerini tartışalım. İşiniz bittiğinde, gerçekten bir CSS sihirbazı olmayacaksınız, ancak temanızda istediğiniz değişiklik türünü oluşturmak için en iyi yöntemi bulabileceksiniz.
Seçenek #1: CSS’yi Özelleştirme Çocuk teması kullanarak CSS’nizi ayarlamak için bir alt tema kullanıyorsanız, daha önce bahsettiğimiz temanın güncellenmesi bir sorun olmayacaktır. Tema güncellemesi ‘ebeveyn’ temasını etkileyecektir, böylece çocuğunuzun temasındaki değişikliklere dokunulmaz. Birçok tema geliştiricisi, gerektiğinde değiştirebileceğiniz son zamanlarda sizin için çocuk temalarını içerir. Çocuk teması oluşturmak oldukça basittir – web ana bilgisayarınızda bir style.css dosyasını şablon olarak içeren bir style.css dosyası içeren bir klasör oluşturulmasını ve ithalat style.css ana temayı (‘Kaskade’ stilini hatırlayın ?). Görebileceğiniz bir çocuk teması oluşturacağınız, bu süreç boyunca size rehberlik edecek tam bir öğreticimiz var. Çocuğunuzun temasını doğru bir şekilde yaptıktan ve etkinleştirdikten sonra temanızı ayarlamaya başlayabilirsiniz. En hızlı yol, iki şekilde erişilebilen style.css dosyanızı düzenlemektir. İlk yol, görünüm> Editör’e tıklayarak WordPress Yönetim Dashboard’da bulunan düzenleyiciyi kullanmaktır. Düzenleyici sayfası, sayfanın sağ tarafında dikey olarak dosyaların bir listesini görüntüler. Style.css dosyanız listenin altında olacak ve Styles sayfası seçeneğini tıklayın ve style.css dosyanızı görüntüleyecek. Değişikliklerinizi CSS’ye ekleyebilir ve kaydetmek için Güncelle düğmesini tıklayabilirsiniz.
WordPress Editor, çocuğunuzun style.css dosya temasına stil eklemek için kullanılabilir.
Style.css dosyanıza (önerdiğimiz) erişmenin bir başka yolu, FTP veya Dosya Yöneticisi kullanarak barındırma sağlayıcınızdaki dosyaya göz atmaktır. Yaptığınız çocukların tema klasörü WP-Concent> temalarında olacaktır. Style.css dosyasını düzenlemek için herhangi bir metin düzenleyicisini kullanabilirsiniz. Değişikliklerinizin görünmesini sağlamak için, ana tema ile aynı ‘seçmenleri’ kullandığınızdan emin olmanız gerekir. Style.css ana dosyasını referans olarak kullanabilir veya kullanılan seçimi belirlemek için tek tek öğeleri kontrol etmek için tarayıcınızı kullanabilirsiniz. Çocuğun temasını kullanarak en büyük kayıp, sunucunuzdaki dosyaları işlemekle rahat hissetme ihtiyacıdır. Olumlu tarafta, bir çocuk teması kullanmak, web sitenizin görünümü üzerinde tam kontrol sağlar. WordPress temalarının özelleştirilmesi için kılavuzumuz, çocuğun temasıyla kullanabileceğiniz birkaç hile gösterecektir. Çocukların temaları yapma sürecinde size rehberlik edebilsek de, bazı insanlar için sadece stilde bazı değişiklikler yaparak birçok sorun olduğu görülmektedir. Neyse ki sizin için, bir çocuk teması oluşturmadan özel CSS eklemenin bir yolu var – bunu hatırlayarak bir sonraki seçeneğe bakalım. Seçenek #2: CSS’yi özelleştirin WordPress 3.4’e kadar ayarlamaları kullanarak özelleştir, Tema geliştiricileri WordPress Customerer’ı kullanabildi. Ayarlama, site sahibinin veya yöneticinin tema ayarlarını ayarlamasını sağlar – web sitesine başvurmadan önce üzerinde çalışmalıdır. Birçok tema artık seçeneklere ve ayarlara erişmenizi sağlamak için ayarlamalar kullanıyor. Bugün ilgilendiğimiz şey, özel CSS ve neyse ki, onu özelleştiricide bir seçenek olarak etkinleştiren birçok tema ekleme yeteneğidir. Mevcut olup olmadığını doğrulamak için tema belgelerinizi kontrol edebilirsiniz. WordPress tema geliştiricileri, WordPress ayarlarında CSS ayarlamaları sunmak için temalarını etkinleştirebilir.
İlk olarak, görünümü ziyaret ederek WordPress Yönetici Gösterge Tablonuzdaki özelleştiriciyi açın> Özelleştir. Özelleştirici sol tarafta bir menü olacak. Temanız özel bir CSS etkinleştirdiyse, menünün altına yakın bir yerde genellikle özel bir seçenek olacaktır ve tıklayın, özel bir stil ekleyebileceğiniz bir metin kutusu verecektir. Sağdaki önizleme, değişikliklerinizin etkisini göstermek için güncellenir ve tamamlandıktan sonra Kaydet ve Yayınla düğmesini tıklayabilirsiniz.
Bir özelleştirici kullanmanın avantajı sadeliğidir ve temanız kullanımını etkinleştirdikten sonra hiçbir şey yüklemenize gerek yoktur. Ayrıca yayınlamadan önce tüm değişikliklerinizin önizlemesini de görebilirsiniz. Bir özelleştirici kullanmanın dezavantajı, CSS kurallarını eklemek için hala rahat olmanız gerektiğidir – ve tüm temalar bu şekilde etkinleştirmez. Temayı değiştirmeye karar verirseniz, CSS’nizi ayarlamanın başka yollarını aramanız gerekebilir.
Özel CSS için mevcut bazı eklenti seçenekleri bu CSS düzenleme işlemini kolaylaştırır, bu yüzden bakalım! Seçenek #3: CSS eklentilerini kullanarak CSS’yi özelleştirin CSS özelleştirmesi için eklentileri kullanmanın avantajı, temayı değiştirseniz bile eklenti ve CSS’yi kullanmanızdır. Bununla birlikte, bir temaya eklenen CSS stili diğeri için uygun olmayabilir. Bununla birlikte, eklenti seçeneğinizi kontrol edelim! CSS Custom Jetpack (Ücretsiz) Ücretsiz Jetpack eklentisi, bir milyondan fazla WordPress sitesinde yüklü, bu da sizinkini içerebilecek. WordPress.com’u işe alan platform özelliğini kendiniz tarafından gönderilen web sitesine getirir ve bugünün tartışması için özel bir CSS modülü içerir. Modül JetPack Gösterge Tablosunda etkinleştirildikten sonra, CSS Özel Düzenleyicisi kullanılabilir – temayı bir çocuğun teması oluşturmadan ayarlamanıza olanak tanır. Görünüşe girerek editöre erişebilirsiniz> CSS’yi düzenleyin. Düzenleme penceresinde, daha sonra silebileceğiniz veya değişiklik ekleyebileceğiniz bir yer tutucu mesajı vardır. Daha gelişmiş CSS kullanımı için praprocessorların (daha az veya SASS gibi) kullanımı, CSS temalarını eklemek yerine kendinizle değiştirmek ve CSS’nizi hücresel temaya uygulamak gibi sizin için başka seçenekler mevcuttur. Jetpack ayrıca, kaydetmeden önce eylem değişikliklerini görmenizi sağlayan bir önizleme düğmesine sahiptir. Ayrıca, daha uzun CSS özel sürümünüze geri dönebilirsiniz. CSS özel modülü, Jetpack’i yüklediyseniz basit bir seçenektir, ancak diğer jetpack özelliklerini kullanmıyorsanız, jetpack’i yalnızca bu modül için yüklemek oldukça zor olabilir. Basit Özel CSS (Ücretsiz) Bağımsız bir seçenek istiyorsanız, Simple Custom CSS iyi bir seçimdir.4.9 yıldız sıralamasına sahip 200.000’den fazla web sitesinde kullanılan bu ücretsiz eklenti, WordPress CSS’nizi ayarlamak için çalışmayı kesinlikle tamamlamanıza yardımcı olacaktır.Bu eklenti yapılandırma gerektirmez – sadece yükleyin ve etkinleştirin.CSS’nizi düzenlemek için, WordPress Yönetim Dashboard’daki görünüm> Özel CSS açın.Özel CSS’nizi ekrandaki düzenleyiciye ekleyin ve değişikliklerinizi kaydetmek için özellikle CSS Güncelleme düğmesini tıklayın.Bu eklentiyi kullanmak, önizleme olmadığı için stil.css dosyalarını düzenleme ile benzer.Sitenizdeki etkiyi görmek için değişikliklerinizi kaydetmelisiniz.Jetpack’in aksine, önceki sürüme geri dönüş yok.CSS Hero (yılda 14 $ ‘ı başlattı)
Bugün gördüğümüz son eklenti seçeneği CSS Hero adlı premium bir eklenti. Bir site için yılda 14 $ ‘dan başlayarak, bu eklenti, işaretli arayüzü ve kullanımı kolay tıklamaları kullanarak temanızı ayarlamanıza olanak tanır. En iyi düzinelerce uyumlu temayla (kendi ekstra dergi temamız gibi) çalışmak üzere tasarlanan CSS Hero, temanızın tüm unsurları üzerinde tam kontrol sağlar. Listede olmayan temalar için, CSS Hero özelleştirmesini etkinleştirmek için Roket Modu’nu kullanabilirsiniz. CSS Hero, geçişler gibi daha karmaşık efektler için kuvveti görsel nokta ve tıklama işlemine dönüştürerek CSS sözdizimini anlama ihtiyacını ortadan kaldırır. Değişikliklerinizin önizlemesini doğrudan görebilir ve önceki revizyona geri dönebilirsiniz. WordPress CSS’nizi tamamen değiştirmek istiyorsanız, ancak CSS hakkında bilgiye sahip değilseniz, CSS Hero sitenizi ayarlamak için iyi bir tam olarak özel bir seçenektir – özellikle de önerilen temalardan birini kullanıyorsanız. Seçenek #4: CSS’yi özelleştir Divi temasını kullanarak özelleştirin, tüm web siteniz CSS üzerinde tam kontrol vermeyi amaçlayan bir WordPress teması vardır, yeni başlayanlar CSS ve gelişmiş tasarımcıların sitelerinin görünümünü kolayca ayarlamalarını sağlamak için daha fazla kontrol sağlar. Divi temamız piyasadaki en sofistike temalardan biridir ve ilk tercihimizdir (elbette!
) WordPress CSS’nizi ayarlayabilmek istiyorsanız.Divi, web sitenizdeki tüm öğeler için size birçok ayar seçeneği sunar, ancak gerçekten özel CSS eklemeniz gerekiyorsa, bunu yapmanın iki yolu vardır.Özel bir CSS seçeneği olan güçlü bir Epanel kullanarak tüm sitelere CSS uygulayabilirsiniz.Veya, yalnızca sayfadaki belirli modüllere değişiklik uygulamak istiyorsanız, CSS özel sekmeleri olan gelişmiş tasarım ayarlarını kullanabilirsiniz. Beangel Divi, Global CSS değişiklikleri için özel CSS alanları sağlar.
Epanel’i kullanmak için WordPress Yönetim Gösterge Tablosunda Divi> Tema Seçenekleri’ni açın. Genel Ayarlar sekmesinde, özel bir CSS alanı bulacağınız aşağı kaydırın. Özel CSS’nizi girin ve Kaydet’i tıklayın. Presto, Change-O! CSS’niz artık style.css dosyalarını düzenleme gibi sitenize yansıtılacaktır. Ayrıca Epanel’de deneyebileceğiniz daha fazla CSS ayarına örnek verdik. Her Divi modülünün kendi genel ve gelişmiş ayarları olacak, ancak neredeyse her şeyi ayarlamanıza izin verecek olsa da, hepsinin kendi CSS’nizi girmeniz için özel bir CSS sekmesi de var. Sekmeyi bulmak için pop -up’ları görmek için modülleri, satırları veya parçaları düzenleyin. Özel CSS sekmesinde, her yapısal modül öğesi için ayrı bir alan göreceksiniz, böylece değişikliklerinizi tek tek uygulayabilirsiniz. Epanel ve CSS Kustom Divi sekmelerini kullanmanın avantajı, bir çocuğun teması yapma ihtiyacından kaçınmaktır ve CSS’yi belirli bir sayfadaki ayrı modüllere kolayca hedefler. Divi gibi devam eden temalar, WordPress CSS üzerinde biraz karmaşıklıkla üstün kontrol sağlar. Sonuç İçeriğinizin harika olduğunu bilseniz de, popüler bir tema kullansanız bile, sitenizin tasarımının diğerlerinden belirgin olduğundan emin olmak istersiniz. CSS ile sitenizin tasarımını, aynı temayı kullanan diğer kişilere kıyasla bile çok farklı görünecek şekilde ayarlayabilirsiniz. WordPress’in gücünün bir kısmı, herhangi bir sorunu çözmek için çeşitli yollara erişebilmektir. CSS WordPress: Bir Çocuk Teması kullanmanın birkaç yolu vardır.
