WordPress’e CSS nasıl eklenir (kolay yol)
WordPress’in en popüler içerik yönetim sistemi (CMS) olmasının nedenlerinden biri, yeni başlayanlar için çok samimi olmasıdır. Başından beri tam olarak çalışan web siteleri oluşturmak için teknik bilgiye, kodlama becerilerine veya web geliştirmede deneyime sahip olmanız gerekmez. Bu nedenle, oyunlarını geliştirmeye ve sitelerini biraz daha görsel olarak çekici hale getirmeye hazır olanlar için, sitenizi biraz kodlama bilgisi ile ayarlamanın yolları vardır. CSS’nin WordPress’te nasıl kullanılacağını öğrenmenin korkutucu olması gerekmez. Aslında, yapmak aslında çok kolay.
Risk almaya ve WordPress sitenizdeki bazı kodları rekabetten öne çıkarmak için nasıl kullanacağınızı öğrenmeye hazırsanız, okumaya devam edin. Bugün CSS’nin ne olduğunu ve web sitenizin tasarımında değişiklik yapmak için nasıl kullanabileceğinizi açıklayacağız. WordPress’te CSS nedir? Basamaklı Stil Sayfaları (CSS), bir web sitesinin görsel görünümünü değiştirmek için web tasarımında kullanılan bir dildir. Örneğin, düzeni, yazı tiplerini, renkleri ve daha birçok sitenizi değiştirmek için kullanabilirsiniz. WordPress’te CSS kullanmanın en iyi yanı, varsayılan tema ayarlarınızdan bazılarını değiştirmenize izin vermektir.
Bu, popüler WordPress temalarını kullananlar için yararlıdır. Bir tema yaygın olarak kullanıldığında, içerik bir siteden diğerine farklı olsa da, temel tasarım aynıdır. Bu, web sitenizin aynı tasarım öğeleriyle aynı temayı kullanan diğer tüm web sitelerinden farklı görünmesini zorlaştırır. CSS nasıl çalışır? Hiç köprü metin işaretleme dilini (HTML) duydunuz mu? HTML, WordPress web sitenizi oluşturmak için kullanılan ana dildir. Görev, web sitenize hangi web tarayıcısının nasıl göründüğünü söylemektir. Bu şekilde, site ziyaretçileri web sitenize tıkladığında, renkler, resimler ve yazılı içerik gibi şeyler görürler. HTML olmadan, web siteniz hiç kimse tarafından anlaşılamayan bir kod sayfası olacaktır. HTML ekranını görmek için tek yapmanız gereken Gutenberg editörünün sağ üst köşesinde üç noktaya tıklamak ve kod düzenleyicisini seçmektir:
Web sitenizi belirli bir şekilde görünür hale getirmek için HTML düzenleyerek sorun çok zaman alıcıdır (bahsetmiyorum bile, kodu anlamalısınız). Örneğin, tüm yayınlarınızı farklı renklere dönüştürmek istersiniz. Rengi değiştirmek için HTML kodunu yazdığınız her blog yayınına gitmeli ve html kodunu düzenlemelisiniz. Bu yüzden CSS kullanmak çok yararlıdır. CSS, web sitenizin HTML öğesinin web sitenizde nasıl görüleceğini belirlemeye yardımcı olur. Ve en iyi yanı, bu, birkaç basit kod satırı ile web sitenizdeki tüm öğelere uygulanabilecek bir battaniye dilidir.
Ne yaptığınızı bilmiyorsanız, web sitenizin görünümünü gerçekten bozabilirsiniz
Temayı her güncellediğinizde, CSS ekleyerek yaptığınız tüm değişiklikler kaybolur, yani bir güncelleme çalıştırdığınızda başlamanız gerekir
Yanlış yerde değişiklik yaparsanız web sitenize zarar verebilirsiniz
Gelişmiş bir WordPress kullanıcısıysanız ve doğrudan temalar sayfanıza CSS eklemek istiyorsanız, en azından bir alt tema kullanarak yapmalısınız. Bu şekilde, bir hata yaparsanız, tüm web sitenize zarar vermezsiniz. Ayrıca, ana temanızı her güncellediğinizde, çocuğunuzun teması CSS değişikliğinizi koruyacaktır.
Daha fazla bilgi için WordPress Çocuk Temaları hakkında bilmeniz gereken her şey hakkındaki makalemize bakın. Bu arada, WordPress’e CSS eklemek için daha yeni başlayan dost yollara bakın. 2. WordPress Gösterge Tablonuzdaki Temaları Ayarlama Tema ayarına erişmenin bir yolu vardır. Tek yapmanız gereken görünüm> özelleştirmek. Bu sizi tema ayar arayüzüne götürecektir. Web sitenizin önizlemesini ve sol tarafta birçok seçeneği göreceksiniz. WordPress’inize CSS eklemek için ek CSS’ye tıklayın.
Bunu yaptığınızda, CSS kodunu ekleyebileceğiniz boş metin kutusunu göreceksiniz.
Geçerli CSS kuralları eklendiğinde, tema ayarının önizleme panelinde yansıtılan değişiklikleri göreceksiniz. Örneğin, gönderinin başlığını siyahtan maviye değiştirmek istediğimizi varsayalım. Boş metin kutusuna CSS ekleyeceğiz ve bunu önizleme panelinde göreceğiz: “Merhaba Dünya” nın artık nasıl siyah olmadığına dikkat edin. Ayrıca, CSS kodunda “mavi” kelimesini nasıl kullandığımıza bakın. Belli bir mavi renk istiyorsanız, her zaman onaltılık kodunu girebilirsiniz. Örneğin, yazı başlığı için bu rengi almak için “mavi” kelimesini “#61d4f4” ile değiştirebiliriz: İstediğiniz kadar kod parçası ekleyebilirsiniz. Unutmayın, burada yaptığınız her değişiklik tüm web siteleriniz için geçerli olacaktır. Ayrıca, bir temada yaptığınız değişiklikler, etkinleştirirseniz başka bir temada görünmez. Temayı değiştirirseniz, tüm CSS ayarlamalarını yapmanız gerekir. Bitirdikten sonra Yayınla’yı tıklayın. 3. CSS Eklentisi, WordPress’e CSS eklemek için tema ayarını kullanmak istemiyorsanız, her zaman Simple Custom CSS gibi ücretsiz WordPress eklentilerini kullanabilirsiniz. Bu ışık eklentisi, görünüm altındaki WordPress kontrol panelinizde yeni bir menü öğesi oluşturacaktır. Bu özel CSS olarak etiketlenecektir. Tıkladığınızda, tema ayarında bulunanlara benzer boş bir metin kutusu göreceksiniz. CSS kod görüntülerini ekledikten sonra değişikliklerinizi kaydetmek için özel CSS’yi güncelleyin. Bunun gibi bir CSS eklentisi kullanmanın avantajı, temayı değiştirmiş olsanız bile, özel CSS’nizin mevcut olmasıdır. Bu, artık girmenize gerek olmadığı anlamına geliyor. CSS kullanarak WordPress sitenizi ayarlamak için diğer kullanışlı araçlar şunlardır: Elementor (incelememiz)
Beaver Builder (incelememiz)
CSS Kod Snippets Örnekleri Bu temel ayrıntıları kullanarak CSS ile WordPress sitenizdeki neredeyse tüm tasarım öğelerini değiştirebilirsiniz: İlk Satır: Post (H1) başlığı, paragraf (p) veya widget alanındaki metin (widget) gibi hangi öğeyi değiştiriyorsunuz.Diğer tüm satırlar: Braketlere eklenecek olanlar için özel talimatlar
Web sitenizi ayarlamak için kullanılabilecek birçok farklı CSS kod görüntüsü vardır. Ve her şeyin bir listesini yapmak imkansız.
Bu nedenle, web sitenizi CSS kullanarak ayarlamak istiyorsanız, nasıl çalıştığını göstermek için bazı kod görüntüleri örnekleri. Family ve Yazı Tipi Boyutu Yazı tipini ve boyutunu değiştirmek için bu CSS kodunu ekleyin: P {
Yazı tipi ailesi: Gürcistan;
yazı tipi boyutu: 20px;
}
Yazı tipi ailesini istediğiniz yazı tipi stiliyle değiştirebilir ve yazı tipi boyutunu istediğiniz büyük veya küçük hale getirmek için numarayı değiştirebilirsiniz. Yandan Özelleştirme Bilah, web sitenizdeki yan bar widget’a bazı ayarlamalar eklemek istediğinizi söylüyor. İyi bir arka plan ve dolgu rengi eklemek için bu CSS kodunu yeni satıra ekleyin:
.Araç {
Arka plan: #B9EBFA;
Dolgu: 25px;
} Unutmayın, bu CSS web sitenizdeki tüm widget alanları için geçerli olacaktır. Belirli bir widget alanına değişiklik uygulamak istiyorsanız, CSS’niz bunu yansıtmalıdır. Örneğin, CSS’nin yalnızca arama çubuğu widget’ına uygulanmasını istersiniz. Bunu yapmak için, CSS’yi şöyle görünmesi için değiştirin:
.widget_search {
Arka plan: #B9EBFA;
Dolgu: 25px;
} Sitenizi ayarlamanın daha fazla yolu için, bu 5 basit CSS kodunu kontrol ettiğinizden emin olun. CSS hakkında daha fazla bilgi edinme yeri CSS ile çalışmak isterseniz, WordPress için CSS öğrenilecek birçok yer vardır:
W3schools.com (ücretsiz)
Kod Akademisi (Ücretsiz)
MDN Web Belgesi (Ücretsiz)
Udemy (Ücretli) Lynda.com (Ücretli)
