Çalışmalarım

Nasıl Joomla Teması Yapılır? 1/3

Ayrıntılar: Kategori: Dersler; 16 Ocak 2012 tarihinde yayınlandı.; THEMT tarafından yazıldı.

Joomla temas? nas?l yaz?ld???n? ufak bir örnekle ö?renmek isteyenler için ba?lang?ç seviyesinde detayl? bir yaz?.

Şuan bulunduğunuz sayfa dahil bu yazı üç sayfa olarak bölünmüştür, gitmek için tıklayabilirsiniz #1 #2 #3

Joomla'nın her eklentisi (extension) dosya yapısı olarak 2+1 temel parçadan oluşur. Temalar da bir eklenti olduğu için bu kurala uyarlar. Bunlar sırası ile şunlardır

Eklenti yani temanın bilgilerinin tutulduğu eklenti.xml
Eklentinin yani temanın çalışmaya başladığı eklenti.php
[+1] Eklentinin yani temanın ihtiyaç duyacağı diğer yardımcı klasör ve dosyalar. Bu kısım mecburu değildir

Yazı tarafımca yazılmıştır, kaynak berlitme amaçlı bu sayfanın adresi belirtilirse, kullanmanızda sorun oluşmayacaktır.

Bu yazı her ne kadar Joomla 1.7 ve üst sürümler için olsa da 1.5 sürümü ile mantık aynıdır. Eklenti bilgilerinin bulunduğu XML dosyasında bazı düğümler farklıdır sadece. Yazı sonunda ulaşacağınız tema aşağıdaki gibi görünecektir.

_{Temanın görünümü

Büyük hali için üzerine tıklayın}

Dosya Yapısı

Bu yazı sonunda aşağıdaki klasör ve dosyalar sahip olacaksınız. Tüm metin tabanlı dosyalar UTF-8 karakter setinde, BOM olmadan kaydedilmelidir.

* (yıldız) işaretine sahip dosyalarının anlatımı burada yapılmadı zaten bunlar tamamen tasarımsal konu ve dosyalardır

index.html dosyası için aynı isimde boş bir metin dosyası oluşturmanız yeterlidir.

Dosyalar
- ap.png *
- joomla.css *
- logo.png *
- stil.css *
favicon.ico *

index.html
index.php
template_preview.png *
template_thumbnail.png *
templateDetails.xml
tr-TR.tpl_temam.ini

Çalışma (tpl_temam.zip) dosyasını indirmek için buraya tıklayın. Böylece ana hatlar hakkında daha iyi bilgi sahibi olabilirsiniz. Ayrıca bu dosya kurulum dosyasıdır. Joomla'nın yönetim sayfasından kurabilirsiniz. Dosyası yükledikten sonra, Joomla yönetim sayfasında, şablon yönetimi kısmında aktif etmeniz gerekmektedir. Aktif etme sonucunda sitenin ön yüzünü görüntülemek istediğinizde bazı eksiklikler olduğunu göreceksiniz. Bunları gidermek için:

dizin modül konumunda Hiyerarşik Menüler Modülü (Breadcrumbs) oluşturun.
yan modül konumunda Menü Modülü oluşturun.

Joomla Eklenti (Tema) XML Dosyası Nedir?

*.XML (templateDetails.xml) uzantılı bu dosyada aşağıda geçen kavramları ve daha fazlasını barınmaktadır

Eklentinin adı
Eklentinin sürümü
Yazarı
Lisans bilgisi
Geliştirilen hedef Joomla sürümü
Eklentinin ihtiyaç duyduğu dosya ve klasörler
Dil dosyaları
Yönetim panelinde yöneticinin Modül Soneki gibi girebileceği girdi alanları

Bu dosya olmak zorundadır aksi halinde eklenti kurulamaz ve çalıştırılamaz. Tema için gerekli olan *.XML dosyasının adı templateDetails.xml olmaktadır. Temalar için templateDetails.xml ismi bir standarttır ve değiştirilmesi halinde sorun oluşabilir. Aşağıda içinde hiç bir bilgi barındırmayan standart eklenti xml tanımlaması mevcuttur.

<?xml version="1.0" encoding="utf-8"?>
<extension type="template" version="1.7.0" client="site" method="upgrade">
	<!-- Eklenti adı, sürümü gibi bilgiler buraya yazılacak -->

	<!-- Eklentide kullanılacak dosyalar buraya yazılacak -->

	<!-- Temada modüllerin gösterileceği konumları buraya yazılacak -->

	<!-- Eğer eklentide dil dosyası dosyaları olacaksa buraya yazılacak -->

	<!-- Eğer eklentide yönetim sayfasında kullanılması için girdi alanları olacaksa buraya yazılacak -->
</extension>

extension düğümündeki type ile eklentinin tema olduğu belirtiliyor, version ile hedef alınan Joomla sürümünü, client ile sitenin ön tarafı için olduğunu yani bir yönetici teması olmadığını belirtiliyor, method ile de eğer eklenti tekrar kurulmaya çalışırsa yada yenilenmek istenirse yeni dosyalar ile güncellenmesi istendiği belirtiliyor.

İşlem 1: Eklenti Bilgileri

Bu aşamada bilgi amaçlı eklenti-adı, sürümü gibi eklenti bilgileri tanımlanacak. Dosyanın içeriği aşağıdaki gibidir.

<?xml version="1.0" encoding="utf-8"?>
<extension type="template" version="1.7.0" client="site" method="upgrade">
	<!-- Eklenti bilgi tanımları -->
	<name>Temam</name>
	<creationDate>08/01/2012</creationDate>
	<author>Murat TAMCI</author>
	<copyright>(C) 2012 themt.co</copyright>
	<license>http://www.gnu.org/copyleft/gpl.html GNU/GPL</license>
	<authorEmail>This email address is being protected from spambots. You need JavaScript enabled to view it.</authorEmail>
	<authorUrl>themt.co</authorUrl>
	<version>1.0.0</version>
	<description>Bu benim ilk Joomla 1.7 temam</description>
</extension>

Düğümlerin açıklaması aşağıda yapılmıştır

name eklenti adını tutmaktadır
creationDate eklenti yazım tarihini tutmaktadır
author eklentiyi sahibini yani geliştiren bilgisini tutmaktadır
copyright lisans bilgisini tutmaktadır
authorEmail ve authorUrl eklenti için bir web sitesi ve iletişim kurulabilecek bir e-posta adresini tutmaktadır
version eklenti sürümünü tutmaktadır
description eklenti için bir açıklama tutmaktadır

İşlem 2: Eklenti Dosyaları

Bu aşamada eklenti için gereken klasör ve dosyaların, neden olmaları gerektiği ve ne için var oldukları açıklanacak. Ayrıca gerekmesi halinde *.XML dosyası içinde bildirimleri yapılacak.

<?xml version="1.0" encoding="utf-8"?>
<extension type="template" version="1.7.0" client="site" method="upgrade">
	<name>Temam</name>
	<!-- ...ve diğer bilgiler! Yerden kazanmak için kaldırdım -->
	<description>Bu benim ilk Joomla 1.7 temam</description>

	<!-- Dosya tanımları -->
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<filename>index.html</filename>
		<filename>template_preview.png</filename>
		<filename>template_thumbnail.png</filename>
		<folder>dosyalar</folder>
		<filename>favicon.ico</filename>
	</files>
</extension>

Eklenti için gereken dosyaların tanımlanması için files adında bir düğüm gerekmekte. files düğümü içinde her klasör için folder, ve her dosya için filename adında bir düğüm yazıyoruz. Klasör ve dosyaların adlarını bu düğümler içinde tanımlıyoruz. folder düğümü kullandığınızda bu klasör içindeki dosyaları tanımlanamıza gerek kalmaz. O klasör içindeki dosyalar da işleme tabi olur. Eklentilerde kullanılan bu klasör ve dosya bildirim işlemi "Joomla eklenti kurucusuna" yardımcı olmak için yapılır. Küçük çaplı eklentilerde bu bildirimlerin yapılmamasının bir sorun oluşturmadığını gözlemledim. Ama bildirmenizde fayda vardır.

filename düğümü içindeki index.php dosyası, temanın çalışacağı dosyadır yani temanın kendisidir. Joomla yönetim sayfasında temanızı aktif ettiğinizde, ve sitenin ön tarafını ziyaret etmeniz halinde Joomla ilk olarak bu dosyası çalıştırır ve temanızı göstermiş olur. Bu dosya var olmak zorundadır aksi halde tema çalışmaz.

templateDetails.xml dosyası, yazının üsttündeki yani şuan yazmakta olduğumuz *.XML dosyasıdır. Bu dosya var olmak zorundadır aksi halde tema kullanılamaz.

index.html tanımı, temam klasörü içindeki index.html dosyası için kullanılmaktadır. Bu dosya boştur ve güvenlik amaçlı vardır. Herhangi bir ziyaretçinin bu dizini görüntülemek istemesi halinde boş bir sayfayla karşılaşmasını amaçlamaktadır.

template_preview.png ve template_thumbnail.png dosyaları temanın çalışır halinin öngörünüm resimleridir. Bunlar yönetim sayfasındaki tema/şablon yöneticisi için vardır. İlgili sayfada fare tema isminin üzerine geldiğinde küçük bir kutu içinde bu resimler gösterilir. Böylece tema kullanılmadan önce, bu resimler göstererek tema hakkında fikir verir. Bu dosyalar var olmak zorunda değildir.

Bu aşamadan sonraki aşağıdaki belirtilen dosyalar tamamen tema tasarımıyla ilgilidir. Tasarımcıya ve temasına bağlıdır.

folder düğümü içinde "dosyalar" klasörünü tanımladık ve bu klasörde tema için gerekli olan *.CSS, Script ve resim gibi dosyaları "dosyalar" klasöründe tutacağız.

favicon.ico dosyası, site için bir sık kullanılanlar ikonunu tanımlar. Bu dosya var olmak zorunda değildir..

İşlem 3: Modül Konumları

Bu aşamada tema için gerekli olan modül konumlarını tanımlanacak. Bunları tanımlamak mecburi değildir. Fakat tanımlanması halinde bir modül eklenmek istediğinde temadaki modül konumları otomatik olarak listenecektir. Aksi halde konumların önceden bilmesi ve elle belirtilmesi gerekecek.

<?xml version="1.0" encoding="utf-8"?>
<extension type="template" version="1.7.0" client="site" method="upgrade">
	<name>Temam</name>
	<!-- ...ve diğer bilgiler burada olacak yer tutmaması için kaldırdım -->
	<description>Bu benim ilk  Joomla 1.7 temam</description>

	<files>
		<!-- ...ve diğer bilgiler burada olacak yer tutmaması için kaldırdım -->
	</files>

	<!-- Modüllerin görüntülenebileceği konum (pozisyon) tanımları -->
	<positions>
		<position>debug</position>
		<position>dizin</position>
		<position>yan</position>
		<position>icerik-ust</position>
	</positions>
</extension>

Files düğümünde olduğu gibi eklenti için gereken modül konumlarının tanımlanması için positions adında bir düğüm gerekmektedir. Her modül konumu için bu düğüm içinde position adında bir düğüm olmalıdır. İçindeki değer modül konumunun adıdır.

Temada kullanılmak üzere; debug, dizin, yan ve icerik-ust, adında modül konumları bildirimi yaptık. debug bildirimi dışındaki bildirimler tasrımcının isteğine kalmıştır. Verilecek isimler ve çokluğu tamamen tasarımcının, tasarımına göre belirleyeceği bir şeydir.,

Temada debug için bir modül konumu olması gerekliliktir ve Joomla'da ayıklama (debug) istediğinde sonuçlar bu konumda yazdırılır. İsmi debug olmak zorunda değildir ve hata-ayıklama olabilir.

İşlem 4: Eklenti Dil Dosyaları

Bu aşamada eklenti için gereken dil dosyası tanımlanacak. Eklentilerde dil dosyaları olmak zorunda değildir.

<?xml version="1.0" encoding="utf-8"?>
<extension type="template" version="1.7.0" client="site" method="upgrade">
	<name>Temam</name>
	<!-- ...ve diğer bilgiler burada olacak yer tutmaması için kaldırdım -->
	<description>Bu benim ilk  Joomla 1.7 temam</description>

	<files>
		<!-- ...ve diğer bilgiler burada olacak yer tutmaması için kaldırdım -->
	</files>

	<positions>
		<!-- ...ve diğer bilgiler burada olacak yer tutmaması için kaldırdım -->
	</positions>

	<languages folder="language">
		<language tag="tr-TR">tr-TR.tpl_temam.ini</language>
	</languages>
</extension>

Positions düğümünde olduğu gibi eklenti için gereken dil dosyalarının tanımlanması için languages adında bir düğüm gerekmektedir. Her dil için bu düğüm içinde language adında bir düğüm olmalıdır. language düğümündeki tag alanı hedeflenen dili bildirir.

Eklentiyi kurduğunuzda tr-TR.tpl_temam.ini dosyası kurulum tarafından otomatik olarak Joomla'nın kök dizinindeki languages/tr-TR dizini için taşınacaktır.

Dil Dosyası

Dil dosyasının içi aşağıda görüldüğü gibi olacaktır. Dil dosyaları UTF-8 karakter setinde ve BOM olmadan kaydedilmelidir.

;Bu bir yorum satırıdır ve yazılım açısından hiç bir amacı olmayıp dosyayı açana bilgi vermektedir.
; Joomla 1.7 temam
;Sürüm 1.0.0 | Tarih 08/01/2012 
;Copyright (C) 2011 Murat TAMCI. All rights reserved.
;Lisans bilgisi...

TPL_TEMAM_SLOGAN="Slogan"
TPL_TEMAM_SLOGAN_ACIKLAMA="Logo altında gösterilmesi için bir slogan giriniz"
TPL_TEMAM_TELIF="Telif"
TPL_TEMAM_TELIF_ACIKLAMA="Sitenin en altında gösterilmesi için bir telif metni giriniz"

Dosyanın ilk başlarındaki ; (noktalı virgül) karakteri ile başlayan satırlar Joomla tarafından yorumlanmazlar. Dil dosyaların mekanizması aşağıdaki gibidir

ANAHTAR="Değer"

Bu durumda, eklenti bilgilerinin tutulduğu tpl_temam.xml dosyasında veya eklentinin çalıştığı index.php dosyasında doğru teknikle ANAHTAR kullanılırsa, o kısım Joomla tarafından otomatik olarak " (çift tırnak) içindeki "Değer" ile değiştirilecektir. Doğru teknikle ile ne demek istediğimi yazının ileri kısımlarında yeri geldiğinde açıklayacağım.

İşlem 5: Eklenti Parametereleri (Girdi alanları)

Bu aşamada temayı daha interaktif yapacağız. Böylece yönetim sayfasında tema yönetilmek istediğinde text (metin), list (liste kurusu), checkbox (çentik kutusu) gibi girdi alanları görülebilecek. İşlemden sonra sonuç aşağıdaki resimdeki gibi olacaktır

_{Girdi alanları}

Bu girdi alanları eklentinin yani temanın ana dosyası olan index.php içinde kullanılabilecek.

<?xml version="1.0" encoding="utf-8"?>
<extension type="template" version="1.7.0" client="site" method="upgrade">
	<!-- Eklenti adı, sürümü gibi bilgiler buraya yazılacak -->

	<!-- Eklentide kullanılacak dosyalar buraya yazılacak -->

	<!-- Temada modüllerin gösterileceği konumları buraya yazılacak -->

	<languages folder="language">
		<language tag="tr-TR">tr-TR.tpl_temam.ini</language>
	</languages>

	<!-- Ayarlar tanımları -->
	<config>
		<!-- Parametreler -->
		<fields name="params">
			<!-- Temel girdiler için girdi "grubu" -->
			<fieldset name="basic">
				<!-- Slogan için bir metin türünde girdi alanı-->
				<field type="text" name="slogan" default="Slogan yazınız"
					label="TPL_TEMAM_SLOGAN" description="TPL_TEMAM_SLOGAN_ACIKLAMA"  />

				<!-- Telif için bir metin-alanı türünde girdi alanı-->
				<field type="textarea" name="telif" default="(C) 2012 Murat TAMCI"
					label="TPL_TEMAM_TELIF" description="TPL_TEMAM_TELIF_ACIKLAMA"  />
			</fieldset>
		</fields>	
	</config>
</extension>

config düğümünün açıklamasına gerek duymuyorum, <fields name="params"> düğümü tüm parameter (girdi alanları) ile ilgili düğümlerin tutulduğu kök düğümdür. <fieldset> düğümü ortak özellikler taşıyan girdileri gruplamak için kullanılır. Bu düğümdeki name alanı grubun adıdır ve buradaki basic değeri, modülün temel özellikerinin tutulduğu gruptur. Burada en çok bilinen ve sık kullanılan moduleclass_sfx (modül soneki) gibi temel girdi alanları bulunur ama bulunmak zorunda değildir.

Ayrıca siz aşağıda olduğu gibi kendi gruplarınızı oluşturabilirsiniz.

 
....
<!-- Parametreler -->
<fields name="params">
	<!-- Temel girdiler için girdi grubu -->
	<fieldset name="basic">
		<!-- Slogan için bir metin türünde girdi alanı-->
		<field type="text" name="slogan" default="Bu benim ilk Joomla 1.7 temam"
			label="TPL_TEMAM_SLOGAN" description="TPL_TEMAM_SLOGAN_ACIKLAMA"  />

		<!-- Telif için bir metin-alanı türünde girdi alanı-->
		<field type="textarea" name="telif" default="(C) 2012 Murat TAMCI"
			label="TPL_TEMAM_TELIF" description="TPL_TEMAM_TELIF_ACIKLAMA"  />
	</fieldset>

	<!-- Resim işlemleri için girdi grubu -->
	<fieldset name="Resim İşlemleri">
		<!-- Farklı türde girdi alanları buraya yazılacak -->
	</fieldset>
</fields>
...

Aşağıda field düğümündeki alanlar açıklanmıştır.

<field type="text" name="slogan" default="Bu benim ilk Joomla 1.7 temam"
	label="TPL_TEMAM_SLOGAN" description="TPL_TEMAM_SLOGAN_ACIKLAMA" />

type alanı, girdi alanının türünü belirlemek için kullanılır. Burada text türü kullanılmıştır ayrıca seçim kutusu (radio button), seçim listesi (list box) gibi alanlar belirtilebilir. Bazı Joomla parametre türleri aşağıda Parametre Türleri başlığı altında açıklanmıştır. Diğer tüm türler için buraya tıklayabilirsiniz!
name alanı, girdi için bir isim oluşturur ve benzersiz olmalıdır. index.php dosyasında name alanındaki isim ile çağırır ve içindeki değeri alabilirsiniz.
default alanı, girdi için varsayılan bir değer tanımlar. Eklenti ilk kurulduğunda yada girdi boş bırakıldığında bu değer gösterilir
label alanı, girdinin solunda girdinin ne için olacağını bildiren bir yazı yazılmasını sağlar
description alanı, yönetim sayfasında fareniz ile label ile gösterilen alanın üzerine gelirseniz bir kutu belirir. Bu kutu girdi alanı hakkında açıklama sunar.

Dikkatiniz çekmiş olabilir label ve description alanlarında TPL_TEMAM_SLOGAN ve TPL_TEMAM_SLOGAN_ACIKLAMA kullanıldı. Buraya direk birşeyler yazılabilirdi. Fakat biz dil desteği sağlamak için dil dosyası içindeki ANAHTARları kullandık. Böylece o kısımlar Joomla tarafından otomatik olarak dil dosyasındaki anahtarlar karşısındaki değerler ile değişecektir. Bu tür bir yapı aşağıdaki gibi bir çok alanda kullanılabilir.

<?xml version="1.0" encoding="utf-8"?>
<extension type="template" version="1.7.0" client="site" method="upgrade">
	<!-- Eklenti bilgi tanımları -->
	<name>TPL_TEMAM_ISIM</name>
	...
	<description>TPL_TEMAM_ACIKLAMA</description>

	...
</extension>

Parametre Türleri

text metin girebileceğiniz bir alan tanımlar ve tek satırdır
texarea metin girebileceğiniz bir alan tanımlar ve çoklu satırdır
radio yuvarlak şekilde birçok seçim arasından sadece birini seçebileceğiniz alan tanımlar.
list aşağı açılır liste şeklinde birçok seçim arasında sadece birini (veya birden fazla) seçebileceğiniz alan tanımlar.