Byumut » wp http://www.byumut.com " En büyük risk, risk almamaktır.... " Tue, 27 Sep 2011 18:40:46 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 WordPress (Wp) Tema Yapımı 3 http://www.byumut.com/wordpress-wp-tema-yapimi-3/ http://www.byumut.com/wordpress-wp-tema-yapimi-3/#comments Thu, 25 Jun 2009 08:41:00 +0000 byumut http://www.byumut.com/?p=469 WordPress tema yapımı serimizin 3. bölümdeyiz . Çok yoğun üniversite ve iş hayatım yüzünden bloguma fazla zaman harcayamasamda sizlere gerekli gördüğüm paylaşımlarımı sunmaya gayret ediyorum . Şimdi gelelim bu bölümde öğreneceklerimize . Wp tema yapımı 1 ve Wp tema yapımı 2 derslerinde öğrendiklerimizin üstüne bu derste artık sitemizin içini doldurmaya başlıyoruz .

Blog başlık , url ve açıklamasının yazılması

WordPress Fonksiyon arşivim sayfasında sizlere daha önceden wp ' de kullanılabilecek fonksiyonları yazmıştım şimdi o fonksiyonları kullanmanınn zamanı geldi .

Blogumuzun adını (başlığını) ekrana yazdırmamız gerekiyor diyelim .
Blogumuzun index.php ksımını açıkıyoruz ve body tagları arasına şu kodları yazıyoruz .

PLAIN TEXT
PHP:
  1. <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>

bloginfo('name') bize blogumuzun adını çekiyorken bloginfo('url') bize blogumuzun url adresini çekiyor ve ekranda göstermemizi sağlıyor .

Ekran Görüntüsü :

Biz adımlarımızı biraz daha geliştirip buranın altınada blogumuzun açıklamasını yazmak istiyoruz o zaman kodları şu hale getirmemiz lazım .

PLAIN TEXT
PHP:
  1. <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
  2. <?php bloginfo('description'); ?>

bloginfo('description') bize blogumuz için belirlediğimiz açıklamamızı (sloganımızı) yazdırma imkanı sunuyor .

Ekran Görüntüsü :

İşte blogumuzun adını , url adresini ve açıklamasını aldık ve ekrana yazdık fakat şuanda çok şekilsiz görünüyor biraz bunu stillendirelim . Onun için index.php kısmına yazdığım kodları şu hale getiriyorum .

PLAIN TEXT
PHP:
  1. <div id="header">
  2.  <div id="blogadi">
  3.      <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
  4.  </div>
  5.   <div id="blogaciklama">
  6.       <?php bloginfo('description'); ?>
  7.    </div>
  8. </div>

gerekli xhtml , html kodlamaları ekledim şimdi style.css dosyasına geçiyorum ve bunlara biraz style kazandırıyorum .

style.css dosyamızı şu hale getirelim :

PLAIN TEXT
PHP:
  1. /* 
  2. Theme Name: İlk Tema
  3. Theme URI: http://www.byumut.com
  4. Description: Byumut ilk Tema
  5. Version: 1.0
  6. Author: UMUT CETİNKAYA
  7. Author URI: http://www.byumut.com
  9. */
  10. body{
  11. margin:2px;
  12. }
  13. #header{
  14. border:1px solid silver;
  15. background-color:#F0F0F0;
  16. padding:5px;
  17. font-family:"Verdana"; 
  18. }
  19. #header #blogadi{
  20. font-size:25px;
  21. color:#330033;
  22. }
  23. #header #blogadi a{
  24. text-decoration:none;
  25. color:#990000;
  26. }
  27. #header #bloaciklama{
  28. width:100%;
  29. color:#A6A6A6;
  30. }

Ekran Görüntüsü :

son ekran görüntüsü

52 views

]]> http://www.byumut.com/wordpress-wp-tema-yapimi-3/feed/ 3 WordPress ( wp ) Tema Yapımı 1 http://www.byumut.com/wordpress-wp-tema-yapimi-1/ http://www.byumut.com/wordpress-wp-tema-yapimi-1/#comments Thu, 04 Sep 2008 22:29:54 +0000 byumut tema yapma http://www.byumut.com/?p=125 Merhaba arkadaşlar sizlere geçenlerde karşılaştığım bir makaleyi türkçeye çevirmek istediğimi belirterek başlamak istiyorum bu yazıma  http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/ adresinde yayında olan ( ingilizce olan ) makaleyi size tam olarak türkçeye çevirmek yerine kendi yorumlarımı katarakta sizlere  wordpress tema yapımı hakkında bilgiler vermek istiyorum .

Başlıyoruz  hadi hayırlı olsun gerçektende çok basit olduğunu birazdan anlayacağız hiç meraklanmaya gerek yok :)

Başlangıç

WordPress Tema yapmaya başladık bu başlangıç konumuzda sizlere 3 çeşit konuda bilgilendirlecektir . Bunlar ;

  • Css kodlama yapısı
  • Wp'de olması gereken kod dosyaları
  • Wp'deki dosyaların birbirleri ile bağlantıları
  1. Css Kodlama Yapısı

WordPress kurduğunuza ve hatta bu wordpress ' e kendi temanızı yapmaya başlamaya karar verdiğinize göre birazda olsa html , css bilginiz olduğunu kabul etmemiz lazım yoksa bizim anlatımlarda ilerlememize imkan yok . Css kodlama yapısı anlamında dikkat etmemiz gereken önemli konular var onlardan bahsetmek istiyorum . Bunlardan ilk ve en önemlilerinden birisi ;

PLAIN TEXT
HTML:
  2.     <li>Deneme</li>
  3. </ul>

Yapısıdır . Bu yapı css de listeleme yöntemi olarak geçer ve yazım biçimi bu şekildedir . Worpdress siteleri bu şekilde css yapılar kullanarak kodlamalıyız .

  1. Css Kodlama Yapısı 
  2. Wp'de olması gereken kod dosyaları

Wp ( WordPress ) hazır bir php sistem olduğunu hiç bir zaman unutmayarak bu tarz  hazır sistemlerin şartları neyse onları yerine getirmemiz gerekiyor ki bizim isteklerimizide onlar harfiyen yerine getirsin :) Bu hazır sistemlerden olan Wp  ' nin şartlarından biriside kesinlikle olmasını istediği dosyalar ve bu dosyalarda wp'ye özel yazım biçimleriyle yazılmış hazır wp fonksiyonlarının kullanılması . İşte Wp ' nin bizden istediği şartlar böyle ve bu şartlardaki söylediğimiz gibi bizden istediği olması gereken dosyaların ise şöyle ...

  • style.css ( sitil dosyası )
  • index.php ( Tüm dosyaların bağlandığı dosya )
  • home.php ( Anasayfa dosyası )
  • single.php ( Yazı detay sayfası )
  • page.php ( Sayfa detay sayfası )
  • archive.php ( Arşiv sayfası )
  • category.php ( Kategorilerin detay sayfası )
  • search.php ( Arama sayfası )
  • 404.php ( Hata Sayfası )
  • comments.php ( Yorum sayfası )
  • comments-popup.php
  • author.php ( yazar sayfası )
  • date.php ( Saat , Takvim sayfası )
  1. Css Kodlama Yapısı 
  2. Wp'de olması gereken kod dosyaları
  3. Wp'deki dosyaların birbirleri ile bağlantıları

Bunun için şu şekilde bir listeleme sanırım yeterli olacaktır .

  • index.php
    1. single.php
    2. page.php
    3. archive.php
    4. search.php
    5. 404.php

396 views

]]> http://www.byumut.com/wordpress-wp-tema-yapimi-1/feed/ 19