Çalışmalarım

Nasıl Joomla Teması Yapılır? 3/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

Eklenti (Tema) Parametreleri (Girdi Alanları)

Joomla Eklenti XML Dosyası Nedir? başlığının İşlem 5: Eklenti Parametereleri (Girdi alanları) alt başlığında, temayı daha interaktif ve kişiselleştirilebilir yapmak için bir takım işlemler yapılmıştır. Şimdi bunu temaya uygulayalım. Bunun için temanın body düğümü içinde ilgili yerlere eklemeler yapmak gerekecek ve sonuç aşağıdaki gibi olacaktır.

...
<body>
<div id="site">
  <div id="ust"><a href="/">LOGO</a>
    <div id="slogan"><?php echo $this->params->get('slogan', 'Bu benim ilk Joomla 1.7 temam') ?></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"><?php echo $this->params->get('telif', '(C) 2012 Murat Tamcı') ?></div>
</div>
</body>
</html>

Yukarıdaki kodu açıklamak gerekirse aşağıdaki PHP kodunda yapılam işlem şudur: slogan isimli girdinin değerini alıyoruz ve bunu get() metoduna verdiğimiz slogan tanımlaması ile yapıyoruz ve değeri yazdırıyoruz. Parametrenin boş olması halinde yani içinde bir metin olması durumunda yordamın 2nci parametresindeki metin geçerli olmaktadır.

<div id="slogan"><?php echo $this->params->get('slogan', 'Bu benim ilk Joomla 1.7 temam') ?></div>

Bir diğer işlemi açıklamak gerekirse aşağıdaki PHP kodunda telif girdi alanının değerini istiyor ve yazdırıyoruz.

<div id="telif"><?php echo $this->params->get('telif', '(C) 2012 Murat Tamcı') ?></div>

Joomla Standart Öğeleri ve Stiller

Joomla'nın standart, arama, iletişim ve haber beslemeleri gibi bileşenleri vardır. Ayrıca yazar, tarih, karetegori gibi makale bilgileri, sayfalama yapısı ve de yazdır, ePosta gibi ikonları ve daha fazlası vardır. Bu öğeleri daha güzel görünecek şekilde şekillendirip joomla.css isminde bir *.CSS dosyasında tutabilirsiniz. Zamandan kazanmak için bu *.CSS dosyasını her temanızda kullanabilirsiniz.

JDocument Sınıfı

Yazının önceki kısımlarında tasarımın head düğümü içerisine CSS ve/ve ya Script gibi bir dosya bağlantısının nasıl yapıldığı gösterilmişti. Bağlama işlemi aşağıdaki gibi olacaktır.

...
<head>
  <jdoc:include type="head" />
  <link rel="stylesheet" href="/<?php echo $tema_url ?>/dosyalar/stil.css" type="text/css" />
  <script type="text/javascript" src="/<?php echo $tema_url ?>/dosyalar/jquery.min.js"></script>
</head>
...

Ama alternatif bir yöntem de olmaktadır. Alternatif yöntemde dosya bağlantısı Joomla aracılığıyla yapılmaktadır. Örneği aşağıdadı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";

JDocument::addStyleSheet ($tema_url ."/dosyalar/joomla.css");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...

Yukarıdaki kodda görmüş olduğunuz gibi bu işlemi JDocument sınıfının addStyleSheet yordamı ile yaptık. Peki bunu neden böyle yapma gereği duyduk?

İlk olarak head düğümü içersine, temamızın yada modül, uyumlu-ek gibi herhangi bir eklentiden bu yöntem ile dinamik olarak ekleme yapabiliriz. Mutlaka head düğümü içerisinde bir tanım yapmak gerekmez.

İkinci olarak, bazı durumlarda tek çare olmaktadır. Örnek vermek gerekirse temanızda bir *.JS dosyası bağlamanız gerekiyor. Daha önce herhangi bir modül ve/veya uyumlu-ek gibi bir eklenti, HTML dökümanına ilgili *.JS dosyasını eklemediyse sorunsuz bir şekilde siz temanızda ekleyebilirsiniz ama eklediye çakışma olacağı için tarayıcı betik (script) hatası verecek ve betiğin çalışmasını durduracak. Bu da tasarımınızdaki etkileşimi durduracaktır.

Bunun önüne şu şekilde geçebiliriz. Bu betik dosyamızı her Joomla eklentisinde JDocument::addScript ile eklenebilir. Daha sonra JDocument::getHeadData yordamı ile head düğümü içindeki tüm bilgileri alabilir ve aldığımız bu bilgi içerisinde betik dosyamızın adını arayabiliriz. Eğer bulunmuyorsa ekleme işlemini yapabiliriz.

Bazı faydalı JDocument yordamlarını aşağıda bulabilirsiniz. Daha fazlası için buraya tıklayabilirsiniz.

// getHeadData
// head düğümü içindeki tanımlamaları dizi türünde geri döndürür
// herhangi bir parametresi yoktur.

array JDocument::getHeadData()

// addScript
// Birinci parametredeki betik dosyasını tanımlar,
// ikinci parametre varsayılan olarak 'text/javascript' olmaktadır

void JDocument::addScript( $yol, $tur )

// Örnek

JDocument::addScript( '/jquery.min.js' );

// addScriptDeclaration
// Birinci parametredeki betiği tanımlar,
// ikinci parametre varsayılan olarak 'text/javascript' olmaktadır

void JDocument::addScriptDeclaration( $icerik, $tur)

// Örnek

JDocument::addScriptDeclaration( 'alert ("Sitemize hoşgeldiniz");' );

// addStyleSheet
// Birinci parametredeki stil *.CSS dosyasını tanımlar,
// ikinci parametre varsayılan olarak 'text/css' olmaktadır
// üçüncü parametre hedef alınan cihazı tanımlar, varsayılan olarak null olmaktadır
// son parametre özellikler için bir dizi olmaktadır.

void JDocument::addStyleSheet( $yol, $tur, $media, $ozellikler )  

// Örnek

JDocument::addStyleSheet( '/stilim.css' );

// addStyleDeclaration
// Birinci parametredeki stili tanımlar,
// ikinci parametre varsayılan olarak 'text/css' olmaktadır

void JDocument::addStyleDeclaration( $icerik, $tur)  

// Örnek

JDocument::addStyleDeclaration( 'body { color: #fff }' );

Eklenti (Tema) Kurulum Dosyası

Şuana kadar aşağıdaki klasör ve dosyaları oluşturduk. Tüm metin tabanlı dosyalar UTF-8 karakter setinde, BOM olmadan kaydedin.

* (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

Yükleme ve kurulum işlemini kolaylaştırmak için tüm bu dosyaları tpl_temam.zip şeklinde *.ZIP formatında arşivleyebilirsiniz. Böylece kurulum dosyası tek bir dosya haline gelecektir, boyutu küçülecektir ve Joomla yönetim sayfasında kurulum işlemi basitleşecektir.

Ç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.

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