How to make a WordPress theme. part-1

wailynnooJune 3, 20105min1373

ကျွန်တော်တို့ WordPress theme လေးတစ်ခုကို အခြေခံအကျဆုံးနဲ့ အလုပ်လည်းအပြည့်အဝလုပ်အောင် တည်ဆောက်ကြည့်ကြပါမယ်။
Wordpress theme တစ်ခုမှာ မပါမဖြစ် file 5 ခုရှိပါတယ်။
1.header.php : herader မှာတော့ css file တွေ link လုပ်တာ ပြီးတော့ ကျွန်တော်တို့ theme ရဲ့ header ပိုင်းကိုတည်ဆောက်ကြပါမယ်။
2.index.php : index မှာတော့ ကျွန်တော်တို့ header တို့ footer တို့ကိုလှန်းခေါ်မယ် ပြီးတော့ ကျွန်တော်တို့ ရေးထားတဲ့ post တွေကိုခေါ်ရပါမယ်။
3.sidebar.php : sidebar မှာတော့ category တွေ tag တွေကို link ချိတ်ပြီးဖေါ်ပြရမယ့် အပိုင်းဖြစ်ပါတယ်။
4.footer.php : footer မှာတော့ copyright အချက်လက်လေးတွေဖေါ်ပြပါမယ်။
5.style.css : style ကတော့ site တစ်ခုလုံးရဲ့ design ချပေးမဲ့နေရာဖြစ်ပါတယ်။

Template Tag
Wordpress Theme ကိုတည်ဆောက်တဲ့နေရာမှာ template tag လို့ခေါ်တဲ့ php function တွေကိုသုံးရပါတယ်။ အဲဒီ function တွေကနေ ကျွန်တော်တို့လိုချင်တဲ့အချက်တွေကို database ထဲကနေဆွဲထုတ်ပေးပါတယ်။
ဥပမာ။ ။
<?php bloginfo(‘template_url’); ?> ဆိုရင်ကျွန်တော်တို့ template ရဲ့ URL ကို return ပြန်ပေးပါလိမ့်မယ်။

စမရေးခင်ပိုမြင်သာအောင် html ပုံကြမ်းလေးအရင်ရေးကြည့်ပါမယ်။
header.php

<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div><!-- close header -->
<div id="content">

index.php

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

sidebar.php

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

footer.php

</div><!- content close ->
<div id="footer">
footer
</div><!- footer close ->
</div><!- wrapper close ->
</body>
</html>

header.php ကိုစရေးကြရအောင်
ဒါကတော့ header.php အစအဆုံးပါ။ အောက်မှာတစ်ကြောင်းချင်းရှင်းပြထားပါတယ်။

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<title><?php wp_title(); ?> <?php bloginfo('name'); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" />
<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 1.0" href="<?php bloginfo('atom_url'); ?>"
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>

<div id="wrapper">
<div id="header">
<div><a href="<?php bloginfo('siteurl'); ?>"><?php bloginfo('name'); ?></a></div>
<div><?php bloginfo('description'); ?></div>
</div><!-- close header -->
<div id="content">
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

ဒါကတော့ document type ကိုကြေငြာတာပါ။

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

ဒါကတော့ html အဖွင့် tag ပေါ့။ သူမှာ php function တစ်ခုပါတာကိုတွေ့ရမှာပါ။

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

titel ကို dynamic အနေနဲ့ခေါ်ထားတာပါ။ post တစ်ခုကိုရောက်နေမယ်ဆိုရင် အဲဒီ post ရဲ့ title ကို wp_title() ဆိုတဲ့ function ကလှမ်းခေါ်ပေးပါလိမ့်မယ်။ သူနောက်က ကိုယ့် blog ရဲ့အမည်လာပါလိမ့်မယ်။ တကယ်လို့ home page မှာဆိုရင်တော့ blog name ကို title မှာပြပါလိမ့်မယ်။

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

ဒီအကြောင်းကတော့ search engin အတွက်ရေးထားတာပါ။

<link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" />
<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 1.0" href="<?php bloginfo('atom_url'); ?>"

ပေါ်ဆုံးအကြောင်းကတော့ css ဖိုင်ကိုခေါ်တာဖြစ်ပြီး အောက်သုံးကြောင်းကတော့ rss အတွက်ဖြစ်ပါတယ်။

<div id="header">
<div><a href="<?php bloginfo('siteurl'); ?>"><?php bloginfo('name'); ?></a></div>
<div><?php bloginfo('description'); ?></div>
</div><!-- close header -->

header မှာကျွန်တော်တို့ site အမည်နဲ့ description ကိုဖော်ပြထားပြီး site အမည်ကို link ချိတ်ထားပါတယ်။ header ကိုအလှဆင်တဲ့အပိုင်းကတော့ css file မှာရေးရမှာပါ။
နောက်အပိုင်းမှာ index.php ကိုရေးကြတာပေါ့။

3 comments

  • Htoo thin

    August 30, 2012 at 9:26 pm

    သိပ်ကောင်းပါတယ် နည်းပညာမကြိုက်ကြဘူးနဲ့တူတယ် ရွာသားတွေ ကွန့်မန်တောင်မပေးဘူး ဟိုဟာဒီဟာ အညှီအဟောက်တွေဆိုရင် ယင်အုံမှပုံဘဲဗျ

    • မောင်ပေ

      August 30, 2012 at 9:54 pm

      စော်ကားချက်က ပြင်းလှပါလားဗျ
      ဘယ်က
      “ဟိုဟာဒီဟာ အညှီအဟောက်တွေဆိုရင် ယင်အုံမှပုံဘဲဗျ” ဆိုတာကို
      အတိအကျလေး ပြောလေဗျာ
      ကိုယ့်စိတ်ထင်နဲ ့ရမ်းတုတ်ရင်တော့
      ခင်ဗျားက ရွာ့ချဉ်ဖတ် ဖြစ်တော့မှာပဲ

      • မောင်ပေ

        August 30, 2012 at 9:56 pm

        နောက်ပြီး အခုပို ့စ်ကို ဘယ်အချိန်က တင်ခဲ့တာလဲ ဆိုတာလဲ ရက်စွဲလေး သေချာပြန်ဖတ်ကြည့်ပါဦး ကိုထူးတင်ရေ
        အဲဒီအချိန်မှာတုန်းက တချို ့ရွာသားတွေဟာ မန်ဘာမဝင်ကြသေးပဲ ၊ ဖတ်ရုံပဲ ဖတ်ကြသေးတဲ့အချိန် ရှိသေးတယ်
        ကျွန်တော်ဆိုရင်လဲ ၂၀၁၁ ၅လပိုင်းမှ မန်ဘာစဖြစ်တာ

Leave a Reply