WordPress tema düzenleme (css)

0
639

WordPress temaları özelleştirilebilir bir yapıya sahip olsa da bu temayı tümüyle kontrol edebileceğiniz anlamına gelmiyor. Ancak bir kaç basit yöntemle sonuç değişebilir.

Satın aldığınız veya ücretsiz yüklediğiniz temaya ait kontrol panelinde çeşitli özelleştirme seçenekleri bulunur. WordPress temaları birbirinden farklı; yazı tipi, arkaplan rengi, logo, sayfa düzeni değiştirme gibi onlarca seçenek sunsa da bazen istediğiniz sayfa görüntüsü için bu yeterli olmaz.

Örneğin satın aldığınız temada yorumların font boyutunu değiştirmek için bir menü yok veya öne çıkan resim boyutunu istediğiniz gibi değiştiremiyorsunuz. Temaya ait style.css dosyası üzerinde düzenleme yapmak mantıklı gelse de hem zahmetli olacak hemde kalıcı olmayacaktır. Tema güncellendiğinde style.css dosyası da değişebileceğinden tüm değişiklikler yok olacaktır.

Tema üzerinde yapılan değişikliklerin kalıcı olması için aslında WordPress bir seçenek sunuyor. Bu Özelleştir menüsü altındaki Ek Css bölümüdür. Buraya eklenen css kodları tema güncellense dahi sabit kalır.

Css nedir?

Önce yeni duyanlar için şu css nedir kısaca açıklayalım. Css; “Cascading Style Sheets” kelimelerinin baş harflerinden oluşmuş bir kısaltmadır. Html elementlerinin nasıl görüneceğini belirleyen bir kodlama sistemidir. Css ile tek element üzerinde (#id kullanımı ile) değişiklik yapılabildiği gibi aynı etikete sahip tüm elementler üzerinde (.class kullanımı ile) de değişiklik yapılabilir.

Bu şu demek olur ki; örneğin tema, yorum katmanı için “comment-content” sınıf (class) adını kullanıyorsa aşağıdaki kodu wordpress Ek Css alanına ekleyerek tüm yorum yazılarının font boyutunu 12px olarak değiştirebiliriz.

.comment-content {
   font-size: 12px;
}

Yazının başında basit demiştik değil mi?

Evet ama her elementin sınıf (class) adını nasıl öğrenmemiz gerekiyor. Bunun için sayfa kaynak kodlarını incelemek, aratmak, bulmak, değiştirmek, denemek…

Bunun kolay ve basit yolu İnternet tarayıcı “Geliştirici Araçları” nı kullanmak.

Geliştirici Araçları ile tema düzenleme

Google Chrome, İnternet Explorer, Firefox, Opera gibi hemen hemen tüm tarayıcılarda bu araç mevcuttur.

Biz Google Chrome tarayıcı üzerinden anlatalım. Bu kısıma erişmek için tarayıcı açıkken Ctrl+Shift+I tuşlarına basmak yeterlidir. Açılan araçlar menüsünün sol üst köşesinde bulunan iki simgeden başta olanı element seçimi için kullanılırken diğeri web sitesinin mobil cihazda görünümünü test etmek içindir.

Element seçim simgesine bir defa tıklandığında rengi mavi olur. Simge rengi mavi iken web sayfası üzerinde herhangi bir elemente tıklarsanız (yorum alanı, site logosu vs..) element ile ilgili css kodları Styles başlığı altında belirir. Bu kısımda yapacağınız değişiklikler anında sayfa görünümüne yansıyacaktır.

Telaşlanmanıza gerek yok. Yapılan değişiklikler sayfa üzerinde kalıcı değildir, sayfayı yenilediğinizde tüm değişiklikler kaybolacaktır. Yapacağınız değişikliklerin kalıcı olması için ise değiştirdiğiniz bölümü kopyalayıp Ek Css bölümüne yapıştırmanız ve kaydetmeniz gerekir.

Bunu yaparken dikkat etmeniz gereken husus yapıştıracağınız kod parçasının CSS kurallarına uygun olmasıdır.

/* 
Örneğin Ek Css alanına bu kodu girdiğinizde
yorum alanı gizlenir.
*/

.comments {
 display: none;
}

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz