آموزش طراحی قالب برای جوملا 1.5

[balvardi]

خیلی از دوستان علاقه مند به طراحی قالب جوملا هستند ، اما وقتی فایل یکی از قالب های جوملا را باز می کنند با یک سری کد های php و html نام مفهوم آشنا می شوند. ما در این مطلب سعی داریم تا شما را با کد های جوملا آشنا کنیم بهمین منظور ابتدا توضیحاتی راجع به فایل ها و سیپس راجع به کد ها برای شما عنوان میکنیم که امیدواریم بدرد شما هم بخورد:

قالب جوملا از چند بخش تشکیل شده است »

1- فایل های php

2- فایل های css

3- فایل های جاوا اسکریپت

4- تصاویر

5- فایل های کمکی ini , xml ,png ,html ,ico

فایل های php که اصلی ترین آن فایل index.php می باشد همان ظاهر کلی را طراحی می کند ، برای جزئیات شما میتوانید فایل مربوط به هر قسمت را در پوشه html بارگذاری کنید ، نمونه این فایلها به همراه برنامه های جوملا در پوشه های component و modules قرار دارند که می توان برای هر قالب سفارشی نمود ، البته اگر پوشه html خالی باشد جوملا از ظاهر پیش فرض خود استفاده می کند.

فایل های css فایل های چینش و رنگ بندی سایت را تشکیل می دهند اصلی ترین فایل این قسمت template_css.css یا template.css می باشد ، بهتر است تمامی کدهای مربوط به چینش و رنگ بندی در این فایل ها قرار گیرد ، اینطوری دیگر برای یافتن یک کد گیچ نمی شوید.برای صدا زدن فایل css باید از کد زیر در قالب استفاده شود :

<link href="<?php echo $this->baseurl ?>/templates/template_name/css/template_css.css" rel="stylesheet" type="text/css" />
فایل های جاوا اسکریپت بیشتر برای ایجاد افکت های زیبا در سایت کاربرد دارد ، کتابخانه این فایل ها در جوملا قرار دارد و شما نیازی به فراخوانی مجدد آنها ندارید. برای صدا زدن فایل های javascript باید از کد زیر در قالب استفاده کنید:

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/template_name/js/java_file_name.js"></script>
فایل های تصویری زیباترین بخش قالب را به خود اختصاص می دهند ، فرمت این تصاویر باید jpg , gif , png و برای انیمیشن ها swf باشد .برای صدا زدن تصاویر از کد زیر استفاده می شود:

<img border="0" src="<?php echo $this->baseurl ?>/templates/template_name/images/image_file_name.png" title="No Image" />
فایل های کمکی فایل هایی هستند که برای هسته جوملا استفاده می شود و سیستم برای شناسایی قالب با آنها کار دارد، مثلا params.ini برای نگهداری اطلاعات ذخیره شده در بخش ویرایش قالب در مدیریت جوملا کاربرد دارد ، شما میتوانید در فایل xml اصلی قالب خود پارامترهایی را صدا بزنید و نتیجه را در فایل params.ini ذخیره کنید

فایل templateDetails.xml فایل نصاب و کنترل کننده جوملا می باشد ، این فایل دارای فرمت زیر است :
این قسمت اطلاعات اولیه برای شناسایی فایل توسط جوملا قرار دارد:

<?xml version="1.0" encoding="utf-8"?>
&lt;!DOCTYPE install PUBLIC &quot;-//National CMS 1.5//DTD template 1.0//EN&quot; &quot;<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b>
&lt;install version=&quot;1.5&quot; type=&quot;template&quot;&gt;
نام قالب شما در این بخش می باشد

&lt;name&gt;template_name&lt;/name&gt;
این بخش به اطلاعات عمومی راجع به قالب شما اختصاص دارد، شامل تاریخ ایجاد ، قوانین دسترسی ، طراح و اطلاعات تماس و ...

&lt;creationDate&gt;11/20/06&lt;/creationDate&gt;
&lt;author&gt;R.Balvardi&lt;/author&gt;
&lt;authorEmail&gt; r.balvardi@gmail.comThis email address is being protected from spam bots, you need Javascript enabled to view it &lt;/authorEmail&gt;
&lt;authorUrl&gt;<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b>
&lt;copyright&gt;&lt;/copyright&gt;
&lt;license&gt;GNU/GPL&lt;/license&gt;
&lt;version&gt;1.0.2&lt;/version&gt;
&lt;description&gt;Software company and IT technology template with multi lingual and page direction support&lt;/description&gt;
این قسمت مربوط به نصاب است ، هر فایل که در اینجا عنوان شود توسط جوملا به سایت هنگام نصب منتقل می شود.

&lt;files&gt;
&lt;filename&gt;index.php&lt;/filename&gt;
&lt;filename&gt;templateDetails.xml&lt;/filename&gt;
&lt;filename&gt;template_thumbnail.png&lt;/filename&gt;
&lt;filename&gt;params.ini&lt;/filename&gt;
&lt;/files&gt;
این قسمت موقعیت قرار گیری ماژول ها در قالب عنوان می شود ، جوملا میتواند در هر یک از این موقعیت ها یک یا چند ماژول را قرار دهد.

&lt;positions&gt;
&lt;position&gt;left&lt;/position&gt;
&lt;position&gt;right&lt;/position&gt;
&lt;position&gt;top&lt;/position&gt;
&lt;position&gt;user1&lt;/position&gt;
&lt;position&gt;user2&lt;/position&gt;
&lt;position&gt;user3&lt;/position&gt;
&lt;position&gt;user4&lt;/position&gt;
&lt;position&gt;banner&lt;/position&gt;
&lt;position&gt;footer&lt;/position&gt;
&lt;/positions&gt;
این قسمت میتوانید پارامترهای قالب را تعریف کنید ، مثلا در قالب های چند رنگی میتوان رنگ را به عنوان پارامتر تعریف کرد.

&lt;params&gt;
&lt;param type=&quot;spacer&quot; default=&quot;Template Logo&quot; /&gt;
&lt;param name=&quot;logoType&quot; type=&quot;list&quot; default=&quot;image&quot; label=&quot;Logo type&quot; description=&quot;LOGO TYPE DESCRIPTION&quot;&gt;
&lt;option value=&quot;image&quot;&gt;Image&lt;/option&gt;
&lt;option value=&quot;text&quot;&gt;Text&lt;/option&gt;
&lt;/param&gt;
&lt;param name=&quot;logoText&quot; type=&quot;text&quot; default=&quot;&quot; size=&quot;50&quot; label=&quot;Logo text&quot; description=&quot;LOGO TEXT DESCRIPTION&quot; /&gt;
&lt;param name=&quot;sloganText&quot; type=&quot;text&quot; default=&quot;&quot; size=&quot;50&quot; label=&quot;Slogan&quot; description=&quot;SLOGAN DESCRIPTION&quot; /&gt;
&lt;/params&gt;
میتوانید برای اصطلاحات بکار رفته در قالب خود از فایل زبان نیز استفاده کنید تا جوملا بتواند با تغییر زبان این عنوان را نیز تغییر دهد

&lt;languages&gt;
&lt;language tag=&quot;en-GB&quot;&gt;en-GB.lang_file.ini&lt;/language&gt;
&lt;/languages&gt;
&lt;administration&gt;
&lt;languages&gt;
&lt;language tag=&quot;en-GB&quot;&gt;admin/en-GB.lang_file.ini&lt;/language&gt;
&lt;/languages&gt;
&lt;/administration&gt;
این کد انتهایی فایل است که فایل را می بندد

&lt;/install&gt;


آشنایی با کدهای قرار گرفته در فایل index.php قالب جوملا:
کد محافظت در مقابل سوء استفاده هکرها در قالب : این کد جلوی اجرای مستقیم فایل قالب را میگیرد و به هکر ها اجازه رویت محتوای قالب را بصورت مستقیم نمی دهد.

&lt;?php
defined( &#039;_JEXEC&#039; ) or die( &#039;Restricted access&#039; );
?&gt;
این کد پیشانی یا معرفی نامه سایت شما را نمایش میدهد.

&lt;jdoc:include type=&quot;head&quot; /&gt;
آموزش کد های قالب جوملا 1- آشنایی با کد ماژول : کد ماژول کدی است که به شما اجازه نمایش ماژول های نصبی در بخش مدیریت را می دهد ، شما میتوانید با تغییر style ساختار ماژول را عوض کنید استایل های مجاز این ها هستند : none,xhtml,rounded با زدن دستور index.php?tp=1 جلوی هر سایت جوملایی میتوانی این موقعیت ها را ببینید.

&lt;jdoc:include type=&quot;modules&quot; name=&quot;left&quot; style=&quot;xhtml&quot; /&gt;
کد مسیر سایت : این کد به طراح اجازه میدهد که خروجی قالب سایت را دارای آدرس کند ، به عنوان مثال به جای این شیوه آدرس دهی images/artocle.jpg این آدرس تولید میشود : <b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b>

&lt;?php echo $this-&gt;baseurl ?&gt;
در صورتی که علاقه دارید ماژول های خالی نمایش داده نشوند از کد زیر استفاده کنید : قسمت اول : &lt;?php if($this-&gt;countModules(&#039;top&#039;)) : ?&gt; ، قسمت دوم : &lt;?php endif; ?&gt; هر چه در بین این دو کد قرار گیرد در صورت خالی بودن موقعیت top مخفی میشود ، البته میتوانید از دستور &lt;?php else: ?&gt; ما بین این دو کد نیز استفاده کنید.

&lt;?php if($this-&gt;countModules(&#039;top&#039;)) : ?&gt;
&lt;?php else: ?&gt;
&lt;?php endif; ?&gt;
کد تشخیص زبان : برای تشخیص و استفاده از نام زبان در طراحی ، مثال برای دو زبانه کردن یک قالب این کد کاربرد دارد ، میتوانید فایل های هر زبان را در پوشه ای مجزا قرار داده و با این کد صدا برنید.

&lt;?php echo $this-&gt;language; ?&gt;
کد برای زبان فارسی : داخل این 2 تا کد هر چی قرار بگیره وقتی زبان فارسی باشه لود میشه

&lt;?php if($this-&gt;direction == &#039;rtl&#039;) : ?&gt;
&lt;?php endif; ?&gt;
کد لایسنس برای فوتر :

&lt;?php echo JText::_(&#039;Powered by&#039;) ?&gt;
کد نمایش پیغام های سایت : این کد برای نمایش پیغام های جوملا استفاده میشود

&lt;jdoc:include type=&quot;message&quot; /&gt;
کد نمایش محتوا : این کد محتوای صفحه را نمایش می دهد

&lt;jdoc:include type=&quot;component&quot; /&gt;
گاهی یه قالب به اندازه یه سیستم ممگنه کد داشته باشه ، اما با این راهنمای ساده میتوانید چیزی را که لازم دارید بیابید.