Eki 202014
 
2.613 views

WordPress 2014 Temasında Değişiklik Yapma

Sitemizde kullandığımız 2014 (twenty fourteen) temasında bir çok yerde gereksiz yere başlıklar büyük harfe (uppercase) dönüştürülmüş.

Bunu düzeltmek için gereken değişiklikler sadece style.css üzerinden yapılabiliyor.

Aşağıda, yavru tema (child theme) style.css dosyasına eklenecek satırları vereceğim. Ama siz de bu tarz değişiklikler yapmak istediğinizde önce gidip ana temanın style.css dosyasında ayrıntılı bir inceleme yapın. Bazı elemanların isimleri yeterli açıklamayı sağlıyor olsa da, bazı durumlarda daha hassas bir araştırma, hatta çok sayıda deneme-yanılma gerektirebilir.

Bu yazıda ele aldığımız sorunu yaratan tek bir kod var:

text-transform: uppercase;

Bu kod, dahil olduğu sınıfa ait yazıyı tamamen büyük harfe çeviriyor. Onu etkisiz hale getirmenin yolu ise

text-transform: none;

şeklinde. Bu durumda ilgili yazı/başlık nasıl girilmişse, aynen gösterilecek demektir.

Ana temanın style.css dosyasındaki “text-transform: uppercase;” satırlarını tek tek bulup, değiştirilmesi gerekip gerekmediğine karar vermeniz gerekiyor. Ben, aşağıdaki örnekte yanal banttaki harf büyütmelere dokunmadım. Onun dışındaki tüm dönüşümleri iptal ettim.

Aşağıdaki satırlar, yavru temanın style.css dosyasına eklediğim satırlar.

.site-navigation a {
text-transform: none;
}
.entry-title {
text-transform: none;
}
.entry-meta {
text-transform: none;
}
.cat-links {
text-transform: none;
}
.entry-meta .tag-links a {
text-transform: none;
}
.entry-content th,
.comment-content th {
text-transform: none;
}
.entry-content .edit-link {
text-transform: none;
}
.page-links {
text-transform: none;
}
.post-navigation .meta-nav {
text-transform: none;
}
.paging-navigation .page-numbers {
text-transform: none;
}
.comment-reply-title,
.comments-title {
text-transform: none;
}
.comment-list .reply,
.comment-metadata {
text-transform: none;
}
.no-comments {
text-transform: none;
}
.comment-navigation {
text-transform: none;
}
.widget .widget-title {
text-transform: uppercase;
}
.widget_calendar caption {
text-transform: uppercase;
}
.widget_twentyfourteen_ephemera .post-format-archive-link {
text-transform: uppercase;
}
.content-sidebar .widget .widget-title {
text-transform: uppercase;
}
.featured-content .entry-title {
text-transform: none;
}
@media screen and (min-width: 783px) {
.primary-navigation {
text-transform: none
}
}

Yavru tema uygulaması sayesinde ana temada hiç bir değişiklik yapmıyoruz. Eğer ana temada WordPress taarfından herhangi bir değişiklik yapılırsa, gerekli değişikliği ana temaya uygulamak bizim yaptığımız değişkliklere bir zarar vermeyecektir.

Eğer ana tema dosyalarında değişiklik yapma alışkanlığınız varsa, bir an önce bundan vazgeçip, yavru tema uygulamasına geçmenizi öneriyorum. Güvende olacaksınız!

ahmet aksoy

 

Eki 182014
 
2.247 views

WordPress Temasına Google Fontlar Nasıl Uygulanır?

Diyelim ki WordPress temalarından TwentyFourteen kullanıyoruz.

Yöntemlerden biri doğrudan ana temanın style.css ve header.php dosyalarına müdahale edip gerekli kodları oraya girmektir. Ancak bu durumda, orijinal kodları değiştirdiğimiz için herhangi bir güncelleme veya yükseltme durumunda bizim girdiğimiz kodlar otomatikman silinecektir.

Bunun çözümü ise, “child theme (yavru tema)” mekanizmasından yararlanmaktır. Bu yöntemde, orijinal dosyalara hiç dokunmayız. Gerekli değişiklikleri “yavru tema” alanında yaparız. Ana sistemde yapılan güncelleme ve yükseltmeler bizim özgün çalışmalarımızı hiç etkilemez.

TwentyFourteen teması “Lato” fontunu kullanır. Bu font Türkçe karakterlerde bazan sorun çıkarabiliyor. Bu yüzden temamızdaki “Lato” fontu yerine “Roboto” kullanmak istersek neler yapmamız gerektiğini birlikte inceleyelim.

Öncelikle yavru temamızın (child theme) style.css dosyasını açalım ve şu kodu içine ekleyelim:

body,
button,
input,
select,
textarea {
color: #2b2b2b;
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}

Yukarıdaki css kodunu, TwentyFourteen temasının orijinal style.css dosyasından aldık. Yaptığımız tek değişiklik, Lato yerine Roboto yazmaktır. Böylece sisteme, body, button, input, select ve textarea nesnelerinde Roboto fontunu kullanmak istediğimizi belirtmiş olduk. Font adı dışındaki diğer özelliklere hiç dokunmadık.

Ancak bu fontun nereden yüklenmesi gerektiğini de belirtmemiz lazım. İstersek header.php dosyasının bir kopyasını yavru tema klasörümüze kopyalayıp, gerekli kodu oraya ekleyebiliriz. Ancak bu durumda asıl temanın header.php dosyasında yapılabilecek zorunlu değişiklikleri peşinen riske atmış oluruz.

Çözüm, font yükleme işini ayrı bir fonksiyona yüklemektir.

Aşağıdaki kodu, bu kez yavru temamızın functions.php dosyasına ekliyoruz:

function load_fonts() {
wp_register_style(‘googleFonts’, ‘http://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext’);
wp_enqueue_style( ‘googleFonts’);
}

add_action(‘wp_print_styles’, ‘load_fonts’);

İşte bütün yapacaklarımız bu kadar. Artık yavru temamızın yüklü olduğu sitedeki ana font Lato değil, Roboto’dur.

TwentyFourteen temasının orijinal dosyalarına hiç dokunmadık.

Eğer siz de sitenizde TwentyFourteen temasını kullanıyorsanız ve fontlarla oynamak veya temanızın başka bir takım yerlerini değiştirmek istiyorsanız, hemen bir yavru tema kurmanızı öneriyorum. Hayatınız kolaylaşacaktır!

Başka temalarda da aynı yöntemi kullanabilirsiniz. Ek olarak yapmanız gereken şey, sizin ana temanızda kullanılmakta olan temel fontun adını öğrenmek ve yukarıda tarif ettiğimiz değişiklikleri o fontla ilgili kısımlara uygulamaktır.

Soru veya önerilerinizi yorumlar bölümüne ekleyebilirsiniz.

ahmet aksoy

 Kaynak: http://webdesignfromscratch.com/wordpress/using-google-web-fonts-with-wordpress-the-right-way/