WordPress Temanızı Kendiniz Yapabilirsiniz

Sizlere basit olarak WP teması nasıl yapılır onu anlatmaya çalışacağım.

WordPress tema yapmak için HTML kodlarından yararlanarak yapacağım. Bunun için daha hızlı olsun diye Visual Studio dan ve daha sonra Notepad++ dan yararlanacağım.

Öncelikle Visual Studioda bir proje oluşturuyorum. Siz başka editörde kullanabilirsiniz.

Bir adet html dosyası oluşturdum ve adını index.html belirledim.

<body></body>  tagleri arasına bir div oluşturuyorum ve id govde olarak belirliyoruz. Bu div tüm sayfanın gövdesini oluşturacaktır.

Bundan sonra sayfanın gövdesi içerinde bulunacak bölümleri yani divleri de yazıyoruz ve şu şekilde oluşuyor.

index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

</head>

<body>

<div id="govde">



<div id="header"></div>

<div id="index"></div>

<div id="sidebar"></div>

<div id="footer"></div>



</div>

</body>

</html>

Site yapısı genel olarak bu şekilde olacaktır.

Header div içine firma bilgileri yazılsın

<div id="header">

<h1><span>Firma Adı</span></h1>

<h2><span>Firma Sloganınız</span></h2>

</div>

 

Sayfanın index olarak belirlediğimiz yazı bölümü için deneme birkaç yazı yazıyoruz.

<div id="index">

<b>Birinci Başlık</b><br/>

<p>Yazının içeriği Yazının içeriği Yazının içeriği

Yazının içeriği Yazının içeriği Yazının içeriği

Yazının içeriği Yazının içeriği Yazının içeriği

</p>

<b>İkinci Başlık</b><br/>

<p>Yazının içeriği Yazının içeriği Yazının içeriği

Yazının içeriği Yazının içeriği Yazının içeriği

Yazının içeriği Yazının içeriği Yazının içeriği

</p>

</div>

Sayfanın sağında bulunan sidebar için menüyü oluşturuyoruz. Burada link vermiyorum. Daha sonra isteğinize göre sayfa açarak href=” ” çift tırnak içeriğini doldurabilirsiniz.

<div id="sidebar">

<ul>

<li><a href="">Anasayfa</a></li>

<li><a href="">Kategoriler</a></li>

<li><a href="">İletişim</a></li>

<li><a href="">Hakkımda</a></li>

</ul>

</div>

Yazıları sağa ve sola yaslama işlemi yaptıktan sonra ekranda kayma olmaması için stil dosyasından clear özelliğini çağıracağız. Bunun için son kullanılan floattan sonra bir div açıyoruz.

<div class="temizle"></div>

 

Sayfamızda son olarakta footer yani alt bölümü yapıyoruz.

<div id="footer">&COPY Copyright 2017 - TrKaynak.com</div>

 

Ve sayfamız genel olarak bu şekilde tasarlıyoruz.

 

Style.css

Bundan sonra sayfamızın görünümünü elde etmek için bir stil dosyası oluşturuyoruz ve adını style.css olarak kayıt ediyoruz.

Sayfanın üstte ve alttan boşluk için body 5px verdim siz değiştirebilirsiniz de

body {

margin:5px;

padding:5px;

}

Gövdesi için

#govde {

width:600px;

height:780px;

margin:0 auto;

}

Header yani başlık bölümü için ayarlarımızı kullanıyoruz.

#header {

text-align:right;

height:230px;

background:url("1.jpg") no-repeat;

border-bottom:15px solid #fff;

}

Başlıkta kullandığımız firma yazıları için stilimizi oluşturuyoruz. Ben değişiklik belli olsun diye kırmızı yaptım.

#header h1, h2 {

color:red;

padding:10px;

text-align:center;

}

Yazıların bulunduğu bölüm için index div açmıştık buranın stil kodları için

#index {

background-color:#e1e4c7;

width:400px;

height:500px;

font-family:Arial;

font-size:11px;

padding:10px;

float:left;

}

Sayfanın sağında bulunan sidebar için

#sidebar {

float:right;

background-color:#abaf8a;

width:180px;

height:520px;

}

Sidebar içeriğini biraz görsellik ekliyoruz

#sidebar li {

list-style-type:circle;

}

#sidebar a {

text-decoration:none;

color:#fff;

font-family:Arial;

font-size:12px;

}

#sidebar a:hover {

color:red;

}

Sayfa stilinde float kullandığımız için düzen bozulmaması amacıyla clear özelliğini kullanıyoruz.

.temizle {

clear:both;

}

Son olarakta alt bölümün footer özelliklerini belirliyoruz.

#footer {

text-align:center;

background-color:#abaf8a;

border-top:solid 15px #fff;

}

Tasarladığımız basit bir sayfaydı ve görüntüsü şu şekilde olacaktır.

 

WordPress Tema Oluşturmaya Giriş

Bir klasör oluşturuyoruz ve adını OzelTema yapıyoruz. Klasör içine oluşturduğumuz style.css ve header için yaptığımız resim dosyasını koyuyoruz.

Sayfamızı WordPress entegre etmek için olması gereken dosyaları oluşturacağız.

Bunun için metin belgesi oluşturuyoruz ve uzantısını php olarak kayıt ediyoruz. Bunu nasıl yapacağız oluşturduğumuz OzelTema klasörü içerisinde fareye sağ tıklayarak yeni metin belgesi diyoruz. Dosya adını header uzantısınıda php olarak kayıt ediyoruz. Daha sonra header.php dosyasını kopyala yapıştır ile iki dosya daha yapıyoruz ve bunların adı da index ve footer yapıyoruz.

Şuan elimizde olan dosyalar

Header.php

index.php

footer.php

style.css

ve resim dosyasıdır.

Bunlara single.php , 404.php gibi dosyaları da ekleyebilirsiniz.

 

 style.css haricinde dosyalarımızın içerisi boştur. WordPress entegre etmek için içerilerini dolduracağız.

Style.css

Öncelikle stil dosyasının içeriğini açıyoruz. En başına aşağıdaki bilgileri giriyoruz. Bu bir yorum satırı derleme yapılmaz ancak bu tanımlama olmadan WordPress stil dosyasında hata veriyor.

/*

Theme Name: Kişisel WordPress Teması

Thema URL: http://trkaynak.com

Author: Fatih Acar

Author URL: http://trkaynak.com

Description: WordPress için kişisel hazırlanan tema

Version: 0.1

tags: basit,renkli klasik

*/

Header.php

Şimdi header.php dosyasını açıyoruz içeriğine de html dosyasından kopyalama yapacağız.

Baştan index yazan yere kadar alıyoruz.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<link href="style.css" rel="stylesheet" />

</head>

<body>

<div id="govde">



<div id="header">

<h1><span>Firma Adı</span></h1>

<h2><span>Firma Sloganınız</span></h2>

</div>

Daha sonra header için karakter kodlaması yapılması gerekiyor.

<head>

<title></title>

Arasına

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type');?>;charset=<?php bloginfo('charset');?>"/>

Kodunu yazıyoruz.

Title otomatik oluşturması için aşağıdaki gibi değiştiriyoruz.

<title><?php

global $page, $paged;

wp_title('|',true,'right');

bloginfo('name');

$site_description=get_bloginfo('description','display');

if($site_description && (is_home() || is_front_page()))

echo " | $site_description";

if ($paged>=2 || $page>=2)

echo ' | '. sprintf( __('Page %s','twentyten'),max($paged,$page));

?></title>

Birde stil dosyasını çağırması için

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>"  />

Kodu </title> dan sonra olan stil dosyası koduyla değiştiriyoruz. Header.php son hali şu şekilde olacaktır.

Ve header.php içeriğine yapıştırıyoruz kayıt ediyoruz.

Footer.php

Sıra footer alt bilgiyi yerleştirmeye yine html dosyasından

<div id="footer">&COPY Copyright 2017 - TrKaynak.com</div>

</div>

</body>

</html>

Footer a ait div ve aşağısını alıyoruz ve footer.php dosyasına yapıştırıyoruz.

Şimdi index bölümünü kopyalayacağız. Bunun içinde header ve footer arasında kalan kısım oluyor.

<div id="index">

<b>Birinci Başlık</b><br/>

<p>Yazının içeriği Yazının içeriği Yazının içeriği

Yazının içeriği Yazının içeriği Yazının içeriği

Yazının içeriği Yazının içeriği Yazının içeriği

</p>

<b>İkinci Başlık</b><br/>

<p>Yazının içeriği Yazının içeriği Yazının içeriği

Yazının içeriği Yazının içeriği Yazının içeriği

Yazının içeriği Yazının içeriği Yazının içeriği

</p>

</div>

<div id="sidebar">

<ul>

<li><a href="">Anasayfa</a></li>

<li><a href="">Kategoriler</a></li>

<li><a href="">İletişim</a></li>

<li><a href="">Hakkımda</a></li>

</ul>

</div>

Ancak index.php de üst bölüm ve alt bölüm olmadığından header ve footer bölümlerini çağırmamız gerekiyor.

Header için

<?php get_header();?>

Footer için

<?php get_footer(); ?>

Kodlarını sayfanın başına ve sonuna eklememiz gerekiyor. Yani index.php dosyasının son hali şu şekilde olacaktır.

Dosyalarımız artık bitti.

Şimdi bunları zip formatında sıkıştırıp wordpress yükleyeğiz.

izle.trkaynak.com adresime giriyorum. Eğer bir alan adınız yoksa TrKaynak.com/form sayfasından ücretsiz olarak talep edebilirsiniz.

Sol taraftan görünüme giriyorum ve karşıma temalar geliyor. Buradan yeni ekle diyoruz.

Açılan sayfadan tema yükle ye tıklıyoruz.

Dosya seç tıklıyoruz ve OzelTema.zip olarak kayıt yerini seçiyoruz. Hemen Yükle diyoruz.

Temamız yüklendi.

Etkinleştir diyoruz.

Ve karşımızda kendi yaptığımız tema çıkıyor.

Artık bundan sonraki diğer eklemeler sizin php bilginize kalmıştır.

Uygulamanın WordPress yüklediğim zipli hali için TIKLAYINIZ

Buradan da php ile ilgili diğer kodlara bakabilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.