জুমলা (CMS) দিয়ে ওয়েবসাইট তৈরি করুন – ধারাবাহিক টিউটোরিয়াল ক্লাস ১৪ (জুমলার template তৈরি)

8
777

কেমন চলছে সবার? আসা করি ভালই আছেন? নিয়মিত পড়ছেন কি আমার লিখা এই টিউটোরিয়াল গুলো? আসা করি যাদের শিখার আগ্রহ আছে তারা নিয়মিত আছেন আমার সাথে। আজকে খুব ই কষ্টকর একটি জিনিস শিখাব। আজকে আমরা দেখব কিভাবে জুমলার একটি টেম্পলেট নিজেই নিজের মনের মোট করে তৈরি করে নিতে পারবেন। যদিও আপনার দরকার হবে না নিজের তৈরি করা কারন ফ্রীতে আপনি হাজার হাজার template পেয়ে যাবেন তবুও আমি দেখাচ্ছি শুধু মাত্র ধারনা রেখে দিতে পারেন।

জুমলা (CMS) দিয়ে ওয়েবসাইট তৈরি করুন – ধারাবাহিক টিউটোরিয়াল ক্লাস ১৪ (জুমলার template তৈরি)

ফাইল / ফোল্ডার মানেজ এবং স্ট্রাকচার

প্রথমে “templates” ফোল্ডার টি ওপেন করুন আপনার সি প্যানেল এ ঢুকে এবং একটি সাব ফোল্ডার তৈরি করুন যে কোন একটি নাম দিয়ে। আমাদের template বানানো শেষ হলে এখানে এনে তৈরি করা template টি জমা রাখবেন। এবার মাত্র তৈরি করা ফোল্ডার ওপেন করে একটি ফাইল তৈরি

করুন index.php নামে এবং templateDetails.xml নামে। এবার আরেকটি ফোল্ডার তৈরি করে নাম দিন css এবং এটির ভিতরে আরেকটি ফাইল তৈরি করুন template.css নামের। ফাইল তৈরি করতে নোটপ্যাড ব্যবহার করতে পারেন অথবা সি প্যানেল এর ভিতরেও পারবেন।

index.php – এটি আপনার সাইটের মডিউল পসিশন এবং স্টাইল শিটের তথ্য জমা রাখে।

templateDetails.xml – এটি একটি সিস্টেম ফাইল। এটি জুমলার application গুলোর তথ্য প্রদান করে থাকে।

css/template.css – এটি নির্ধারণ করে আপনার সাইট টি দেখতে কেমন হবে এবং ইত্যাদি।

 

template তৈরি করা শুরু

তৈরি করা index.php ফাইলের শুরুটা ঠিক এমন করে করতে হবে

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language; ?>” >
<head>
<jdoc:include type=”head” />
</head>

এবার “body” পার্ট এর কাজ শুরু করতে হবে

<body>

<jdoc:include

type=”component” />

</body>
</html>

The <jdoc:include type=”component” /> line will display the main content of any given page.

Now, it is time to check our template. Save the index.php file and login to the Administrative end of your Joomla application. From it, make the new “tutorial_template” template default for your website. Your page should look like this one depending on the content you have:
joomla জুমলা (CMS) দিয়ে ওয়েবসাইট তৈরি করুন – ধারাবাহিক টিউটোরিয়াল ক্লাস ১৪ (জুমলার template তৈরি)

এই পেজে দেখুন কোন প্রকার স্টাইল নেই তাই না? এবার আমরা এটিকে আরো সুন্দর করে সাজিয়ে তুলতে পারি index.php ফাইল এডিট করে নিচের কোডিং বসিয়ে দিন। <body> এর মাঝে </body>

<div id=”container”>
<div id=”header”> <jdoc:include type=”modules” name=”top” /> </div>
<div id=”sidebar_left”> <jdoc:include type=”modules” name=”left” /> </div>
<div id=”content”> <jdoc:include type=”component” /></div>
<div id=”sidebar_right”class=”float”> <jdoc:include type=”modules” name=”right” /> </div>
<div id=”footer”> <jdoc:include type=”modules” name=”footer” /> </div>
</div>

কাজ হয়ে যার পরে আগে এবং পরের সব কাজ মিলিয়ে আপনার index.php ফাইলটি এরকম দেখতে হবে

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo

$this->language; ?>” >
<head>
<jdoc:include type=”head” />
</head>
<body>
<div id=”container”>
<div id=”header”><jdoc:include type=”modules” name=”top” /> </div>
<div id=”sidebar_left”><jdoc:include type=”modules” name=”left” /></div>
<div id=”content”><jdoc:include type=”component” /></div>
<div id=”sidebar_right”class=”float”><jdoc:include type=”modules” name=”right” /></div>
<div id=”footer”><jdoc:include type=”modules” name=”footer” /></div>
</div>
</body>
</html>

এবার আমরা templateDetails.xml তৈরি করব। নিচের কোডিং গুলো কপি করে বসিয়ে দিন।

<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE install PUBLIC “-//Joomla! 1.5//DTD template 1.0//EN” “http://dev.joomla.org/xml/1.5/template-install.dtd”>
<install version=”1.5″ type=”template”>
<name>tutorial_template</name>
<creationDate>02/2008</creationDate>
<author>SiteGround</author>
<authorEmail>templates@siteground.com</authorEmail>
<authorUrl>http://www.siteurl.com</authorUrl>
<copyright>SiteGround</copyright>
<license>SG TOS</license>
<version>1.0.0</version>
<description>Basic Joomla Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions>
</install>

এবার আমারা এরো কিছু স্টাইল যুক্ত করতে পারি আবারো index.php ফাইলটি খুলে নিচের কোডিং লিখুন </head>

tag এর আগে

<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/tutorial_template/css/template.css” type=”text/css” />

এবার আমরা তৈরি করব css/template.css ফাইল টি খুলে নিচের লাইন গুলো যুক্ত করে দিন।
* {
padding: 0;
margin: 0;
}
img {
border: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 13px;
color: #0F0F0F;
}
a:link, a:visited {
text-decoration: underline;
font-weight: normal;
color: #000;
outline: none;
text-align: left;
}
.float {
float: left;
}
.clear {
clear: both;
}
.overall {
background-color: #fff;
}
div.center {
text-align: center;
margin: 0px auto 0 auto;
padding: 0;
width: 950px;
background: #FFFFFF;
}
#container {
width:960px;
margin: auto;
background-color: #f4f9fc;
border: 1px solid #e2e2e2;
text-align: left;
}
#header {
text-align: center;
background-color:#f4f9fc;
height: 80px;
}
#content {
width: 598px;
text-align: left;
background-color:#f4f9fc;
padding: 5px;
}
#sidebar_left {
text-align: center;
background-color:#f4f9fc;
width: 165px;
border-right: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}
#sidebar_right {
background-color:#f4f9fc;
text-align: center;
width: 165px;
border-left: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}
#footer {
background-color:#f4f9fc;
text-align:center;
border-top: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}

 

কাজ শেষ আমাদের তবে মনে রাখুন এটি দেখতে খুব সুন্দর হবে না কারন আমি শুধু মাত্র বেসিক একটি template তৈরি করেছি আপনি আরো ভালো কোডিং যুক্ত করে এটিকে আরো সুন্দর করতে পারবেন তবে বেসিক জিনিস গুলো একি থাকবে এবার নিচের দেখুন আমাদের তৈরি করা template টি দেখতে কেমন হয়েছে।
জুমলা জুমলা (CMS) দিয়ে ওয়েবসাইট তৈরি করুন – ধারাবাহিক টিউটোরিয়াল ক্লাস ১৪ (জুমলার template তৈরি)

8 মন্তব্য

একটি উত্তর ত্যাগ