0
Kayıt Ol

Wp tema yapımı hakkında..

9

●

1.105

  • 14-07-2010, 17:14:14
    #1
    caficer
    caficer
    Wp'de tema yapımı ilgili birkaç sorum var.
    *Bu iş öyle internetten öğrenilir mi yoksa boşa mı uğraşıyoruz?
    *PHP ile çok uğraşılmaz zaten her temada aynıları kullanılıyormuş WP için gerekli CSS nereden öğrenilir?
    *Bu iş ne kadar sürer.Adam gibi bir tema tasarlamak.
  • 14-07-2010, 18:02:07
    #2
    mr_cpu
    mr_cpu
    arkadaşım yeni başlıyorsan artisteer i dene çok iyi şeyler çıkmasada nasıl yapıldığıyla alakalı fikir sahibi olursun
  • 14-07-2010, 18:02:59
    #3
    Brkucnc
    Brkucnc
    Öncelikle CSS öğrenin. Sonra Wordpress temalarını editlemekle işe başlayın. Wp codex sayfasını inceleyin.
  • 15-07-2010, 00:38:53
    #4
    mizanger
    mizanger
    css ten iyi anlıyosan sağlam bi wordpress temasını 2 güne çıkartırsın.anlamıyorsan css öğren derim yada style.css dosyasını karıştıra karıştıra kaparsın zaten.denemekten korma.
  • 15-07-2010, 00:55:53
    #5
    Rockco
    Rockco
    Bende ögrenmek istiyorum şu tema editlemeyi vs. yetenek var sadece kaynak yok elimde
  • 15-07-2010, 01:01:00
    #6
    Yesil SEO
    Yesil SEO
    Yeşil SEO İnt. Hiz.
    WordPress Teması Nasıl Yapılır Bölüm1 Bu makaleyi uygulayabilmek için, CSS/XHTML ile hazırlanmış uygun bir tasarıma ihtiyacınız vardır.İster Hazır bir CSS tasarımı olsun ister kendi hazırladığınız bir CSS tasarımı wordpress'e giydirmek sanıldığı kadar zor bir iş degil. Bu yazı yeni başlayanlara fikir verdirmek amacı ile yazıldı. Şimdi kademe kademe uygulayarak dersimize başlayalım.

    Bölüm1: Site Anasayfasını Nasıl Yapılır
    Önce uygulama için netten free bir css tasarımı bulmak gerekiyor
    https://www.r10.net/breakfast.zip     indirebilirsiniz. Bu tasarımın yapısı klasik wordpress yapısına çok uygun olduğu için seçtim.
    Tasarım dosyasını indirince içinden çıkan dosyaları bilgisayarınızda bir klasöre açın. Daha sonra index.html dosyasını açalım.
    Bu index dosyasını 4 bölüme ayırmamız gerekiyor.

    style.css
    Header
    Content
    Sitebar
    Footer

    bu 4 temel bölüm ve 1 css dosyası wordpress'in temel omurgasını oluşturacak.
    Wordpress temamızın klösürünüı /wp-content/themes/breakfast adresine klasöre yükleyin.

    İpucu: Wordpress tema dosyasının CSS dosyasının adı mutlaka style.css olmalıdır. Önce klasörden gelen .default.css dosyasının adını style.css olarak degiştirelim.
    style.css dosyasının en üst kısmına şu kodları eklememiz gerekiyor. Admin panelinde görüntülenecek olan açıklama kısmı buradan çekiliyor

    css Kod:
    1. /* Theme Name: Tema Adı
    2. Theme URI: Tema Adresi
    3. Description: Tema hakkında genel bilgi
    4. Version: Versiyon Author:
    5. Tasarımcı Author URI: Tasarımcı Adresi
    6. */




    İlk adım Header.php dosyasını oluşturmak Wordpress'in klasik header kodlarını
    boş bir dosyaya ekleyelim:

    php Kod:
    1. <?php if (is_404()) { header("HTTP/1.1 404 Not Found"); } ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"><head>
    2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Type" content="text/html; charset=windows-1254" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" /><meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    3. <title><?php bloginfo('name'); ?> <?php bloginfo('description'); ?> <?php if ( is_single() ) { ?> <?php } ?> <?php wp_title(); ?></title><meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /><link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /><link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /><link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    4. <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    5. <?php wp_get_archives('type=monthly&format=link'); ?>
    6. </head>



    Bu kod her temanın olmazsa olmaz kodu oluyor.
    Şimdi breakfast tasarımıdaki index.html dosyasında header div kısmını kopyalayalım bu kodların altına ve header.php diye kayıt edelim.
    php Kod:
    1. <?php if (is_404()) { header("HTTP/1.1 404 Not Found"); } ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"><head>
    2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Type" content="text/html; charset=windows-1254" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" /><meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    3. <title><?php bloginfo('name'); ?> <?php bloginfo('description'); ?> <?php if ( is_single() ) { ?> <?php } ?> <?php wp_title(); ?></title><meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /><link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /><link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /><link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    4. <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    5. <?php wp_get_archives('type=monthly&format=link'); ?>
    6. </head>
    7. <body>
    8. <div id="header">
    9. <div id="logo">
    10. <h1><a href="#">BreakFast</a></h1>
    11. <h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
    12. </div>
    13. <div id="menu">
    14. <ul>
    15. <li><a href="#">About Us</a></li>
    16. <li><a href="#">Products</a></li>
    17. <li><a href="#">Services</a></li>
    18. <li><a href="#">Clients</a></li>
    19. <li><a href="#">Support</a></li>
    20. </ul>
    21. </div>
    22. </div>
    23. <div id="splash"></div>
    24. <div id="page">



    Footer.php için şu bölümü alalım index.html den ve footer.php diye kayıt edelim:
    Kod:
    <div id="footer">
    <p id="legal">Copyright &copy; 2007 BreakFast. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
    <p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
    </div>
    </body>
    </html>

    Sitebar.php için şu bölümü alalım index.html içinden ve sitebar.php diye kayıt edelim:
    Kod:
    <div id="sidebar">
    <h2>Integer Gravida Nibh</h2>
    <ul>
    <li>
    <h3>December 14th - Lorem Ipsum </h3>
    <a href="#">In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula…</a></li>
    <li>
    <h3>December 9th - Blandit Justo </h3>
    <a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus…</a></li>
    <li>
    <h3>December 3rd - Pretium Suscipit </h3>
    <a href="#">Quisque dictum integer nisl risus sagittis convallis rutrum id congue…</a></li>
    </ul>
    </div>

    index.html dosyasının içinde kalan son bölümüde kopyalayıp index.php yi oluşturalım

    Phpdeki include fonksiyonun wordpress scriptinde kullanılış şekli aynı. Ancak ister klasik yöntem ile include edin ister wordpress hazır fonksiyonu şeklinde include ederek kullanın. Eğer hazır Wordpress fonksiyonu kullanırsanız örnegin php Kod:
    1. <?php get_header(); ?>


    fonksiyonunu index.php dosyasının yazdığınız yerinde header.php dosyası include ediliyor. Klasik Php yöntemi ile kullanmak istersenizde

    php Kod:
    1. <?php include (TEMPLATEPATH . '/header.php'); ?>



    şeklinde index.php dosyasına eklemeniz gerekiyor.

    php Kod:
    1. <?php get_header(); ?>
    2. <?php include (TEMPLATEPATH . '/sidebar.php'); ?>
    3. <div id="content">
    4. <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    5. <h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
    6. <p>
    7. <?php the_content(); ?>
    8. <?php the_content('Devamı &raquo;'); ?></p>
    9. <?php endwhile; else: ?>
    10. Henuz yazi yoktur
    11. <?php endif; ?>
    12. </div>
    13. <?php get_footer(); ?>



    En Basit Temada Kullanılan Temel Wordpress Fonksiyonları
    get_header(): Bu fonksiyon include header.php demek oluyor
    get_footer(): Bu fonksiyon include footer.php demek oluyor
    the_permalink(): Konunun Linkini ekrana basıyor
    the_title() : Konun Başlığı ekrana basıyor
    if ( have_posts() ) : while ( have_posts() ) : the_post(): Bu'da veritabanındaki makaleri sırası ile ekrana basmakta kullanılıyor.

    Tüm bu dosyaları oluşturduktan sonra yönetim panelimizden bu basit Tasarımımızın Anasayfasını wordpress'e entegre etmiş oluyoruz.
    Bir sonraki Makalede yani Bölüm2 de single.php, archive.php, page.php oluşturma ve sitebar.php'ye nasıl widget eklenecek onu detaylı anlatacağım. Bölüm3 Wordpress Plugin nasıl yazılır temel mantığı basit şekilde anlatmaya çalışacağım...
    Ayrıca unutmadan tasarımımızın ilk index.html halinin ekran görüntüsünü alıp screenshot.png olarak kayıt edip tema klasörümüzede atınca wordpress yönetim panelinde tasarımın önizleme şeklinde çıkmış olacaktır.
  • 15-07-2010, 01:01:48
    #7
    Yesil SEO
    Yesil SEO
    Yeşil SEO İnt. Hiz.
    üstteki radmin in konusudur bu arada.
  • 15-07-2010, 12:02:13
    #8
    cdemir1991
    cdemir1991
    Yakuter.com da bununla ilgili bi makale yazdım. İncelerseniz yardımcı olabilir.

    http://www.yakuter.com/wordpress-tem...si-gerekenler/ Buradan ulaşabilirsiniz.
  • 15-07-2010, 12:32:58
    #9
    gevv
    gevv
    caficer adlı üyeden alıntı: mesajı görüntüle
    Wp'de tema yapımı ilgili birkaç sorum var.
    *Bu iş öyle internetten öğrenilir mi yoksa boşa mı uğraşıyoruz?
    *PHP ile çok uğraşılmaz zaten her temada aynıları kullanılıyormuş WP için gerekli CSS nereden öğrenilir?
    *Bu iş ne kadar sürer.Adam gibi bir tema tasarlamak.

    az çok mantığı anlamanızda faydası olacak videolu anlatım

    https://www.r10.net/wordpress/680322-...si-yapmak.html