Yukarda belirttiğim gibi html temaları nasıl joomla için kullanılabilir hale getiririz konusunu inceleyeceğiz.Bunun için ilk olarak bir html temaya ihtiyacımız var.Ben opensourcetemplates.org adresinde bulabileceğiniz Clean Blue temasını kullanacağım.Sizler farklı bir tema seçebilirsiniz.Temaya bu adresden ulaşabilirsiniz.
1.Dosya işlemleri
Temamızı sıkıştırılmış formattan çıkarttıktan sonra içinde 4 farklı html yapı olduğunu göreceksiniz.Ben bunlardan twocol_b.html’i kullanarak tasarımı gerçeklemek istiyorum.Şimdilik işime yaramıyacak olan diğer html dosyalarını siliyorum ve twcol_b.html dosyasını index.php olarak
adlandırıyorum.Klasörümüzede tema tasarımcısının ismi olan studio7 ismini veriyorum.Buraya kadar olan kısım basit klasör ve dosya düzenleme kısmıydı bu kısmı studio7 klasörümüzü joomla altında templates klasörüne taşıyoruz.
2.Temamızı joomla’ya tanıtalım
Klasörümüzü taşıdıktan sonra uyarlama yapacağımız temayı joomlanın algılamasını sağlamayalıyız.Bu tanımda templateDetails.xml içinde yapılmakta ve yine otomatik yükleme gibi işlemlerle ilgili parametrelerle birlikte tema parametreleride bulanabilmekte.İlk olarak joomla.org’dan aldığımız basit bir templateDetails.xml dosyasını inceleyelim.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd"> <install version="1.5" type="template"> <name>mynewtemplate</name> <creationDate>2008-05-01</creationDate> <author>John Doe</author> <authorEmail>john@example.com</authorEmail> <authorUrl>http://www.example.com</authorUrl> <copyright>John Doe 2008</copyright> <license>GNU/GPL</license> <version>1.0.2</version> <description>My New Template</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>images/background.png</filename> <filename>css/css.css</filename> </files> <positions> <position>breadcrumb</position> <position>left</position> <position>right</position> <position>top</position> <position>user1</position> <position>user2</position> <position>user3</position> <position>user4</position> <position>footer</position> </positions> </install>Burda kullanılan tagları biraz açıklayalım;
name: Tema ismimiz
creationDate: Yapım tarihi
author:Temayı hazırlayan kişi veya kurum
authorEmail: Yapımcı eposta adresi
authorUrl :Yapımcı url adresi
copyright : copyright bilgisi.
version: tema versiyonu
description: tema hakkında açıklamalar.
Buraya kadar sizlere aktardığım taglar basit bir tema tanımını joomla’ya yapmakta.Ancak yeterli bir yapı değil.Bunun için files tagları arasına filename taglarıyla tema içerinde bulunan dosyalarımızı eğer varsa iç klasör yollarıyla birlikte belirtiyoruz.Bu noktada ufak bir hatırlatma yapmak istiyorum.Bu dosya tanımları çok fazla gerekli olmamakla birlikte eğer temanızı paket haline getirip otomatik yükleme yapmak istiyorsanız kesinlikle gerekmektedir.
Bu örnekleme için tüm dosya tanımları yapılmayacaktır
positions taglarımz arasına temamızda kullanmak istediğimiz modül pozisyonlarını belirtiyoruz.Bu modül pozisyon isimlerini dilediğimiz şekilde seçebilmenin yanında left,right ve user gibi genel ifadeler kullanmak kullanılabilirlik açısından uygun olabilir.
Böylece basit bir templateDetails.xml yapısından bahsettikten sonra bu açıklamalarla oluşturduğum templateDetails.xml dosyasına göz atalım.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd"> <install version="1.5" type="template"> <name>Benimtemam</name> <creationDate>2008-10-10</creationDate> <author>Benim Adim</author> <authorEmail>benim@emailadresim.com</authorEmail> <authorUrl>http://www.benimsitem.com</authorUrl> <copyright>Studio7 2008</copyright> <license>GNU/GPL</license> <version>0.0.2</version> <description>Bu benim ilk temam</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>images/firefox.png</filename> <filename>css/html.css</filename> </files> <positions> <position>breadcrumb</position> <position>left</position> <position>right</position> <position>top</position> <position>user1</position> <position>user2</position> <position>user3</position> <position>user4</position> <position>footer</position> </positions> </install> </xml>Şimdi joomla admin paneline gidelim ve temamız ordamı bakalım.Evet temamız yerini almış durumda şimdi temamıza tıklayarak ayrıntıları nelermiş ona bakalım.Görüldüğü gibi kısa bir şekilde bizim verdiğimiz bilgilleri içermekte.Bunun yanında parametrelere şimdilik ihtiyacımız olmadığı için oluşturmadığımız params.ini dosyası yazılamaz görünmekte.Böylece temamız joomla tarafından tanınmış durumda.
3.Ayrıntılara inelim
Genel olarak basit bir joomla yapısı aşağıdaki gibidir.Joomlanun normall çalışabilmesi için minimalize edilmiş bir yapı olarak adlandırabiliriz.Şimdi bu yapımızı referans alarak temamızı uyarlamaya devam edelim.
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <link rel="**********" href="<?php echo $this->baseurl ?>/templates/mynewtemplate/css/css.css" type="text/css" /> </head> <body> <jdoc:include type="modules" name="top" /> <jdoc:include type="component" /> <jdoc:include type="modules" name="bottom" /> </body> </html>Tema index.php dosyamızı en sevdiğiniz metin editörü ile açın.İlk olarak joomla için doctype bilgilerini içeren kısmı dosyamıza ekleylim.Bunun için index.php dosyası içerisinde bulunan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> bu kısmı silerek yerine referasn yapımızda head tagına kadar olan kısmı ekleyelim. Sonrasında joomla header bilgilerini göstermek için gereken kısmı eklememiz gerekiyor.Bunun için meta bilgileri ve title bilgisini içeren aşağıdaki kısmı siliyorum. <title>Nautica 05 Two Column with right sidebar layout</title><meta **********="content-type" *********"application/xhtml+xml charset=UTF-8" /> <meta name="author" *********"studio7designs.com" /> <meta name="description" *********"Site Description Here" /> <meta name="keywords" *********"keywords, here" /> <meta name="robots" *********"index, follow, noarchive" /> <meta name="googlebot" *********"noarchive" />Yerine ;
<jdoc:include type="head" />bu ifadeyi ekliyorum.Aslında joomla bu ifadeyle yukarda sildiğimiz yapıya benzer yapıda bize html bir çıktı verecektir.Bunun yanında meta bilgilerine html olarak temanızdan manuel eklemelerde yapabilirsiniz.
Son eklediğimiz yapı sonrasında css dosya yolları belirtilmekte ancak bunları tam yollarıyla birlikte vermemiz gerekiyor.Eğer bu temayı başka sitelerde kullanacaksak manuel ekleme yerine sitemizin yollarını ve adresini veren fonksiyonları bu yollara ekleyerek daha kullanışlı bir yapı elde edebiliriz.
Eski yapımız;
<link rel="**********" type="text/css" href="css/layout.css" media="screen, projection, tv " /> <link rel="**********" type="text/css" href="css/html.css" media="screen, projection, tv " />ve yeni yapımız ;
<link rel="**********" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/layout.css" media="screen, projection, tv " /> <link rel="**********" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/html.css" media="screen, projection, tv " />ve altında kalan 2 stil dosyası ki bu dosyalar sitenin 2 ayrı formattaki rengini sağlamakta ancak şimdilik buna ihtiyacım olmadığı için bu kısımları siliyorum.
4.İçeriğimizi konumlandıralım
Header kısmını hallettikten sonra şimdi içeriğimizi konumlandıralım.Bunun için içeriğin bulunduğu left column olarak belirlenmiş katmanın içeriğini silelim ve yerine joomla içeriğini yerleştirelin.Aslında bu oldukça kolay tek yapmamız gereken left column içerisine
<jdoc:include type="component" style="xhtml" />eklemek.
Şimdi admin panelimizden temamızı aktif hale getirelim ve gördüğünüz gibi joomla içeriğimiz gerçekten orda.Ancak bazı joomla çekirdek stil yapıları eksik olduğu için temamızın yazı tipleri tekdüze olmuş durumda.
5.Menümüzü ekleyelim.
İlk olarak menü içeriğini temizleyelim.Yine temamız içerisinde bulunan yardımcı yorumlardan Right link column yorumu altında bulunan katmanın içeriğini temizlememiz.Menümüzü right modül pozisyonunda olduğunu varsayarak
<jdoc:include type="modules" name="right" style="xhtml"/>kodunu ekleyerek right modül pozisyonunu tanımlamış olalım.Eğer right modül pozisyonunda değilse Main menüyü right modül pozisyonuna aldıktan sonra sayfamızı tekrar kontrol edelim.
Son olarak üst menü konumumuzu oluşturalım bunun için yine temamız içerisinde #menu: the main large box site menu yorumu altında bulunan katman içerisini temizleyiip
<jdoc:include type="modules" name="top" style="xhtml"/>kodumuzu ekleyelim.Sonrasında top menü modül pozisyonunu top olarak ayarlayalım ve sayfamızı yenileyim.Gördüğümüz gibi temel bir yapıyı oluşturduk gerisi joomla stil kodlarımızın düzenlenmesi ile ilgili.
Bunun yanında temamızda uygun göreceğimiz yerlere yine top ve right modüllerini eklediğimiz gibi diğer pozisyonlarıda ekleyebiliriz.
Alıntıdır.
