نمایش مبدأ برای طراحی قالب در جوملا

=مقدمه=
در این مقاله قصد داریم یک قالب سایت برای [[جوملا]] 1.5 طراحی کنید و به تفاوت‌های آن با قالب‌های نسخه 1.6 و 1.7  می‌پردازیم. تمام کدهای [[جوملا]] (به زبان php) که در طراحی قالب‌های [[جوملا]] مورد استفاده قرار می‌گیرد ارائه شده است. شما براحتی می‌توانید این کدها را کپی کنید و بسته به نیازتان آنها را تغییر دهید.

=موارد مورد نیاز =

ما به یک بسته [[جوملا]] نیاز داریم که باید به وسیله آن یک سایت [[جوملا]]یی بسازیم و برای آن قالبی طراحی کنیم.

[http://www.joomlafarsi.com/download/ آخرین نسخه جوملا] تیم [http://www.joomlafarsi.com جوملا فارسی] را از سایت [http://www.joomlafarsi.com جوملا فارسی] دانلود کنید. 

به یک ابزار برای ویرایش متن مانند : notepad , notepad++ , DreamWeaver نیاز دارید که می‌توانید از آدرس <nowiki>http://notepad-plus-plus.org/download/v5.9.8.html</nowiki> دریافت کنید.

فرض بر این است که شما با [[HTML]] ، [[CSS]] آشنایی دارید.

=ساختار فایل‌ها و directoryهای یک قالب جوملا=

برای ساختن یک قالب [[جوملا]] به یک پوشه (directory) در پوشه templates ریشه [[جوملا]] نیاز داریم. پس ابتدا باید یک پوشه با نام (mynewtemplate) در داخل پوشه templates [[جوملا]] ایجاد کنیم.


<div dir=ltr>JoomlaRoot\templates\mynewtemplate</div>


هر قالب [[جوملا]] در داخل پوشه مربوط به خودش باید حداقل 2 فایل به نام‌های index.php و  templateDetails.xml را دارا باشد.

مابراحتی می‌توانیم این 2 فایل با این اسامی و پسوندها را در notepad++ ایجاد کنیم و آنها را در پوشه mynewtemplate ذخیره کنیم.

همچنین برای سازماندهی به عکس‌ها و استایل‌های قالب باید 2 پوشه دیگر در داخل mynewtemplate به نام‌های '''css''' و '''images''' ایجاد کنیم .

در داخل فولدر [[CSS]] باید یک فایل به نام template.css ایجاد کنیم.

'''نکته:''' اگر سایت دارای 2 زبان فارسی و انگلیسی است باید یک فایل دیگر به نام template_rtl.css ایجاد کنیم.

این امکان وجود دارد که شما استایل‌های مورد نظر خود را در داخل فایل index.php مستقیما وارد کنید ولی اکثر توسعه دهندگان ترجیح می‌دهند که به صورت اصولی (همین روشی که دراین مقاله مورد استفاده قرار می‌گیرد.) استایل‌های مورد نظر را در یک یا چند فایل css جداگانه (template.css یا template_rtl.css) بنویسند و با استفاده از تگ link آن فایل‌ها را در index.php (صفجه اصلی قالب‌های [[جوملا]])  فراخوانی کنند.

این کار مزایای زیادی مانند: سازماندهی استایل‌ها و دیباگ آسانتر به علت متمرکز بودن و کاهش زمان بارگذاری صفحه(فایل‌های مجزا می‌توانند cache شوند) دارد.

در کل ساختار قالب شما تاکنون باید به این صورت شده باشد.


<div dir=ltr>
mynewtemplate/  
	css/  
		template.css 
	images/ 
	index.php 
	templateDetails.xml 
</div>


=ایجاد یک فایل templateDetails.xml =

وجود این فایل در قالب‌های [[جوملا]] ضروری است. قالب‌ها بدون وجود این فایل نمی‌توانند توسط [[جوملا]] شناسایی و مشاهده شوند. در واقع این فایل است قالب را به [[جوملا]] معرفی می‌کند. این فایل حاوی اطلاعاتی در مورد قالب و متادیتای قالب است.

الگوی نگارش این فایل در خط پائین مشخص شده است .

'''نکته:''' البته این الگو مربوط به نسخه [[جوملا]]1.5 است .


<source lang="xml" >
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
	<name>mynewtemplate</name>
	<creationDate>2012-02-02</creationDate>
	<author>Shahab Matapour</author>
	<authorEmail>sh.matapour@gmail.com</authorEmail>
	<authorUrl>http://www.studio-design.co</authorUrl>
	<copyright>Shahab Matapour 2012</copyright>
	<license>GNU/GPL</license>
	<version>1.0.2</version>
	<description>My New Template</description>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<folder>images</folder>
		<folder>css</folder>
	</files>
	<positions>
		<position>breadcrumb</position>
		<position>left</position>
		<position>right</position>
		<position>top</position>
		<position>user1</position>
		<position>user2</position>
		<position>user3</position>
		<position>user4</position>
		<position>footer</position>
	</positions>
</install>
</source>


برای نسخه [[جوملا]]  1.7 و 1.6 از الگو زیر استفاده می‌کنیم. دقت کنید که از تگ extension بجای install استفاده شده است.

'''نکته:''' دقت کنید که مقابل version در خط دوم 1.6 را نوشتیم اگر برای [[جوملا]] 1.7 تصمیم به ایجاد قالب داشتیم باید 1.7 را بنویسیم.


<source lang="xml" >
<?xml version="1.0" encoding="utf-8"?>
<extension version="1.6" type="template">
	<name>mynewtemplate</name>
	<creationDate>2012-02-02</creationDate>
	<author>Shahab Matapour</author>
	<authorEmail>sh.matapour@gmail.com</authorEmail>
	<authorUrl>http://www.studio-design.co</authorUrl>
	<copyright>Shahab Matapour 2012</copyright>
	<license>GNU/GPL</license>
	<version>1.0.2</version>
	<description>My New Template</description>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<folder>images</folder>
		<folder>css</folder>
	</files>
	<positions>
		<position>breadcrumb</position>
		<position>left</position>
		<position>right</position>
		<position>top</position>
		<position>user1</position>
		<position>user2</position>
		<position>user3</position>
		<position>user4</position>
		<position>footer</position>
	</positions>
</extension>

</source>


همانطور که کاملا مشخص است تمامی مشخصات در xml مابین elementها مشخص می‌گردند. شاید نوشتن فایلی از ابتدا کمی دشوار باشد پیشنهاد اینست این کد را در داخل فایل templateDetails.xml خود کپی کنید و مشخصات elementها را بسته به نیازتان ویرایش کنید. 

Elementهای name تا description شامل مشخصات تولید کننده قالب [[جوملا]]ست.

name: نام قالب است .

'''نکته مهم: name باید با نام پوشه قالب (در این مثال mynewtemplate) یکی باشد.'''

creationDate: تاریخ ایجاد قالب 

author: نام تولید کننده قالب و ... همین طور به ترتیب تا عنصر description

description: که توضیحاتی راجب این قالب ارائه میکند این توضیحات زمانی که قالب در [[جوملا]] نصب میشود نمایش داده خواهدشد.

قسمت files شامل تمامی فایل‌هایی است که در قالب مورد استفاده قرار می‌گیرد. ممکن است که شما در این لحظه از تعداد و نام فایل‌های که قرار است در قالب از آنها استفاده کنید اطلاعی نداشته باشید، نگران این موضوع نباشید، شما می‌توانید بعدا این قسمت را update کنید. 

بخش position هم برای معرفی موقعیت‌هایی است که شما تصمیم دارید در قالب [[جوملا]] از آنها استفاده کنید. در تنظیمات ماژول می‌توانید این موقعیت‌ها را برای نمایش یک ماژول انتخاب کنید.

=ایجاد فایل index.php =

صفحه index.php قالب‌های [[جوملا]] صفحه اصلی قالب‌های [[جوملا]]ست . در صورتی که شما مسلط به [[HTML]] باشید می‌توانید این صفحه را همانند یک صفحه [[HTML]] معمولی ایجاد کنید فقط باید در بعضی از قسمت‌های آن یکسری کدهای [[PHP]] اضافه کنید. که در این مقاله به تفضیل به آنها خواهیم پرداخت.

صفحه ساختار ساده (بدون استایل) قالب [[جوملا]] می‌باشد.

صفحه index.php [[جوملا]] 1.5 با کدهای php زیر شروع میشود.


<source lang="php" >
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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; ?>" >
</source>


کد خط اول برای مسائل امنیتی [[جوملا]] ست و برای جلوی گیری از دسترسی غیر مجاز است.

خط بعدی Document Type Declaration(DOCTYPE) که اطلاعاتی راجع به این صفحه [[وب]] به Web Crawlerها(خزنده‌های موتورهای جستجو) ارائه می‌کند. 

خط سوم هم به صفحه index.php قالب می‌گوید که مدیر سایت چه زبانی را برای نمایش سایت (در [[جوملا]] اصطلاحا front-end میگوییم) مشخص کرده است.

همانطور که میدانید یک صفحه [[HTML]] به '''دو قست''' تقسیم میشود (head و body) بخش head شامل اطلاعاتی درخصوص منابعی که در این قالب [[جوملا]] می‌خواهیم از آن استفاده کنیم است در واقع از این قسمت باید آن منابع را به قالب لینک کنیم.

بخش body شامل کدهای لایه مختلف ساختار قسمت‌های مختلف قالب است .

=کد php  مربوط بخش head صفحه index.php قالب =

برای قالب‌هایی که از یک زبان استفاده میکنند (فارسی یا انگلیسی) از این کد استفاده می‌کنیم.


<source lang="php" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>
</source>


برای قالب‌های که از 2 زبان مختلف که یکی از آنها از راست به چپ است مثل فارسی ودیگری از چپ به راست است مثل انگلیسی (RTL یا LTR) استفاده می‌کنند این کد را می‌نویسیم:

'''نکته:''' دقت کنید زبان فارسی و عربی چون هردو RTL هستند از نوع اول استفاده می‌کنیم.


<source lang="php" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<?php if($this->direction == 'rtl') : ?>
	<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template_rtl.css" rel="stylesheet" type="text/css" />
<?php else: ?>
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
<?php endif; ?>
</head>
</source>
خط
<source lang="php" >
<jdoc:include type="head" />
</source>


اطلاعات مربوط به header را در قالب‌های [[جوملا]] قرار می‌دهد شامل اطلاعات متا و عنوان صفحه و ...

کدهای


<source lang="php" >
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
</source>
برای اضافه کردن  2تا فایل css ای که تمام قالب‌های [[جوملا]] 1.5  از آنها استفاده میکنند.
=کدهای php برای قسمت body  فایل  index.phpقالب=
<source lang="php" >
<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
</source>


خیلی شگفت آور است؟ ولی حقیقت دارد همین کدها برای راه اندازی و ایجاد یک قالب [[جوملا]] کفایت می‌کند. در این حالت ما 2 position به نام‌های top و bottom داریم و یک موقعیت برای نمایش مطالب و سایر componentها داریم.

دستور '''jdoc''' به [[جوملا]] می‌گوید که از سیستم مدیریت محتوا [[جوملا]] یکسری منابع را فراخوانی (include) کند. Type مشخص کننده نوع آن منابع است دقت کنید که در اینجا type هم modules و هم component استفاده شده است. جهت کسب اطلاعات بیشتر در این زمینه به مقاله [[‏دستورات jdoc]] مراجعه فرمایید.

وقتی در یک قسمت از فایل index.php می‌نویسیم:


<source lang="php" >
<jdoc:include type="modules" name="top" /> 
</source>


یعنی در آن قسمت از قالب یک position به نام top ایجاد کن. به جای top هر اسم دیگری می‌تواند باشد ولی به این نکته توجه داشته باشید که قبلا این نام را در فایل templateDetails.xml به عنوان position مشخص کرده باشیم.

هنگامی در یک قسمت از فایل index.php قالب می‌نویسیم:


<source lang="php" >
<jdoc:include type="component" />
</source>


یعنی آن قسمت مکان کلیه مطالب (مقاله‌ها و مطالبی که در مدیریت مطالب ایجاد می‌شوند.) و کامپوننت‌های [[جوملا]] است. نوشتن این کد برای فایل index.php خیلی مهم است. شما می‌توانید ماژول‌های بیشتری در templateDetails.xml معرفی کرده و در صفحه index.php ایجاد نمایید. و در نهایت بستن تگ html به این صورت


<source lang="xml" >
</html>
</source>


انجام می‌شود.

در نهایت کد صفحه index.php قالب [[جوملا]] 1.5 ما به این صورت شد:


<source lang="php" >
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mynewtemplate/css/template.css" type="text/css" />
</head>
<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
</html>
</source>


در [[جوملا]] 1.5 ما می‌توانیم کل پوشه mynewtemplate با تمام فایل‌ها و ساب فولدرها در پوشه templates [[جوملا]] آپلود کنیم یا آن را zip کنیم و از مدیریت [[جوملا]] در قسمت نصب و حذف اقدام به نصب این قالب کنیم.

بعد از نصب یا آپلود قالب باید به قسمت مدیریت قالب‌ها برویم قالب mynewtemplate بر پیش فرض قرار دهیم.

=نکاتی در مورد اضافه کردن عکس و فایل javascript و غیره در قالب=

پیشتر گفتیم با صفحه index.php قالب همانند یک صفحه [[HTML]] رفتار کنید و در برخی موارد که نیاز به کد [[PHP]] دارد که در این مقاله آنرا آموزش می‌دهیم. اگر شما یک عکس در فولدر images/stories داشته باشید و نام آن myimage.png باشد به صورت زیر در [[HTML]] اقدام به نمایش آن می‌کنیم.


<source lang="php" >
<img src="images/stories/myimage.png" alt="Custom image" />
</source>
اگر بخواهیم یک کلاس css به نام customImage به آن تصویر بدیم :
<source lang="php" >
<img src="images/stories/myimage.png" alt="Custom image" class="customImage" />
</source>


استایل‌های مربوط به cutomImage را می‌توانیم در فایل template.css  قالب بنویسیم.

ولی اگر این کدها در یک قالب [[جوملا]] بنویسید تصویر مورد نظر را نمایش نمی‌دهد ما بعد از هر src در صفحه index.php قالب [[جوملا]] 1.5  باید کد


<source lang="php" >
<?php echo $this->baseurl; ?>
</source>


را اضافه کنیم. یعنی برای نمایش عکس در فولدر images/stories با نام myimage.png باید 


<source lang="php" >
<img src="<?php echo $this->baseurl; ?>/images/stories/myimage.png" alt="Custom image" />
</source>


بنویسیم. دقت کنید که در این مثال پوشه images در داخل root [[جوملا]] قرار دارد.

اگر همین عکس در پوشه image در داخل خود قالب (mynewtemplate) [[جوملا]] بود باید به این صورت می‌نوشتیم:


<source lang="php" >
<img src="<?php echo $this->baseurl; ?> /templates/<?php echo $this->template;?>/images/myimage.png" alt="Custom image" />
</source>


----

منبع : <nowiki>http://docs.joomla.org/Creating_a_basic_Joomla!_template</nowiki>

جمع آوری و ترجمه: [http://forum.joomlafarsi.com/members/26237-shmata شهاب مطاع پور]

{{معرفی پشتیبانی}}

{{کپی رایت}}

[[رده:مقالات جوملا 1.5]] [[رده:طراحی قالب جوملا 1.5]]