WordPress sitenizin renklerini veya yazı tiplerini değiştirmek istiyor ancak bir şeyleri bozmaktan mı endişeleniyorsunuz? Birçok yeni başlayan, bunun tema dosyalarını düzenlemeyi gerektirdiğini varsayar, ancak orada küçük bir hata bile büyük sorunlara yol açabilir.
WordPress'in ilk günlerinde, özel CSS eklemenin tek yolu bu dosyaları doğrudan düzenlemekti. Bunun ne kadar stresli olduğunu ve tek bir yanlış karakterin bile tüm siteyi çökertebileceğini hatırlıyoruz.
Neyse ki, artık durum böyle değil. WordPress artık Tema Özelleştirici, Tam Site Düzenleyici (FSE) veya WPCode gibi bir eklenti kullanarak özel CSS eklemek için güvenli, yeni başlayan dostu yollar sunuyor.
Bu kılavuzda, WordPress sitenize özel CSS eklemenin üç basit yöntemini adım adım anlatacağız. 🙌
WordPress'te Neden Özel CSS Eklenir?
WordPress'e özel CSS ekleyerek, temanızın ayarlarının izin verdiğinden daha fazla kontrol elde edersiniz. Örneğin, yazı tipi boyutlarını ayarlayabilir, düğme renklerini değiştirebilir veya belirli bölümlere ek boşluk ekleyebilirsiniz.
CSS (Cascading Style Sheets), renkler, yazı tipleri, boşluklar ve düzenler gibi şeyleri yöneterek web sitenizi stilize eden dildir. Kendi CSS'nizi yazarak, temaları değiştirmeden veya ek eklentiler yüklemeden sitenizin görünümünü ince ayar yapabilirsiniz.
Bu esneklik, bireysel gönderileri kişiselleştirebileceğiniz, mağazanızdaki ürün kategorilerini stilize edebileceğiniz ve hatta sitenizin mobil cihazlarda masaüstüne kıyasla nasıl göründüğünü optimize edebileceğiniz anlamına gelir.
Bu rehberde, WordPress web sitenize özel CSS eklemenin farklı yollarını göstereceğiz.
İlgilendiğiniz herhangi bir bölüme atlamak için aşağıdaki bağlantıya tıklayabilirsiniz:
- Yöntem 1: Tema Özelleştirici Kullanarak Özel CSS Ekleme (Klasik Temalar)
- Yöntem 2: WPCode Eklentisini Kullanarak Özel CSS Ekleme (Tüm Temalar)
- Yöntem 3: Tam Site Düzenleyicisi (Blok Temaları) ile Ek CSS Ekleme
- Ek İpucu: Özel CSS eklentisi kullanmak ve Tema Özelleştiriciye CSS eklemek
- SSS: WordPress Sitenize Özel CSS Ekleme
- WordPress Siteniz İçin Daha Fazla CSS İpucu ve Püf Noktası
Hazır mısınız? Başlayalım.
Yöntem 1: Tema Özelleştirici Kullanarak Özel CSS Ekleme (Klasik Temalar)
WordPress 4.7'den bu yana, kullanıcılar özel CSS'yi doğrudan WordPress yönetici alanından ekleyebilirler. Bu çok kolaydır ve canlı önizleme ile değişikliklerinizi anında görebilirsiniz.
Not: Bu yöntem yalnızca klasik temalar içindir. Bir blok tema kullanıyorsanız, diğer yöntemlerden birini seçmeniz gerekecektir.
Öncelikle, WordPress kontrol panelinizden Görünüm » Özelleştir sayfasına gitmeniz gerekecek.
Bu, WordPress tema özelleştirici arayüzünü başlatacaktır.
Bu sayfada, sol paneldeki bir dizi özelleştirme seçeneğiyle sitenizin canlı önizlemesini görebilirsiniz. WordPress temanıza bağlı olarak bu menünün düzeni biraz farklılık gösterebilir. Örneğimizde Sydney temasını kullanıyoruz.
Düzenlemeye başlamak için 'Ek CSS' sekmesini bulun.
Sekme, özel CSS'nizi ekleyebileceğiniz basit bir kutu göstermek için kayacaktır.
Geçerli bir CSS kuralı eklediğiniz anda, sitenizin canlı önizleme panelinde uygulandığını görebileceksiniz.
Değişikliklerin sitenizde nasıl göründüğünden memnun kalana kadar özel CSS kodu eklemeye devam edebilirsiniz.
Bitirdiğinizde üstteki 'Yayınla' düğmesine tıklamayı unutmayın.
ℹ️ Not: Tema özelleştiricisini kullanarak eklediğiniz tüm özel CSS, yalnızca o belirli tema ile kullanılabilir. Bunu başka temalarla kullanmak isterseniz, aynı yöntemi kullanarak yeni temanıza kopyalayıp yapıştırmanız gerekecektir.
Yöntem 2: WPCode Eklentisini Kullanarak Özel CSS Ekleme (Tüm Temalar)
İlk yöntem yalnızca şu anda aktif olan tema için özel CSS kaydetmenize olanak tanır. Temayı değiştirirseniz, özel CSS'nizi yeni temaya kopyalayıp yapıştırmanız gerekebilir.
Özel CSS'nizin hangi WordPress temasını kullanıyor olursanız olun uygulanmasını istiyorsanız, bu yöntem tam size göre.
WPCode, piyasadaki en iyi özel kod parçacığı eklentisidir ve 2 milyondan fazla kullanıcısı vardır. WordPress'e özel kod eklemeyi kolaylaştırmanın yanı sıra, yerleşik bir kod parçacığı kitaplığı, koşullu mantık, dönüşüm pikselleri ve daha fazlası gibi özelliklerle birlikte gelir.
Bazı iş ortağı markalarında kod parçacıklarını eklemek ve yönetmek için WPCode kullanıyoruz. Özellikleri ve faydaları hakkında ayrıntılı bilgi için kapsamlı WPCode incelememize göz atın.
Şimdi yapmanız gereken ilk şey WPCode eklentisini kurmak ve etkinleştirmektir. Yardımcı olması için, WordPress eklentisinin nasıl kurulacağına dair rehberimize bakabilirsiniz.
ℹ️ Not: Bu eğitim, WPCode eklentisinin ücretsiz sürümüyle çalışır, böylece hemen başlayabilirsiniz. WPCode Pro'ya yükseltmeye karar verirseniz, zamanlanmış kod parçacıkları, tam revizyon geçmişi ve kullanıma hazır, geliştirici onaylı kod parçacıklarının eksiksiz kitaplığına erişim gibi kullanışlı özelliklerin kilidini açarsınız.
Etkinleştirdikten sonra, WordPress yönetici alanından Kod Parçacıkları » + Yeni Ekle bölümüne gidin.
Ardından, kod parçacığı kitaplığındaki ‘Özel Kodunuzu Ekleyin (Yeni Parçacık)’ seçeneğinin üzerine gelip ‘Parçacığı kullan’ı tıklayabilirsiniz.
Bir sonraki ekranda, özel CSS kod parçacığınız için kod türünü seçeceksiniz.
Kod türü olarak 'CSS Parçacığı'na tıklayın.
Ardından, sayfanın en üstünde, özel CSS kod parçacığınız için bir başlık ekleyebilirsiniz. Bu, kodu tanımlamanıza yardımcı olacak herhangi bir şey olabilir.
Bir başlık girdikten sonra, özel CSS'nizi ‘Kod Önizleme’ kutusuna yazabilir veya yapıştırabilirsiniz.
Şimdi 'Ekleme' bölümüne aşağı kaydırıp kodunuzu tüm WordPress sitenizde çalıştırmak istiyorsanız 'Otomatik Ekleme' yöntemini seçelim.
Kodu yalnızca belirli sayfalarda veya gönderilerde çalıştırmak istiyorsanız, 'Kısa Kod' yöntemini seçebilirsiniz.
Şimdi, sayfanın başına geri dönmek isteyeceksiniz.
Ardından, anahtarı basitçe 'Aktif' olarak değiştirin ve ardından 'Snippet Kaydet' düğmesine tıklayın.
İşte bu kadar! Özel CSS'nin etkisini görmek için WordPress web sitenizi ziyaret edebilirsiniz.
Yöntem 3: Tam Site Düzenleyicisi (Blok Temaları) ile Ek CSS Ekleme
Modern bir blok teması kullanıyorsanız, özel CSS'nizi eklemenin en iyi yeri doğrudan Tam Site Düzenleyicisi'dir. Bu yöntem, CSS'nizi temanızın stil ayarlarıyla birlikte tutar ve canlı bir önizleme görmenizi sağlar.
Öncelikle, WordPress kontrol panelinizden Görünüm » Düzenleyici yolunu izlemeniz gerekir.
Bu, Tam Site Düzenleyici'yi açacaktır.
Sol menüden 'Stiller' sekmesine tıklayın.
Artık siteniz için 'Stiller' panelini ve sayfa önizlemenizi görmelisiniz.
Buradan, blok düzenleyiciyi açmak için önizlemeye tıklayalım.
içerik düzenleyicide, 'Stiller' simgesine tıklayın. Yarısı siyah, yarısı beyaz bir daireye benziyor.
Bundan sonra, 'Ek CSS' seçeneğini seçin.
CSS kayan penceresinde, 'Ek CSS' alanını bulacaksınız.
CSS'nizi buraya girebilirsiniz ve değişiklikleri canlı önizlemede anında göreceksiniz.
Her şeyden memnun kaldığınızda, değişikliklerinizi yayınlamak için sağ üstteki 'Kaydet' düğmesine tıklamayı unutmayın.
Ek İpucu: Özel CSS eklentisi kullanmak ve Tema Özelleştiriciye CSS eklemek
Yukarıda açıklanan tüm yöntemler yeni başlayanlar için önerilir. Gelişmiş kullanıcılar özel CSS'yi doğrudan temalarına da ekleyebilirler.
Ancak, üst temanıza özel CSS parçacıkları eklemeniz önerilmez. Temayı özel değişikliklerinizi kaydetmeden yanlışlıkla güncellerseniz CSS değişiklikleriniz kaybolacaktır.
En iyi yaklaşım bunun yerine bir alt tema kullanmaktır. Ancak, birçok yeni başlayan çocuk tema oluşturma işlemini göz korkutucu bulduğu için bundan kaçınır. Ayrıca, yeni başlayanlar genellikle çocuk temayı yalnızca özel CSS eklemenin ötesinde nasıl kullanacakları konusunda bir anlayışa sahip değildir.
Özel bir CSS eklentisi kullanmak, özel CSS'nizi temanızdan bağımsız olarak saklamanıza olanak tanır. Bu şekilde, temaları kolayca değiştirebilirsiniz ve özel CSS'niz kalır.
WordPress sitenize özel CSS eklemenin bir başka harika yolu da CSS Hero eklentisini kullanmaktır. Bu harika eklenti, tek bir satır kod yazmadan WordPress sitenizdeki neredeyse tüm CSS stillerini düzenlemenize olanak tanır.
Ayrıca, SeedProd eklentisi ile özel CSS ekleyebilirsiniz, bu en iyi sürükle-bırak WordPress sayfa oluşturucusudur.
SeedProd ile WordPress siteniz için özel WordPress temaları ve açılış sayfaları oluşturabilirsiniz. Genel CSS ayarlarını kolayca düzenleyebilirsiniz; kod gerekmez.
İş ortağı markalarımızdan bazıları tüm web sitelerini SeedProd ile tasarladı. Muhteşem web siteleri oluşturmak için neden en iyi seçenek olduğunu görmek için detaylı SeedProd incelememizi okuduğunuzdan emin olun.
SSS: WordPress Sitenize Özel CSS Ekleme
WordPress sitenizi özel stillerle gerçekten kendinize ait kılmak mı istiyorsunuz? Özel CSS ekleme ve sitenizi bozmadan bunu nasıl yapacağınızla ilgili sık sorulan sorular şunlardır:
Özel CSS eklemek sitem için riskli mi?
Doğru yaparsanız olmaz. WordPress Tema Özelleştirici, WPCode veya SeedProd gibi araçlar, değişikliklerinizi yayınlamadan önce önizlemenize olanak tanır. Bu, hatalardan kaçınmanıza ve sitenizi güvende tutmanıza yardımcı olur.
Tema değiştirirsem CSS değişikliklerim kaybolur mu?
CSS'yi Tema Özelleştirici aracılığıyla eklediyseniz, değişiklikleriniz o belirli temaya bağlıdır. Bu durumda, evet, WordPress temanızı değiştirirseniz ek CSS'niz kaybolacaktır.
CSS'nizi tüm temalarda tutarlı tutmak için WPCode gibi bir kod parçacığı eklentisi kullanabilirsiniz. Kodunuzu ayrı olarak depolar, bu nedenle tema değiştirseniz bile aktif kalır.
Bir şeyler ters giderse değişiklikleri geri alabilir miyim?
Evet, özellikle WPCode gibi bir kod parçacığı eklentisi kullanıyorsanız. Eklediğiniz herhangi bir parçacığı kolayca devre dışı bırakabilir veya silebilirsiniz. Değişikliklerinizi önce önizlemek veya emin değilseniz hazırlık sitesinde test etmek her zaman iyi bir fikirdir.
CSS'im üzerinde daha fazla kontrole sahip olmak istersem ne olur?
Daha gelişmiş düzenlemeler için bir alt tema oluşturabilirsiniz. Bu size tam kontrol sağlar ve değişikliklerinizi tema güncellemeleri sırasında güvende tutar. Ancak WordPress temalarının nasıl çalıştığına dair temel bir anlayış gerektirir.
Özel CSS eklemek için kodlama bilgisine ihtiyacım var mı?
Bir geliştirici olmanıza gerek yok, ancak en azından doğru kodu kopyalayıp yapıştıracak veya bir öğreticiyi takip edecek kadar CSS bilmeniz gerekecek.
İyi haber şu ki, basit CSS düzenlemelerini adım adım öğrenmenize yardımcı olacak bol miktarda başlangıç dostu kaynak (WPBeginner gibi!) var. Doğru araçlarla CSS eklemek hala yönetilebilir hissettirebilir - evi yeniden inşa etmekten çok mobilyaları yeniden düzenlemek gibi.
WordPress Siteniz İçin Daha Fazla CSS İpucu ve Püf Noktası
Bu makalenin WordPress sitenize özel CSS eklemeyi öğrenmenize yardımcı olduğunu umuyoruz. Bunun yardımcı olduğunu düşünüyorsanız, ayrıca aşağıdaki kılavuzlarımıza da bakmak isteyebilirsiniz:
- WordPress'te CSS / JavaScript Dosyalarını Küçültme
- WordPress CSS Teslimatını Kolayca Optimize Etme
- WordPress'te Belirli Kullanıcı Rolleri İçin CSS Nasıl Uygulanır
- WordPress Menü Öğelerine İlk ve Son CSS Nasıl Eklenir
- WordPress'te Kullanılmayan CSS Nasıl Kaldırılır (Doğru Yol)
- WordPress Yönetici Kontrol Panelinde Bozuk CSS Nasıl Düzeltilir
- Yeni Başlayanlar İçin Varsayılan WordPress Tarafından Oluşturulan CSS Hile Sayfası
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Mrteesurez
Özel CSS'yi bir blok sitesine eklerken kullandığınız yönteme dayanarak, paylaştığınız bağlantı aracılığıyla sitenin hala klasik özelleştiricinin bazı öğelerini kullandığını fark ettim?
Sadece CSS eklemek ve diğerleri için özel bir bağlantı kullanmadan özelleştiriciye kolay erişim sağlamak için bir blok temasına klasik widget eklentisi yükleyip yükleyemeyeceğimi sormak istiyorum?
WPBeginner Desteği
Bu büyük ölçüde özel temanıza bağlı olacaktır. Temanızın özelleştiricide seçeneği yoksa, bu makaledeki alternatiflerden birini kullanmanızı öneririz.
Yönetici
Mrteesurez
Pekala, çoğu temanın özelleştiricide seçeneği var, blok tema hakkında bilgim yok. Teşekkürler.
Ancak tam özelleştirme işlevleri için sayfa oluşturucu kullanmanızı öneririm. Sayfa oluşturucuyu kullanmayı öğrendikten sonra, sayfalarda özel CSS'yi nadiren kullanıyorum.
Dennis Muthomi
Sadece açıklığa kavuşturmak için – Özel Ayarlar (YÖNTEM 1) aracılığıyla eklenen CSS'nin yalnızca o belirli tema için geçerli olduğunu belirttiğinizde, özel CSS kodunun aslında mevcut temanın dosyalarına mı eklendiği anlamına mı geliyor?
Teknik bilgim çok fazla değil, bu yüzden dalmadan önce doğru anladığımdan emin olmak istiyorum.
WPBeginner Yorumları
Özel Düzenleyici, tema dosyalarına eklenmek yerine CSS'yi veritabanında depolar ve temayla ilişkilendirir.
Mrteesurez
Bunu bilmiyordum, teşekkürler. Bu, eklenen özel CSS'nin tema dosyalarında değil, veritabanında kaldığı anlamına gelir, öyleyse neden aslında veritabanında bulunmasına rağmen temayı değiştirirken özel CSS kodunu kopyalayıp tekrar yapıştırmamız gerekiyor?
WPBeginner Desteği
CSS kodunu eklediğinizde, kaydettiğinizde temanın kendisine bağlanır. Yeni bir tema yüklediğinizde, o temaya bağlı herhangi bir CSS yüklenir.
Jiří Vaněk
Teşekkürler mrteesurez, sorduğunuz için çünkü ben de sizin kadar kafam karışıktı ve eklenen CSS'in tema ile nasıl çalıştığını anlamama yardımcı olan açıklama için WPBeginner'a teşekkürler. CSS kodlarının yalnızca temada saklandığını da düşünüyordum ama şimdi arka planda nasıl çalıştığını nihayet anladım.
Qasim Saeed
Merhaba, herhangi bir eklenti olmadan belirli bir sayfaya özel CSS eklemek istersem ne yapmalıyım? Sanırım bunu fonksiyon aracılığıyla ekliyoruz? Bana fonksiyonlar.php aracılığıyla CSS eklemenin nasıl olduğunu ve belirli bir sayfa için CSS eklemenin en iyi ve güvenli yolunun ne olduğunu söyler misiniz?
WPBeginner Desteği
CSS'yi belirli sayfalara eklemek için fonksiyon kullanmanıza gerek yoktur, yalnızca sitenizdeki tek bir sayfayı etkilemesi için CSS seçicinizde belirli sayfayı hedefleyebilirsiniz.
Yönetici
Jiří Vaněk
WordPress'te kendi CSS'nizi bir şablon kullanarak mı yoksa WPCode kullanarak mı eklemek daha iyidir?
WPBeginner Desteği
Her iki seçenek de geçerli tercihlerdir, kişisel tercihlere ve temanın düzenleyicide bu seçeneğe sahip olup olmadığına bağlıdır.
Yönetici
Jiří Vaněk
Açıklama için teşekkürler, WPCode kullanan bir kod parçasının sitenin yanıtı için şablona kendisinden daha hızlı olup olmayacağından emin değildim. Yani fark etmiyorsa, muhtemelen en iyi uygulamaya bağlı kalacağım ve şablona entegre tutacağım.
Bavi
Ücretsiz plan için css ekleme artık mevcut değil, alternatif var mı??
WPBeginner Desteği
Eğitimlerimiz WordPress.org siteleri içindir, şu anda WordPress.com için özel detaylarımız bulunmamaktadır. İkisi arasındaki karşılaştırma için aşağıdaki rehberimize göz atmanızı ve sitenizi WordPress.com'dan kendi barındırdığınız bir WordPress.org sitesine taşımak isterseniz bunu yapmanızı öneririz.
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Yönetici
Ben
example.com/wp-admin/customize.php "hile"sinden hiç haberim yoktu. Teşekkürler! Sihir gibi çalıştı!
WPBeginner Desteği
Glad we could share this trick with you!
Yönetici
Dani
Merhaba,
Özel CSS eklemek istiyorum ama bir şeyler ters giderse nasıl kaldırabilirim?
Bogdan
Merhaba, bu makale çok iyi. Ancak bir sorum var: Özel CSS eklemek için HTML sayfasını görmem gerekmiyor mu? Seçicileri ve diğer her şeyi bilmiyorsam özel CSS'i nasıl eklerim?
WPBeginner Desteği
Seçicileri nasıl bulacağınız konusunda aşağıda inceleyebileceğiniz bir Denetleme öğesi kullanma rehberimiz var:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Yönetici
cymon
Yeni bir blog yazarım. Sayfaya özel CSS kodu eklemenin bir yolu var mı?
WPBeginner Desteği
CSS'in bir parçası olarak sayfa kimliğini eklemeniz gerekir, ancak evet yapabilirsiniz.
Yönetici
Jitin Mishra
WordPress web sitesine özel CSS eklemek için harika bir makale. Bu tür daha bilgilendirici gönderiler için sabırsızlanıyoruz.
WPBeginner Desteği
Glad you found our guide helpful
Yönetici
Mohsin
WordPress menümü kodlama ile mega menüye dönüştürmek istiyorum. Web sitesi menümü html, css ve js kullanarak mega menüye dönüştürebilir miyim? Bu iş için bir eklenti kullanmak istemiyorum. WordPress web sitesine özel kodlama ile yeni bir işlevsellik eklersek, bu özel çalışmanın tema veya WordPress güncellenerek ilerlememesi için en iyi uygulamalar nelerdir? Teşekkürler!
WPBeginner Desteği
Değişikliklerinizi güvende tutmak için bir alt tema oluşturmak isteyebilirsiniz, ancak bunun için biraz PHP kodlamasına ihtiyacınız olabilir. Aşağıda göz atabileceğiniz bir alt tema oluşturma kılavuzumuz var:
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
Yönetici
vijay v
sayfa hızını artırmak için harici CSS dosyası ekleyebilir miyiz (özel CSS'yi taşıyarak) (özel CSS ekledikten sonra yükleme hızı azaldı), evet ise nasıl yapılır?
şimdiden teşekkürler
WPBeginner Desteği
Eğer doğru anladıysak, aşağıdaki makalemize göz atmak isteyeceksiniz:
https://www.wpbeginner.com/wp-tutorials/how-wordpress-plugins-affect-your-sites-load-time/
Yönetici
billy king
Çocuk Teması veya Özel CSS'de “gayri resmi” CSS'ye izin verilir mi?
WPBeginner Desteği
CSS sitenizdeki öğeleri hedeflediği sürece istediğiniz CSS'yi kullanabilirsiniz.
Yönetici
Latonya Moore
Bu harika ama sadece bir sayfaya css eklemenin bir yolu var mı? Örnek olarak sadece bir metinde fareyle üzerine gelindiğinde veya üzerine gelindiğinde göstermek veya gizlemek istiyorum.
WPBeginner Desteği
Belirli bir nesneye bir CSS sınıfı eklemeniz veya yalnızca o belirli sayfayla sınırlamak için CSS'nize sayfa kimliğini eklemeniz gerekir. Bu bilgiyi nasıl bulacağınız konusunda aşağıdaki inceleme öğesi kullanma makalemize göz atmak isteyebilirsiniz:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Yönetici
shiva
Tema düzenleyicisinde bazı CSS kodlarını düzenleyerek web sitemde bazı değişiklikler yaptım. WordPress'i bir sonraki sürüme güncellersem ne olur? Hata mı alır yoksa temel temaya mı döner yoksa güncellemeden sonra kodum eskisi gibi görünmeye devam eder mi?
WPBeginner Desteği
CSS'nizi Görünüm>Özelleştirici>Ek CSS alanına eklediyseniz, CSS değişiklikleriniz sitenizi güncellediğinizde kalacaktır.
Yönetici
Jo
Web sitemi henüz tam olarak bitirmedim, ancak CSS kullanarak değişiklikler yapabilmek için ücretsiz sürümden yükseltme yaptım. Sitem henüz yayında değil. Premium sürüme yükseltme ile güncelle düğmesi artık yayınla olarak değişti. Bu, değişiklikleri kaydetmek için yayınla'ya tıkladığımda sitemi yayına alacağı anlamına mı geliyor?
Ayrıca, hangi temayı kullandığımı hatırlamıyorum, hangi temayı kullandığımı nasıl öğrenebilirim?
Teşekkürler
WPBeginner Desteği
WordPress.com'da olduğunuz anlaşılıyor, bir yazı yayınlarsanız sitenizi görebilen kişiler tarafından görüntülenebilir. WordPress.com'da özel bir site için şunlarla sınırlısınız: https://en.support.wordpress.com/settings/privacy-settings
Görünüm>Temalar altında aktif olan temayı görebilmelisiniz
Yönetici
Bruce William Taylor
"Sekme, özel CSS'nizi ekleyebileceğiniz basit bir kutu göstermek için kayacaktır. Geçerli bir CSS kuralı eklediğiniz anda, sitenizin canlı önizleme panelinde uygulandığını görebileceksiniz."
CSS'nin NEREYE ekleneceğini zaten biliyorum. Ne CSS ekleyeceğimi nasıl bileceğim? "Geçerli CSS kurallarının" neler olduğunu nasıl bileceğim?
WPBeginner Desteği
Merhaba Bruce,
Bunun için bazı temel CSS'leri öğrenmeniz gerekecek. Yeni başlayanlar için adım adım CSS eğitimleri sunan birkaç web sitesi bulunmaktadır. CSS'yi canlı bir deneme kutusuyla pratik yapmanıza olanak tanıdıkları için w3schools'u öneririz.
Yönetici
Ali
Özel CSS Kodu depolama nerede, çünkü yeni bir barındırıcıya geçiş sırasında kaybettim?
mahaveer
harici css eklemek ve css'ye resim eklemek istiyorum...
Muhammad Adil
Bonus yöntemi neydi?
Anlamadığım bir eklenti miydi? Bana sorar mısınız?
Teşekkürler
Aditya Khuteta
Merhaba! Web sitemdeki fiyat metninin boyutunu değiştirmek istiyorum çünkü fiyat metni orada çok küçük. Lütfen bana nasıl yapacağımı anlatın.
Teşekkürler
Frank Lurz
2 Soru:
1. Anladığımdan emin olmak için, “eklentiler” CSS yazmanın yerine geçer, bu da CSS hakkında hiçbir şey bilmeyen bizler için zor bir görevdir - doğru mu?
2. WP eklentileri sayfasında indirilmeye sunulan eklentiler yalnızca "İşletme" Planı için ödeme yapmış aboneler tarafından kurulabilir, doğru mu?
WPBeginner Desteği
Merhaba Frank,
1. Hayır, eklentiler özel CSS yazmanın yerine geçmez. Eklenti kurmadan özel CSS yazabilirsiniz. Daha fazla ayrıntı için lütfen WordPress eklentileri nelerdir ve nasıl çalışır hakkındaki rehberimize bakın.
2. WordPress.com kullanıyorsanız, evet iş planına yükseltmeniz gerekecektir. Lütfen kendi kendine barındırılan WordPress.org ile ücretsiz WordPress.com blogu arasındaki fark hakkındaki rehberimize bakın.
Yönetici
Annie Mitchell
Merhaba,
Web sitesi oluşturma ve tasarlama konusunda acemiyim ve CSS bilgim yok. Web sitemde Sydney temasını kullanıyorum – ve bir şekilde paragraf yazı tipimi beyaza çevirmeyi başardım. Google'da arama yaptım ve aynı sorunu yaşayan bir beyefendi gördüm. Bir eklenti indirip özel CSS kullanarak düzeltti ancak ben denedim ve başarılı olamadım.
Tavsiye ettiği CSS şudur –
.entry-page p, .entry-post p { color: black !important; margin: 0 !important; padding: 0 !important; }
ama neden benim için çalışmadığından emin değilim. Herhangi bir yardım çok takdir edilecektir.
Teşekkürler,
Annie
WPBeginner Desteği
Merhaba Annie,
Öncelikle tüm WordPress eklentilerinizi devre dışı bırakarak kapatmanızı öneririz. Ardından, sorununuzu çözüp çözmediğini görmek için web sitenizi ziyaret edin. Eğer çözdüyse, bu, eklentilerinizden birindeki bir ayarın soruna neden olduğu anlamına gelir. Sorunu çözmezse, Yirmi Onyedi gibi varsayılan bir temaya geçmeyi deneyin. Eğer bu sorununuzu çözerse, temanızda bir yerlerde yazı tipi ayarlarını değiştirdiğiniz anlamına gelir.
Hiçbir şey işe yaramazsa, bu özel CSS'yi deneyebilirsiniz:
p { color:#000; }1-click Use in WordPress
Yönetici
Jose
Eklentilerden biri (Simple Custom CSS) 2 yıldır güncellenmedi, bu da Wordpress eklentileri dünyasında çok uzun bir süredir. Bu bir güvenlik riskidir, bu yüzden şahsen bir alternatif arardım.
Rebecca
Merhaba
Üzgünüm CSS hakkında hiçbir şey bilmiyorum ve eklentileri arayamama sorununu çözmeye çalışıyorum, ama bu başka bir hikaye! Şu anda buraya gönderiyorum çünkü görünüm / CSS düzenle / ek CSS'ye gittiğimde bu mesajı alıyorum.
Kaydetmeden önce düzeltilmesi gereken 1 hata var.
Siteyi bozabilecek olsa bile yine de güncelle?
Bu endişelenmem gereken bir şey mi?
altındaki kutudaki metin şunu okuyor…
ve tam burada kırmızı bir nokta var
Umarım biri yardım edebilir.
Teşekkürler
WPBeginner Desteği
Merhaba Rebecca,
CSS'i kopyalayıp bir metin dosyasına yapıştırabilir ve yedek olarak kaydedebilirsiniz. Şimdi Ek CSS kutusundaki her şeyi silin ve hatayı tekrar görünene kadar özel CSS'inizi tek tek eklemeye başlayın. Bu, hatayı bulmanıza ve düzeltmenize yardımcı olacaktır.
Yönetici
James
Bu artık ücretsiz hesaplar için çalışmıyor. CSS seçeneği artık mevcut değil ve ilgili bir eklentiyi yüklemek için bir işletme hesabına ihtiyacınız var.
WPBeginner Desteği
Merhaba James,
Muhtemelen WordPress.com kullanıyorsunuz. Kendi barındırdığınız WordPress.org ile ücretsiz WordPress.com blog arasındaki fark hakkındaki rehberimize bakın.
Yönetici
scott
WP sürüm 4.9'dan önce, özel CSS'mi (WP özelleştiricisinden) kesip yapıştırıp Windows Not Defteri'ne yapıştırabiliyordum (ve biçimlendirmeyi koruyordu). Yeni özel CSS eklerken bir hata yapma ihtimaline karşı yedek olarak kaydetmek için bunu sık sık yapardım.
Şimdi Not Defteri'ne yapıştırdığımda, Not Defteri'ndeki satır satır biçimlendirme olmadan tüm CSS'yi birleştiriyor.
Bunun nedenini veya nasıl düzeltebileceğimi biliyor musunuz? Not Defteri'nde "metin kaydırma" modunu zaten ayarladım.
Teşekkürler.
WPBeginner Desteği
Merhaba Scott,
Kodu Notepad++ gibi başka metin düzenleyicilerinde kaydetmeyi deneyebilirsiniz. Sorun devam ederse, WordPress sorun giderme ipuçlarını deneyin.
Yönetici
Joe MacMillan
Bu site gerçekten çok iyi. Sitemde hiç bağlantı rengi yoktu, bu yüzden bu kodu kullandım /* ziyaret edilmemiş bağlantı mavi */
a:link {
Renk: #196380;
}
/* ziyaret edilen bağlantı yeşili */
a:visited { color: #248f24; }
/* fare üzerine gelince bağlantı turuncusu */
a:hover { color: #ff3300; }
/* seçili bağlantı kırmızı*/
a:active { color: #cc0000; }
ancak menüler gibi bağlantı olan her şey için renkleri açtı.
Yalnızca bağlantı renklerini istiyorum.
Bu konuda herhangi bir yardım rica ederim. Teşekkürler
WPBeginner Desteği
Merhaba Joe,
CSS'inizde, bu renkteki bağlantıların hangi alanlarda olacağını tanımlamadınız, bu da tüm gövdeye uygulanmasına neden oluyor. Hedeflemeniz gereken alanları belirlemek için, temanızın içerik bloğu için kullandığı CSS sınıfını bulmak üzere İnceleme Aracını kullanmanız gerekecektir.
Temanızdaki içerik bloğunun site-content adında bir CSS sınıfına sahip olduğunu varsayalım, CSS'nizde şöyle kullanacaksınız:
.site-content a:link { color: #196380; } .site-content a:visited { color: #248f24; } .site-content a:active { color: #cc0000; } .site-content a:hover { color: #ff3300; }1-click Use in WordPress
Hope this helps
Yönetici
Rob
Sitenizi seviyorum!
Tüm faydalı makaleler için teşekkürler.
WordPress premium planımla ilgili bir sorum var.
Siteme aşağıdaki betiği eklemek istiyorum.
var refTagger = { settings: { bibleVersion: “NKJV” }
Bunu özel CSS'ye ekleyebilir miyim?
Bu planda başlık veya alt bilgiye erişimim yok
Teşekkürler,
Rob
WPBeginner Desteği
Merhaba Rob,
Hayır, yapamazsınız. Lütfen kendi kendine barındırılan WordPress.org ile ücretsiz WordPress.com blogu arasındaki fark hakkındaki rehberimize bakın.
Yönetici
sammy
Bu gerçekten harika bir makale, sitem için kendi CSS'mi nasıl yapacağımı öğrenmeye başlamam gerekecek
Thomas
Merhaba,
bu özellik, çok siteli bir WordPress ağındaki site yöneticisi için aktif değil.
Bunu site yöneticisi için (örneğin bu eklenti ile:) etkinleştirmenin bir güvenlik sorunu yaratacağını düşünüyor musunuz?
Teşekkürler!
WPBeginner Desteği
Merhaba Thomas,
Özel CSS eklemek için bir eklenti kullanabilirsiniz.
Yönetici
Thomas
Merhaba,
evet biliyorum (çok iyi Simple Custom CSS eklentisini zaten kullandım), ancak WordPress'e entegre edildiği için yerel işlevi kullanmayı tercih ederim.
Ancak, bu işlev yalnızca ağ yöneticisi için geçerlidir ve çoklu site kurulumunda site yöneticisi için değildir.
Site yöneticisinin özelleştiricide kendi özel CSS'lerini eklemelerine izin vermek için haklar kolayca değiştirilebilir (yerel WP işlevi ile) (bu eklentiye bakın: http://www.wordpress.org/plugins/multisite-custom-css/) ve bunun bir güvenlik sorunu oluşturup oluşturmayacağını merak ediyorum (site yöneticisine güvenemeyeceğim varsayımına dayanarak)?
WPBeginner Desteği
Merhaba Thomas,
Sorry, we totally misunderstood your question
Endişe verici olacağını kabul ediyoruz, bu yüzden özellik kapalı. Açarsanız, kullanıcılar filtrelenmemiş CSS ekleyebilecektir. Kapalı tutmalısınız.
Brice
Kod hakkında pek bilgim yok, bu yüzden değişiklik yapıp "kaydet ve yayınla"ya tıklarsam, değişiklikleri beğenmezsem orijinal kodu geri almanın bir yolu var mı, yoksa geri yüklemek istediğimde orijinal kodu kopyalayıp kaydetmem mi gerekiyor?
Ruth Billheimer
This is probably really naive, I don’t know much about code, so bear with me.. In the customise additional css, can you put in different things? I mean I have already put something in there that will change some of the colours. Now I want to put in something that will change the width of the page. (I am getting these bits of code from very helpful people, I know nothing!)
So will both of these things work? Or can you only change one thing? It doesn’t look like the page width has changed
Jos Schuurmans
Merhaba,
Eskiden WP admin'den, Görünüm menüsü altında style.css dosyasını düzenlemek mümkündü.
WP çoklu sitede ağın temaları alt menüsü aracılığıyla yapılıyordu. Bu özellik kaldırıldı mı?
Şerefe,
Jos
Judy
Harika yazı, teşekkürler!
Bunu yapmama yardımcı olabilecek biri var mı? Logomda CSS Hero kullanarak küçük bir özelleştirme yaptım. Ardından, CSS Hero'yu devre dışı bıraktıktan sonra bu tam olarak 9 kod dizesini Simple Custom CSS eklentime kopyaladım. Logomda Simple Custom CSS kullanarak aynı CSS Hero özelleştirmesini yeniden üretebileceğimi düşündüm, ancak bunun yerine çalışmıyor.
Sayfayı yeniledim ve önbelleği temizledim, ancak özelleştirme hala etkili olmuyor. Neden böyle?
Teşekkürler,
Judy
Robin
CSS Stil Sayfamda sadece bu var. /* Özel CSS'e hoş geldiniz
Bunun nasıl çalıştığını öğrenmek için bkz.
*/
Onun kodunu silip yeni yazı tipimi mi eklemeliyim? Yardım????
WPBeginner Desteği
Evet. Bunlar, yeni kullanıcılara başlamaları için yardımcı olacak yorumlardır.
Yönetici
Paul H.
HARİKA EKLENTİ!!!
Yerleşik WP Düzenleyicisini özel sayfamı "stil" hale getirmeye çalışarak çok zaman harcadım, sonuç alamadım...
Bir eklenti olup olmadığını görmek için aradım ve sizinkini buldum… dakikalar içinde eklentinizi yükledim ve etkinleştirdim, ardından CSS'imi girdim, güncellemeyi tıkladım ve özel sayfamı yeniledim… mükemmel!
A+++
Ian
Merhaba Millet,
Simple custom CSS eklentisini kurdum ve etkinleştirdim. Web sayfalarımdan birinde oluşturduğum bir tablonun etrafında kenarlık olmasını istedim.
Sonuç olarak, basit özel CSS eklentime aşağıdaki kodu ekledim
tablo { kenarlık: 2px katı siyah; }
ve Özel CSS'yi güncelledim ama hiçbir şey olmadı – web sayfamdaki tabloda hala kenarlık görünmüyor.
Herhangi bir öneriniz var mı?
Saygılarımla
Ian
Molly Setzer
Merhaba Ian,
Muhtemelen doğru CSS seçiciyi kullanarak çağırmıyorsunuz. Öğeyi yakalamak için en belirgin seçiciyi kullanın. Örneğin, tablonuzun "info" sınıfı varsa, daha spesifik olan table.info ile çağırmak öğeye ulaşmanıza yardımcı olacaktır. HTML'de daha fazla seçicisi olup olmadığını kontrol edin.
ramneet
Paylaştığınız için teşekkürler. WordPress öğrenmenin harika bir yolu, hoşuma gitti.
Estee Peter
Mevcut özel web sitesi eklentim aracılığıyla özel CSS nasıl eklenir
işte aşağıdaki kod
.mobileonly { display: none; }
@media screen and (max-width: 480px) {
.mobileonly {
display: inline;
}
}
.mobilgörünmezyap {
display: inline;
}
@media screen and (max-width: 480px) {
.hidemobileonly {
display: none;
}
}
Gary Zielke
Özel CSS eklentisi tek tek sayfalarda çalışıyor mu?
Yani, tüm temaya değil, tek bir sayfaya stil ekleyebilir miyim?
Teşekkürler
WPBeginner Desteği
Hayır, tek tek sayfalarda çalışmıyor.
Yönetici
Tori Tran
teşekkürler ^^
Russell Bruce
CSS'nin ne yaptığını ve neden faydalı olduğunu açıklamak faydalı olmaz mıydı?
Joey
Teşekkürler, bunu daha önce fark etmeyi dilerdim çünkü tüm CSS değişikliklerimi style.css dosyasında yaptım, çünkü değişiklikleri yerel olarak yapıyorum ama Genesis'in kullandığım belirli alt temayı güncellemesi durumunda bu değişiklikleri kaybedeceğim anlamına mı geliyor? Çocuk temalarını hiç güncellediklerini hiç görmediğimi bilmiyorum, ancak Genesis'i sadece birkaç aydır kullanıyorum, bu yüzden bazılarını burada ve orada güncelleyebilecekleri tamamen mümkün. Sanırım bundan sonra değişikliklerimi eklentide yapacağım, özellikle site canlıysa.
suzie
Beğendiğiniz temayı kullanın ve bir 'alt tema' oluşturun.
Alt tema daha sonra web sitenize özgü olacaktır.
Değişiklikleri yalnızca alt temanızda yapın.
Tema tasarımcısı temasını güncelleyebilir, ancak sizin değişiklikleriniz kalacaktır. (Tasarımcının güncellemesine bağlı olarak değişikliklerinizi biraz ayarlamanız gerekebilir, ancak bu pek olası değildir).
Rodney
Harika makale.
Buraya eklemek istedim. Özellikle WordPress'te çalışan siteler için burada çok fazla seçenek var, özel CSS oluşturmak/yazmak basittir. Çoğu WordPress teması, ek eklentiler oluşturmak veya eklemek zorunda kalmadan özel CSS eklemeyi destekler.
Ben de katılıyorum ve buradaki en iyi seçenek bir alt tema kullanmaktır.
teşekkürler