Shmata: /* کدهای php برای قسمت body فایل index.phpقالب */

2012-09-26T08:02:57Z

‏کدهای php برای قسمت body فایل index.phpقالب

Hamidy در ‏۲ فوریهٔ ۲۰۱۲، ساعت ۰۵:۳۷

2012-02-02T05:37:07Z

نمایش تغییرات

Shmata: /* نکاتی در مورد اضافه کردن عکس و فایل javascript و غیره در قالب */

2012-02-01T12:28:37Z

‏نکاتی در مورد اضافه کردن عکس و فایل javascript و غیره در قالب

Shmata: صفحه‌ای جدید حاوی '=مقدمه= در این مقاله قصد داریم یک قالب سایت برای جوملا 1.5 طراحی کنید و به تفاو...' ایجاد کرد

2012-02-01T12:28:01Z

صفحه‌ای جدید حاوی '=مقدمه= در این مقاله قصد داریم یک قالب سایت برای جوملا 1.5 طراحی کنید و به تفاو...' ایجاد کرد

صفحهٔ تازه

=مقدمه=
در این مقاله قصد داریم یک قالب سایت برای [[جوملا]] 1.5 طراحی کنید و به تفاوتهای آن با قالبهای نسخه 1.6 و 1.7 میپردازیم. تمام کدهای [[جوملا]] (به زبان php) که در طراحی قالبهای جوملا مورد استفاده قرار میگرد ارائه شده است. شما براحتی میتوانید این کدها را کپی کنید و بسته به نیازتان آنها را تغییر دهید. 
=موارد مورد نیاز =
ما به یک بسته جوملا نیاز داریم که باید به وسیله آن یک سایت جوملایی بسازیم تا برای آن یک قالب طراحی کنیم 
بسته جوملای فارسی را میتوانیم از [http://www.joomlafarsi.com جوملا فارسی] دانلود کنیم
 
به یک ابزار برای ویرایش متن مانند : notepad , notepad++ , DreamWeaver
[http://notepad-plus-plus.org/download/v5.9.8.html نت پد پلاس پلاس]
 
و آشنایی با [[html]] , [[css]]
 
=ساختار فایلها و directory های یک قالب [[جوملا]]=
برای ساختن یک قالب جوملا به یک پوشه (directory) در پوشه templates ریشه جوملا نیاز داریم. پس ابتدا باید یک پوشه مثلا به نام (mynewtemplate) در داخل پوشه templates جوملا ایجاد کنیم .
 
'''<div dir=ltr>JoomlaRoot\templates\mynewtemplate</div>'''
هر قالب جوملا در داخل پوشه مربوط به خودش باید حداقل 2 فایل به نام های index.php و templateDetails.xml را دارا باشد .
مابراحتی میتوانیم این 2 فایل با این اسامی و پسوندها در notepad++ ایجاد کنیم و آنها را در پوشه mynewtemplate مان ذخیره کنیم.
 
همچنین برای سازماندهی به عکسها و استایهای قالب مان باید 2 پوشه دیگر در داخل mynewtemplate به نامهای '''css''' و '''images''' ایجاد کنیم .
در داخل فولدر css باید یک فایل به نام template.css ایجاد کنیم .
 
نکته : اگر سایت ما دارای 2 زبان فارسی انگلیسی است باید یک فایل دیگر به نام template_rtl.css ایجاد کنیم .
 
این امکان وجود دارد که شما استایلهای موردنظرتان در داخل فایل index.php مستقیما وارد کنید ولی اکثر توسعه دهندگان ترجیح میدهند که به صورت اصولی (همین روشی که دراین مقاله مورد استفاده قرار میگیرد.) استایلهای موردنظرشان را در یک یا چند فایل css جداگانه (template.css یا template_rtl.css) بنویسند وبا استفاده از تگ link آن فایلها را در index.php (صفجه اصلی قالب های جوملا) فراخوانی کنند. این کار مزایای زیادی مانند : سازماندهی استایلها و دیباگ آسانتر به علت متمرکز بودن و کاهش زمان لود صفحه(فایلهای مجزا میتوانن cache شوند) دارد.
 
در کل ساختار قالب شما تاکنون باید به این صورت شده باشد.
 
<div dir=ltr>
mynewtemplate/ 
css/ 
template.css 
images/ 
index.php 
templateDetails.xml 
</div>
=ایجاد یک فایل templateDetails.xml =
وجود این فایل در قالب های جوملا ضروری است . قالبها بدون وجود این فایل نمیتوانند توسط جوملا شناسایی و مشاهده شوند. در واقع این فایل است قالب را به جوملا معرفی میکند. این فایل حاوی اطلاعاتی در مورد قالب و متادیتای قالب است
الگوی نگارش این فایل در خط پائین مشخص شده است .
 
نکته : البته این الگو مربوط به نسخه جوملا1.5 است .
 
<source lang="xml" >
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>mynewtemplate</name>
<creationDate>2012-02-02</creationDate>
<author>Shahab Matapour</author>
<authorEmail>sh.matapour@gmail.com</authorEmail>
<authorUrl>http://www.studio-design.co</authorUrl>
<copyright>Shahab Matapour 2012</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>My New Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>images</folder>
<folder>css</folder>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</install>
</source>
برای نسخه جوملا 1.7و1.6 از الگو زیر استفاده میکنیم . دقت کنید که از تگ extension استفاده شده نه install .
 
نکته : دقت کنید که مقابل version در خط دوم 1.6 را نوشتیم اگر برای جوملا 1.7 تصمیم به ایجاد قالب داشتیم باید 1.7 را بنویسیم.
 
<source lang="xml" >
<?xml version="1.0" encoding="utf-8"?>
<extension version="1.6" type="template">
<name>mynewtemplate</name>
<creationDate>2012-02-02</creationDate>
<author>Shahab Matapour</author>
<authorEmail>sh.matapour@gmail.com</authorEmail>
<authorUrl>http://www.studio-design.co</authorUrl>
<copyright>Shahab Matapour 2012</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>My New Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>images</folder>
<folder>css</folder>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</extension>

</source>
 
 

همانطور که کاملا مشخص است تمامی مشخصات در xml مابین element ها مشخص میگردند. شاید نوشتن یک همچین فایلی از ابتدا کمی دشوار باشد پیشنهاد بنده اینست این کد را در داخل فایل templateDetails.xml خود کپی کنید و مشخصات element ها را بسته به نیازتان ویرایش کنید.
 
Element های name تا description شامل مشخصات تولید کننده قالب جوملاست
 
name : نام قالب است
 
'''نکته مهم : name باید با نام پوشه قالب (در این مثال mynewtemplate) یکی باشد.'''
 
creationDate : تاریخ ایجاد قالب
 
author : نام تولید کننده قالب و ... همین طور به ترتیب تا عنصر description
 
description : که توضیحاتی راجب این قالب ارائه میکند این توضیحات زمانی که قالب در جوملا نصب میشود نمایش داده خواهدشد.
 
قسمت files شامل تمامی فایلهایی است که در قالب مورد استفاده قرار میگرد. ممکن است که شما در این لحظه از تعداد و نام فایلهای که قرار است در قالب از آنها استفاده کنید اطلاعی نداشته باشید , نگران این موضوع نباشید , شما میتوانید بعدا این قسمت را update کنید.
 
بخش position هم برای معرفی موقعیت هایی است که شما تصمیم دارید در قالب جوملا تون از آنها استفاده کنید. در تنظیمات ماژول میتوانید این موقعیت ها را برای نمایش یک ماژول انتخاب کنید.
=ایجاد فایل index.php =
صفحه index.php قالبهای جوملا صفحه اصلی قالب های جوملاست . در صورتی که شما مسلط به [[html]] باشید میتوانید این صفحه را همانند یک صفحه html معمولی ایجاد کنید فقط باید در بعضی از قسمت های آن یکسری کدهای [[PHP]] اضافه کنید. که در این مقاله به تفضیل به آنها خواهیم پرداخت.
 
صفحه ساختار ساده (بدون استایل) قالب جوملا میباشد.
 
صفحه index.php جوملا 1.5 با کدهای php زیر شروع میشود.
 
<source lang="php" >
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
</source>
کد خط اول برای مسائل امنیتی جوملا ست و برای جلوی گیری از دسترسی غیر مجاز است.
 
خط بعدی Document Type Declaration(DOCTYPE) که اطلاعاتی راجب این صفحه وب به Web Crawler ها(خزنده های موتورهای جستجو) ارائه میکند.
 
خط سوم هم به صفحه index.php قالب میگوید که مدیر سایت چه زبانی را برای نمایش سایت (در جوملا اصطلاحا front-end میگوییم) مشخص کرده است.
 
همانطور که میدانید یک صفحه html به '''دو قست''' تقسیم میشود (head و body) بخش head شامل اطلاعاتی راجب منابعی که در این قالب جوملا میخواهیم از آن استفاده کنیم است در واقع از این قسمت باید آن منابع را به قالب لینک کنیم.
 
بخش body شامل کدهای لایه مختلف ساختار قسمتهای مختلف قالب است .
=کد php مربوط بخش head صفحه index.php قالب =
برای قالبهایی که از یک زبان استفاده میکنند (فارسی یا انگلیسی) از این کد استفاده میکنیم.
<source lang="php" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>
</source>
برای قالبهای که از 2 زبان مختلف که یکی از آنها از راست به چپ است مثل فارسی ودیگری از چپ به راست است مثل انگلیسی (RTL یا LTR) استفاده میکنند این کد را مینویسیم:
 
نکته : دقت کنید زبان فارسی و عربی چون هردو RTL هستند از نوع اول استفاده میکنیم .
<source lang="php" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<?php if($this->direction == 'rtl') : ?>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template_rtl.css" rel="stylesheet" type="text/css" />
<?php else: ?>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
<?php endif; ?>
</head>
</source>
خط
<source lang="php" >
<jdoc:include type="head" />
</source>
اطلاعات مربوط به header را در قالبهای جوملا قرار میدهد شامل اطلاعات متا و عنوان صفحه و ...
 
کدهای
<source lang="php" >
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
</source>
برای اضافه کردن 2تا فایل css ای که تمام قالبهای جوملا 1.5 از آنها استفاده میکنند.
=کدهای php برای قسمت body فایل index.phpقالب=
<source lang="php" >
<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
</source>
خیلی شگفت آور است ؟ ولی حقیقت دارد همین کدها برای راه اندازی و ایجاد یک قالب جوملا کفایت میکند . در این حالت ما 2 position به نام های top و bottom داریم و یک موقعیت برای نمایش مطالب و سایر component ها داریم .
 
دستور '''jdoc''' به جوملا میگوید که از سیستم مدیریت محتوا جوملا یکسری منابع را فراخوانی (include) کند. Type مشخص کننده نوع آن منابع است دقت کنید که در اینجا type هم modules و هم component استفاده شده .
 
وقتی در یک قسمت از فایل index.php مینویسیم :
<source lang="php" >
<jdoc:include type="modules" name="top" />
</source>
یعنی در آن قسمت از قالب یک position به نام top ایجاد کن . به جای top هر اسم دیگری میتواند باشد ولی به این نکته توجه داشته باشید که قبلا این نام را در فایل templateDetails.xml به عنوان position مشخص کرده باشیم.
 
هنگامی در یک قسمت از فایل index.php قالب مینویسیم :
<source lang="php" >
<jdoc:include type="component" />
</source>
یعنی آن قسمت مکان کلیه مطالب (مقاله ها و مطالبی که در مدیریت مطالب ایجاد میشوند.) و کامپوننت های جوملا است. نوشتن این کد برای فایل index.php خیلی مهم است . شما میتوانید ماژولها بیشتری در templateDetails.xml معرفی کرده و در صفحه index.php ایجاد نمایید. و در نهایت بستن تگ html به این صورت
<source lang="xml" >
</html>
</source>
تمام . 
در نهایت کد صفحه index.php قالب جوملا 1.5 ما به این صورت شد :
<source lang="php" >
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mynewtemplate/css/template.css" type="text/css" />
</head>
<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
</html>
</source>
در جوملا 1.5 ما میتوانیم کل پوشه mynewtemplate با تمام فایل ها و ساب فولدرها در پوشه templates جوملا آپلود کنیم یا آن را zip کنیم و از مدیریت جوملا در قسمت نصب و حذف اقدام به نصب این قالب کنیم.
 
بعد از نصب یا آپلود قالب باید به قسمت مدیریت قالب ها برویم قالب mynewtemplate بر پیش فرض قرار دهیم .
 
=نکاتی در مورد اضافه کردن عکس و فایل javascript و غیره در قالب=
 
پیشتر گفتیم با صفحه index.php قالب همانند یک صفحه html رفتار کنید و در برخی موارد که نیاز به کد php دارد بنده در این مقاله آنرا آموزش میدهم . اگر شما یک عکس را در فولدر images/stories داشته باشید و نام آن myimage.pngباشد به صورت زیر در html اقدام به نمایش آن میکنیم .
<source lang="php" >
<img src="images/stories/myimage.png" alt="Custom image" />
</source>
اگر بخواهیم یک کلاس css به نام customImage به آن تصویر بدیم :
<source lang="php" >
<img src="images/stories/myimage.png" alt="Custom image" class="customImage" />
</source>
استایل های مربوط به cutomImage را میتوانیم در فایل template.css قالب بنویسیم. 
ولی اگر این کدها در یک قالب جوملا بنویسید تصویر مورد نظر را نمایش نمیدهد ما بعد از هر src در صفحه index.php قالب جوملا 1.5 باید کد
<source lang="php" >
<?php echo $this->baseurl; ?>
</source>
را اضافه کنیم . یعنی برای نمایش عکس در فولدر images/stories با نام myimage.png باید
<source lang="php" >
<img src="<?php echo $this->baseurl; ?>/images/stories/myimage.png" alt="Custom image" />
</source>
بنویسیم. دقت کنید که در این مثال پوشه images در داخل root جوملا قرار دارد. 
اگر همین عکس در پوشه image در داخل خود قالب (mynewtemplate) جوملا بود باید به این صورت مینوشتیم:
<source lang="php" >
<img src="<?php echo $this->baseurl; ?> /templates/<?php echo $this->template;?>/images/myimage.png" alt="Custom image" />
</source>
منبع : <nowiki>http://docs.joomla.org/Creating_a_basic_Joomla!_template</nowiki>
جمع آوری و ترجمه : [http://forum.joomlafarsi.com/members/26237-shmata شهاب مطاع پور]
 
{{معرفی پشتیبانی}}

{{کپی رایت}}

[[رده:مقالات جوملا]] [[رده:طراحی قالب جوملا 1.5]]

@@ سطر ۲۳۵: / سطر ۲۳۵: @@
 خیلی شگفت آور است؟ ولی حقیقت دارد همین کدها برای راه اندازی و ایجاد یک قالب [[جوملا]] کفایت می‌کند. در این حالت ما 2 position به نام‌های top و bottom داریم و یک موقعیت برای نمایش مطالب و سایر componentها داریم.
-دستور '''jdoc''' به [[جوملا]] می‌گوید که از سیستم مدیریت محتوا [[جوملا]] یکسری منابع را فراخوانی (include) کند. Type مشخص کننده نوع آن منابع است دقت کنید که در اینجا type هم modules و هم component استفاده شده است.
+دستور '''jdoc''' به [[جوملا]] می‌گوید که از سیستم مدیریت محتوا [[جوملا]] یکسری منابع را فراخوانی (include) کند. Type مشخص کننده نوع آن منابع است دقت کنید که در اینجا type هم modules و هم component استفاده شده است. جهت کسب اطلاعات بیشتر در این زمینه به مقاله [[‏دستورات jdoc]] مراجعه فرمایید.
 وقتی در یک قسمت از فایل index.php می‌نویسیم:

@@ سطر ۲۶۲: / سطر ۲۶۲: @@
 </source>
 منبع : <nowiki>http://docs.joomla.org/Creating_a_basic_Joomla!_template</nowiki>
 جمع آوری و ترجمه : [http://forum.joomlafarsi.com/members/26237-shmata شهاب مطاع پور]
 <br />

طراحی قالب در جوملا - تاریخچهٔ ویرایش‌ها

Shmata: /* کدهای php برای قسمت body فایل index.phpقالب */

Hamidy در ‏۲ فوریهٔ ۲۰۱۲، ساعت ۰۵:۳۷

Shmata: /* نکاتی در مورد اضافه کردن عکس و فایل javascript و غیره در قالب */

Shmata: صفحه‌ای جدید حاوی '=مقدمه= در این مقاله قصد داریم یک قالب سایت برای جوملا 1.5 طراحی کنید و به تفاو...' ایجاد کرد