How to make a WordPress theme. part-2

index.php ကို စရေးကြရအောင်။
html ပုံစံကဒီလိုပါ။

<div id="main">
main
</div> <!- main close ->

အဲဒီမှာ header, footer နဲ့ sidebar ကိုပေါင်းထည့်ပါမယ်။ ဒီလိုရပါမယ်။

<?php get_header(); ?>
<div id="main">
main
</div> <!- main close ->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

get_header() function ကနေ header.php ကိုလှမ်းခေါ်ပေးပါလိမ့်မယ်။ အဲဒီ function ကနေ header.php file တစ်ခုလုံးကိုအစားထိုးသွားတာပါ။
get_sidebar() function ကနေ sidebar.php ကိုလှမ်းခေါ်ပေးပါလိမ့်မယ်။
get_footer() function ကနေ footer.php ကိုလှမ်းခေါ်ပေးပါလိမ့်မယ်။

နောက်ကျွန်တော်တို့ရဲ့ post တွေကို while loop တစ်ခုသုံးပြီးလှမ်းခေါ်ပါမယ်။

<?php get_header(); ?>
<div id="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
main
<?php endwhile; else: ?>
<p>Sorry, no posts.</p>
<?php endif; ?>
</div> <!- main close ->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

အဲဒီမှာ post ရှိမရှိကို if နဲ့ စစ်ထားတာပါ။ ရှိရင် post ကိုပြမှာဖြစ်ပြီး မရှိရင်တော့ else နောက်က statement ကိုလုပ်မှာဖြစ်ပါတယ်။ Sorry no posts. လို့ပြပါလိမ့်မယ်။

main နေရာမှာ အပိုင်းသုံးပိုင်းပါပါမယ်။

<div>
post title here
</div> <!– close post title –>
<div>
post info here
</div> <!– close post tag –>
<div>
post content here
</div> <!– close post content –>

ပထမအပိုင်းက title ကိုဖေါ်ပြပြီး သူ့အောက်မှာ post infomation ကိုပြမယ် ပြီးတော့ content ကိုပြပါမယ်။
title ကိုရေးဖို့အတွက် php tag တစ်ခုကိုခေါ်ရပါမယ်။ <?php the_title(); ?> ဖြစ်ပါတယ်။ အဲဒီ title ကို link ချိတ်လို့ရအောင်လုပ်ပေးရပါမယ်။ ဒီလိုရပါမယ်။

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent link to <?php the_title(''); ?>"><?php the_title(''); ?></a></h2>

ပြီးတော့ post info အတွက်ရေးပါမယ်။

<?php the_date(); ?> Post in <?php the_category(', ') ?>|<?php comments_popup_link(__('Leave a Comment'), __('1 Comment'), __('% Comments')); ?>

အဲဒီမှာ အရင်ဆုံး date ကိုပြပါမယ်။ ပြီးတော့ category ကိုပြတယ်။ category မှာ comma ထည့်ထားတာတွေ့မှာပါ။ category တစ်ခုထက်ပိုခဲ့ရင် comma ခံပြီးပြပါလိမ့်မယ်။ ပြီးတော့ comment လာပါတယ်။ comments မှာ parameter သုံးခုပါပါတယ်။ comment မရှိရင် Leave a Comment ကိုပြပါမယ်။ 1 ခုရှိရင် 1 Comment ပေါ့။ တစ်ခုထက်များရင်တော့ comment အရေအတွက်နဲ့ နောက်က Comments လို့ပြပါလိမ့်မယ်။

post content အတွက်ကတော့ ဒီလိုရပါတယ်။

<?php the_content('click to read more &raquo;'); ?>

သူအောက်မှာ comment ရှိရင်ပြလို့ရအောင်

<?php comments_template(); ?>

လို့ထည့်ပေးရပါမယ်။ ကျွန်တော်တို့ရေးထားတဲ့အထဲမှာ comments.php မပါတယ်အတွက် WordPress built in comments ပုံစံကိုသုံးပြီးဖော်ပြပါလိမ့်မယ်။
index.php file ပြီးပါပြီ။ code အစအဆုံးကဒီလိုရပါမယ်။

<?php get_header(); ?>
<div id="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent link to <?php the_title(''); ?>"><?php the_title(''); ?></a></h2>
</div> <!-- close post title -->

<div>
<?php the_date(); ?> Post in <?php the_category(', ') ?>|<?php comments_popup_link(__('Leave a Comment'), __('1 Comment'), __('% Comments')); ?>
</div> <!-- close post tag -->

<div>
<?php the_content('click to read more &raquo;'); ?>
</div> <!-- close post content -->
<?php comments_template(); ?>
<?php endwhile; else: ?>
<p>Sorry, no posts.</p>
<?php endif; ?>
</div> <!-- main close -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

sidebar.php ကိုဆက်ရေးကြပါမယ်။ ကျွန်တော်တို့ sidebar ရဲ့ code အစအဆုံးကဒီလိုပါ။

<div id="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<ul>
<?php wp_list_pages('title_li=' . __('Pages:')); ?>
</ul>
<ul>
<?php wp_list_categories('title_li=' . __('Categories:')); ?>
</ul>
<?php endif; ?>
</ul>
</div>

ကျွန်တော်တို့ menu ကို html ရဲ့ unorder list ( ul ) သုံးပြီးတည်ဆောက်ရမှာပါ။

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

ဒီ code ကတော့ ကျွန်တော်တို့ admin panel ကနေ widgets တွေထည့်ထားမထား စစ်ပေးတာပါ။ တကယ်လို့ ထည့်ထားမယ်ဆိုရင် ကျွန်တော်တို့ထည့်ထားတာကို မပြဘဲ admin panel ကထည့်ထားတာကိုပြပါလိမ့်မယ်။ admin panel မှာထည့်မထားဘူးဆိုရင်တော့ Pages နဲ့ Categories ကို ကျွန်တော်တို့ php function တွေကနေခေါ်ထည့်ပေးပါလိမ့်မယ်။ အဲဒီ function တွေကနေလာတဲ့အခါ pages list ဟာ <li></li> ကြားမှာထည့်ပြီးသားတစ်ခါတည်း return ပြန်လာပါလိမ့်မယ်။ categories လည်းအတူတူပါဘဲ။
နောက်ပြီး sidebar ရဲ့ widgets တွေကို admin panel ကနေအလုပ်လုပ်လို့ရအောင်လို့ functions.php ဆိုတဲ့ဖိုင် တစ်ခုထည့်ပေးရပါလိမ့်မယ်။
functions.php

<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>

footer.php ကတော့ဒီလိုပါ။

</div> <!--end content-->

<div id="footer">
<p>Coypright&copy;2010<a href="http://webtut.6te.net">Webtut</a></p>
</div><!--end footer-->

</div><!--end wrapper-->
</body>
</html>

နောက်ဆုံးကျန်တာကတော့ ကျွန်တော်တို့ site ကို အလှဆင်ပေးမယ့် style.css ဖိုင်ပါ။

/*
Theme Name: whiteandgrey
Theme URI: http://localhost/wordpress
Description: This is a tutorial theme of Web Tutorials
Author: Wailynnoo
Author URI: http://webtut.6te.net
*/

body{
background-color:#ECECEC;
font-family:Tahoma;
font-size:12px;
}
#wrapper{
background:#ECECEC;
margin:0 auto;
text-align:left;
}
/* header */
#header{
-moz-border-radius: 10px 10px 10px 10px;
padding-top:20px;
background: #CCCCCC;
height:80px;
text-align: center;
}
#header .name a{
color:#FFFFFF;
font-size:24px;
text-decoration:none;
}
#header .description{
color:#FFFFFF;
}

/*main content*/
#main{
background-color:#FFFFFF;
width:636px;
float:left;
padding:5px 5px 5px 5px;
margin-top:15px;
margin-bottom:15px;
border: 1px solid #DFDFDF;
}
.post_title{
-moz-border-radius: 10px 10px 10px 10px;
background: #ECECEC;
padding-left:15px;
height: auto;
}
.post_title a{
text-decoration:none;
}
.post_info{
}
.post_content {
margin: 0 0 20px;
text-align: justify;
}
#content{
-moz-border-radius: 10px 10px 10px 10px;
background-color: #CCCCCC;
}

/*side bar*/
#sidebar{
margin:7px 7px 5px 4px;
width:316px;
float: right;
font-family: Arial, Helvetica, sans-serif;
border-left: 1px solid #DFDFDF;
overflow:hidden;
}
#sidebar ul {
margin: 8px 8px 8px 8px;
padding: 5px 0 0 0;
text-align: left;
list-style:none;
}
#sidebar ul li{
-moz-border-radius: 10px 10px 10px 10px;
padding:5px 5px 5px 5px;
background: #CCCCCC;
margin-bottom:7px;
}
#sidebar ul li a{
text-decoration:none;
}

/* footer */
#footer{
-moz-border-radius: 10px 10px 10px 10px;
padding-top:10px;
height:50px;
background-color: #CCCCCC;
clear:both;
text-align:center;
}

ဒီဖိုင်က ပြီးပြည့်စုံတယ်လို့ပြောလို့မရပါဘူး။ လေ့လာရလွယ်အောင် အရှင်းဆုံးနဲ့ အနည်းဆုံးဖြစ်အောင်ရေးထားတာပါ။ ဒီ tutorial ကိုလေ့လာပြီးရင် ကိုယ်ပိုင် theme လေးကိုဖန်တီးနိုင်မယ်လို့ မျှော်လင့်ပါ။ ရေးဖြစ်အောင်ရေးကြည့်ပါ။ သိပ်မခက်ပါဘူး။
နောက်ကျန်တာလေးတွေကို နောက်တစ်ပိုင်းမှ ဆက်လေ့လာကြတာပေါ့။