How to make a WordPress theme. part-1
wailynnoo
ကျွန်တော်တို့ 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
နောက်ပြီး အခုပို ့စ်ကို ဘယ်အချိန်က တင်ခဲ့တာလဲ ဆိုတာလဲ ရက်စွဲလေး သေချာပြန်ဖတ်ကြည့်ပါဦး ကိုထူးတင်ရေ
အဲဒီအချိန်မှာတုန်းက တချို ့ရွာသားတွေဟာ မန်ဘာမဝင်ကြသေးပဲ ၊ ဖတ်ရုံပဲ ဖတ်ကြသေးတဲ့အချိန် ရှိသေးတယ်
ကျွန်တော်ဆိုရင်လဲ ၂၀၁၁ ၅လပိုင်းမှ မန်ဘာစဖြစ်တာ