Cihan Blog Güncel Teknoloji ve dahası…
WordPress blogumda default temada değişiklik yaptığımda en korktuğum şey WordPress’in bir güncelleme çıkarmasıydı. Çünkü her güncellemede tek tek tema güncellemerini eski haline getirmem gerekiyordu. Bu da beni güncelleme yapmaktan soğutuyordu.
WordPress bunu düşünmüş olacak ki bizim için Child Tema olayını gündeme getirmişler. Aslında çok yeni değil bu. Fakat ben yeni keşfettim o kadar. Baktım internette child tema (çocuk tema) hakkında Türkçe pek bir kaynak yok. Ben de WordPress Codex’ten baktım ve sizin için de çevirdim. (Bkz: WordPress Codex – Child Themes)
Örnek olarak twenty eleven için bir child tema yapacaksınız diyelim. Bunun için size gerekli olan şey twenty eleven klasörünüzün bulunduğu yerde (wp-content >> themes >> twentyeleven ) child tema klasörünüzün bulunmasıdır. Child tema klasörü herhangi bir isim olabilir. Ama biz bunu gelin akılda kalıcı bir şekilde twentyeleven-child şeklinde yapalım. Hem isim sıralamasından orjinal tema ile alt alta gelir.
Child Tema klasörünüz içinde bulunması zorunlu tek dosya style.css dosyasıdır ve adı da style.css olması zorunludur. Bu noktaya lütfen dikkat edelim.
WordPress’in child temayı yorumlayabilmesi için (yani temanın parent temaya ait bir child tema olduğunu anlayabilmesi için) header bilgilerine ihtiyaç vardır. Bu bilgiler child temadaki style.css dosyasının en üstüne yazılır.
|
1 2 3 4 5 6 7 8 9 10 11 |
/* Theme Name: Twenty Eleven Child Theme URI: http: //cihanblog.com/ Description: Child theme for the Twenty Eleven theme Author: Your name here Author URI: http://www.cihanblog.com/author/admin Template: twentyeleven Version: 0.1.0 */ |
Burada önemli olan yerler Theme Name ve Template ‘dir. Template alanı direk olarak parent tema klasörünüz ile aynı isimde olmalıdır. Büyük küçük harf duyarlıdır. Theme Name olarak da Parent Name Child şeklinde yazabilirsiniz.
Temel Çocuk Tema Örneği
Mesela varsayılan temamız olan twenty eleven’da site başlığı haricinde her şeyi sevdiniz ve site başlığının rengini siyahtan yeşile çevirmek istediniz. 3 basamakta bu sorunu çözebilirsiniz.
- wp-content/themes altında bir klasör oluşturun ve twentyeleven-child olarak adlandırın. (ya da istediğiniz herhangi bir isim de olabilir).
- Aşağıdaki kodu style.css adıyla kaydedin ve oluşturduğunuz yeni klasöre taşıyın.
- Daha sonra Görünüm’e gelin ve yeni temanız olan twentyeleven-child’ı aktif edin.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* Theme Name: Twentyeleven Child Description: Child theme for the twentyeleven theme Author: Your name here Template: twentyeleven */ @import url("../twentyeleven/style.css"); #site-title a { color: #009900; } |
Şimdi yukarıdaki kod basamak basamak nasıl çalışıyor onu görelim.
/*ile çocuk temanın header bilgilerini açar.Theme Name:ile çocuk temanın ismini okur.Description:temayı tanımını okur. (İsterseniz bu satırı silebilirsiniz.)Author:tema yazarı bilgisini okur. (İsterseniz bu satırı silebilirsiniz.)Template:çocuk temanın ebeveynini okur. Yani ana temayı okur.*/ile çocuk temanın header bilgisi kapatır.@importile parent temanın style dosyasını çeker.#site-title ile çağırmış olduğunu parent tema style'da bulunan site-title'ı okumaz. Onun yerine sizin yazmış olduğunuz kodu okur.
- basamakta okuduğunuz @import olayını uygulamayı sakın unutmayınız. Aksi halde parent tema css bilgilerini çekmedi için şablonunuz dağılır.
Child temanın aynı zamanda rtl (right-to-left) desteği de vardır. Yani arapça gibi sağdan sola yazılan diller için sitenin bu şekilde düzenlemesi gerekir. Child tema bu desteği de verir. Bunun için şunu yapabiliriz.
|
1 2 3 4 5 6 7 8 |
/* Theme Name: Twenty Eleven Child Template: twentyeleven */ @import url("../twentyeleven/rtl.css"); |
Bu şekilde parent temanızın rtl.css dosyasını çekebilirsiniz. Eğer parent temanızın rtl.css dosyası yoksa child temanızda oluşturabilirsiniz.
Önemli: Twenty Eleven temada link rengi ve koyu renk tema desteği child temanızdan sonra okunduğu için bazı renkler değişiklik gösterebilir. Bunu tamamen ortadan kaldırmak için css’in !important özelliğini kullanabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* Theme Name: Twenty Eleven Child Description: Child theme for the Twenty Eleven theme Author: Your name here Template: twentyeleven */ @import url("../twentyeleven/style.css"); /* This will override site title color even on the dark theme */ #site-title a { color: #009900 !important; } /* This will override the changed link color */ #site-title a:focus, #site-title a:hover, #site-title a:active { color: #009900 !important; } |
functions.php Dosyasını Kullanmak
Child temanın en güzel özelliklerinden birisi de size özel bir functions.php dosyası oluşturabilmeniz. Mesela siz kendinize ait bir adsense kodu yazdınız diyelim. 6 farklı için ölçü kod yazdınız ve switch yapısıyla ilişkili olanı çekiyorsunuz diyelim.
Temanızda bir yerde
|
1 2 3 |
<?php adsense("250x250"); ?> |
veya
|
1 2 3 |
<?php adsense("728x90"); ?> |
şeklinde kullanıyorsunuz. Bir güncelleme yapıldığında direk olarak bu fonksiyonlar geçersiz kalacaktır. Hatta fonksiyon tanınmadığı için wordpress sayfalarınız açılmayacaktır.
Kendi yazdığınız functions.php dosyasını tanıtmaya gerek yok. child tema klasörünüzde bulunması yeterlidir.
Ayrıca diğer tema dosyalarınızı da düzenleyecekseniz editleme yapabilirsiniz.
Sormak istediğiniz sorular olursa buradan sorularınızı sorabilirsiniz. Sorularınızı seve seve cevaplarım.
Bu yazı 4 saatte tamamlanmıştır. İnşaallah bir teşekkürü çok görmezsiniz. Olumlu / Olumsuz yorumlarınızı ve sorularınızı bekliyoruz.
Saygılarımla,
Cihan KÜSMEZ
