Ad

পৃষ্ঠাসমূহ

Ad

শনিবার, ২০ জুলাই, ২০১৩

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




কেমন আছেন আপনারা। আবারও আসলাম ওয়ার্ডপ্রেস টেম্পেলেট তৈরির ২য় পর্ব নিয়ে। আপনি যদি এই ওয়ার্ডপ্রেস টেম্পেলেট তৈরির ১ম পর্ব মিস করে থাকেন তাহলে এখান থেকে দেখতে পারেন। মুলত এটি একটি সিরিজ টিউটোরিয়াল। আমি মনে করি আমার এই টেম্পেলেট তৈরির সিরিজটি ফলো করলে আপনিও পারবেন আপনার নিজের ওয়ার্ডপ্রেস ও এইচটিএমএল টেম্পেলেট তৈরি করতে। আমি আবার ও বলছি টেম্পেলেট তৈরি করতে হলে আপনা কে অবশ্যই HTML এবং CSS সম্পর্কে কিছু ধারনা থাকতে হবে। এ জন্য আপনি আমার HTML টিউটোরিয়াল এবং CSS টিউটোরিয়াল দেখতে পারেন।

টেম্পেলেট এর লেআউট তৈরি

আপনার index.html ফাইলটি Dreamweaver অথবা  Note pad দিয়ে খুলুন। যেটি আমরা ওয়ার্ডপ্রেস টেম্পেলেট তৈরি ১ম পর্বে তৈরি করেছি। এবং নিচের কোড টুকু লিখুন অথবা পেস্ট করুন।
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
</pre>
<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">
<div id="sidebar">
<div id="left-sidebar">Here left sidebar code</div>
</div>
<div id="content">
<div class="post">
<div class="entry"></div>
</div>
</div>
<div id="sidebar">
<div id="right-sidebar">Here right sidebar code</div>
</div>
<br class="clear" />
</div>
<div class="footer-widgets">Here will footer widgets</div>
<div class="footer">here will copy right text </div>
</div>
</body>
</html>
<pre>
এখন পেজটি সেভ করে যে কোন ওয়েব ব্রাউজার দিয়ে ওপেন করুন তাহলে আমাদের তৈরি করা সাইট লেআউট টি দেখতে পারবেন। এটা খুব খারাপ দেখতে তাই না? না চিন্তার কোন কারণ নেই। আমরা যখন আমাদের style.css ফাইলটি যোগ করব  তখন ভালো দেখাবে। দুঃখিত! আমরা যোগ করেছি কিন্তু কোন কোড লিখিনি। নিচের কোড টুকু দেখুন। এই কোড এর মাধ্যমে এইচটিএমএল ফাইল এর সাথে সিএসএস ফাইল অ্যাড করা হই। এই কোড টুকু আমরা আমাদের index.html ফাইল এর <head>----</head> ট্যাগ আর মধ্যে অ্যাড করেছি।
1
<link rel="stylesheet" type="text/css" href="style.css"/>
এটাই হোল স্ট্যাটিক সাইটে স্টাইল সিট যোগ করার পদ্ধতি। আমরা যখন এই টেম্পেলেট ওয়ার্ডপ্রেস টেম্পেলেটে কনভার্ট করব তখন এখানে কিছু php code অ্যাড করব।
ওয়ার্ডপ্রেস টেম্পেলেট তৈরি ২য় পর্ব/১৫ পর্ব এখানে সমাপ্ত  ওয়ার্ডপ্রেস টেম্পেলেট তৈরি ৩য় পর্ব দেখুন। এখানে টেম্পেলেট এ স্টাইল যোগ করা হয়েছে।

কোন মন্তব্য নেই:

একটি মন্তব্য পোস্ট করুন

Ad