روح الله بلوردی هستم متولد 1357  ، فعالیت خود را در زمینه طراحی از دوره دبیرستان و با هنر نقاشی ، خوشنویسی و گرافیک شروع کردم بعد از آمدن به تهران در سال 76 و آشنایی با دوستان موسسه سبوح به گرافیک رایانه ای علاقه مند شدم و از سال 78 اولین آثار خود را با نرم افزار کورل فتو پینت و کورل دراو شروع کردم. هم اکنون نیز در رشته گرافیک در دانشگاه علمی کاربردی بندرعباس مشغول به تحصیل گرافیک هستم.

r.balvardi@gmail.com

دریافت نمونه کارها


خیلی از دوستان علاقه مند به طراحی قالب جوملا هستند ، اما وقتی فایل یکی از قالب های جوملا را باز می کنند با یک سری کد های 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"?>
<!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">
این قسمت اطلاعات اولیه برای شناسایی فایل توسط جوملا قرار دارد
<name>template_name</name> نام قالب شما در این بخش می باشد
<creationDate>11/20/06</creationDate>
<author>R.Balvardi</author>
<authorEmail> این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید</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>
این بخش به اطلاعات عمومی راجع به قالب شما اختصاص دارد، شامل تاریخ ایجاد ، قوانین دسترسی ، طراح و اطلاعات تماس و ...
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>params.ini</filename>
</files>
این قسمت مربوط به نصاب است ، هر فایل که در اینجا عنوان شود توسط جوملا به سایت هنگام نصب منتقل می شود.
<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>
این قسمت موقعیت قرار گیری ماژول ها در قالب عنوان می شود ، جوملا میتواند در هر یک از این موقعیت ها یک یا چند ماژول را قرار دهد.
<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>
این قسمت میتوانید پارامترهای قالب را تعریف کنید ، مثلا در قالب های چند رنگی میتوان رنگ را به عنوان پارامتر تعریف کرد.
<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>
میتوانید برای اصطلاحات بکار رفته در قالب خود از فایل زبان نیز استفاده کنید تا جوملا بتواند با تغییر زبان این عنوان را نیز تغییر دهد
</install> این کد انتهایی فایل است که فایل را می بندد

 

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

 

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
کد محافظت در مقابل سوء استفاده هکرها در قالب : این کد جلوی اجرای مستقیم فایل قالب را میگیرد و به هکر ها اجازه رویت محتوای قالب را بصورت مستقیم نمی دهد.
<jdoc:include type="head" /> این کد پیشانی یا معرفی نامه سایت شما را نمایش میدهد.
<jdoc:include type="modules" name="left" style="xhtml" /> آموزش کد های قالب جوملا 1- آشنایی با کد ماژول : کد ماژول کدی است که به شما اجازه نمایش ماژول های نصبی در بخش مدیریت را می دهد ، شما میتوانید با تغییر style ساختار ماژول را عوض کنید استایل های مجاز این ها هستند : none,xhtml,rounded با زدن دستور index.php?tp=1 جلوی هر سایت جوملایی میتوانی این موقعیت ها را ببینید.
<?php echo $this->baseurl ?> کد مسیر سایت : این کد به طراح اجازه میدهد که خروجی قالب سایت را دارای آدرس کند ، به عنوان مثال به جای این شیوه آدرس دهی images/artocle.jpg این آدرس تولید میشود :http://www.yoursitename.com/images/article.jpg
<?php if($this->countModules('top')) : ?>
<?php else: ?>
<?php endif; ?>
در صورتی که علاقه دارید ماژول های خالی نمایش داده نشوند از کد زیر استفاده کنید : قسمت اول : <?php if($this->countModules('top')) : ?> ، قسمت دوم : <?php endif; ?> هر چه در بین این دو کد قرار گیرد در صورت خالی بودن موقعیت top مخفی میشود ، البته میتوانید از دستور <?php else: ?> ما بین این دو کد نیز استفاده کنید.
<?php echo $this->language; ?> کد تشخیص زبان : برای تشخیص و استفاده از نام زبان در طراحی ، مثال برای دو زبانه کردن یک قالب این کد کاربرد دارد ، میتوانید فایل های هر زبان را در پوشه ای مجزا قرار داده و با این کد صدا برنید.
<?php if($this->direction == 'rtl') : ?>
<?php endif; ?>
کد برای زبان فارسی : داخل این 2 تا کد هر چی قرار بگیره وقتی زبان فارسی باشه لود میشه
<?php echo JText::_('Powered by') ?> کد لایسنس برای فوتر :
<jdoc:include type="message" />
کد نمایش پیغام های سایت : این کد برای نمایش پیغام های جوملا استفاده میشود
<jdoc:include type="component" /> کد نمایش محتوا : این کد محتوای صفحه را نمایش می دهد

 

 

 

دیدگاه‌ها  

0
icons
1394-08-18 02:39
سلام دوست عزیز

خدا خیرت بده، خیلی بدردم خورد.
تونستم با این آموزش مشکل قالب سایتمو حل کنم.

یک قالب جوملا 2.5 قبلا ساخته بودم که بعد ارتقا مدیریت جوملا از 2.5 به 3.4 تنها مشکل قالب سایتم این بود که پیغام های سایت رو نمایش نمیداد،
با این آموزش و استفاده از دستور: کد نمایش پیغام های سایت تونستم مشکل قالب سایت رو برطرف کنم.

بازم ممنون.

درمورد تبدیل قالب های جوملا 2.5 به 3.5 هم انشاالله مطالب مفید بذارید.

نوشتن دیدگاه


تصویر امنیتی
تصویر امنیتی جدید


Template Design:Dima Group