Blog
Nasıl Joomla Teması Yapılır? 2/3
- Ayrıntılar
- Kategori: Bilişim
- 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 Eklenti PHP Dosyası Nedir?
*.PHP (index.php) uzantılı bu dosyada eklentinin çalıştırılacağı ana dosyadır. Elinizde HTML halinde yapılmış bir web tasarımı olduğunu varsayaylım. Bu durumda tasarmın başına <?php ... ?> php kod kısmını koyarak başlayabilirsiniz. Bu dosya aşağıdaki gibi olacaktır.
<?php
/**
* 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...
*/
// Bu php dosyasına direk erişim olması halinde çalışmayı durdurur. Böylece sadece Joomla içinde çalışması sağlanır
defined('_JEXEC') or die;
?>
<!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="" lang="" dir="">
<head>
<link rel="stylesheet" href="/dosyalar/stil.css" type="text/css" />
</head>
<body>
<div id="site">
<div id="ust"><a href="/">LOGO</a>
<div id="slogan"> Slogan buraya yazılacak </div>
</div>
<div id="dizin"> Dizin </div>
<!-- Joomla'nın ürettiği hata gibi bildirimler burada olacak -->
<div id="orta">
<div id="yan"> Yan : ana-menü, en çok okunanlar, en çok yorum alanlar gibi site parçaları burada gösterilebilir. Mecburi değildir ama ana-menü için bir alan şarttır. </div>
<div id="icerik">
<div id="icerik-ust"> İçerik üstü : İçeriğikten önce gösterilmesi istenenlar burada gösterilebilir. Mecburi değildir </div>
<div id="icerik-icerik"> İçerik : Haberler, iletişim gibi Joomla bileşenleri (Component'ler) yani sitenin temeli burada olacak. Mecburidir. </div>
</div>
</div>
<div id="telif"> Telif : (C) Tüm hakkı saklıdır metni buraya gelecek. Mecburi değildir.</div>
</div>
</body>
</html>
Bu haliyle tasarımı çalıştırdığınızda bir sorun olduğunu fark edeceksiniz. İlk olarak HTML görünümü bozuk olacaktır çünkü *.CSS ve Script gibi dosyaların dizin yapısı bozuktur ve bu haliyle kullanılamaz. Ayrıca site başlık gibi bilgiler eksiktir. İkinci olarak da boş bir tasarım olacaktır. Hiç bir makale ve modül görünmeyecektir.
HTML Dökümanı, Head Bildirimi ve Tema Dizinleri
İlk problemi çözmek için head düğümünün içini hazırlayalım. Bunun için aşağıdaki koda bakın
<?php
/**
* 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...
*/
// Bu php dosyasına direk erişim olması halinde çalışmayı durdurur. Böylece sadece Joomla içinde çalışması sağlanır
defined('_JEXEC') or die;
// tema yolunu tema_url isimli değişkende tutalım
$tema_url = $this->baseurl ."/templates/temam";
?>
<!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="" lang="" dir="">
<head>
<link rel="stylesheet" href="/<?php echo $tema_url ?>/dosyalar/stil.css" type="text/css" />
</head>
<body>
...
Yukarıdaki kodda $tema_url değişkenine, $this->baseurl ile Joomla'nın çalıştığı kök dizini aldık. Örnek vermek gerekirse www.themt.co/joomla-17 olabilir. Bu durumda site themt.co adresi içinde joomla-17 klasöründe çalışıyor demektir. Daha sonra templates dizinini belirttik çünkü tüm temalar bu dizinde bulunur. Son olarak da temamızın adını yazdık.
Temamızın dizinini aşağıdaki link düğümünün href alanına <?php ... ?> PHP kodu içinde echo ile yazdık ve sonuna / (bölü) işareti koyduk. Bu şekilde siteyi tekrar çalıştırırsanız kötü görünen site grafiğinin düzeldiğini görürsünüz.
<link rel="stylesheet" href="/<?php echo $tema_url ?>/dosyalar/stil.css" type="text/css" />
Şimdi de site başlığı gibi bilgileri tanımlayalım. Son durum aşağıdaki gibi olacaktır.
<?php
/**
* 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...
*/
// Bu php dosyasına direk erişim olması halinde çalışmayı durdurur. Böylece sadece Joomla içinde çalışması sağlanır
defined('_JEXEC') or die;
// tema yolunu tema_url isimli değişkende tutalım
$tema_url = $this->baseurl ."/templates/temam";
?>
<!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="" lang="" dir="">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $tema_url ?>/dosyalar/stil.css" type="text/css" />
</head>
<body>
...
Yukarıdaki kodda <jdoc:include type="head" /> düğümü ile temamızın head (HTML başlık) düğümü içine, Joomla'nın kullandığı tüm head bilgilerini yazdırdık. Joomla, temamızda bu tanımı gördüğünde o bölgeyi kendi başlık (head) bilgisi ile değiştirir. Bu sayede, başlık (title), açıklama metası (description meta) ve karakter-seti metası (character-set meta) gibi gerekli tüm bilgiler yazılır.
Temayı bu haliyle çalıştırdığınızda başlık bilgisinin tarayıcıda göründüğünü fark edeceksiniz. Tarayıcıdan faydalanarak sitenin kaynak koduna bakarsanız head düğümü içinde bir çok tanım göreceksiniz. Bunları Joomla sağlar, ve kararlı bir şekilde çalışması için temaya kendisi ekler.
Son olarak <?php echo $this->language; ?> ve <?php echo $this->direction; ?> PHP kodlarını aşağıdaki gibi ekleyip tasarımın HTML döküm bilgisini tamamlayalım. Bu bilgileri Joomla sağlar.
<?php
/**
* 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...
*/
// Bu php dosyasına direk erişim olması halinde çalışmayı durdurur. Böylece sadece Joomla içinde çalışması sağlanır
defined('_JEXEC') or die;
// tema yolunu tema_url isimli değişkende tutalım
$tema_url = $this->baseurl ."/templates/temam";
?>
<!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; ?>" dir="<?php echo $this->direction; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $tema_url ?>/dosyalar/stil.css" type="text/css" />
</head>
<body>
...
Modül Konumları, Mesaj ve Bileşen (Component) Bildirimi
Şimdi de ikinci sorunu çözelim yani temamızı boş bir tasarım olmaktan kurtarıp makale ve modüleri görünecebilecek hale getirelim. Bu işlemler için tasarımın body düğümü içinde bir takım değişiklikler yapacağız ve sonuç aşağıdaki gibi olacaktır.
...
<body>
<div id="site">
<div id="ust"><a href="/">LOGO</a>
<div id="slogan"> Slogan buraya yazılacak </div>
</div>
<div id="dizin"><jdoc:include type="modules" name="dizin" style="xhtml" /></div>
<jdoc:include type="message" />
<div id="orta"><div id="yan"><jdoc:include type="modules" name="yan" style="xhtml" /></div>
<div id="icerik">
<div id="icerik-ust"><jdoc:include type="modules" name="icerik-ust" style="xhtml" /></div>
<div id="icerik-icerik"><jdoc:include type="component" style="xhtml" /></div>
</div>
</div>
<div id="telif"> Telif : (C) Tüm hakkı saklıdır metni buraya gelecek. Mecburi değildir.</div>
<jdoc:include type="modules" name="debug" />
</div>
</body>
</html>
Temamızda modüllerin ve bileşenlerin (Components) görünebilmesi için, temanın ilgi yerinde head düğümü içinde olduğu gibi jdoc:includes düğümü kullanıyoruz. Joomla temada bu düğümleri gördüğünde, o kısımları parametreler doğrultusunda değiştirir.
<jdoc:include type="modules" name="dizin" style="xhtml" />
Yukarıdaki jdoc:include düğümünde modülleri istediğimizi belirtiyoruz ve bunu type alanı bildirimi ile yapıyoruz. İstediğimiz modüller sadece name alanındaki değerdeki modüller. Böylece konumu sadece dizin olan modüller olacaktır. style ile de xhtml görünüm şekilde olması gerektiğini bildiriyoruz. name bildirimi, type alanı modules olan kısımlar için kullanılmaktadır.
<jdoc:include type="message" />
Yukarıdaki jdoc:include düğümünde, mesajları istediğimiz belirtiyoruz.Bu mesajlar Joomla tarafından üretilen, hata ve bildirim mesajlarıdır.
<jdoc:include type="component" style="xhtml" />
Yukarıdaki jdoc:include düğümünde, bileşeni istiyoruz. Joomla bu kısıma, makale, iletişim ve forum gibi bileşenleri yerleştirir. Sitenin esas noktası buradadır ve site bu kısımda çalışmaktadır. Bir temada sadece bir bileşen olmalıdır. Farklı kullanımlarda birden fazla bileşen olabilir.
<jdoc:include type="modules" name="debug" />
Yukarıdaki jdoc:include düğümünde debug için bir modül konumu oluşturduk. Temada debug alanın olması bir 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 olabilirdi.
jdoc:include düğümü ile Joomla'ya temamızdaki ilgili yerlere, ilgili bilgileri yazdırdık. Fakat şöyle bir durum oluşabilmektedir: Bazen name alanı ile belirtilen X konumunda modül olmayabiliyor. Bu durumda Joomla o düğüme hiç bir veri yazmamaktadır. Bu yüzden o kısım boş durmaktadır. Bunu önlemek mümkündür ve sonuç aşşağıdaki gibi olacaktır.
...
<body>
<div id="site">
<div id="ust"><a href="/">LOGO</a>
<div id="slogan"> Slogan buraya yazılacak </div>
</div>
<?php if ($this->countModules('dizin')) : ?>
<div id="dizin"><jdoc:include type="modules" name="dizin" style="xhtml" /></div>
<?php endif; ?>
<jdoc:include type="message" />
<div id="orta">
<?php if ($this->countModules('yan')) : ?>
<div id="yan"><jdoc:include type="modules" name="yan" style="xhtml" /></div>
<?php endif; ?>
<div id="icerik">
<?php if ($this->countModules(icerik-ust)) : ?>
<div id="icerik-ust"><jdoc:include type="modules" name="icerik-ust" style="xhtml" /></div>
<?php endif; ?>
<div id="icerik-icerik"><jdoc:include type="component" style="xhtml" /></div>
</div>
</div>
<div id="telif"> Telif : (C) Tüm hakkı saklıdır metni buraya gelecek. Mecburi değildir.</div>
<jdoc:include type="modules" name="debug" />
</div>
</body>
</html>
Son değişiklikteki ilk PHP kodu aşağıdadır.
<?php if ($this->countModules('dizin')) : ?>
Bu PHP koduda countModules metodu parametresindeki dizin konumunda bulunan modüllerin sayısı istenmekte ve kontrol edilmektedir. Sadece modül olması halinde temadaki o kısım ve içindeki jdoc:include düğümü gösterilmektedir.
