Let’s create wordpress template
ဒီ WordPress Template တည်ဆောက်ပုံကို Online Tutorials တွေကို လေ့လာရင်း eruanna ရဲ့ ဆိုက်မှာ တွေ့ခဲ့တာပါ။ သူရေးထားတာတွေ လိုက်လုပ်ကြည့်ရင်း ကိုယ်တိုင် လုပ်တတ်သွားတဲ့အတွက် သူ့ကို ကျေးဇူးတင်တဲ့အကြောင်း အရင်ပြောချင်ပါတယ်။
ဒီ WordPress Template ဆွဲတဲ့ Tutorial လုပ်မယ့်သူဟာ Web Design အခြေခံအဆင့်ကို သိထားပြီး Design Concept ကိုလည်း သိထားပြီးသူ ဖြစ်တယ်လို့ ယူဆပါတယ်။ နောက်ပြီး ကိုယ့်စက်ထဲမှာ ဖြစ်ဖြစ် အွန်လိုင်းမှာ ဖြစ်ဖြစ် WordPress ကို Install လုပ်ထားပြီးသားလို့ ယူဆပါတယ်။ အဲဒီလို Template ကို ရေးဆွဲတဲ့ အခါမှာ အထောက်အကူ ပြုနိုင်မယ့် Page တွေကတော့ …
စတဲ့နေရာတွေပါ။
အဆင့် (၁)
ပထမဦးဆုံးအနေနဲ့ Template ရဲ့ အခြေခံတည်ဆောက်ပုံ၊ အခြေခံ Frame ကို Photoshop နဲ့ ဆောက်ရပါမယ်။ ကျွန်တော် တည်ဆောက် ထားတဲ့ ပုံစံကတော့ အောက်မှာ ပြထားပါတယ်။
အဆင့် (၂)
Coding စမရေးခင်မှာ Wordpres Frame ပိုင်းကို အကြမ်းစဉ်းစားကြည့်ပါ့မယ်။ CSS အတွက်လည်း အထောက်အကူ ပြုပါလိမ့်မယ်။
အဆင့် (၃)
အခုတော့ Coding စမှာဖြစ်ပါတယ်။ Coding ရေးဖို့အတွက် Notepad ပဲ ဖြစ်ဖြစ် Notepad ++ ပဲ ဖြစ်ဖြစ်၊ ဒါမှမဟုတ် Dreamweaver၊ Netbean IDE စသည်ဖြင့် သုံးနိုင်ပါတယ်။ WordPress Install လုပ်ထားတဲ့ ဖိုဒါကိုသွားပါ။ ပြီးရင်
wp-content/themes/
အဲဒီ ဖိုဒါထဲမှာ ကိုယ်ပေးချင်တဲ့ နာမည်တစ်ခုပေးပြီး ဥပမာ – mmtutorials ပေါ့။
wp-content/themes/mmtutorials
ပထမဦးဆုံးဆောက်မယ့် ဖိုင်နာမည်က style.css ပါ။ ဖိုင်တွေအားလုံးရဲ့ Structure ကို လောလောဆယ်ကြည့်လို့ ရအောင် တင်ထားပေးပါတယ်။
/* Theme Name: mmtutorials Theme URI: http://localhost/wordpress Description: This is a tutorial theme of Myanmar Tutorials Author: Myanmar Tutorials Author URI: http://www.myanmartutorials.com */
အပေါ်မှာ ရေးပြထားတဲ့ဟာကို ထည့်ဖြစ်အောင်ထည့်ဖို့ လိုပါတယ်။ အဲဒီအချက်အလက်တွေကို wp-admin က သုံးလို့ ဖြစ်ပါတယ်။
အဆင့် (၄)
ဒီတစ်ခါတော့ header.php ဆိုတဲ့ ဖိုင်တစ်ခု ဆောက်ဖို့ လိုပါတယ်။ style.css ထားတဲ့ နေရာမှာပဲ ဖြစ်ပါတယ်။
header.php မှာ included တွေကို အဓိကထားရေးပါတယ်။ ကိုယ်သုံးမယ့် ဟာတွေအားလုံးကို ကြော်ငြာပေးရတဲ့ သဘောပါပဲ။ ဥပမာ – css ဖိုင်လို မျိုးပေါ့။
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head>
အထက်မှာ ဖော်ပြထားတဲ့ code က Doctype ကို ခေါ်တာ ဖြစ်ပါတယ်။ Type of markup ကို ကြေငြာပေးတာ ဖြစ်ပါတယ်။ အဲဒီ Markup အကြောင်းကို လေ့လာချင်တယ်ဆိုရင် ဒီမှာ လေ့လာလို့ ရပါတယ်။
<title><?php wp_title(); ?> <?php bloginfo('name'); ?></title>
ဒါကတော့ ပထမဦးဆုံး WordPress Function ကို ခေါ်တာ ဖြစ်ပါတယ်။ ဆိုတာက Blog Title ကို ဖော်ပြတာဖြစ်ပါတယ်။ ကတော့ blog အနေနဲ့ အခုရောက်နေတဲ့ Post နာမည် ဖြစ်ဖြစ် Page နာမည်ကို ဖြစ်ဖြစ်ဖော်ပြပေးပါတယ်။ Wprdpress မှာ Function တွေ အများကြီးရှိပါတယ်။ ဒါပေမယ့် ဒီ Tutorial မှာတော့ လိုအပ်တာကိုပဲ အဓိကထားသုံးမှာ ဖြစ်ပါတယ်။ ခုဆက်ရေးမယ့် အပိုင်းကတော့ Meta Data ပိုင်း ဖြစ်ပါတယ်။
<!-- Meta Data -->
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="Wordpress <?php bloginfo('version'); ?>" />
<meta name="description" content="This is the tutorial on how to create a wordpress theme" />
<meta name="keywords" content="myanmar, tutorials, myanmartutorials" />
Meta Tags တွေဟာ ကိုယ့်ဆိုက်ကို Search Engine က ကောင်းကောင်း နားလည်အောင် အသိပေးတဲ့နေရာမှာ သုံးပါတယ်။
<?php bloginfo(‘charset’); ?> ဆိုတာ ကိုယ်ဆိုက်ကို ဘယ်လို Charset နဲ့ သုံးထားလဲဆိုတာ Search Engine ကို ကြော်ငြာပေးတာပါ။ အဲဒီနေရာမှာ မြန်မာလို ရေးချင်သူတွေအတွက် သတိပြုစရာတွေ ရှိပါတယ်။ Charset ကို WordPress ရဲ့ Core Admin က ရွေးခိုင်းတာ ဖြစ်ပါတယ်။ မြန်မာလို ရေးလိုသူတွေကတော့ UTF-8 ကို အဓိကထား သုံးကြပါတယ်။
<?php bloginfo(‘version’); ?> ဆိုတာ ကိုယ် အသုံးပြုနေတဲ့ WordPress ရဲ့ Version ကို ဖော်ပြပေးမှာ ဖြစ်ပါတယ်။
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" />
CSS, cascading style sheets ကတော့ ကိုယ့်ဆိုက်မှာ သုံးတဲ့ css ဖိုင်ကို ညွှန်းပေးရမှာ ဖြစ်ပါတယ်။ အဲဒီ CSS ဖိုင် မပါရင်တော့ ကိုယ့်ဆိုက်က ဘာ တန်ဆာပလာမှ မပါတဲ့ အဖြူရောင် နောက်ခံကြီးပဲ ဖြစ်နေမှာ ဖြစ်ပါတယ်။ အဲဒီ CSS ဖိုင်ကသာ Template တစ်ခုလုံးကို လှအောင် စီစဉ် ဆောင်ရွက်သွားတာ ဖြစ်ပါတယ်။ အဲဒီ CSS ကပဲ ဆိုက်တစ်ခုလုံးကို User Friendly ဖြစ်အောင် ဆောင်ရွက်ပေးသွားတာ ဖြစ်ပါတယ်။
<!-- RSS Feeds -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="<?php bloginfo('rss_url'); ?>" />
<!-- Ping URL -->
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!-- Get Archives Tag -->
<?php wp_get_archives('type=monthly&format=link'); ?>
<!-- Call to various plugin data -->
<?php wp_head(); ?>
</head>
RSS Feeds ကတော့ Browser ကို ကိုယ့် RSS ရဲ့ လင့်ကို အလိုအလျောက်သိအောင် စီစဉ်ပေးတာ ဖြစ်ပါတယ်။ အဲဒီလို ရေးပေးလိုက်တဲ့အတွက် Browser ရဲ့ address bar မှာ RSS Icon လေး တစ်ခု ပေါ်လာစေပါတယ်။ အဲဒါတွေပြီးရင်တော့ <body> ပိုင်းကို ဆက်ရေးရမှာ ဖြစ်ပါတယ်။
<body>
<!-- main width definition -->
<div id="container">
<div id="Header">
<div class="name"><a href="<?php bloginfo('siteurl'); ?>"><?php bloginfo('name'); ?></a></div>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
<!-- right container -->
<div id="main">
header.php ဖိုင်ရဲ့ အစအဆုံးကတော့
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title><?php wp_title(); ?> <?php bloginfo('name'); ?></title>
<!-- Meta Data -->
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="Wordpress <?php bloginfo('version'); ?>" />
<meta name="description" content="This is the tutorial on how to create a wordpress theme" />
<meta name="keywords" content="myanmar, tutorials, myanmartutorials" />
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" />
<!-- RSS Feeds -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="<?php bloginfo('rss_url'); ?>" />
<!-- Ping URL -->
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!-- Get Archives Tag -->
<?php wp_get_archives('type=monthly&format=link'); ?>
<!-- Call to various plugin data -->
<?php wp_head(); ?>
</head>
<body>
<!-- main width definition -->
<div id="container">
<div id="Header">
<div class="name"><a href="<?php bloginfo('siteurl'); ?>"><?php bloginfo('name'); ?></a></div>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
<!-- right container -->
<div id="main">
အဆင့် (၅)
ကဲ ဒီတစ်ခါ Template ထဲကို WordPress က ဖတ်တဲ့အခါ တိုက်ရိုက်ဖတ်မယ့် index.php ကို တည်ဆောက်ရမှာ ဖြစ်ပါတယ်။ အဲဒီ Coding ထဲမှာ <?php get_header(); ?> ဆိုတဲ့ Function ကို တွေ့ရမှာ ဖြစ်ပါတယ်။ အဲဒါက header.php ကို ပြပေးဖို့ ခေါ်တာ ဖြစ်ပါတယ်။ နောက်ပြီး header.php မှာ div tag တွေကို ဖွင့်ခဲ့တာ တွေ့ရပါမယ်။ အဲဒါတွေကို footer.php မှာ ပြန်ပိတ်မှာ ဖြစ်ပါတယ်။ အဲဒီလို လုပ်ပေးခြင်း အားဖြင့် အခြား WordPress မှာ အသုံးပြုတဲ့ php ဖိုင်တွေ ဖြစ်တဲ့ single.php တို့ page.php စတဲ့ ဖိုင်တွေကို အထောက်အကူ ဖြစ်စေပါတယ်။
index.php ထဲမှာ loop တစ်ခုပါပါတယ်။ အဲဒီ Loop ဟာ တစ်ခုထက်ပိုတဲ့ Posts တွေကို ပြတဲ့နေရာမှာ အဆင်ပြေစေပါတယ်။
index.php ထဲမှာ အခြား Template Tags တွေကိုလည်း ထည့်လို့ရပါသေးတယ်။ လောလောဆယ်တော့ မပါမဖြစ် date, category, edit this link နဲ့ comments တွေကိုပဲ ထည့်မှာ ဖြစ်ပါတယ်။
Template ရဲ့ Folder ထဲမှာ index.php ဆိုတဲ့ ဖိုင် တစ်ခု ဆောက်လိုက်ပါ။ ပြီးရင် အောက်က ပေးထာတဲ့ Code တွေကို ရိုက်ထည့်လိုက်ပါ။
<!-- index.php -->
<?php get_header(); ?>
<!-- this is the loop -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="postHead">
<div class="title">
<h2 id="post-<?php the_ID(); ?>">
<a class="title" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent link to <?php the_title(''); ?>"><?php the_title(''); ?></a></h2>
</div> <!-- end title -->
<div class="postinfo">
Posted in <em><?php the_category(', ') ?></em> on <?php the_date(); ?><?php comments_popup_link(__('Leave a Comment'), __('1 Comment'), __('% Comments')); ?>
</div> <!-- end postinfo -->
</div> <!-- end postHead -->
<!-- call to the post -->
<div class="post"><?php the_content('click to read more »'); ?></div>
<?php comments_template(); //Get wp-comments.php template ?>
<?php endwhile; else: ?> <!--ends the loop -->
<!-- this is displayed if you have no posts -->
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?> <!-- ends of loop -->
<!-- navigation between posts -->
<div class="navigation">
<?php next_post_link('« Previous Entries') ?><?php previous_post_link('Next Entries »') ?>
</div>
<?php get_footer(); ?>
ဒီနေရာမှာ WordPress ရဲ့ Post နဲ့ ပတ်သက်တဲ့ Function တွေ အများကြီး ခေါ်ထားတာတွေ့ရပါလိမ့်မယ်။ တစ်ခုခြင်းစီကို ဖတ်ကြည့်ပြီး ဘယ်ဟာက ဘာအတွက်ဆိုတာ လေ့လာကြည့်ပါ။
အဆင့် (၆)
ကဲ … ဒီတစ်ခါ ဆောက်ရမှာကတော့ footer.php ပါ။ အပေါ်က header.php တို့ index.php တို့မှာ ဖွင့်ထားတဲ့ Div Tags တွေကို ပြန်ပိတ်မှာ ဖြစ်ပါတယ်။ နောက်ပြီး sidebar.php ကို ခေါ်ထားတာ သတိထားမိပါလိမ့်မယ်။
ထုံးစံအတိုင်းပဲ footer.php ဆိုတဲ့ ဖိုင်တစ်ခု ဆောက်လိုက်ပါ။ ပြီးရင် အောက်မှာ ပြထားတဲ့ Code တွေကို ရိုက်ထည့်လိုက်ပါ။
</div> <!--end main-->
<!--call to sidebar-->
<?php get_sidebar(); ?>
<div id="footer">
This is an <a href="http://www.myanmartutorials.com">Myanmar Tutorials'</a> tutorial.
</div>
</div>
<!--end container-->
</body>
</html>
အဆင့် (၇)
ဒီတစ်ခါ အဆင့် (၇) အနေနဲ့ လုပ်ရမှာက sidebar.php ပါ။ ဘယ်နေရာမှာသုံးလဲဆိုရင် ကိုယ့် WordPress ရဲ့ Feature တွေ ဖြစ်တဲ့ Pages, Categories, Search, Archive, Calender စတဲ့ ဟာတွေကို ပြပေးဖို့ ဖြစ်ပါတယ်။ အဓိကကတော့ WordPress ရဲ့ Functions တွေပါပဲ။ တစ်ခုခြင်းစီကို Remark လေးတွေ ဘေးမှာ ပေးထားပါတယ်။
<div id="sidebar">
<h1>Pages</h1>
<ul>
<?php wp_list_pages('title_li='); ?> <!-- lists of pages -->
</ul>
<h1>Search</h1>
<?php include (TEMPLATEPATH . '/searchform.php'); ?> <!-- Search Feature (you need to create searchform.php -->
<h1>Latest Posts</h1>
<ul>
<?php wp_get_archives('type=postbypost&limit=5&before=<li>&after=</li>'); ?> <!-- list of latest post -->
</ul>
<h1>Archives</h1>
<ul>
<?php wp_get_archives('type=monthly&limit=5&before=<li>&after=</li>'); ?> <!-- Archives -->
</ul>
<h1>Categories</h1>
<ul>
<?php wp_list_categories('title_li='); ?> <!-- list of categories -->
</ul>
<h1>Links</h1>
<ul>
<?php get_linksbyname('Sites', '<li>', '</li>', '', FALSE,
'name', FALSE); ?> <!-- list of links -->
</ul>
<h1>Calendar</h1>
<?php get_calendar(); ?> <!-- to show the calender -->
</div>
အပေါ်က ရေးထားတဲ့ အထဲမှာ searchform.php ဆိုတာကို ခေါ်ထားတာ တွေ့ပါလိမ့်မယ်။ အဲဒီတော့ searchform.php ဖိုင် တစ်ခု ဆောက်လိုက်ဖို့ လိုပါတယ်။ ပြီးရင် အောက်မှာ ပြထားတဲ့ Code ကို ရေးထည့်လိုက်ပါ။
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<input type="text" name="s" class="search" value="" />
<input type="submit" id="searchsubmit" value="Search" />
</form>
အဆင့် (၈)
WordPress Template တွေကို ဆောက်တဲ့အခါ Core Component လို့ ခေါ်တဲ့ အပိုင်းတွေကို ပြည့်စုံအောင် တည်ဆောက်ပေးရပါတယ်။ မဟုတ်ရင် User က သုံးတဲ့အခါမှာ Error တွေ တက်နေပါလိမ့်မယ်။ အခုရေးရမယ့် အပိုင်းက Comments လို့ခေါ်တဲ့ ပို့စ်တွေကို မှတ်ချက်ပေးရတဲ့ အပိုင်း ဖြစ်ပါတယ်။ comments.php ဆိုတဲ့ ဖိုင်တစ်ခုကို ဆောက်လိုက်ပါ။ အဲဒီဖိုင်က WordPress Component တွေထဲမှာ အခက်ဆုံးလို့ ဆိုလို့ရပါတယ်။ ဒါကြောင့် Customizing လုပ်တဲ့အခါ သတိထား လုပ်ဖို့ လိုပါတယ်။
<!--If theres comments - display them like this-->
<?php if ( $comments ) : ?>
<div class="singolocommento">
<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<div class="bubble">
<li class="$oddcomment" id="comment-<?php comment_ID() ?>">
<cite>
<strong>
<!--comment author and link to their site-->
<a class="author" href="<?php comment_author_url(); ?>"><?php comment_author(); ?></a>
</strong>
<!--comment info-->
<?php comment_date() ?>, <?php comment_time() ?> <?php edit_comment_link('edit', '', ''); ?>
<br />
</cite>
<div class="commentText"><?php comment_text() ?></div>
</li>
</div>
<?php endforeach; ?>
</ol>
</div> <!--end singleolocommento-->
<!--this is what happens if theirs no comments-->
<?php else : // If there are no comments yet ?>
<p><?php _e('No comments yet.'); ?></p>
<?php endif; ?>
<!--start comment form-->
<div class="commentEntry">
<div class="title"><?php comments_number(__('No Comments'), __('1 Comment'), __('% Comments')); ?>
<!--this is displayed if comments are allowed-->
<?php if ( comments_open() ) : ?>
<a href="#postcomment" title="<?php _e("Leave a Comment.."); ?>">»</a>
<?php endif; ?>
</div><!--end commentEntry-->
<div class="postinfo">
<br />
<?php comments_rss_link(__('<abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post.<br />')); ?>
<!--display this if pings are open-->
<?php if ( pings_open() ) : ?>
<a href="<?php trackback_url() ?>" rel="trackback"><?php _e('TrackBack <abbr title="Uniform Resource Identifier">URI</abbr>'); ?></a>
<?php endif; ?>
</div><!--end postinfo-->
<?php if ( comments_open() ) : ?>
<!--if you must be logged in to comment-->
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<!--if anyone can comment-->
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<!--get registered users info-->
<?php if ( $user_ID ) : ?>
<p>Logged in as
<a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>.
<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="<?php _e('Log out of this account') ?>">Logout ?</a></p>
<!--If not Registered enter your info here-->
<?php else : ?>
<table border="0" width="70%" class="commentTable">
<tr>
<td valign="top">
<input type="text" name="author" id="author" value="Name" size="22" tabindex="1"/>
<br />
<input type="text" name="email" id="email" value="email" size="22" tabindex="2"/>
<br />
<input type="text" name="url" id="url" value="URL" size="22" tabindex="3"/>
<?php endif; ?>
<!--comments textarea is shown to everyone-->
<textarea name="comment" id="comment" cols="70%" rows="20" tabindex="4" value="your comment?"></textarea>
<br />
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<input type="hidden" name="comment_reply_ID" id="comment_reply_ID" value="0" />
<?php do_action('comment_form', $post->ID); ?>
</form>
</td>
</tr>
</table>
<p><small>
<strong>XHTML:</strong> You may use these tags: <?php echo allowed_tags(); ?>
</small>
</p>
<?php endif; // If registration required and not logged in ?>
<!--this is what is displayed when comments are closed-->
<?php else : // Comments are closed ?>
<p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>
<?php endif; ?>
</div> <!--end commentEntry-->
အဆင့် (၉)
page.php မှာ အဓိကရေးရမှာက Read more အတွက် ဖြစ်ပါတယ်။ အဲဒီ Read More အကြောင်းကို သိချင်ရင် ဒီနေရာ မှာ ဖတ်လို့ ရပါတယ်။ ရေးရမယ့် အပိုင်းက သိပ် မရှိပါဘူး။ page.php ဆိုတဲ့ ဖိုင်တစ်ခုကို ဆောက်လိုက်ပါ။
<?php get_header(); ?>
<!--the loop-->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="title"><?php the_title(''); ?></div>
<?php the_content(); ?>
<?php edit_post_link('Edit this entry.', '', ''); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>
အဆင့် (၁၀)
ဒီတစ်ခါကတော့ နောက်ဆုံးအဆင့် ဖြစ်ပါတယ်။ style.css မှာ ရေးရမှာ ဖြစ်ပါတယ်။ အရင်ဆုံးဆောက်ပြီး နောက်ဆုံးမှ ရေးတဲ့ ဖိုင် ဖြစ်ပါတယ်။ အဲဒီ style.css သာ မပါရင် ကိုယ့် WordPress Template က ပုံစံမှန်မှာ မဟုတ်ပါဘူး။
/*
Theme Name: mmtutorials
Theme URI: http://localhost/wordpress
Description: This is a tutorial theme of Myanmar Tutorials
Author: Myanmar Tutorials
Author URI: http://www.myanmartutorials.com
*/
/*positioning*/
html, body
{
background-color: #282828;
margin-top: 10px;
margin-bottom: 10px;
font-family: tahoma, verdana, sans-serif;
font-size: 12px;
color: #555;
line-height: 18pt;
}
/*positioning*/
#container {
-moz-border-radius: 20px 20px 20px 20px;
width: 960px;
margin-left:auto;
margin-right:auto;
position: relative;
background-color: #ffffff;
padding: 10px;
}
#Header {
-moz-border-radius: 20px 20px 20px 20px;
background-image: url(images/header.png) !important;
background-repeat: no-repeat;
background-position: bottom left;
background-color: #212121;
width: 100%;
height: 200px;
text-align: center;
}
#Header .name {
color: #cefa48;
font-family: "century gothic", sans-serif;
font-size: 30px;
font-weight: lighter;
letter-spacing: 20px;
padding-top: 80px;
}
#Header .name a {
color: #cefa48;
}
#Header .description {
color: #ccc;
text-transform: uppercase;
font-size: 10px;
font-weight: lighter;
}
#main {
float: right;
display:inline;
position: relative;
width: 70%;
}
#sidebar {
float: left;
display:inline;
position: relative;
padding : 10px;
width: 25%;
}
#footer
{
clear:both;
text-align: center;
width: 100%;
}
/*posts*/
.postHead {
-moz-border-radius: 10px 10px 10px 10px;
background-color: #450044;
padding-left: 10px;
}
h2 a.title, h2 .title, .title, .wrap h2, .catlink, #newlink h2
{
padding-left: 0px;
font-family: "century gothic", arial, georgia, sans-serif;
font-size: 20px;
color: #cefa48;
text-align: left;
font-weight: lighter;
}
.postinfo
{
font-size: 11px;
font-family: "arial", "century gothic", sans-serif;
font-weight: lighter;
text-align: left;
padding-left: 0px;
color: #ccc;
text-transform: lowercase;
margin-top: -15px;
}
/*navigationlinks*/
.navigation a {
text-align: center;
padding: 30px;
margin-bottom: 15px;
font-family: arial, sans-serif;
font-size: 20px;
}
.navigation a:link {
color: #cefa48;
}
.navigation a:hover{
color: #111;
}
/*Sidebar*/
#sidebar h1 {
-moz-border-radius: 5px 5px 5px 5px;
background-color: #450044;
padding-left: 0px;
font-family: "century gothic", arial, georgia, sans-serif;
font-size: 14px;
height : 30px;
color: #cefa48;
text-align: center;
font-weight: lighter;
}
#sidebar ul {
list-style: none;
margin-left: -20px;
}
/*Comments*/
#commentlist li , .singolocommento li {
list-style-type: none;
padding: 0px;
width: 470px;
}
div.bubble {
width: auto;
margin-bottom: 24px;
border: 0px solid #ccc;
}
div.bubble cite {
position: relative;
margin: 0px;
padding: 7px 0px 0px 0px;
top: 6px;
background: transparent url(tip.gif) no-repeat 20px 0;
font-style: normal;
}
a.author, a.author:active, a.author:visited {
text-decoration: none;
font-family: arial, "century gothic", georgia, "times new roman", sans-serif;
font-size: 17px;
font-weight: lighter;
text-transform: uppercase;
letter-spacing: -1px;
color: #ec008c;
}
/* extras */
a, a:visited, a:link, a:active { color: #ec008c; text-decoration: none; background-color: inherit;}
a:hover{ color: #282828; text-decoration: none;}
b, strong, em, i{ color: #4fd0ad; background-color: inherit;}
u{ text-decoration: none; color: #d4eb89;border-bottom: 1px solid #d4eb89; background-color: inherit;}
img {border:0px;}
.search {
width: 150px;
}
#searchsubmit {
width: 75px;
}
input, textarea, select {
background-color: #282828;
color: #ccc;
font-size: 11px;
font-family: "lucida grande", sans-serif;
border: 0px;
}
ကဲ ဒီအဆင့်ပြီးပြီဆိုရင် ကိုယ့် Template က အတိုင်းအတာ တစ်ခုအထိ သုံးလို့ရပါပြီ။ ဒါပေမယ့် #Header မှာ Image ဖိုင်တစ်ခုကို ခေါ်ထားတာ တွေ့ရမှာ ဖြစ်ပါတယ်။ အဲဒီအတွက် ကိုယ့် Template Root ထဲမှာ images ဆိုတဲ့ Folder တစ်ခု ဆောက်လိုက်ပါ။ ပြီးရင် အောက်မှ ပြထားတဲ့ Header ဖိုင်ကို ထည့်လိုက်ပါ။ Download Here header.png
နောက်ဆုံးတစ်ခုကတော့ ကိုယ့် Template ကို WordPress မှာ ပုံစံအသေးလေးနဲ့ ပြနိုင်ဖို့ပါ။ အောက်မှ ပြထားတဲ့ ပုံကို template root ထဲမှာ ထည့်လိုက်ပါ။ Download Here screenshot.png
ကဲ ဒါဆိုရင်တော့ အတိုင်းအတာ တစ်ခုအထိ ပြည့်စုံသွားပြီ ဖြစ်တဲ့ WordPress Template ကို ရပါပြီ။ မြန်မာလိုတော့ မရသေးဘူးနော်။ ဘာဖြစ်လို့လဲဆိုတော့ Myanmar Font မထည့်ရသေးလို့ပါ။ မြန်မာလို စမ်းကြည့်ချင်တယ်ဆိုရင် font-family ဆိုတဲ့ နေရာတွေမှာ Zawgyi-One လေး ပေါင်းထည့်လိုက်ပါ။ စမ်းသပ်ထားတဲ့ Template ကို ကြည့်ချင်ဆိုရင် Myanmar Tutorials WordPress Template ကို ကလစ်ခေါက် လိုက်ပါ။
ရွှင်လန်းချမ်းမြေ့ပါစေ … စမ်းသပ်ကြည့်လို့ မရတာ ရှိရင် Comment ပေးပြီး မေးနိုင်ပါတယ်။
Facebook comments:
17 Responses
Leave a comment
About the Author
Thiha
စာမရေးရ မနေနိုင်သူ၊ ဒီဇိုင်းဆွဲခြင်း၊ ပရိုဂရမ်ရေးခြင်း၊ အင်တာနက်တွင် သင်ယူခြင်းတို့ အမြဲမပြတ် ပြုလုပ်နေသူ၊ နည်းပညာနှင့် ပတ်သက်လျှင် အကုန် စိတ်ဝင်စားသူ၊ ကလေး တစ်ယောက် အဖေ၊ နည်းပညာသမားအပေါ် နားလည်မှု အပြည့်ပေးနိုင်သော ဇနီးတစ်ယောက်၏ ခင်ပွန်း၊ Myanmar Links မှာ နည်းပညာ အကြောင်း သောင်းပြောင်းထွေလာ သင်တဲ့ဆရာ ... လောလောဆယ် လေ့လာနေတာက iOS
Ads
မိုက်တယ်ဗျ။
ကိုပီစီသိုင်းကျမ်းက တယ်ဟုတ်ပါလား ရှည်လားထွေပြား ပြည့်ပြည့်စုံစုံ
မိုက်တယ်ဂျို့ …
သေချာသိချင်နေတာ ကြာပြီ။ =D
နက်မသုံးဖြစ်တော့ပါဘူးဆိုမှ ဒီလိုသိလိုက်ရတာ ကျွန်တော် တော်တော် နောက်ကျသွားတယ်၊ နောက်တော့ ကြိုးစားလေ့ကျင့်ပါဦးမယ်….. ကျေးဇူး း)
ခုလို လာလည်တဲ့အတွက် ကျေးဇူးတင်ပါတယ်။
အခုုမှတွေ့တယ်ဗျာ … စမ်းကြည့်လိုုက်အုုံးမယ်။
အခုမှ တွေ့တယ်လား၊ တင်ထားတာကြာပေါ့ Creative ရေ
အခုမှတွေ့တယ်။ database error နဲ့တိုးတယ်။
http://www.myanmartutorials.com/test/
Error establishing a database connection
ဟုတ်တယ်ဗျ။ Database Error တတ်နေတယ်။ ဖြစ်နိုင်ရင်ပြင်ပေးပါဦး။ ပြီးတော့ ကျွန်တော့ဆိုဒ်မှာ မြန်မာဖောင့်ထည့်လို့ကို မရဘူး တော်တော်အခက်တွေ့နေတယ်။ ကူညီပါဦး။ daung-zarni.iblogger.org မှာပါ။ မြန်မာဖောင့်မရတာ ကိုယ်ရွေးတဲ့ Theme နဲ့ဆိုင်လားမသိဘူး။ ရှင်းပြပါဦး။ EOT ထည့်နည်းလေးပါ ဖြစ်နိုင်ရင် ရှင်းပြစေချင်ပါတယ်။ လေးစားစွာဖြင့်………………………………………..
အဲဒါ Database မှာ utf8 ကို ပြောင်းပေးဖို့ လိုပါလိမ့်မယ်။
test page ကို ပြင်ဆင်ပြီးပါပြီခင်ဗျ
အခုမှ ထပ်တွေ့တဲ့သူ တစ်ယောက်ပာ။ test page က Error establishing a database connection ပဲ ပြနေတယ်ဗျ။ tut တော့ လိုက်မလုပ်ကြည့်ရသေးဘူး
အား ပြုတ်သွားပြန်ပြီ … ပြန်ဆက်ဦးမှ
ပြန်ကောင်းသွားပါပြီ ခင်ဗျာ …
thanks bro. it’s working fine now.
အစ်ကို wordpress template ကို zoka ကနေတင်တာ မရဘူးဖြစ်နေတယ်
ဘာဖြစ်တာလဲမသိဘူး ကျေးဇူးပြုပြီး ပြောပေးပါအုန်း