Wordpress Tema Yapımı - 4

Önceki dersimizde index.php ye başlamıştık. Bu dersimizde başlığın gözükmesi için gerekli kodları yazacağız.

Önceki dersimizde index.php ye başlamıştık. Bu dersimizde başlığın gözükmesi için gerekli kodları yazacağız.

Kodlarımız en son aşağıdaki gibiydi..Ve sadece blog başlığı ile blog açıklması gözüküyordu. Görünecek kısımları body tag arasına yazmıştık.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head profile="http://gmpg.org/xfn/11">



        <title> bloginfo('name'); ?> wp_title(); ?></title>



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

        <meta name="generator" content="WordPress  bloginfo('version'); ?>" /> <!-- leave this for stats please -->



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

        <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href=" bloginfo('rss2_url'); ?>" />

        <link rel="alternate" type="text/xml" title="RSS .92" href=" bloginfo('rss_url'); ?>" />

        <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href=" bloginfo('atom_url'); ?>" />

        <link rel="pingback" href=" bloginfo('pingback_url'); ?>" />



     wp_get_archives('type=monthly&format=link'); ?>

     //comments_popup_script(); // off by default ?>

     wp_head(); ?>



</head>

<body>



<div id="header">

    <a href=" bloginfo('url'); ?>"><h1> bloginfo('name'); ?></h1></a>

     bloginfo('description'); ?>

</div>



</body>

</html>






Ş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


<div id="container">



</div>






ADIM-2 (döngü)

Şimdi container içine alttaki kodu ekliyoruz.


<?php  if(have_posts()) : ?> while(have_posts()) : the_post(); ?>



 endwhile; ?>



 endif; ?> ?>





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 kodunu kullanıyoruz.

    Bu kodu ...the_post(); ?> ile 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 kodunu kullanacağım.





    En son görünümü aşağıdaki gibi oldu.




    NELER YAPTIK


  • İçeriğin gösterileceği container divini açtık.

  • İçini içerik döngüsü için gerekli kodları yazdık.

  • Başlığın gözükmesi için gerekli kodu yazdık.

  • Ve bu başlığın büyüklüğünü ve linkini ayarladık.



  • Sonraki dersimizde yazı içeriğini göstereceğim
    • Etiketler;
    Yorum Yaz

    Yorum yazabilmek için üye girişi yapmanız gerekiyor!

    • 11 yıl önce
    yazı dizisine baya uğraş vermişssin .. teşekkürler :kirp:
    • 11 yıl önce
    Takipteyim. Bunun Dreamweaver için eklentisi var mı? (bilenler ne olduğunu anlayacaktır.)
    • 11 yıl önce
    Teşekkür ederim. Devamını 2-3 gün içinde devam ettiricem. Sınavlar ve PC sorunları yüzünden...
    • 11 yıl önce
    :kirp:
    • 11 yıl önce
    Hocam dersler yarım kalmış. 3 Kasımda demişsiniz 2-3 gün içinde devam edeceğim diye.. bugün 6 Aralık.. Şu dersleri tamamlarsanız sevinirim..! İyi Çalışmalar
    • 7 yıl önce
    yeni ders yokmu ?

    Yukarı Git