Drupal, diğer CMS sistemler içerisinde son yıllarda oldukça öne çıkan bir sistem oldu. Gerek geliştiricisinin artması gerekse esnek yapısı ile bir çok seçeneğe olanak sunması bu ilginin artmasında önemli etkenler. Tüm bu avantajlarına rağmen geride olduğu çok önemli bir konu var oda temaları. Son bir yıl içerisinde Drupal tema konusunda da oldukça iyi gelişmeler olsada, bu gelişmeler yeterli değil kanımca.
Kod bilgisi yeterli olmayan kullanıcı hali hazırda bulunan temaları kullanmak zorunda fakat php kodlara ve css ye aşına herkes kendi Drupal temasını geliştirebilir.
Bu yazımda sizlere basit bir şekilde nasıl kendi Drupal 6x temanızı yaparsınız onu anlatacağım.
Hazırlık aşamamızda oluşturacağımız yeni temamıza hataman ismini verelim ve sites/all/themes klasörümüz içerisine hataman isimli bir klasör açalım.
Daha sonra bu klasör içerisine default tema dosyalarımızı alalım. Ben bu default tema dosyalarını Garland temasından alacağım sizede bunu tavsiye ederim.
Resimde görüldüğü gibi gerekli tema dosyalarımızı aldık şimdi yapmamız gereken bu tema dosyalarını önce drupal sistem kodlarına göre düzenlemek daha sonrada kendi tema görünümümüze göre düzenlemek.
Temamızı hazırlarken ilk aşamada .info dosyası var Garland'dan aldığımız garland.info dosyasının adını hataman.info olarak değiştiriyoruz.
name = Hataman// tema adını yazıyoruz description = tema açıklaması // isteğinize göre düzenleyin fakat türkçe karakter kullanımında dosya kodlamasının UTF-8 BOM'suz olduğundan emin olun. core = 6.x engine = phptemplate stylesheets[all][] = style.css //silinecek bölüm ; Information added by drupal.org packaging script on 2011-05-25 version = "6.22" project = "drupal" datestamp = "1306357015"
name = Hataman description = Drupal tema oluşturmasını anlatmak için yaptığım tema core = 6.x engine = phptemplate stylesheets[all][] = style.css
Oluşturduğumuz info dosyası ile temamızı drupal sitemize attığımızda görüntü şu şekilde olacaktır.
Şimdi sırada template.php dosyasını düzenlemek var
template.php temamızda drupal api kullanarak oluşturabileceğimiz özel görünümleri içerir. Burada bulunan kodları silebilrisiniz yada uygun drupal kodları kullanabilirsiniz. İlerleyen derslerimde bu konuda yazılarım olucak.
garlanddan aldığımız template.php dosyasını metin editörünüz ile açın ve ctrl+F ile garland aratın bulunan sonuçları kendi tema ismimiz olan hataman ile değiştiriyoruz. Garland template dosyasında değişmesi gereken tek yer var aşağıda bulabilirsiniz.
function garland_preprocess_comment_wrapper(&$vars) { // bul function hataman_preprocess_comment_wrapper(&$vars) { // değiştir
.info ve template.php ayarlamalarımız bittiğine göre artık temamızı ayarlayabiliriz. Ben bu temayı sizlere anlatırken neten ücretsiz dağıtılan ve basit olan bir tema seçeceğim.
freecsstemplates.org sitesine giriyorum ve bir css tema seçiyorum. Kullanacağım tema unilluminated free css teması.
Temamızı indirip sites/all/themes/hataman içerisine çıkarıyoruz. style.css dosyasını değiştirmemizi isteyecektir, değiştirelim. Bu aşamada page.tpl.php ve indirdiğimiz temanın index.html i üzerinde çalışacağız her iki dosyayıda metin editörümüzle açalım.Hiç bir işlem yapmadan önce temamızı admin/build/themes adresinden yayına alalım ve sitemizin şu andaki görüntüsüne bir bakalım
şu haliyle kullanılacak durumda değil ama biz bu sorunu halledeceğiz.
metin editörü ile açmış olduğumuz page.tpl.php dosyasında bazı değişiklikler yaparak yeni temamıza uygun hale getireceğiz.
Değişiklikleri aşağıda paylaştım dikkatlice okuyunuz ve uygulayınız
<?php ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <!--[if lt IE 7]> <![endif]--> </head> <body> <!-- Layout --> <div id="wrapper"> <div id="header"> <div id="logo"> <?php // Prepare header if ($site_name) { } if ($site_fields) { $site_fields[0] = '<span>'. $site_fields[0] .'</span>'; } if ($logo || $site_title) { if ($logo) { } } ?> </div> <div id="search"> </div> </div> <!-- /header --> <div id="menu"> <?php endif; ?> </div> <div id="page"> <div id="page-bgtop"> <div id="page-bgbtm"> <div id="content"> <?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?> </div> <div id="sidebar"> </div> <div style="clear: both;"> </div> </div> </div> </div> </div> <div id="footer"> <p>Copyright (c) 2010 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/"> CSS Templates</a>.</p> </div> </body> </html>
Temamızın son hali resimdeki gibi. Aslına bakarsanız tema tam anlamıyla bitmedi ama bütün düzenlemeleri burada anlatmak çok zor, sizlere hazır bir dosya verip kendinizi geliştirmenizi engellemekte istemiyorum. Her hangi bir sorusu olan olursa konu ile ilgili seve seve cevaplarım. Kolay gelsin.
Yorumlar
Arama Formu
Evet arama formu için farklı
Çok yararlı bir çalışma ....
them
i loveee hataman.com
Yeni yorum gönder