M B L 0 G G E R

WordPress 2.6 ႏွင့္ Image Captions ျပႆနာ

WordPress 2.6 ထြက္လာေတာ့ အေျပးအလႊားပဲ၊ ဒီ Plugin ေလး အကူအညီနဲ႔ Upgrade လုပ္၊ ေနာက္ လိုအပ္တဲ့ Update ျဖစ္တဲ့ Plugin မွန္သမွ်ကိုလည္း လိုက္ Upgrade လုပ္၊ ေနာက္ဆံုး ကိုယ္ သံုးေနတဲ့ Theme ကလည္း Update လုပ္လိုက္ေတာ့ အဲဒါကိုပါ ထပ္ Upgrade လုပ္ နဲ႔ ကၽြန္ေတာ္လည္း ဒီရက္ပိုင္း အတြင္း အပ္ (Up) ေတြနဲ႔ အက်ိဳးေပးေနတယ္ လို႔ ဆိုရမတတ္ပါပဲ။ ဟိုနားက စူးလိုက္၊ ဒီနားက စူးလိုက္ေပါ့ဗ်ာ။

အဲဒီလိုနဲ႔ အားလံုး  Upgrade လုပ္အၿပီးသကာလ၊ ေဆာင္းပါး အသစ္တစ္ပုဒ္ေရး၊ Publish လုပ္လိုက္တဲ့ အခါမေတာ့ ျပႆနာက စပါေတာ့တယ္။ ကိုယ့္ Admin Panel ထဲက Post Editor ထဲမွာ ေရးလိုက္တုန္းကေတာ့ ရွင္းလင္းခ်က္ Screen Shoot ေတြ၊ Image ေတြက Right ဆို Right ၊ Left ဆို Left နဲ႔ ၊ ေနာက္ၿပီး  ဒီ တစ္ေခါက္ New Version WordPress 2.6 ရဲ့ ကၽြန္ေတာ္ ရင္အခုန္ရဆံုး Feature အသစ္တစ္ခုျဖစ္တဲ့ Image Captions ကလည္း Post Editor ထဲမွာ လွလွပပနဲ႔ စနစ္တက် အလုပ္ လုပ္လို႔ ဆိုေတာ့ အေက်နပ္ႀကီး ေက်နပ္ေနတယ္ ဆိုပါေတာ့ဗ်ာ။

ဒီ တစ္ေခါက္ ပါတဲ့ Image Captions ဆိုတဲ့ New Feature ေလးကလည္း အေတာ့္ကို သပ္သပ္ရပ္ရပ္ႏွင့္ ကိုယ္ေရးတဲ့ ပို႔စ္ တစ္ပုဒ္ကို ခမ္းခမ္းနားနားႀကီး ျဖစ္သြားေစတာေတာ့ အမွန္ပါပဲ။ အရင္တုန္းက Post Editor ေပၚမွာ ပါတဲ့ Image Editor ကိုလည္း Image Captions Editor Box ထဲ ထည့္ထားလိုက္ေတာ့ လုပ္ရကိုင္ရတာ တစ္ဆက္တစ္စပ္တည္း ျဖစ္သြားၿပီး လုပ္ရကိုင္ရတာ ပိုမိုလြယ္ကူ သြားေစပါတယ္။

စကားျပန္ဆက္ရမယ္ ဆိုရင္ အဲဒီလိုနဲ႔ အသစ္ေသာ အရာတစ္ခုကိုရၿပီး ကေလးတစ္ေယာက္လို ေက်နပ္ပီတိျဖစ္ၿပီး ေပ်ာ္မဆံုး ျဖစ္ေနတုန္း ကိုယ့္ ေဆာင္းပါးကို Publish လုပ္၊ Blog ေပၚမွာ ၾကည့္လိုက္တဲ့ အခ်ိန္က်ေတာ့မွ ကိုယ္က်ိဳးနဲေနတာ ေတြ႔လိုက္ရပါေတာ့တယ္။ ဘယ္ေတြ၊ ညာေတြ၊ အလယ္ေတြ၊ အေပၚေတြ၊ ေအာက္ေတြ၊ စီထားတဲ့ ေဆာင္းပါးပါ ရည္ညႊန္း Image မွန္သမွ် ဟာ ဘာ CSS  Command တစ္ခုမွ မရရွိတဲ့ ပံုစံနဲ႔ ျဖစ္ခ်င္သလို ျဖစ္ေနၾကေတာ့တာပါပဲ။ အဲဒီလိုနဲ႔ မျဖစ္ေသး ဆိုၿပီး Post Editor ထဲမွာပဲ CSS ဆိုင္ရာ Command Line ေတြျဖစ္တဲ့ Align ေတြေရာ Float ေတြေရာ စံုေစ့ေအာင္ တစ္ခုၿပီး တစ္ခု ထပ္ထည့္လိုက္၊ စမ္းၾကည့္လိုက္နဲ႔ . ဘယ္လိုမွ မရ၊ ေနာက္ဆံုး အရင္ WP 2.5 တုန္းကလည္း ဒီ Theme၊ ဒီ Function နဲ႔ပဲ ဒီ လိုေရးလာခဲ့တာ အားလံုး ပံုမွန္ အလုပ္လုပ္ လို႔ ၊ အခုမွ ဘယ္လို ျဖစ္သလဲ ဆိုတာ စဥ္းစားရက်ပ္လာ၊ မထူးပါဘူး ဆိုၿပီး WP 2.5 ပဲ ျပန္ေျပာင္းရမလိုလိုျဖစ္နဲ႔ ေနာက္ဆံုး တစ္ကာ့ ေနာက္ဆံုးမွာေတာ့ မျဖစ္ေခ်ဘူး ဆိုၿပီး Guru တကာ့ Guru ေတြ စုေ၀းရာ ျဖစ္တဲ့ ဘူမိနက္သန္ ေအာင္ေျမမွန္ ကိုပဲ ခ်ီတက္ၿပီး ရွာေဖြေမးျမန္းၾကည့္ဖို႔ ဆံုးျဖတ္လိုက္ရပါေတာ့တယ္။

ေအာင္ေျမ ကိုေရာက္ရွိ၊ ရွာေဖြ ေမးျမန္း အနည္းငယ္ လုပ္လိုက္တဲ့ အခ်ိန္မေတာ့ ကိုယ္လိုပဲ အဲဒီ WP 2.6 ရဲ့ Image Captions Feature နဲ႔ ပတ္သက္ၿပီး ေသာကေတြ ရင္မွာပိုက္လို႔ အနယ္နယ္ အရပ္ရပ္က ေရာက္ရွိ စုေ၀းလာၾကသူေတြနဲ႔ ေတြ႔ၿပီးသကာလ သူ႔ရွိတာ ကိုယ္မွ်၊ ကိုယ့္ရွိတာ သူ႔မွ် နဲ႔ အားလံုးဟာ Nice & Slow နဲ႔ သႀကၤန္ဒိုး ျဖစ္သြားပါေတာ့တယ္။

ေျဖရွင္းရန္နည္းလမ္း (သို႔) လုပ္နည္း

ခင္ဗ်ားရဲ့ အနီးကပ္ဆံုး မိတ္ေဆြ ဟာ အႀကီးမားဆံုး ရန္သူ ျဖစ္ေနႏိုင္တယ္ ဆိုတာ အဲဒီမွာ ေတြ႔တာပါပဲ။ အဓိက အျပစ္ကေတာ့ ခင္ဗ်ားသံုးေနတဲ့ Theme ေၾကာင့္ပါပဲတဲ့။ [ ဂုရုႀကီးေတြ ေျပာဆိုေနၾကတာကို ေဘးက နားေထာင္ မွတ္သား လာၿပီး ခင္ဗ်ားတို႔နဲ႔ ျပန္မွ်ေ၀ေနတာပါ။ ကၽြန္ေတာ္ ကိုယ္တိုင္ ထိုးထြင္း သိျမင္လာျခင္း မဟုတ္ပါ။ ]

ကၽြန္ေတာ့္ ယူဆခ်က္ကေတာ့ Theme ရဲ့ အျပစ္ထက္ WordPress 2.6 ရဲ့ Image Captions Feature မွာ Image ေတြကို Post Editor ထဲမွာပဲ Align လုပ္တဲ့ အဆင့္ အထိပါလာခဲၿပီး၊ Publish လုပ္တဲ့ အခ်ိန္မွာ Align ထပ္ေခၚရမယ့္ Code တစ္ခ်ိဳ႕လို သြားခဲ့တာလို႔ပဲ ျမင္ပါတယ္။ ဘာလို႔ လဲဆိုေတာ့ အရင္ WordPress 2.5.1 အထိ ဒီ Theme နဲ႔ပဲ ပံုမွန္ အလုပ္လုပ္ လာခဲ့ၿပီး (တစ္ခုေတာ့ ရွိပါတယ္၊ အရင္ Version တုန္းက Image Editor သပ္သပ္ပါ ပါတယ္) အခုမွ အလုပ္မလုပ္တာ ဆိုေတာ့ Theme ရဲ့ အျပစ္ထက္ WordPress 2.6 ရဲ့ လိုအပ္ခ်က္ တစ္ခုလို႔ ဆိုရင္ ပိုမွန္မယ္ ထင္ပါေၾကာင္း။

ေလရွည္ေနတာ နဲနဲ ၾကာသြားပါၿပီ။ Guru ေတြ ေထာက္ျပထားတဲ့ WP 2.6 ရဲ့ Image Captions Feature အလုပ္ မလုပ္ရျခင္းမွာ ပါ၀င္တဲ့ Theme ရဲ့ အျပစ္ကေတာ့ ေအာက္ပါ CSS ကုဒ္မ်ားပဲ ျဖစ္ၾကပါတယ္။ ဒီ CSS Code ေတြကို မိမိ အသံုးျပဳေနတဲ့ Theme ရဲ့ CSS File အတြင္း ထည့္လိုက္ျခင္းျဖင့္ Post Editor ထဲမွာ ျမင္ရသလုိပဲ Image Captions ရဲ႕ ရသ အျပည့္အ၀နဲ႔ ယခင္လိုပဲ Image ေတြဟာလည္း Align Right ဆို Right ၊ Left ဆို Left အလုပ္လုပ္ ေနပါလိမ့္မယ္။

/************************************************
Captions
************************************************/

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

/*** End captions ***/

/************************************************
Image Position
************************************************/

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}
/*** End Image Position ***/

အထက္မွာ ပါ၀င္တဲ့ Image Position ဆိုတဲ့ CSS အပိုင္းဟာ မိမိရဲ့ သံုးစြဲေနတဲ့ Theme ထဲမွာ မူလကတည္းက ပါေနတယ္ ဆိုရင္ ထပ္ထည့္ဖို႔ မလိုအပ္ သလို padding , margin စတဲ့ တန္ဖိုးေတြကိုေတာ့ မိမိရဲ့ Theme နဲ႔ လိုက္ေလ်ာညီေထြျဖစ္ေစမယ့္ တန္ဖိုးမ်ား ေျပာင္းလဲ သတ္မွတ္သံုးစြဲႏိုင္ပါေၾကာင္း။