XHTML/CSS Tasarımı Wordpress e Uyarlamak
Efenim Merhabalar;
Sizlerle XHTML/CSS siteleri Wordpress‘e göre uyarlamayı paylaşacağım. Oldukça basit bir şekilde anlatmaya çalışacağım. Basit olacağı için çok fonksiyonlu bir şey olmayacak doğal olarak. Ama ilerleyen yazılarda üzerine değişik fonksiyonlar ekleyebiliriz birlikte.
Başlarken
İlk olarak temanızın adında bir klasör oluşturun. Ve style.css dosyanızı içine kopyalayın. Temanızın stil bilgilerini içeren style.css de tek bir düzenleme yapacağız. Tema seçerken gördüğümüz Tema Bilgilerinin olduğu kısmı tanımlayacağız. Aşağıdaki kodu kendinize göre düzenleyip style.css dosyanızın en başına kopyalayın.
/*
Theme Name: Buraya Tema Adınızı Yazacaksınız.
Theme URI: Tema’nızın Websitesi
Description: Temanız Hakkında Kısa Açıklama.
Version: Tema Versiyonu
Author: Siz
Author URI: Sizin Websiteniz
*/
Bu bilgiler temanızın bir nevi kimlik kartı gibi olacak.
Ana Dosyalarımızı Oluşturalım
4 tane dosya ile bir Wordpress teması oluşturulabilir. Bu dosyalar index.php, header.php, sidebar.php ve footer.php. Sizin elinizdeki XHTML temada bunlarınh hepsi index.html dosyasında. Biz bunları olması gereken şekilde ayırıp, Wordpress için gerekli olan dosyaların içine atacağız. Ayırım işlemini şu şekilde yapacağız;
Daha iyi anlayabilmeniz için yandaki resimde header, index, sidebar ve footer bölümlerini belirttim. Sizin temanızda buna benziyordur kesin. Çoğu tema 4 ana bölümden oluşur.
Azcık PHP
Şimdi elimizde 4 tane(index.php, header.php, sidebar.php, footer.php) dosya var bizim ayırdığımız(Birde style.css dosyamız var tabii). Bu dosyalar basit bir Wordpress teması için yeterli. Bir temada Ana dosya index.php dir ve biz bu dosyayı açıp bazı PHP kodlar yazacağız. Bu Fonksiyonlar, daha önceden tanımlanmış fonksiyonlardır ve temamızın ana dosyasına(index.php) header‘ı, sidebar‘ı ve footer‘ı çağıracak. Şöyleki index.php dosyamızın içindeki kodların en başına <?php get_header(); ?> yazıyoruz, en sonuna ise;
<?php get_sidebar(); ?>
<?php get_footer(); ?>
kodlarını ekliyoruz. Bunlarda anlayabileceğiniz gibi ana dosyamıza header.php ile birlikte sidebar.php ve footer.php yi çağırıyor. Bu halde Görünüm kısmından temamızı aktifleştirsek sorunsuz olarak çalışır ama yazılarımız görünmez, onun yerine index.php mizin içindeki, index.html den ayırdığımız içerik kısmı görünür.
Döngüyü Kuralım
Sona yaklaşırken, asıl yazılarımızın index.php de görünmesini sağlayacağız. Wordpress’in yapısı gereği kolay olan kodları ile bu işide çok kolay bir şekilde halledeceğiz. Bir döngü oluşturarak, bir fonksiyon ile veritabanımızdaki içeriği index.php de göstereceğiz. Size teker teker kod vermektense en yalın halini bulabileceğiniz bir yer söleyeyim. wp-content/themes/classic/ yani Classic temasının index.php sini açın. Başında sizinki gibi header çağrılır, sonunda ise sidebar ve footer. Şimdi ilk olarak kendi index.php mizdeki içerik kısımlarını silelim. Elimizde sadece lazım olacak main tablo olduğunu belirtecek <div> tagları kalsın. Daha sonra Classic temasının index.php sindeki header, sidebar ve footer çağıran fonksiyonlar arasındaki bölümü kendi index.php mize kopyalayalım. Gerekli yerleri temanızın style dosyasına göre düzenleyin.(Örn: Başlık <h3> olsun vs.) Ve kaydedip, çıkın.
Bitirirken
Sona geldik, şuan elimizde sorunsuz olarak çalışacak basitde olsa bir tema var. Temazını aktifleştirin ve başarınızı görün. Baştada söylediğim gibi çok basit bir çalışma. 0(sıfır)dan başlayanlar için anlaşılır bir yazı olduğunu düşünüyorum. İlerleyen yazılarımda sidebar nasıl widget destekler hale getirilir, temada başka ne gibi fonksiyonlar kullanılır ve şuan döngüde kullandığımız fonksiyonların ne işe yaradıklarından bahsedeceğim. Siz de Codex‘i okuyarak Wordpress hakkında bilgi edinebilirsiniz. Paylaşımımda yanlış kullandığım, eksik söylediğim, bilmediğim şeyler olabilir veya sizin yapamadığınız şeyler olabilir. Yorumlar kısmından bana iletebilirsiniz.
Teşekkürler.
Yazar Hakkında: Alisko, 19 Yaşında ve İzmir'de hayatını sürdürüyor. İzmir de bir üniversitede Bilgisayar Mühendisliği dalında öğretimine devam ediyor.
www.eylos.com | 6 Nis 2008 22:42 | Cevap Ver
Zorla insana kod öğreteceksiniz yani… Güzel bilgi teşekkür ederiz.
turklerklani | 6 Nis 2008 22:46 | Cevap Ver
Süperrr abi senden bekliyordum böle yazıyı
devam teşekkürler
Alisko | 6 Nis 2008 23:29 | Cevap Ver
@eylos
hayatta kalacak kadar herkese lazım. sağol
@turklerklani
sağol teşekkürler dostum.
Pınar Altuntaş | 7 Nis 2008 15:26 | Cevap Ver
Eylos’a katılıyorum !
Al benden de o kadar işte
Alisko | 7 Nis 2008 22:13 | Cevap Ver
pınar hanım dediğim gibi ucundan bilmekde gerekiyor
henster | 7 Nis 2008 22:49 | Cevap Ver
Bu biraz karışık gibime geldi. Biz en iyisi tek satırlık eklenti yazalım ali.
Vehbi | 9 Nis 2008 08:21 | Cevap Ver
Güzel bir paylasım olmuş ellerine sağlık.Dahada basitleştirilebilir.
Pınar Altuntaş | 10 Nis 2008 13:40 | Cevap Ver
Haklısın!
mizah | 5 Haz 2008 10:25 | Cevap Ver
teşekkürler arkadaşım en kısa zamanda dediklerini uyguluycam
BursRehberim | 20 Haz 2008 12:04 | Cevap Ver
İhtiyacım olan bilgi buydu.
Çok teşekkürler..
Sohbet | 22 Haz 2008 15:24 | Cevap Ver
tesekkur ederim paylasim icin..