Drupal temaları

Arkadaşlar merhaba,

Bildiğiniz gibi kullanışlı, bir web sitesinin daha fazla ziyaretçi çekebilmesi için içerik olarak zengin olması kadar çekici bir tasarıma da sahip olması gerekmekte. İyi bir web sitesi için arka planda çalışan güçlü bir veritabanı, içeriğinizle doğru orantılı yazılar kadar kullanışlı ve tasarım açısından güçlü temalarada ihtiyaç vardır. Artık temalar ayrı bir sektör oldu diyebiliriz. Drupal kurulumu ile birlikte gelen temalar haricinde sadece Drupal için değil tüm İçerik Yönetim Sistemleri (Content Management System - CMS) için hazırlanan temalar vardır. Bu temaları İçerik Yönetim Sistemlerinin resmi web sitelerinde bulabileceğiniz gibi bir çok web sitesi legal ve illegal bir şekilde dağıtıyor.

Öncelikle Drupal kurulumu ile birlikte gelen standart temaları konuşalım. Standart gelen temalara Yönet - Site kurulumu - Temalar sayfasından ulaşabilirsiniz. Burada Bluemarine, Chameleon, Garland, Marvin, Minnelli ve Pushbutton isimli temaları görebilirsiniz. Yine bu tablo içinde temaların versiyon numaralarını görebilirsiniz. Buradaki Etkin kutucuğu ile 1'den fazla temanın Etkin olması sağlanır ancak sadece Varsayılan işaretine sahip olan tema web sitenizin teması olarak seçilir. 1'den fazla etkin tema sayesinde site kullanıcılarının kendilerine özgü tema kullanabilmelerini sağlayabiliriz.

Bu sayfada temaların bir listesini görebileceğimiz gibi Listele linkinin yanındaki Ayarla linki tıklanarak hem tüm temalarda geçerli olmasını istediğiniz ayarları hem de Etkin olarak işaretli olan temaların kendilerine özgü ayarları düzenleyebilirsiniz. (Etkin olan temanın satırında bulunan ayarlar linkini tıklarsanız sadece o temaya ait düzenlemeler yapabileceğiniz bir sayfa açılacaktır. Ancak sayfanın üst kısmındaki Ayarla sayfasından yapılan düzenlemeler Etkin olan tüm temalar için geçerli olacaktır.)

Standart olarak gelen temalara ait klasörler Drupal kurulum klasörü altındaki themes altındadır. Eğer sizde Drupal kurulumu esnasında Drupal'e ait dosyaların bulunduğu klasörün ismini benim gibi Drupal olarak verdiyseniz, standart olarak gelen temalara ait klasörlerin tam yolu C:\wamp\www\drupal\themes klasörüdür.

Açık söylemek gerekirse Drupal şu anda rakipleri (Bence rakip olamazlar..) Joomla ve Wordpress kadar çok geniş bir tema yelpazesine sahip değil. Ancak son zamanlarda Drupal kullananların sayısındaki ciddi artış sonrasında tema yazan yazılım firmalarınında dikkatini çekti. Bu firmalardan bazıları,

• Adaptive Themes
• Antsin
• P Template
• Rocket theme
• Sooper Themes
• Template Monster
• Topnotch themes
• Woot Themes

Tabi bu ücretli tema siteleri haricinde ücretsiz tema dağıtan firmalarda var. Ancak malesef bu firmaların yaptığı gibi profesyonel görünümlü ve zengin block region (Blok bölgesi) sahibi değiller. Ancak Drupal'in resmi sitesinde de tasarımı güzel, kullanışlı temalar var. Bu temalara http://drupal.org/project/themes adresinden ulaşabilirsiniz. Biz de bu yazımızda buradaki temalardan Amity Island (http://drupal.org/project/amity_island) isimli tema üzerinde çalışacağız. Oldukça güzel ve kullanışlı bir tema. 14 adet blok bölgesi barındırıyor. Bu da zengin içerikli bir web sitesi yaratılmasını kolaylaştırıyor.

Öncelikle http://drupal.org/project/themes adresini ziyaret ederek temaların bulunduğu sayfaya göz gezdirmenizi tavsiye ederim. Bu sayfanın sağ üst köşesinde bulunan Sort by bölümünden temaların alfabetik, yayınlanma tarihi veya kullanılma istatistiklerine göre sıralayabilirsiniz. Hemen alt kısımdaki Search themes arama satırı ile tema arayabilirsiniz. Ayrıca Filter by compatibility bölümündeki Drupal versiyonlarına göre filtreleyebilirsiniz. Bu önemli, zira Drupal versiyonunuza uygun temalar kullanmalısınız.

Temaları incelerken beğendiğiniz temayı kullanmak için download ederken dikkat etmeniz gereken konu yukarıda da yazdığım gibi download edeceğiniz temanın Drupal versiyonunuza uygun olması gerekiyor. Bunu tema anasayfasında ve beğendiğiniz temanın başlığını tıklayarak ulaşabileceğiniz temanın kendi sayfasında görebileceğiniz tabloda görebilirsiniz. Kırmızı satırdaki temalar şu anda hala yapım aşamasında olup kullanıma hazır olmayan temalardır. Sadece test amaçlı kullanılmasında, yayında olan bir web sitesinde kullanılmamasında fayda vardır. Drupal versiyonuna uygun olan ve yeşil renkli satırda bulunan temayı çekmelisiniz. (Aynısı Eklentiler içinde geçerlidir.)

Sıra geldi beğendiğimiz bir temayı Drupal sitemize entegre etmeye. Burada unutulmaması gereken en önemli nokta, Internet üzerinden download edeceğimiz yeni temaları standart gelen temaların olduğu klasöre değil de Sites\All klasörü altında yeni oluşturacağımız themes isimli klasör altına koymamız gerektiği. Eğer drupal kurulumunuzu sizde benim gibi C:\wamp\www\ klasörünün altına drupal isimli klasör ile yaptıysanız temalarınızı koymanız gereken klasör yolu şu şekilde olmalıdır,

C:\wamp\www\drupal\sites\all\themes

Bunu all isimli klasör altında kurulumda esnasında gelen README.txt dosyasında da okuyabilirsiniz. Internetten çektiğimiz temalar sites\all\themes klasörü altında, Eklentiler ise sites\all\modules klasörü altında olmalı. (Standart gelenler mevcut yerlerinde kalacak, o dosyaları bu klasörler altına taşımanıza gerek yok)

İşe http://drupal.org/project/amity_island adresinden Amity Island temasını download etmekle başlayalım. Temanın dosyaları sıkıştırılmış bir dosya halinde download edildikten sonra belirlediğiniz bir klasöre açınız. Açılan bu dosya ismi genelde temanın ismidir. Bizim dosyanın ismi de amity_island. Bu klasörü C:\wamp\www\drupal\sites\all\themes altına kopyalayalım ve Internet tarayıcımız ile Yönet - Site kurulumu - Temalar sayfasına gidelim. Temalar listesinde Amity Island temasını görüyor olmamız lazım. Şimdi bu temayı etkileştirelim. Bunun için Etkin ve Varsayılan seçeneklerini işaretleyerek sayfanın alt kısmında yeralan Ayarları kaydet'i tıklamamız yeterli.

Tema geçerli hale geldikten sonra sayfanın üst bölümünde,

Şu anda kurulu eklenti ve temaların muhtemel yeni sürümleri hakkında bilgi yoktur. Güncellemeleri kontrol etmek için, dönemsel görevleri çalıştırabilir ya da elle kontrol uygulayabilirsiniz. Lütfen mevcut güncellemelerin kontrolunun uzun bir zaman alabileceğini dikkate alarak sabırlı olun.

şeklinde bir uyarı görebilirsiniz. Bunun anlamı web sitemizde kullandığımız Drupal versiyonunun ve yüklü olan eklenti ile temaların yeni versiyonlarının olup olmadığını sistem bilmek istiyor. Bunun kontrol edilmesi için "dönemsel görevleri çalıştırabilir" linkini tıklamanız yeter. Şu an için bunun bir önemi yok tıklamasanızda olur. Ama kullandığınız eklentiler arasında Poormanscron isimli eklenti varsa bunu sizin yerine yapacaktır zaten. Bu konuda daha detaylı bilgi için Eklentiler bölümününde açıklanan Poormanscron eklentisini okuyabilirsiniz.

Artık sitemiz yeni temasıyla kullanıma hazır durumda.

Şimdi gelelim tema ayarlarına. Az öncede yazmış olduğum gibi Etkin olan tüm temalarda geçerli olmasını istediğimiz ayarlar için Yönet - Site kurulumu - Temalar (http://localhost/drupal/admin/build/themes) sayfasının üst kısmındaki Ayarla sayfasında bulunan Genel ayarlar sekmesini kullanabiliriz. Ancak temaya özgü bir düzenleme istiyorsak (Örneğin her temada farklı logolar görüntülensin istiyorsak) bu durumda Genel ayarlar sekmesinin yanındaki tema isimlerini tıklayarak erişeceğimiz sayfada veya direk Temalar sayfasındaki liste görünümünde Etkin olarak işaretlenmiş temaların satırında bulunan ayarla linkini tıklayarak değişiklikler yapmalıyız.

Ben, Genel ayarlar'ı (Global settings) tıklayarak devam ediyorum. Buradaki ayarları inceleyelim,

Görünümü aç/kapa (Toggle display)

• Logo (Logo): Sitemize ait bir logo varsa bunun görüntülenip görüntülenmeyeceğini belirlememizi sağlar. Eğer bir logo yüklemek isterseniz alt bölümdeki Logo resmi ayarlar sekmesini kullanabilirsiniz. İşaretli bırakıyorum.
• Site adı (Site name): Drupal kurulumu esnasında yazdığımız site adını değiştirebilmemizi sağlar. Eğer bu yazıyı değiştirmek isterseniz Yönet - Site ayarları - Site bilgisi sayfasında bulunan İsim satırındaki yazıyı değiştirebilirsiniz. Ben bu yazıyı kurulum esnasında Drupal olarak yazmıştım şimdi Barcelona olarak değiştiriyorum. Seçeneği de işaretli bıraktım.
• Site sloganı (Site slogan): Sitenize ait bir slogan varsa ve bunun görüntülenmesini istiyorsanız işaretleyiniz ve sloganınızı Yönet - Site ayarları - Site bilgisi sayfasında bulunan Slogan satırına yazınız ve kaydediniz.
• Site amaç metni (Mission statement): Sitenizi varoluşuna ilişkin bir yazı görüntülenmesini istiyorsanız işaretleyiniz ve Yönet - Site ayarları - Site bilgisi sayfasında bulunan Sitenin Amacı kutusuna ne istiyorsanız yazınız ve kaydediniz. Gerek görmediğim için işareti kaldırıyorum.
• Gönderilerde kullanıcı resmi (User pictures in posts): Foruma yazıyı gönderen kişinin avatar'ın görüntülenmesini sağlar. (Aktif hale gelmesi için Yönet - Kullanıcı yönetimi - Kullanıcı ayarları sayfasında bulunan Resimler sekmesindeki Resim desteği'nin etkin hale getirilmesi gerekmektedir.)
• Yorumlarda kullanıcı resmi (User pictures in comments): Yorum yazan kişinin avatar'ın görüntülenmesini sağlar.(Aktif hale gelmesi için Yönet - Kullanıcı yönetimi - Kullanıcı ayarları sayfasında bulunan Resimler sekmesindeki Resim desteği'nin etkin hale getirilmesi gerekmektedir.)
• Arama kutusu (Search box): Site içi arama yapılabilmesini sağlar. Etkin olabilmesi için Yönet - Site kurulumu - Eklentiler sayfasındaki Çekirdek - tercihe bağlı eklentiler listesindeki Search eklentisini aktif hale getirmelisiniz. Daha sonra da Yönet - Site kurulumu - Bloklar sayfasında Devre dışı bölümündeki Arama formu isimli bloğu temanızdaki istediğiniz yerde görüntülenmesi için düzenlemelisiniz.(Bloklar konusunda bilginiz yoksa bloklar sayfasını ziyaret edebilirsiniz.)
• Kısayol simgesi (favicon) (Shortcut icon): Internet tarayıcımızın adres satırının solunda sitemiz hakkında bir ikon görüntülenmesini sağlar. Görüntülenmesini istediğimiz ikonu biraz aşağıdaki Kısayol simgesi ayarları sekmesinden ayarlayabiliriz.
• Birincil linkler (Primary links) : Web sitemizin birincil linkler menüsünde yer alan linklerin görüntülenip görüntülenmeyeceğini belirlememizi sağlar.
• İkincil linkler (Secondary links) : Web sitemizin ikincil linkler menüsünde yer alan linklerin görüntülenip görüntülenmeyeceğini belirlememizi sağlar.

Gönderi bilgilerinin görüntüleneceği türler:

Buradaki seçenekler temaya özgü seçeneklerde olmayacaktır. Ayrıca buradaki seçeneklerin sayısı web sitemizdeki içerik türlerinin sayısıyla aynı sayıdadır. Amacı, içerik türlerini hazırlayan kişilerin isimlerinin ve içerik türünü hazırladığı zaman bilgilerinin içerik türlerinin yayınlandığı sayfada görüntülenmesini veya görüntülemesinin engellenmesini sağlar. Varsayılan olarak Sayfa içerik türünde bu pasif, Makale içerik türünde ise aktif durumdadır. Bu da Sayfa ve Makale içerik türleri arasındaki ufak farklardan birisidir. (Yeni yaratılan içerik türleride varsayılan olarak bu seçenek işaretlidir.)

Logo resmi ayarları (Logo image settings)

• Varsayılan logoyu kullan (Use the default logo): Eğer herhangi bir logo kullanılmazsa varsayılan logonun kullanılmasını sağlar.
• Özel logonun yolu (Path to custom logo): Logonuzun bulunduğu lokasyonun adresi. Alttaki satırdan bilgisayarımızdaki bir resmin logo olarak kullanılabilmesi sağlanır.
• Logo resmini yükle (Upload logo image): Bilgisayarımızdaki bir resmi logo olarak kullanabilmemizi sağlar. (Bu resmi sites/default/files/ klasörü altına ismini temanın ismi olacak şekilde değiştirerek atar)

Kısayol simgesi ayarları

Internet tarayıcımızın adres satırının solunda sitemiz hakkında bir ikon görüntülenmesini sağlar. Görüntülenebilmesi için yukarıda açıklandığı gibi Kısayol simgesi kutucuğunun işaretli olması gerekmekte.

• Varsayılan kısayol simgesini kullan: Eğer herhangi bir simge kullanılmazsa varsayılan logonun kullanılmasını sağlar.
• Özel simgenin yolu: Simgemizin bulunduğu lokasyonun adresi. Alttaki satırdan bilgisayarımızdaki bir resmin simge olarak kullanılabilmesi sağlanır.
• Simge resmini yükle: Bilgisayarımızdaki bir resmi simge olarak kullanabilmemizi sağlar. (Bu resmi sites/default/files/ klasörü altına ismini temanın ismi olacak şekilde değiştirerek atar)

Ayarları Kaydet'i tıklayarak web sitemizin yeni görüntüsünü ekranda görebiliriz.

Bunların haricinde kendinizde Tema hazırlayabilirsiniz. Bunun için öncelikle Drupal tema yapısını öğrenmelisiniz. Bunun için http://drupal.org/theme-guide adresini ziyaret ederek işe başlayabilirsiniz. Ayrıca Zen teması ile alt temalar yaratabilirsiniz. Bu konuda çok fazla sayıda makale ve video bulabilirsiniz.

Tema yapımı için Lullabot'un çok güzel videoları var. İncelemenizi tavsiye ederim.

İyi çaışmalar.