Beyaz.Net İpucu
Wordpress Tema Yapımı
1- Giriş :
Her Tema style.css ve index.php olmak üzere 2 ana dizinden oluşmaktadır. Diğer eklenti sayları ile birlikte liste şu hali almaktadır.-
style.css
-
index.php
-
home.php
-
single.php
-
page.php
-
archive.php
-
category.php
-
search.php
-
404.php
-
comments.php
-
comments-popup.php
-
author.php
#---------------------------------------------------------------------------------------------------#
2- Sayfa Düzeni :
Peki Bu Sayfalar Ne İşe Yarar.
- index.php: Temamızın giriş sayfasıdır. Yani siteye ilk girenler bu sayfayı görecektir. - single.php: Temamızın içerik sayfasıdır. Siteye giren kişi herhangi bir yazı açtığında bu sayfa üzerinden yazı gösterilecektir. Bu dosya olmazsa içerik index.php üzerinden gösterilecektir. - page.php: Temamızın sayfaları gösteren kısmıdır. Siteye giren kişi oluşturduğumuz sayfalardan birine girdiğinde bu dosya üzerinden sayfa gözükecektir. Bu dosya olmazsa sayfa index.php üzerinden gösterilecektir. - archive.php: Aynı şekilde bu dosyada arşiv sayfasını gösterir. Bu olmazsa arşiv index.php üzerinden gösterilir. -search.php: Sitemizde arama sonuçlarının gösterileceği sayfadır. Eğer yoksa sonuçlar index.php üzerinden gösterilir. - 404.php: Herhangi bir hata oluştuğunda bu sayfa gösterilir. #---------------------------------------------------------------------------------------------------#
3- Sayfa Yapısı :
#---------------------------------------------------------------------------------------------------#
Header.php
Amacı sayfalarımız <head></head> kodları arasındaki bilgileri içermektir. Bu dosyayı index.php 'nin header kısmını oluştururken kullandığımız kodlarla oluşturacağız. Header kısmı sayfamızın başlığını oluşturacak.
#---------------------------------------------------------------------------------------------------#
Index.php
Sayfamızdaki iceriğin gösterileceği bölüm. Yani yazdığımız yazılar ön sayfada bu dosya ile gösterilecek. Header ile footer arasındaki kodları oluşturacak.
#---------------------------------------------------------------------------------------------------#
Sidebar.php
Sayfamızın sağ veya soldaki menülerini içeren sayfa. Bunu da "header.php" gibi "index.php"'den ayrıacağız.
#---------------------------------------------------------------------------------------------------#
Footer.php
Sayfamızın alt bilgilerini içeren sayfa. Bunu da diğerleri gibi index.php'den ayıracağız.
#---------------------------------------------------------------------------------------------------#
Eğer bir içeriğin ayrıntılarını görüyorsak yapı aşağıdaki gibi olacak. Yani yazımız "single.php" üzerinden gösterilecek. Diğer dosyalar aynı şekilde kalacak. Eğer single.php oluşturmazsak yazıların ayrıntısı index.php üzerinden gösterilir
4- Kodlama:
Öncelikle wordpress'te "wp-content/themes/" dizinine yeni bir klasör oluşturuyoruz. İsmini temanıza ne isim verecekseniz değiştirebilirsiniz. Ben 'ahmet' dedim
Sonra yönetici bölümüne geliyoruz. - Tasarım kısmına giriyoruz. Orada temamıza ayrılmış kısmı göreceğiz. - Sonra yeni temayı etkinleştiriyoruz. - Ve kodlamaya başlıyoruz.
#—————————————————————————————————#
/dosya.css Temamızın style.css dosyasının url sidir. [php]/dosya.css[/php] eğer başka stil dosyası eklemek istersek bu kodu girmemiz gerekir.komutu wordpressin versiyonu,ismi,rss urlsi,tema dizini,css dizini vs. gibi şeylerin gösterilmesinde kullanılır.
#—————————————————————————————————#
kodunu kullanıyoruz. Görünümü aşağıdaki gibi.
#—————————————————————————————————#
Şimdi bu yazıyı büyütüp anasayfa linkini verelim.
Şimdi blogumuzun açıklamasını ekleyelim. Açıklamayı 'description' koduyla sağlıyoruz
#—————————————————————————————————#
bloginfo ('name'); ?>
Şimdi <div> taglarıda katalım. Div tagındaki değişikliği style.css dosyasındaki kodlarla sağlarız. Header isimli bir div oluşturup bu kodları header divinde gözükecek şekilde yerleştirelim. Küçük bir not. Div taglara isim verirken id ve class arasındaki farka dikkat edin. Id sadece bir kere kullanılmaya izin verir. Class ise sınırsız kullanılabilir
bloginfo ('name'); ?>
Şimdi İçeriği gösterelim.Aşağıda yazacağımız kodları "header" divinin altına ekliyoruz. ID olarak isim verdik çünkü container aynı sayfada bir kez kullanılacak.
#—————————————————————————————————#
ADIM-1(div) id si container olan bir div tag açalım [php]
#—————————————————————————————————#ADIM-2 (döngü)
Şimdi container içine alttaki kodu ekliyoruz. [php] [/ph
Yazdığımız kodun açıklaması
-
if(have_posts()) - koduyla sayfada herhangi bir yazı olup olmadığını kontrol ettik.
-
while(have_posts()) - kodu eğer sayfada herhangi bir yazı varsa bu yazı(ları)yı göstermeye başlar. Bir döngü halinde.
-
the_post() - kodu ise yazıyı ekrana sunar
-
endwhile; - while döngüsünü durdurur. İlk dersimizdeki kural-1 Açtığın kodu hemen kapat.
-
endif; - if döngüsünü durduru. İlk dersimizdeki kural-1 Açtığın kodu hemen kapat. İçeriği alt alta sıralayacak olan while döngüsüdür. if sadece kontrol amaçlıdır.
#—————————————————————————————————# ADIM-3 (icerik başlığı)
İcerik başlığını göstermek için <?php the_title(); ?> kodunu kullanıyoruz. Bu kodu ...the_post(); ?> ile <?php endwhile; ?> arasına yazıyoruz. 
Görünümü aşağıdaki gibi olacak fakat başlıklar yan yana. 
#—————————————————————————————————# #Yanyana olmasını engellemek için H3 tagını kullanacağım. #Ardından içeriğin linkini vermek için [b]<?php the_permalink(); ?> kodunu kullanacağım. 
En son görünümü aşağıdaki gibi oldu.
Bundan Sonrası Tamamen Hayal Gücünüze ve Tasarım Bilginize Kalmıştır . .
#—————————————————————————————————#