Bir sonraki WordPress web sitenizi oluştururken, piyasadaki herhangi bir WordPress temasından alabileceğinizden daha incelikli kontrol isteyebilirsiniz. Bir temadan en iyi şekilde yararlanmak için, gerçekten kişiselleştirmek amacıyla özel Basamaklı Stil Sayfaları (CSS) eklemek isteyebilirsiniz. sitenizin görünümü ve tarzı.
Aşağıdaki kılavuz, WordPress siteniz için görsellerinizi stillendirmek amacıyla CSS'yi nasıl kullanacağınızı gösterecektir.
CSS ilk olarak 1996'da tanıtıldı. Bundan önce web sayfaları ve web siteleri, saf HTML ile yazılmış statik içerik dağıtım ağlarından biraz daha fazlasıydı. Özellikle günümüz standartlarına göre görsel olarak pek çekici değillerdi. Ancak CSS, günümüzün en iyi tasarlanmış web sitelerinden bazılarının da gösterdiği gibi, hayranlık uyandıran web estetiği sunmaya yardımcı olabilir.
Örneğin, LingApp'in web sitesi, sayfa öğelerinin (resimler gibi) web sitesi ve uygulamanın temasıyla eşleşmesini sağlayarak estetik ve pragmatizm arasında istikrarlı bir denge sağlar . Ayrıca görselleri diğer bileşenlerden dikkatlice doldurup aralık bırakarak karmaşık web sayfalarından da kaçındılar. Bu özelliklerin çoğu (hepsi olmasa da) CSS tarafından kontrol edilir.
Web tasarımında yeniyseniz ancak web sitenize üst düzey kullanıcı arayüzü özelleştirmesi eklemek istiyorsanız CSS eklemek en kolay yol olabilir. CSS'nin nasıl kullanılacağına ilişkin ücretsiz tavsiyeler sunan çok sayıda web sitesi ve forum var. Ancak bunların çoğu size CSS'yi web sitenize nasıl ekleyeceğinizi göstermeyebilir - en azından düzgün bir şekilde.
Önceden yazılmış CSS koduyla karşılaştığınızda yapmanız gereken ilk şey, onun ne için kullanıldığını belirlemektir.
Yapmanız gereken ilk şey, CSS kodunun ne için tasarlandığını tespit etmektir. WordPress için iki CSS kodu kategorisi vardır. Onlar içerir:
WordPress'teki görsellerinize (ve diğer) içeriğinize stil vermek için kullanabileceğiniz pek çok özel CSS eklentisi vardır. Kılavuzun bu bölümünde beş eklenti listelenecek ve resimlerinize stil vermek için her birini nasıl kullanacağınız gösterilecektir.
Jetpack, WordPress web sitenizin hızını ve çalışabilirliğini artırmak için tasarlanmış, birçok farklı özellikle dolu popüler bir WordPress eklentisidir . Bu özelliklerden biri, sundukları 'Tam' paket aracılığıyla sahip olabileceğiniz Özel CSS Düzenleyicisidir.
Eklentiyi kullanmadan önce kontrol panelinizdeki Jetpacks ayarlarını (Jetpack –> Ayarlar -> Yazma) kullanarak etkinleştirmelisiniz. Bu daha sonra Kontrol Paneli yan panelindeki Görünüm menü öğesinin altındaki Özelleştir seçeneğine 'Ek CSS' etiketli bir seçenek ekleyecektir.
CSS düzenleyicisini ilk açtığınızda, düzenleme penceresinde bir yer tutucu mesaj görüntülenecektir. Jetpack, başlamayı kolaylaştıracağı için mesajı okumanızı önerir. Hazır olduğunuzda özel CSS kodunuzu eklemeye başlayabilirsiniz.
Jetpack, web sitenizin görünümünü üç açıdan şekillendirmenize olanak tanır:
Üçüncü seçenek, görsellerinizin boyutunda (çoğunlukla genişlikte) değişiklik yapmanıza olanak tanıdığı için en çok ilginizi çekmesi gereken şeydir. Tüm değişikliklerinizin geçerli olabilmesi için (önceden var olan) görsellerinizi yeniden eklemeniz gerekebilir. Jetpack'in resmi Özel CSS Düzenleyici destek sayfasını ziyaret ederek eklentinin yetenekleri ve sınırlamaları hakkında bilgi edinebilirsiniz .
Jetpack'in Özel CSS Düzenleyicisi basit temel özelleştirmeler için mükemmeldir ve deneyimli kodlayıcılar bundan en iyi şekilde yararlanabilir. Ancak acemilere CSS Hero gibi özel bir CSS özelleştirme aracı kullanılarak daha iyi hizmet verilebilir . CSS Hero'nun en iyi yanı kod içermeyen bir çözüm olmasıdır, dolayısıyla onu kullanmak için herhangi bir kodlama deneyimine ihtiyacınız yoktur.
CSS Hero, web sitenizin mevcut içeriğinin görsel öğelerini değiştirmenize olanak tanır. Örneğin kenarlık yarıçapını, arka planı, dolguyu, kenar boşluğunu vb. düzenleyebilirsiniz. CSS Hero kod içermeyen bir çözüm olsa da, Kod Denetçisi'ni kullanarak oluşturulan CSS'yi görüntüleyebilir ve düzenleyebilirsiniz.
Adından da anlaşılacağı gibi, Gönderiye/Sayfaya Özel Özel CSS, WordPress web sitenizin genel temasını etkilemeden belirli gönderileri veya sayfa öğelerini düzenlemenize olanak tanır. Kontrol panelinize, yeni bir yazı/sayfa eklerken veya düzenlerken özel CSS kodu eklemenizi sağlayan bir seçenek ekler.
Ayrıca, yayınınızı oluştururken üzerine geldiğinizde CSS'yi görmenize olanak tanıyan bir meta kutusu ekler ve CSS'nizi daha hızlı oluşturmanıza yardımcı olacak otomatik tamamlama özelliklerine sahiptir. Yazıya/Sayfaya Özel Özel CSS tamamen ücretsizdir. Tek bir geliştirici (Łukasz Nowicki) tarafından oluşturulmuş ve bakımı yapılmıştır.
Basit Özel CSS ve JS başka bir mükemmel ücretsiz seçenektir. Hem ön taraftaki hem de yönetici tarafındaki sayfalarda site genelinde veya içeriğe özel değişiklikler yapmanıza olanak tanır. Elbette adından da anlaşılacağı gibi CSS, değiştirmenize izin verdiği tek özellik değil; ayrıca JavaScript ve HTML'yi düzenleyebilir ve ekleyebilirsiniz.
Stil sayfalarını ve komut dosyalarını harici dosyalar olarak ekleyebilir veya bunları satır içi kod olarak gömebilirsiniz. Metin/kod düzenleyici, kodunuzda hata ayıklamayı veya hataları bulmayı kolaylaştırmak için sözdizimi vurgulama özelliğine sahiptir. Kontrol paneli, Özel CSS ve JS'nin tartışmasız en iyi parçasıdır. Özel kodunuzu kimin, ne zaman yazdığının ayrıntılarını vererek birleşik bir görünümden görmenizi sağlar. Özel kodunuz gönderilerinize benzer şekilde düzenlenmiştir.
WP Add Custom CSS, tek bir geliştirici (Daniele De Santis) tarafından geliştirilen başka bir ücretsiz WP eklentisidir . Site genelinde veya özel CSS eklemenizi sağlar. Eklentiyi yükledikten sonra kontrol paneline bir kısayol ekleyecektir (Özel CSS Ekle). Eklenti ayrıca yazılara ve sayfalara özel CSS ekleyebileceğiniz bir bölüm ekleyecektir.
Daha sonra site genelinde veya yazıya/sayfaya özel CSS ekleyebileceksiniz. WP Add Custom CSS'de yaptığınız değişiklikler diğer tüm CSS'leri geçersiz kılacaktır.
Peki WordPress'te görsellerinizi şekillendirmek için özel CSS'yi nasıl kullanırsınız ? Cevap, hangi CSS eklentisini kullanmaya karar verdiğinize bağlıdır. Özelleştirmenizi işaretleyip tıklamak veya sürükleyip bırakmak için düşük kodlu bir çözüm kullanabilir veya kodunuzu kopyalayıp bir CSS düzenleyiciye yapıştırabilirsiniz. Her eklenti farklı zorluk seviyeleri sunar. Ancak hiçbiri web sitenizi sıfırdan yazmak veya WordPress'in stil sayfalarını doğrudan kendiniz düzenlemek kadar zor değildir.
Copyright © 2025 Tüm Hakları Saklıdır.
Türkiye (Türkçe)
Worldwide (English)
