JTY/B4/D1 - Boş Şablon Kurulumu ve index.php Dosyasını Tanıma

(Bu ders; çizimi yapılmış bir tasarımın nasıl joomla sitesi haline getirildiğinin anlatılması için hazırlanmıştır. Kullanılan dil ve terimler en basit halleriyle anlatılmıştır. Teknik tanımlamalar ve teknik terimlerin kullanılmasından özellikle kaçınılmıştır. CSS konusunda kendinizi geliştirmek için bu adresteki dersleri takip edebilirsiniz.)

1- KODLAMAYA HAZIRLIK AŞAMASI

Kodlama işlemine geçmeden önce yapılması gerekenler;
Buraya sağ tuş ile tıklayıp, hedefi farklı kaydet diyerek "joomlaekip.zip" adlı temayı bilgisayarımıza indiriyoruz.

Site yönetim bölümündeki Eklentiler sekmesindeki Eklenti Yöneticisine tıklıyor ve Dosya Paketi Yükle bölümünden gözat diyerek temamızı seçiyor ve temanın kurulumunu gerçekleştiriyoruz.

RESİM-1

Temamızı varsayılan olarak ayarlıyoruz.

RESİM-2

Ardından sitemizin ön yüzüne bakıyoruz. Örnek içerik kurulu şekilde kurduğumuz joomlada, joomlaekip isimli şablonu yüklediğinizde bu şekilde bir görünüm alacaksınız.

RESİM-3

Bu yaptığımız yükleme ile bir joomla temasının ihtiyacı olduğu iskelet dosyalar ve klasör yapısı hazır olarak gelmiştir. Yüklemiş olduğunuz tema bu ders için özel olarak hazırlanan BOŞ BİR TEMA'dır. Yapacağınız projelerde bu iskelet temadan yola çıkabilirsiniz.

Yükleme işleminin ardından kodlama için gerekli olan dosyaları tanımaya geçebiliriz. Resim üzerinde standart bir joomla temasının iskelet dosyalarını görüyorsunuz.

RESİM-4

Bu dosyaların bulunduğu yere sitemizin dosyalarının bulunduğu yerden templates/joomlaekip klasöründen ulaşıyoruz. 

Kısaca dosyaları tanıyalım;

- component.php = Sitemizdeki bileşenlerin gösterileceği altyapıyı gösteriyor. İleriki projelerimizde bununla ilgili detaylı bilgiler vereceğiz. Şimdilik bu dosyayla bir işimiz yok.

- css/template_ie.css = Temamızı hazırlarken internet explorer için özel kod yazmamız gerekirse diye bulunan bir dosya. Bu aşamada bu dosyayı kullanmayacağız. Fakat büyük projelerde kullanmak gerekebiliyor.

- css/template.css = Temayı hazırlarken yazdığımız tüm xhtml kodlarının css tanımlamalarının yapıldığı dosyadır. Kullanacağımız 2 dosyadan biri budur. Tüm görselliği ve hizalamaları bu dosyanın içerisinde yapacağız.

- error.php = Sitemizde bir içerik bulunamadığı zamanlarda çıkan 404 sayfasının düzenlemesine yarar. Bu dosya sayesinde 404 sayfasını özelleştirebiliyoruz.

- favicon.ico = Tarayıcılarda site adresinin başında gözüken küçük resimdir.

- html/modules.php = Modüllere özel bir görünüm verilmesi için kullanılan dosyadır. Bu aşamada bu dosyada bir işlem yapmayacağız. Fakat büyük projelerde farklı modül gösterimleri için kullanmamız gereken bir dosya.

- index.php = xhtml kodlaması yapacağımız dosyadır. Temanın ön görünümdeki herşeyi bu dosyadan ayarlıyoruz.

- templateDetails.xml = Temanın kurulumu ve özel parametre ayarlarının yapıldığı dosyadır. İleriki derslerde bu dosyayla ilgili geniş bilgi vermeye çalışacağız. Şimdilik içerisinde bir değişiklik yapmamıza gerek yok. 

Yukarıdaki açıklamalarda da bahsettiğim gibi burada kodlamamızı yapacağımız 2 dosya var. Biri index.php dosyası, diğeri ise css klasörü içerisindeki template.css dosyası. Bu 2 dosyayı kodlamayı yapacağınız bir yazı editöründe açarak kodlamaya başlayacağız. Ben Aptana yazılımını kullanıyorum. Eğer Windows kullanıcısıysanız Notepad++ programını, Linux yada MAC kullanıcıysanız Aptana Studio programını tavsiye ederim.

index.php dosyasını açtığınızda temel kodların hazır olarak geldiğini göreceksiniz. Temayı hazırlarken boş haliyle paketlediğim için her seferinde yeniden bu kodları yazmanıza gerek kalmayacak.

RESİM-5

Yukarıda resimli halini, aşağıda ise açık halde görünen kodlarda, kodların başlangıcı ile head bölümüne kadar olan ki bölümü görüyorsunuz. Bu bölüm joomla 2.5 sürüm temalarında olması gereken en basit şekliyledir. Dikkat ettiyseniz normal html site kodlarken bu bölümde title, metatag, metakeywords gibi bölümlerin olduğunu hatırlayacaksınız. Bu tür özellikler joomlanın yönetici panelinden ayarlandığı için "<jdoc:includetype="head" />" kodunu temamıza eklememiz yeterli oluyor. Gerisini joomla hallediyor. Ardından yine head tagları arasında css dosyamızın tanımlamasını yapıyoruz. Eğer temamızda birden fazla css dosyası varsa, js dosyaları bulunuyorsa yada script tanımlaması yapmamız gerekiyorsa tüm bunları bu head tagları arasına yazıyoruz.

<?php
/**
 * @packageJoomla.Site
 * @copyrightCopyright (C) 2012 JoomlaEkip tarafından joomla.gen.tr için hazırlanmıştır. Kullanımı ve dağıtımı serbesttir.
 * @licenseGNU General Public License version 2 or later; see LICENSE.txt
 */
defined('_JEXEC') or die;
JHtml::_('behavior.framework', true);
$app = JFactory::getApplication();
?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:includetype="head" />
<linkrel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>

Head bölümünde hiçbir değişiklik yapmıyoruz ve asıl işlemlerimi yapacağımız body bölümüne geçiyoruz. Boş gelen temadaki body kodlarını şu şekilde hazırladım. Bu bölümde kullanacağımız 5 önemli kod bulunuyor. Tüm sitemizin joomla ile ilgili olan taraflarının genelini bu kodları kullanarak hazırlıyoruz.

1. <?php echo htmlspecialchars($app->getCfg('sitename')); ?> = Sitemizin anabaşlığını otomatik olarak çeken kod 
    
2. <jdoc:include type="modules" name="ornekmodulpozisyonu" style="xhtml" /> = Modül pozisyonunu göstermemize yarayan kod 
    
3. <?php if($this->countModules('ornekmodulpozisyonu')) : ?>   <?php endif; ?> = Modül pozisyonu yoksa, oradaki seçicileri gizlemeye yarayan php kodu. 
    
4. <jdoc:include type="message" /> = Site içi uyarı mesajlarını gösteren kod 
    
5. <jdoc:include type="component" /> = Sitemizin içeriklerini, bileşenleri gösteren kod

<body>
 <div class="anacerceve">
 <h1><?php echo htmlspecialchars($app->getCfg('sitename')); ?></h1>
 
 <?php if($this->countModules('ornekmodulpozisyonu')) : ?>
 <div class="orneksecici">
 <jdoc:include type="modules" name="ornekmodulpozisyonu" style="xhtml" />
 </div>
 <?php endif; ?>
 
 <div class="orneksecici2">
 <jdoc:include type="message" />
 <jdoc:include type="component" />
 </div>
</div>
 </body>
</html>

Buraya kadar index.php dosyamızın içindekileri tanıdık. Şimdi ise tüm css ayarlamalarını yapıldığı css dosyamıza geçelim.

Diğer bölüme geçmek için tıklayınız. >>