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

شروع موضوع توسط iranpcg ‏28 نوامبر 2010 در انجمن جوملا (Joomla)

کلمات کلیدی:
  1. iranpcg

    iranpcg Active Member

    ارسال‌ها:
    420
    تشکر شده:
    196
    امتیاز دستاورد:
    43
    خیلی از دوستان علاقه مند به طراحی قالب جوملا هستند ، اما وقتی فایل یکی از قالب های جوملا را باز می کنند با یک سری کد های 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 باید از کد زیر در قالب استفاده شود :
    کد (Text):
    <link href="<?php echo $this->baseurl ?>/templates/template_name/css/template_css.css" rel="stylesheet" type="text/css" />
    فایل های جاوا اسکریپت بیشتر برای ایجاد افکت های زیبا در سایت کاربرد دارد ، کتابخانه این فایل ها در جوملا قرار دارد و شما نیازی به فراخوانی مجدد آنها ندارید. برای صدا زدن فایل های javascript باید از کد زیر در قالب استفاده کنید:
    کد (Text):
    <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/template_name/js/java_file_name.js"></script>
    فایل های تصویری زیباترین بخش قالب را به خود اختصاص می دهند ، فرمت این تصاویر باید jpg , gif , png و برای انیمیشن ها swf باشد .برای صدا زدن تصاویر از کد زیر استفاده می شود:
    کد (Text):
    <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 فایل نصاب و کنترل کننده جوملا می باشد ، این فایل دارای فرمت زیر است :
    این قسمت اطلاعات اولیه برای شناسایی فایل توسط جوملا قرار دارد:
    کد (Text):
    <?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">
    نام قالب شما در این بخش می باشد
    کد (Text):
    <name>template_name</name>
    این بخش به اطلاعات عمومی راجع به قالب شما اختصاص دارد، شامل تاریخ ایجاد ، قوانین دسترسی ، طراح و اطلاعات تماس و ...
    کد (Text):
    <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>
    این قسمت مربوط به نصاب است ، هر فایل که در اینجا عنوان شود توسط جوملا به سایت هنگام نصب منتقل می شود.
    کد (Text):
    <files>
    <filename>index.php</filename>
    <filename>templateDetails.xml</filename>
    <filename>template_thumbnail.png</filename>
    <filename>params.ini</filename>
    </files>
    این قسمت موقعیت قرار گیری ماژول ها در قالب عنوان می شود ، جوملا میتواند در هر یک از این موقعیت ها یک یا چند ماژول را قرار دهد.
    کد (Text):
    <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>
    این قسمت میتوانید پارامترهای قالب را تعریف کنید ، مثلا در قالب های چند رنگی میتوان رنگ را به عنوان پارامتر تعریف کرد.
    کد (Text):
    <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>
    میتوانید برای اصطلاحات بکار رفته در قالب خود از فایل زبان نیز استفاده کنید تا جوملا بتواند با تغییر زبان این عنوان را نیز تغییر دهد
    کد (Text):
    <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>
    این کد انتهایی فایل است که فایل را می بندد
    کد (Text):
    </install>

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

    نیما حبیب خدا Member

    ارسال‌ها:
    32
    تشکر شده:
    18
    امتیاز دستاورد:
    6
    به به . دوست عزیز جناب آقای بلوردی گل . ممنون از آموزشت عزیزم . موفق باشید
     
    نوشته شده توسط نیما حبیب خدا در ‏7 دسامبر 2010
    iranpcg از این پست تشکر کرده است.
  3. iranpcg

    iranpcg Active Member

    ارسال‌ها:
    420
    تشکر شده:
    196
    امتیاز دستاورد:
    43
    سلامت باشید
     
    نوشته شده توسط iranpcg در ‏13 دسامبر 2010
  4. irlogo

    irlogo Active Member

    ارسال‌ها:
    1,543
    تشکر شده:
    405
    امتیاز دستاورد:
    36
    آموزش خوب و جامعی بود
    مخصوصا که پدر جوملا! ایران "سلامت باشید" به شما گفتند
    واقعا جای افتخار داره آقای بلوردی تبریک بگن!
     
    نوشته شده توسط irlogo در ‏13 دسامبر 2010
    iranpcg از این پست تشکر کرده است.
  5. hos5516

    hos5516 Member

    ارسال‌ها:
    37
    تشکر شده:
    5
    امتیاز دستاورد:
    6
    آقا کارت درسته !
     
    نوشته شده توسط hos5516 در ‏16 دسامبر 2010
    iranpcg از این پست تشکر کرده است.
  6. iranpcg

    iranpcg Active Member

    ارسال‌ها:
    420
    تشکر شده:
    196
    امتیاز دستاورد:
    43
    ممنون ، باز هم اگر فرصت شد کامل ترش میکنم!
     
    نوشته شده توسط iranpcg در ‏25 ژانویه 2011

به اشتراک بگذارید