PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : آموزش طراحی قالب برای جوملا 1.5



rastegar.2000
۲۶ ۰۲ -۱۳۹۲, 18:44
آموزش طراحی قالب برای جوملا 1.5



















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



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



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:

<link href="<?php echo $this->baseurl

?>/templates/template_name/css/template_css.css" rel="stylesheet"
type="text/css" />




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

Code:

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/template_names 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:

<files>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>template_thumbnail.png</filename>

<filename>params.ini</filename>

</files>



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

Code:

<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:

<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:

<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:

</install>







آشنایی با کدهای قرار گرفته در فایل index.php قالب جوملا:

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

Code:

<?php

defined( '_JEXEC' ) or die( 'Restricted access' );

?>



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

Code:

<jdoc:include type="head" />



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

Code:

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



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



<?php echo $this->baseurl ?>













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

Code:

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

<?php else: ?>

<?php endif; ?>



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

Code:

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



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

Code:

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

<?php endif; ?>



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

Code:

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



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

Code:

<jdoc:include type="message" />



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

Code:

<jdoc:include type="component" />



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

samanahmad803
۲۲ ۰۵ -۱۳۹۲, 20:25
مرسی عالی بود تشکر میکنم

zavash
۳۱ ۰۴ -۱۳۹۵, 23:33
ممنونم عالی بود

http://www.butydesign.ir/logo/ (http://www.butydesign.ir/)
طراحی لوگو حرفه ای (http://www.butydesign.ir/)
http://butydesign.blogfa.com/
http://butydesign.mihanblog.com/
http://butydesign.blogsky.com/
http://butydesign.persianblog.ir/
http://butydesign.blog.ir/
http://butydesign.iran.sc/
http://butydesign.parsiblog.com/
http://butydesign.samenblog.com/
http://butydesign.monoblog.ir/
http://butydesign.lineblog.ir/
http://butydesign.royalfa.com/
http://butydesign.fardblog.com/
http://butydesign.mizbanblog.com/
http://zavash.aramblog.ir/