Sunday, December 23, 2012

ওয়ার্ডপ্রেস টেম্পেলেট তৈরি ৪র্থ পর্ব

ওয়ার্ডপ্রেস টেম্পেলেট তৈরির এই পর্ব টি খুবই গুরুত্বপূর্ণ। এটি শধু ওয়ার্ডপ্রেস টেম্পেলেট এর জন্যই গুরুত্বপূর্ণ নই যে কোন বড় ওয়েব সাইট তৈরির জন্যও গুরুত্বপূর্ণ। তাই আশা করি ভালো করে দেখবেন। এ খানে আমি আপনাদের কে দেখাব কিভাবে HTML file কে PHP file এ কনভার্ট করতে হই। ওয়ার্ডপ্রেস টেম্পেলেট তৈরি ১ম পর্ব দেখুন এ খানে আমরা কিছু ফাইল তৈরি করে ছিলাম। এখন এই তৈরি করা ফাইল গুলো ফিল করব। তাই নিচের স্টেপ গুলো দেখেন এবং তৈরি করেন আমাদের টারগেটেড ওয়ার্ডপ্রেস টেম্পেলেট
header.php: আমাদের তৈরি করা header.php ফাইল টি খুলুন এবং নিচের কোড গুলো দ্বারা পূর্ণ করুন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
 
<head>
 
<title>Here title</title>
 
<link rel="stylesheet" type="text/css" href="style.css"/>
 
</head>
 
<body>
 
<div id="wraper">
 
<div id="header">
 
<div id="logo">
 
<h1>Here Web site's logo code</h1>
 
<h3>Here web site's tag line code</h3>
 
</div>
 
</div>
 
<div id="menu">
 
<ul>
 
<li><a href="#">Home</a></li>
 
<li><a href="#">Home</a></li>
 
<li><a href="#">Home</a></li>
 
<li><a href="#">Home</a></li>
 
<li><a href="#">Home</a></li>
 
<li><a href="#">Home</a></li>
 
</ul>
 
</div>
 
<div id="container">
left-sidebar.php: আমাদের তৈরি করা left-sidebar.php ফাইল টি খুলুন এবং নিচের কোড গুলো দ্বারা পূর্ণ করুন।
1
2
3
4
5
<div id="sidebar">
 
<div id="left-sidebar">Here left sidebar code</div>
 
</div>
index.php: আমাদের তৈরি করা index.php ফাইল টি খুলুন এবং নিচের কোড গুলো দ্বারা পূর্ণ করুন।
1
2
3
4
5
6
7
8
9
<div id="content">
 
<div class="post">
 
<div class="entry"></div>
 
</div>
 
</div>
right-sidebar.php: আমাদের তৈরি করা right-sidebar.php ফাইল টি খুলুন এবং নিচের কোড গুলো দ্বারা পূর্ণ করুন।
1
2
3
4
5
6
7
8
9
<div id="sidebar">
 
<div id="right-sidebar">Here right sidebar code</div>
 
</div>
 
<br class="clear" />
 
</div>
footer-widgets.php: আমাদের তৈরি করা footer-widgets.php ফাইল টি খুলুন এবং নিচের কোড গুলো দ্বারা পূর্ণ করুন।
1
<div class="footer-widgets">Here will footer widgets</div>
footer.php: আমাদের তৈরি করা footer.php ফাইল টি খুলুন এবং নিচের কোড গুলো দ্বারা পূর্ণ করুন।
1
2
3
4
5
6
7
<div class="footer">here will copy right text </div>
 
</div>
 
</body>
 
</html>
উপরের স্টেপ গুলো করা হলে আপনার তৈরিকৃত ওয়ার্ডপ্রেস টেম্পেলেট টি dashboard থেকে অ্যাক্টিভ করুন।  Appearance—Themes—Template (“Template” এটি হোল আমাদের টেম্পেলেটের নাম।) আরও জানার জন্য আপনারা local host site টি দেখতে পারেন। টেম্পেলেট অ্যাক্টিভ হলে আপনার লোকাল সাইট টি দেখুন। আপনি কি কিছু দেখছেন? না আপনি কিছুই দেখতে পাচ্ছেন না। কারণ আমরা এখনও আমাদের ফাইল গুলো index.php ফাইল এ attach করি নি।
এখন দেখব কি ভাবে সকল ফাইল index.php ফাইল এ attach করতে হই। ফাইল গুলো add or attach করার জন্য আপনার index.php ফাইল টি note pad আথবা Dreamweaver software দিয়ে খুলুন এবং নিচের code টুকু টাইপ করুন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php get_header();?> <!--Call header.php file--->
 
<?php include (TEMPLATEPATH . '/left-sidebar.php'); ?> <!--Call left-sidebar.php file--->
 
<div id="content">
 
<div class="post">
 
<div class="entry"></div>
 
</div>
 
</div>
 
<?php include (TEMPLATEPATH . '/right-sidebar.php'); ?> <!--Call right-sidebar.php file--->
 
<?php include (TEMPLATEPATH . '/footer-widgets.php'); ?> <!--Call footer-widgets.php file--->
 
<?php get_footer();?> <!--Call footer.php file--->
আমি এখানে comment tags এর মধ্যে কোড টুকুর ব্যাবহার দেখিয়েছি। যদি comment tags সম্পর্কে আপনাদের ধারনা না থাকে তাহলে আমার comment tags সম্পর্কে জানুন। ফাইল গুলো অ্যাড করা হলে আপনার টেম্পেলেট টির চেহারা হবে নিচের মত।

এখন আপনার header.php ফাইল টি খুলুন এবং কিছু পিএইচপি কোড লিখুন যেমন
1
<link rel="stylesheet" type="text/css" href="style.css"/>
এর পরিবর্তে নিচের কোড টুকু লিখুন।
1
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url');?>" />
উপরের কোড টুকু অ্যাড করার পর আমাদের টেম্পেলেট টির চেহারা হবে নিচের মত।

আপনি কি ভয় পাচ্ছেন? আপনার সকল পোস্ট কি ডিলিট হয়ে গেল! না আপনার কোন পোস্টই ডিলিট হই নি। আমরা ওয়ার্ডপ্রেস টেম্পেলেট তৈরি ৫ম পর্বে দেখব কি ভাবে টেম্পেলেটে পোস্ট অ্যাড করতে হয়। সো সাথে থাকুন।

No comments:

Post a Comment