কেমন আছেন আপনারা। আবারও আসলাম ওয়ার্ডপ্রেস টেম্পেলেট তৈরির ৩য় পর্ব নিয়ে। আপনি যদি এই ওয়ার্ডপ্রেস টেম্পেলেট তৈরির ২য় পর্ব মিস করে থাকেন তাহলে লিঙ্কে ক্লিক করে দেখতে পারেন। মুলত এটি একটি সিরিজ টিউটোরিয়াল। আমি মনে করি আমার এই টেম্পেলেট তৈরির সিরিজটি ফলো করলে আপনিও পারবেন আপনার নিজের ওয়ার্ডপ্রেস ও এইচটিএমএল টেম্পেলেট তৈরি করতে। আমি আবার ও বলছি টেম্পেলেট তৈরি করতে হলে আপনা কে অবশ্যই HTML এবং CSS সম্পর্কে কিছু ধারনা থাকতে হবে। এ জন্য আপনি আমার HTML টিউটোরিয়াল এবং CSS টিউটোরিয়াল দেখতে পারেন।
আপনার style.css ফাইলটি Dreamweaver অথবা Note pad দিয়ে খুলুন। যেটি আমরা ওয়ার্ডপ্রেস টেম্পেলেট তৈরি ১ম পর্বে তৈরি করেছি। এবং নিচের কোড টুকু লিখুন অথবা পেস্ট করুন।
/* CSS Document */ body { background: none repeat scroll 0 0 #E6F4D5; color: #333333; font-family: arial; font-size: 15px; line-height: 150%; margin: 0; padding: 0; } img { border:none; } * { margin:0; padding:0; border:none; } #wraper { background: none repeat scroll 0 0 #cfd9be; margin: 0 auto; padding: 0; width: 980px; } /*------------------------------ --Header style ---------------------------------*/ #header { background: none repeat scroll 0 0 #a2bb7d; height: 100px; padding: 10px; width: 960px; } /*------------------------------ --Menu style ---------------------------------*/ #menu { background: none repeat scroll 0 0 #001144; height: 35px; margin: 0; padding: 0; width: 100%; } #menu ul { list-style:none; } #menu li { float:left; } #menu a { border-left: 1px solid -moz-visitedhyperlinktext; color: #FFFFFF; display: block; padding: 5px 10px; text-align: center; text-decoration: none; } #menu a:hover { display:block; background:#0CF; color:#000000; border-bottom:2px solid #F93; } /*------------------------------ --container style ---------------------------------*/ #container { background: none repeat scroll 0 0 #CFD9BE; margin: 0; padding: 0; width: 980px; } #content { background: none repeat scroll 0 0 #FFFFFF; float: left; margin: 0; padding: 10px; width: 560px; } /*------------------------------ --Post style ---------------------------------*/ .post { background: none repeat scroll 0 0 #FFFFFF; border: 1px dotted #BBBDDE; float: left; margin: 0 0 17px; overflow: hidden; padding: 10px; width: 540px; } .entry { } /*------------------------------ --Sidebar style ---------------------------------*/ #sidebar { } #sidebar a { } #sidebar a:hover { } #sidebar #left-sidebar { background: none repeat scroll 0 0 #DDEACA; float: left; min-height: 300px; width: 180px; padding:0 10px; } #sidebar #right-sidebar { background: none repeat scroll 0 0 #DDEACA; float: right; min-height: 300px; padding: 0 10px; width: 180px; } /*------------------------------ --Footer widgets style ---------------------------------*/ .footer-widgets { background: none repeat scroll 0 0 #93938E; height: auto; padding: 0 10px; width: 960px; } /*------------------------------ --Footer style ---------------------------------*/ .footer { background: none repeat scroll 0 0 #93938E; border-top: 1px solid #666666; padding: 10px; width: 960px; } /*------------------------------ --other style ---------------------------------*/ .clear { clear:both; }
এখন পেজ টি সেভ করে আপনার index.html ফাইল টি যে কোন ওয়েব ব্রাউজার দিয়ে খুলুন। তাহলে নিচের মত ফলাফল দেখতে পাবেন।
আপনার যদি আমার ডিজাইন টি পছন্দ না হই তাহলে শুধুমাত্র কিছু সিএসএস কোড অ্যাড করে নিজের মনের মত করে নিতে পারেন। যেমন আপনি আপনার টেম্পেলেটের রং, ফন্ট সাইজ, ফন্ট ফ্যামিলি ইত্যাদি সবি style.css ফাইল আর মাধ্যমে খুব সহজে করতে পারবেন। আর এর জন্য আপনাকে CSS সম্পর্কে জানতে হবে। যদি না জানেন তাহলে আমার CSS টিউটোরিয়াল দেখতে পারেন। যার লিঙ্ক আমি এই পেজ এর প্রথম দিকে দিয়েছি। আশা করি ভালোই লাগবে।
ওয়ার্ডপ্রেস টেম্পেলেট তৈরি ৪র্থ পর্ব দেখুন এবং শিখুন কি ভাবে পার্ট বাই পার্ট করে HTML টেম্পেলেটকে PHP টেম্পেলেট তৈরি করতে হই। এটি শুধু ওয়ার্ডপ্রেস টেম্পেলেট তৈরির জন্যই গুরুত্বপূর্ণ নই যে কোন বড় স্ট্যাটিক ওয়েব সাইট এর জন্যও খুব গুরুত্বপূর্ণ।
আমি Tutorial-house। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 4 টি টিউন ও 6 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
আমি আপনার ইংরেজী টিউটোরিয়ালগুলো দেখেছি। আমার খুব কাজে লাগছে। অনেক দিন ধরে চেষ্টা করছিলাম কিন্তু পারছিলাম না। আশা করছি আপনার সাইটে ওয়ার্ডপ্রেসের প্রিমিয়াম থিম ডেভেলপ নিয়ে কিছু লিখবেন। আর আমি চেষ্টা করছি ওয়ার্ডপ্রেসের উপর নিজেকে ডেভেলপ করার তো আপনার মত গুরুদের থেকে সাহায্য পেলে হয়তো এগিয়ে যেতে পারব। ধন্যবাদ