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

بیان مباحث و مشکلات در مودر قالبهای وملا

Moderator: joomlalearn

User avatar
negarkhane
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 143
Joined: Sat Aug 20, 2005 4:38 pm
Location: Iran
Contact:

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

Postby negarkhane » Mon Nov 29, 2010 11:08 pm

خیلی از دوستان علاقه مند به طراحی قالب جوملا هستند ، اما وقتی فایل یکی از قالب های جوملا را باز می کنند با یک سری کد های 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 باید از کد زیر در قالب استفاده شود :

Code: Select all

<link href="<?php echo $this->baseurl ?>/templates/template_name/css/template_css.css" rel="stylesheet" type="text/css" />

فایل های جاوا اسکریپت بیشتر برای ایجاد افکت های زیبا در سایت کاربرد دارد ، کتابخانه این فایل ها در جوملا قرار دارد و شما نیازی به فراخوانی مجدد آنها ندارید. برای صدا زدن فایل های javascript باید از کد زیر در قالب استفاده کنید:

Code: Select all

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/template_name/js/java_file_name.js"></script>

فایل های تصویری زیباترین بخش قالب را به خود اختصاص می دهند ، فرمت این تصاویر باید jpg , gif , png و برای انیمیشن ها swf باشد .برای صدا زدن تصاویر از کد زیر استفاده می شود:

Code: Select all

<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 فایل نصاب و کنترل کننده جوملا می باشد ، این فایل دارای فرمت زیر است :
این قسمت اطلاعات اولیه برای شناسایی فایل توسط جوملا قرار دارد:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//National CMS 1.5//DTD template 1.0//EN" "http://www.mitra.ir/xml/1.5/template-install.dtd">
<install version="1.5" type="template">

نام قالب شما در این بخش می باشد

Code: Select all

<name>template_name</name>

این بخش به اطلاعات عمومی راجع به قالب شما اختصاص دارد، شامل تاریخ ایجاد ، قوانین دسترسی ، طراح و اطلاعات تماس و ...

Code: Select all

<creationDate>11/20/06</creationDate>
<author>R.Balvardi</author>
<authorEmail> [email protected] email address is being protected from spam bots, you need Javascript enabled to view it </authorEmail>
<authorUrl>http://www.mitratemplate.com</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>Software company and IT technology template with multi lingual and page direction support</description>

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

Code: Select all

<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>params.ini</filename>
</files>

این قسمت موقعیت قرار گیری ماژول ها در قالب عنوان می شود ، جوملا میتواند در هر یک از این موقعیت ها یک یا چند ماژول را قرار دهد.

Code: Select all

<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>banner</position>
<position>footer</position>
</positions>

این قسمت میتوانید پارامترهای قالب را تعریف کنید ، مثلا در قالب های چند رنگی میتوان رنگ را به عنوان پارامتر تعریف کرد.

Code: Select all

<params>
<param type="spacer" default="Template Logo" />
<param name="logoType" type="list" default="image" label="Logo type" description="LOGO TYPE DESCRIPTION">
<option value="image">Image</option>
<option value="text">Text</option>
</param>
<param name="logoText" type="text" default="" size="50" label="Logo text" description="LOGO TEXT DESCRIPTION" />
<param name="sloganText" type="text" default="" size="50" label="Slogan" description="SLOGAN DESCRIPTION" />
</params>

میتوانید برای اصطلاحات بکار رفته در قالب خود از فایل زبان نیز استفاده کنید تا جوملا بتواند با تغییر زبان این عنوان را نیز تغییر دهد

Code: Select all

<languages>
<language tag="en-GB">en-GB.lang_file.ini</language>
</languages>
<administration>
<languages>
<language tag="en-GB">admin/en-GB.lang_file.ini</language>
</languages>
</administration>

این کد انتهایی فایل است که فایل را می بندد

Code: Select all

</install>



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

Code: Select all

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>

این کد پیشانی یا معرفی نامه سایت شما را نمایش میدهد.

Code: Select all

<jdoc:include type="head" />

آموزش کد های قالب جوملا 1- آشنایی با کد ماژول : کد ماژول کدی است که به شما اجازه نمایش ماژول های نصبی در بخش مدیریت را می دهد ، شما میتوانید با تغییر style ساختار ماژول را عوض کنید استایل های مجاز این ها هستند : none,xhtml,rounded با زدن دستور index.php?tp=1 جلوی هر سایت جوملایی میتوانی این موقعیت ها را ببینید.

Code: Select all

<jdoc:include type="modules" name="left" style="xhtml" />

کد مسیر سایت : این کد به طراح اجازه میدهد که خروجی قالب سایت را دارای آدرس کند ، به عنوان مثال به جای این شیوه آدرس دهی images/artocle.jpg این آدرس تولید میشود : http://www.yoursitename.com/images/article.jpg

Code: Select all

<?php echo $this->baseurl ?>

در صورتی که علاقه دارید ماژول های خالی نمایش داده نشوند از کد زیر استفاده کنید : قسمت اول : <?php if($this->countModules('top')) : ?> ، قسمت دوم : <?php endif; ?> هر چه در بین این دو کد قرار گیرد در صورت خالی بودن موقعیت top مخفی میشود ، البته میتوانید از دستور <?php else: ?> ما بین این دو کد نیز استفاده کنید.

Code: Select all

<?php if($this->countModules('top')) : ?>
<?php else: ?>
<?php endif; ?>

کد تشخیص زبان : برای تشخیص و استفاده از نام زبان در طراحی ، مثال برای دو زبانه کردن یک قالب این کد کاربرد دارد ، میتوانید فایل های هر زبان را در پوشه ای مجزا قرار داده و با این کد صدا برنید.

Code: Select all

<?php echo $this->language; ?>

کد برای زبان فارسی : داخل این 2 تا کد هر چی قرار بگیره وقتی زبان فارسی باشه لود میشه

Code: Select all

<?php if($this->direction == 'rtl') : ?>
<?php endif; ?>

کد لایسنس برای فوتر :

Code: Select all

<?php echo JText::_('Powered by') ?>

کد نمایش پیغام های سایت : این کد برای نمایش پیغام های جوملا استفاده میشود

Code: Select all

<jdoc:include type="message" />

کد نمایش محتوا : این کد محتوای صفحه را نمایش می دهد

Code: Select all

<jdoc:include type="component" />

گاهی یه قالب به اندازه یه سیستم ممگنه کد داشته باشه ، اما با این راهنمای ساده میتوانید چیزی را که لازم دارید بیابید.

pars_mizban
Joomla! Apprentice
Joomla! Apprentice
Posts: 28
Joined: Mon Jan 24, 2011 5:48 pm
Contact:

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

Postby pars_mizban » Tue Jan 25, 2011 6:35 am

برای اینكه سرعت سایت بالا بره بهتره این چند مورد رو هم رعایت كنید
فایل های css رو فشرده كنید و سعی كنید اونها رو در یك فایل قرار بدید
اگر از تصاویر در جایی استفاده می كنید حتما اندازه اونها رو تعیین كنید
سعی كنید فایل های css رو در قسمت head و
فایل های script رو در پایین قالب تعریف كنید


User avatar
negarkhane
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 143
Joined: Sat Aug 20, 2005 4:38 pm
Location: Iran
Contact:

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

Postby negarkhane » Tue Jan 25, 2011 7:13 am

ممنون از مطلبتون!


Return to “قالب ها”

Who is online

Users browsing this forum: No registered users and 2 guests