Joomla İçerik Başlık Simgesi Kullanımı

Geçen gün forumda bir üyenin sorması üzerine hatırladım ki, Joomla içerik başlıklarında başlık simgeleri kullanımı ile ilgili bir yazı yazmaya karar vereli çok olmuştu. Hatta bunu yap.txt dosyasına not etmem bile sanırım 6 ay olmuştur. Konumuz içerik başlığında “başlık simgesi” kullanmak ile ilgili. Hani şu “yeni” ya da “dikkat” yahut “video” gibi uyarı simgeleri görürüz bazı sitelerde başlıkların önünde, işte bunları Joomla içeriğinizde de kullanmak, içeriği kaydederken kullanılacak simgeyi seçmek elinizde.

Bunun birkaç yolu olsa da daha çok kontrol edilebilen ve sadece dilediğimiz başlıkta kullanacağımız yöntemi kullanacağız. Bu konunun anlatımı şu adreste yapılmıştı.

Öncelikle örnek verilerimizi oluşturmalıyız. İlk etapta İçerik isimli bölümümüzü oluşturalım. Bu bölüme 3 kategori ekleyelim. Kategorilerimiz de örneğin Sıcak Haber, Video Haber, Spor olsun.

Şimdi components/com_content/category/blog.xml dosyasını açalım. Dosyada başlık simgelendirmesini parametrelere bağlayarak işimizi kolaylaştıracağız. Bu kısım Gelişmiş Ayarlamalar kısmında gözükür. <advanced> etiketinin altında aşağıdaki eklemeyi yapalım:

<param name="baslik_simgesi" type="text" default="" label="İçerik Simgelendirmesi" description="İçerik başlığını etkileyecek kategori sinıfını ekleyin."/>

Bundan sonra sıra temamızın umursamazlık dosyalarını düzenlemeye, eğer yoksa oluşturmaya geldi. Umursamazlık ile ilgili daha evvel çeşitli yerlede açıklamar yapmıştık. Sitede de geniş şekilde yer vereceğim inşeallah. Eğer temanızın bir umursamazlık dizini varsa çalışmayı onun içindeki içerik dosyalarında yapacağız. Böyle bir dizin yoksa yapmanız gereken şey varsayılan tema klasörünüzün içinde html isimli bir dizin oluşturmak. u dizin hiyerarşik olarak bulunruduğu klasörlerle birlikte şu şekilde olmalı:

html/com_content/article

html/com_content/category

Umursamazlık özelliklerini oluşturmak için içerik gösterimini yapan çekirdek dosyalarımızdan bize lazım olanları kopyalayacağız. Joomla dizininizdeki components/com_content/views/category/tmpl/blog_item.php dosyasını templates/aktiftemanız/html/com_content/category/ içine kopyalayın. Şimdi yeni dosyayı açarak şurayı bulun:

12
13
14
15
16
17
18
19

<td class="contentheading<?php echo $this->item->params->get( 'pageclass_sfx' ); ?>" width="100%">
 <?php if ($this->item->params->get('link_titles') && $this->item->readmore_link != '') : ?>
 <a href="/<?php echo $this->item->readmore_link; ?>" class="contentpagetitle<?php echo $this->item->params->get( 'pageclass_sfx' ); ?>">
	<?php echo $this->escape($this->item->title); ?></a>
 <?php else : ?>
	<?php echo $this->escape($this->item->title); ?>
 <?php endif; ?>
 </td>

Şununla değiştirin:

12
13
14
15
16
17
18
19
20
21

<td class="contentheading<?php echo $this->item->params->get( 'pageclass_sfx' ); ?>" width="100%">
 <?php if ($this->item->params->get('link_titles') && $this->item->readmore_link != '') : ?>
 <a href="/<?php echo $this->item->readmore_link; ?>" class="contentpagetitle<?php echo $this->item->params->get( 'pageclass_sfx' ); ?>">
	<span class="<?php echo $this->params->get( 'baslik_simgesi' ); ?>"></span>
	<?php echo $this->escape($this->item->title); ?></a>
 <?php else : ?>
	<span class="<?php echo $this->params->get( 'baslik_simgesi' ); ?>"></span>
	<?php echo $this->escape($this->item->title); ?>
 <?php endif; ?>
 </td>

Aynı şekilde işlemi article/default.php dosyası için yapmamız lazım. components/com_content/views/article/tmpl/default.php dosyasını templates/aktiftemanız/html/com_content/article/ içine kopyalayın ve aşağıdaki kısmı bulun:

15
16
17
18
19
20
21
22

<td class="contentheading<?php echo $this->params->get( 'pageclass_sfx' ); ?>" width="100%">
	<?php if ($this->params->get('link_titles') && $this->article->readmore_link != '') : ?>
	<a href="/<?php echo $this->article->readmore_link; ?>" class="contentpagetitle<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
	     <?php echo $this->escape($this->article->title); ?></a>
	<?php else : ?>
	     <?php echo $this->escape($this->article->title); ?>
        <?php endif; ?>
</td>

ve şununla değiştirin:

15
16
17
18
19
20
21
22
23
24

<td class="contentheading<?php echo $this->params->get( 'pageclass_sfx' ); ?>" width="100%">
	<?php if ($this->params->get('link_titles') && $this->article->readmore_link != '') : ?>
	<a href="/<?php echo $this->article->readmore_link; ?>" class="contentpagetitle<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
	   <span class="<?php echo $this->params->get( 'baslik_simgesi' ); ?>"></span>
	   <?php echo $this->escape($this->article->title); ?></a>
	<?php else : ?>
	   <span class="<?php echo $this->params->get( 'baslik_simgesi' ); ?>"></span>
	   <?php echo $this->escape($this->article->title); ?>
	<?php endif; ?>
</td>

Fazla bir şey kalmadı. Sırada css dosyamız var. Aktif temamızın css dosyasına ekleme yapacağız. Eğer aktif temamızın birden fazla css dosyası varsa biz varsayılan css dosyasına ekleme yapacağız. Varsayılan css dosyası şuradadır: templates/aktiftemanız/css/template.css . Bu dosyayı açın ve aşağıdaki sitilleri aynen kopyalayıp ekleyin:

span.sicakhaber {
 background: url(../images/sicak.png) no-repeat 0px 5px;
 width: 16px;
 height: 16px;
 display: block;
 float: left;
 }
 span.videohaber {
 background: url(../images/kamera.png) no-repeat 0px 5px;
 width: 16px;
 height: 16px;
 display: block;
 float: left;
 }
 span.spor {
 background: url(../images/spor.png) no-repeat 0px 5px;
 width: 16px;
 height: 16px;
 display: block;
 float: left;
 }

Tabii burada belirttiğimiz resim dosyalarını oluşturup temanızın images dizinine koymanız lazım. Hazırlanacak resim dosyaları sicak.png , kamera.png ve spor.png oacak. Resimleri içerik başlıklarınıza uygun bir boyutta hazırlayarak css dosyasındaki width ve height değerlerini de buna göre düzenlemelisiniz. Aslında ben 16*16 px ölçülendirmiş olsam da siz farklı yapabilirsiniz. Bir simge dosyası için ideal boyutlar 16*16, 24*24, 32*32 piksel ve 32 bit şeffaf png olacaktır. Aynen favicon dosyası gibi.