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 ေလးကိုဖန္တီးႏုိင္မယ္လို႔ ေမွ်ာ္လင့္ပါ။ ေရးျဖစ္ေအာင္ေရးၾကည့္ပါ။ သိပ္မခက္ပါဘူး။
ေနာက္က်န္တာေလးေတြကို ေနာက္တစ္ပိုင္းမွ ဆက္ေလ့လာၾကတာေပါ႔။

About wailynnoo

wailynn oo has written 57 post in this Website..

I am a blogger.