ဒီ Tutorial ကို မဖတ္ခင္ မေန႕က ကြ်န္ေတာ္ ေရးခဲ့တဲ့ Introduction ကို အရင္ ဖတ္ေစလိုပါတယ္။ အစကေန စမဖတ္ပဲ ၾကားထဲကေန ျဖတ္ၿပီး ေဖာက္ဖတ္မယ္ဆိုရင္ နားမလည္တာေတြ ျဖစ္မွာစိုးလို႕ပါ။
ကဲ..။ ဖတ္ၿပီးၿပီဆိုရင္ေတာ့ ဒီေန႕အတြက္ Tutorial ေလး စလိုက္ရေအာင္။
မေန႕က ကြ်န္ေတာ္ေျပာခဲ့သလို Local မွာ Server Run တာတို႕။ Local Server မွာ WordPress Run တာတို႕ကို လုပ္ၿပီးၿပီလို႕ထင္ပါတယ္။ ဒီေန႕အထိ မေန႕က တင္ခဲ့ တဲ့ Post မွာ Comment ေတြ တက္မလာတဲ့အတြက္ အခက္အခဲမရွိဘူးလို႕ ကြ်န္ေတာ္ယူစပါတယ္။ (ဒါမွမဟုတ္ လံုး၀ စမလုပ္ရေသးတာလဲ ျဖစ္ႏိုင္ပါတယ္။ ဒီ့ထက္ပိုၿပီး ဒီ Tutorial ကို နဲနဲေလးမွ စိတ္မ၀င္စာတာလည္း ျဖစ္ေကာင္း ျဖစ္ႏိုင္ပါတယ္။ 
)ဒီဟာေတြ အားလံုး Ready ျဖစ္ရင္ေတာ့ ဒီေန႕ coding ေတြ ေရးတဲ့ အပိုင္းကို စၿပီး မိတ္ဆက္ေပးသြားပါ့မယ္။
Coding အပိုင္းကို မစခင္..။ ကိုယ္ Run ထားတဲ့ WordPress ဆီကို အရင္သြားလိုက္ပါ။
C:// Wamp (or) Xampp> www>your wordpress folder>Wp Content>Themes အထိ သြားလိုက္ပါ။ ၿပီးရင္ New Folder တစ္ခုလုပ္ၿပီး ကိုယ္ေပးခ်င္တဲ့ နာမည္တစ္ခုေပးလိုက္ပါ။ ကြ်န္ေတာ္ကေတာ့ ဒီေနရာမွာ အားလံုးအတူတူျဖစ္သြားေအာင္ Tutorial Theme ဆိုၿပီး နာမည္ေပးလိုက္ပါမယ္။
index.php
ပထမဆံုး Notedpad (or) Notepad++ (or) Dream Weaver တစ္ခုခုကို ဖြင့္လိုက္ပါ။ Notepad++ (သို႕မဟုတ္) Dream Weaver ကို သံုးဖို႕ တိုက္တြန္းလိုပါတယ္။ ကြ်န္ေတာ္ကေတာ့ ဒီ Tutorial မွာ Notepad++ ကို အသံုးျပဳၿပီး ေရးသားသြားမွာ ျဖစ္ပါတယ္။
အခုေရးသြားမယ့္ coding ေတြကို copy paste မလုပ္ပဲ ကိုယ္တိုင္ လိုက္ေရးဖို႕ တိုက္တြန္းလိုပါတယ္။ ဒါမွ ေနာက္ပိုင္းမွာ မွတ္မိသြားမွာ ျဖစ္ပါတယ္။
အရင္ဆံုး ကြ်န္ေတာ္တို႕ HTML Tag ကို အရင္ေရးပါမယ္။
<html>
<head>
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
</head>
<body>
</body>
</html>
ဒါေတြေရးၿပီးသြားၿပီဆိုရင္ ကြ်န္ေတာ္တို႕ရဲ႕ index.php file ဟာ အလုပ္စလုပ္ဖို႕အတြက္ အသင့္ျဖစ္သြားပါၿပီ။ ဒီ coding ေလးကို ကြ်န္ေတာ္ အေသးစိတ္ ျပန္ရွင္း ျပပါ့မယ္။
<html>နဲ႕ </html> ကေတာ့ Open နဲ႕ Close tag ပါ။ အတူတူပါပဲ <head></head> နဲ႕ <body></body> ဟာလည္း close နဲ႕ open tag ေတြပါပဲ။
ဒီေနရာမွ မေမ့ဖို႕တစ္ခုက Open tag တစ္ခုေရးၿပီးသြားတိုင္း Close tag ကို ေရးဖို႕ရန္ မေမ့ဖို႕ပါ။ တကယ္လို႕ close tag တစ္ခုေရးဖို႕ေမ့သြားတယ္။ က်န္ခဲ့တယ္ဆိုရင္ template တစ္ခုလံုး error ေတြ တက္ကုန္ပါလိ့မ္မယ္။ အခုလို ရွင္းတုန္းမွာ ရွာရတာ လြယ္ေပမယ့္ ေနာက္ပိုင္း tag ေတြ တအားမ်ားလာတဲ့ အခါ မူးေနာက္ေနေအာင္ ရွာရပါလိ့မ္မယ္။ အဆင္မေျပေလာက္ေတာ့ပါဘူး။ ဒါေၾကာင့္ အေကာင္းဆံုးအက်င့္တစ္ခုအေနနဲ႕ open နဲ႕ close tag ေတြကို တစ္ၿပိဳင္ထဲအရင္ေရးပါ။ ေနာက္မွ ၾကားထဲက လိုအပ္တဲ့ coding ေတြကို ထပ္ထည့္ဖို႕ အၾကံေပးလိုပါတယ္။
ဥပမာ <html> open tag ေရးၿပီးတာနဲ႕…။ ခ်က္ျခင္းပဲ ေနာက္တစ္ေၾကာင္းကေန </html> ဆိုၿပီး close tag ေလး ေရးေပးဖို႕ပါ။
ဒီေလာက္ဆို tag ေတြ အေၾကာင္း နဲနဲ တီးေခါက္မိေလာက္ပါၿပီ..။ အခု ကြ်န္ေတာ္ <head> နဲ႕ </head> tag ႏွစ္ခုၾကားမွာ ေရးထားတဲ့ Line အေၾကာင္းကို ရွင္းျပ ပါ့မယ္။
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
ဒီ line ဟာဆိုရင္ index.php နဲ႕ မၾကာခင္မွာ ကြ်န္ေတာ္တို႕ေရးမယ့္ style.css ကို ခ်ိတ္ဆက္ေပးတဲ့ code ပဲ ျဖစ္ပါတယ္။ ဒီလိုင္းဟာ အသက္ပါပဲ။ ကြ်န္ေတာ္တို႕ေရး မယ့္ Coding မ်ားဟာ ၂၀% ေလာက္သာ php ေတြနဲ႕ အလုပ္လုပ္ရမွာျဖစ္ၿပီး က်န္တဲ့ ၈၀% ေလာက္ဟာ css ထဲမွာ ျပင္ရဆင္ရမွာ ျဖစ္ပါတယ္။ ဒါေၾကာင့္ ဒီ Line ဟာ တကယ့္ အသက္ေသြးေၾကာျဖစ္ပါတယ္။ ဒီ line ကို ထည့္မေရးဘူးဆိုရင္ ကြ်န္ေတာ္တို႕ css ထဲမွာ ဘယ္ေလာက္ပဲ ဘယ္လိုျပင္ျပင္ ကြ်န္ေတာ္တို႕ရဲ႕ Theme မွာ ဘာ Design မွ ျဖစ္လာမွာ မဟုတ္ေတာ့ပါဘူး။
ဒီ Line ထဲမွာ <?php bloginfo(‘stylesheet_url’);?> ဆိုတာက wordpress ရဲ႕ stylesheet ကို ေခၚတဲ့ core ျဖစ္ၿပီး…။ type=”text/css” ဆိုတာကေတာ့ ကြ်န္ေတာ္တို႕ ေခၚမယ့္ file ရဲ႕အမ်ိဳးအစားျဖစ္ပါတယ္။ ေနာက္ပိုင္းမွာ type=”text/javascript” ဆိုတာမ်ိဳးေတြ လာပါလိ့မ္မယ္။
အေပၚမွာ ကြ်န္ေတာ္ျပခဲ့တဲ့ coding ေတြအားလံုးေရးၿပီးၿပီဆိုရင္။ ေစာေစာက ကြ်န္ေတာ္တို႕လုပ္ထားတဲ့ Folder (Tutorial Theme) ဆိုတဲ့အထဲမွာ index.php ဆိုၿပီး php extension နဲ႕ save လုပ္လိုက္ပါ။
အခု ကြ်န္ေတာ္တို႕ index.php အပိုင္းကို ဒီေနရာမွာ ခဏထားၿပီး style.css အပိုင္းကို အရင္သြားလိုက္ရေအာင္။
style.css
ထံုးစံအတိုင္းပဲ Notepad++ မွာ file အသစ္လုပ္လုိက္ပါ။ အခု ကြ်န္ေတာ္ ေအာက္မွာ ေဖာ္ျပေပးမယ့္ coding ေလးေတြကို ကိုယ္တိုင္ လိုက္ေရးၾကည့္လိုက္ပါ။
/*
Theme Name: Tutorial Theme
Theme URI: http://www.your-theme-url.com
Author: Your Name
Autor URI: http://www.your-domain.com
*/
ၿပီးရင္ style.css ဆိုတဲ့ နာမည္နဲ႕ ေစာေစာက Theme Folder (Tutorial Theme) ထဲမွာ css extension နဲ႕ Save လုပ္လိုက္ပါ။
ၿပီးရင္ Dashboard>Appearance>Themes ကို သြားၾကည့္လိုက္ပါ Tutorial Theme ဆိုၿပီးေတာ့ Theme အသစ္တစ္ခုေရာက္ေနၿပီ ကိုေတြ႕ရမွာ ျဖစ္ပါတယ္။
Activate လုပ္လိုက္ပါ။ ၿပီးရင္ ဘာေပၚလာမလဲလို႕ ကိုယ့္ Blog ကို ၾကည့္ၾကည့္လိုက္ပါ။ ဘာမွ ေပၚမွာ မဟုတ္ပါဘူး။ အျဖဴေရာင္ သက္သက္ပဲ ျမင္ရမွာ ျဖစ္ပါတယ္။ ဒီအျဖဴေရာင္ဟာ အေကာင္းဆံုးပါပဲ။ ဘာ Error မွ မရွိဘူး coding ေတြ အားလံုး Link ျဖစ္ၿပီး အလုပ္လုပ္တဲ့ ဆိုတဲ့သေဘာပါ။ ဘာမွမေပၚပဲ အျဖဴေရာင္ သက္သက္ပဲ ျမင္ရျခင္းကေတာ့ ကြ်န္ေတာ္တို႕ ဘာ coding ေတြ၊ style ေတြ မွ မထည့္ရေသးလို႕ျဖစ္ပါတယ္။
ဒီေန႕ Tutorial ပထမပိုင္းအျဖစ္ Blog (Site) ရဲ႕ နာမည္ေခၚတာေတြ Description ေခၚတာေတြကို ေရးျပေပးပါ့မယ္…။ ဒီေလာက္ပါပဲ..။ အမ်ားႀကီးေရးလိုက္ရင္ ပူ သြားမွာစိုးလို႕ပါ..။ ကြ်န္ေတာ္ ေျဖးေျဖးျခင္းေရးျပေပးသြားပါ့မယ္..။ အေရးႀကီးဆံုးကေတာ့ ကိုယ္လုပ္ထားသမွ် Tutorial ေတြကို ေက်ေက်လည္လည္ မွတ္မိေနဖို႕ပါပဲ။ မေက်လည္ဘူး..။ နားမလည္ဘူးဆိုရင္ ေနာက္ပိုင္းမွာ အကုန္ရွဳပ္ကုန္ပါလိ့မ္မယ္..။ ဒါေၾကာင့္ ကြ်န္ေတာ္တို႕ ေျဖးေျဖးနဲ႕ မွန္မွန္ေလးပဲ သြားၾကတာေပါ့…။
ကြ်န္ေတာ္တို႕ေစာေစာကေရးခဲ့တဲ့ index.php ကို ျပန္ဖြင့္လိုက္ပါ။ အဲ့ဒီ့ index file ရဲ႕ <body></body> tag ႏွစ္ခုၾကားမွာ ေအာက္ပါအတိုင္း ကြ်န္ေတာ္တို႕ ေရးပါ့မယ္။
<body>
<?php bloginfo(‘name’);?>
</body>
ေရးၿပီးသြားရင္ save လုပ္ၿပီး ကိုယ့္ Blog ကို Refresh လုပ္ၾကည့္လိုက္ပါ။ ကြ်န္ေတာ္တို႕ wordpress run တုန္းကေပးထားခဲ့တဲ့ ကိုယ့္ Blog ရဲ႕ နာမည္ေပၚလာပါလိမ့္မယ္။ ဒါဟာဆိုရင္ ကြ်န္ေတာ္တို႕ဟာ <?php bloginfo(‘name’);?> ဆိုတဲ့ wordpress ရဲ႕ core ကို ေခၚသံုးလိုက္လို႕ပဲျဖစ္ပါတယ္။
ေပၚတယ္မလား..။ အိုေက..။ ဒါဆို ကြ်န္ေတာ္ ေနာက္တစ္ဆင့္အေနနဲ႕ နဲနဲေလး ထပ္ျဖည့္ၾကည့္မယ္..။ ဘာလို႕ ျဖည့္လဲဆိုေတာ့ ေနာက္ပိုင္းမွာ ကြ်န္ေတာ္တို႕ css ေတြ ကစားတဲ့ ေနရာမွာ ကိုယ္ျပင္ခ်င္တဲ့ဟာကို အတိအက် တိုက္ရိုက္ ျပင္ႏိုင္ေအာင္လို႕ ျဖစ္ပါတယ္။ ဒီလိုေလး ျပင္ၾကည့္မယ္ဗ်ာ…။
<body>
<div id=”header”>
<?php bloginfo(‘name’);?>
</div>
</body>
Blog ကို refresh လုပ္ၾကည့္ပါ..။ ဘာမွ မေျပာင္းလဲေသးပါဘူး..။ ဒီေနရာမွာ <div> </div> tag ေတြကို ကြ်န္ေတာ္ စသံုးလာၿပီျဖစ္ပါတယ္။ <div id=”header”> ဆိုတာကေတာ့ ကြ်န္ေတာ္တို႕က အခု ကြ်န္ေတာ္တို႕ လုပ္မယ့္ ေခါင္းစဥ္အပိုင္းကို နာမည္ေလး တစ္ခုေပးလိုက္တဲ့ သေဘာပါပဲ..။ ဒါမွ ကြ်န္ေတာ္တို႕ ေနာက္ပိုင္းမွာ css ေတြကိုျပင္မယ္ဆိုရင္ ဘယ္အပိုင္းကို ျပင္မယ္။ ဘယ္ေနရာကို ျပင္မယ္ဆိုတာကို အတိအက်ေခၚၿပီး လုပ္ႏိုင္မွာ ျဖစ္ပါတယ္။
OK!
ကြ်န္ေတာ္ဒီေန႕အတြက္ ေနာက္ဆံုးအေနနဲ႕ ေနာက္ထပ္ နဲနဲေလး ထပ္ျဖည့္လိုက္မယ္…။
<body>
<div id=”wrapper”>
<div id=”header”>
<h1><a href=”<?php bloginfo(‘url’);?>”><?php bloginfo(‘name’);?></a></h1>
</div>
</div>
</body>
ဒီေနရာမွာ <div id=”wrapper”> ဆိုတာက ကြ်န္ေတာ္တို႕ လုပ္မယ့္ theme အတြက္ wrap လုပ္ဖို႕ကို ေစာေစာစီးစီး ထည့္ထားလိုက္ျခင္းျဖစ္ပါတယ္။ theme မွာ ဘာမွ ထူးျခားမွဳ ရွိဦးမွာမဟုတ္ပါဘူး။ အခုဆိုရင္ <div> tag ေတြ တေျဖးေျဖးမ်ားလာပါၿပီ..။ ေအာက္ဆံုးက </div> tag ဟာ အေပၚက <div id=”wrapper”> အတြက္ ျဖစ္ၿပီး အေပၚက </div> tag ဟာဆိုရင္ <div id=”header”> အတြက္ျဖစ္ပါတယ္..။ ေသေသခ်ာခ်ာ ျမင္ေအာင္ၾကည့္ဖို႕ လိုပါလိမ့္မယ္..။ ေနာက္ပိုင္းမွာ ဒီ့ထက္ပိုၿပီး ရွဳပ္ေထြးလာပါလိ့မ္မယ္..။
ဒီေနရာမွာ စၿပီးထူးျခားလာတာတစ္ခုကေတာ့ ကြ်န္ေတာ္တို႕ ေစာေစာက ဒီအတိုင္းေပၚေနတဲ့ Blog(site) name ဟာ အခုဆိုရင္ active link ျဖစ္သြားပါၿပီ..။ စာလံုး Font လဲႀကီးသြားပါၿပီ..။ စာလံုး Font ႀကီးသြားရျခင္းကေတာ့ <h1></h1> ဆိုတဲ့ tag ကိုအသံုးျပဳလုိက္လို႕ပါ..။ html မွာ <h1> ကေန <h6> အထိရွိပါတယ္ <h1> က စာလံုး Font အႀကီးဆံုးပါ။ <h6> က အေသးဆံုးပါ။
Active Link ျဖစ္သြားရတဲ့အေၾကာင္းကေတာ့ <a href=”<?php bloginfo(‘url’);?>”>Your Site Name</a> ဆိုၿပီး wordpress ရဲ႕ core ေနာက္ထပ္ တစ္ခုကို ေခၚသံုးလုိက္လို႕ပဲ ျဖစ္ပါတယ္။
ဒါဆိုရင္ ဒီေန႕ ကြ်န္ေတာ္တို႕ေရးခဲ့တဲ့ index.php ဖိုင္မွာ ေအာက္ပါအတိုင္း အေခ်ာသတ္ရွိေနပါလိ့မ္မယ္…။ ဒီေန႕အဖို႕ကေတာ့ ဒီေလာက္ေလးကို အရင္ ပိုင္ေအာင္ စမ္းၾကည့္လိုက္ပါဦး…။
<html>
<head>
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<h1><a href=”<?php bloginfo(‘url’);?>”><?php bloginfo(‘name’);?></a></h1>
</div>
</div>
</body>
</html>
P-S : ကြ်န္ေတာ္ Tag ေတြကို တစ္ခုျခင္း အထဲ၀င္၀င္ၿပီးေရးသြားတာ အလွေရးတာမဟုတ္ပါဘူး။ Open Tag နဲ႕ Cloe Tag ကို တန္းေနေအာင္ အေပၚေအာက္ေရးျခင္း ျဖင့္ error ရွာတဲ့ေနရာမွာ လြယ္ကူေအာင္လို႕ပဲ ျဖစ္ပါတယ္။
[...] (1) index.php [...]