Borna66
01-11-2010, 05:58 PM
آموزش طراحی قالب
قالب های مامبو در ها در پوشه templates قرار گرفته اند، که هر قالب نیز به صورت جداگانه در پوشه اختصاصی خود می باشد.
اساساً قالب مامبو بر مبنای HTML می باشد. که با قرار گیری کد های PHP که مربوط به محل قرار گیری ماژول ها، کد نمایش مطالب صفحه اول سایت، نمایش تاریخ، نمایش مسیر مرور سایت (PathWay)، نمایش فوتر و … مورد استفاده قرار می گیرد. قالب سایت ما میتواند ترکیبی از عکس و کدنویسی HTML باشد و یا فایل های فلش، کدهای جاوا، و یا سایر فرمان های PHP در آن بکار برده شود. عموما کسی که در زمینه HTML بتواند بصورت حرفه ای طراحی قالب کند، برای طراحی قالب های مامبو نیز دچار مشکل خاصی نخواهد شد.
*اجزاء قالب مامبو
قالب مامبوی شما همانطور که گفتیم در یک پوشه قرار دارد. به طور معمول در این پوشه میتوان فایل های زیر را مشاهده نمود:
Index.php
templateDetails.xml
template_thumbnail.png
و پوشه های:
Images
Css
که در پوشه Images عکس ها و تصاویر قرار میگیرند.
و در پوشه Css فایل template_css.css قرار دارد.
آموزش طراحی استایل قالب مامبو در بخش آموزشی سایت قرار دارد.
Index.php*
همانطور که گفته شد هسته اصلی قالب از کد های HTML تشکیل شده، یعنی شما میتوانید برای طراحی اولیه ابتدا یک فایل HTML را طراحی کنید و بعد آن را تبدیل به قالب مامبو و PHP کنید.
بعد از طراحی قالب در حالت HTML باید کد های مخصوص قالب مامبو را در محل های خود قرار دهید. که در ادامه به آنها می پردازیم.
کد1: این کد قبل از تگ HEAD قرار میگیرد و نقش ....... دارد.
Code:<?php echo "<?xml version=\"1.0\"?".">"; ?>
<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
?>
کد2: این کد مابین تگ HEAD قرار میگیرد و در نمایش تایتل صفحات موثر می باشد.
Code:<?php mosShowHead(); ?> <?php
if ( $my->id ) {
initEditor();
}
?>
کد 3: این کد نوع رمز دهی صفحات برای نمایش در مرور گر را نشان میدهد. که برای زبان فارسی بصورت زیر میباشد.
این کد مابین تگ HEAD قرار میگیرد.
Code:< META http-equiv=Content-Type content="text/html; charset=utf-8">
کد4: این کد مابین تگ HEAD قرار میگیرد.
Code:<link rel="alternate" title="<?php echo $mosConfig_sitename; ?>" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/index2.php?option=com_rss&no_html=1" type="application/rss+xml" />
کد5:برای فراخوانی فایل استایل قالب می باشد که در پوشه سی اس اس قرار دارد.
این کد مابین تگ HEAD قرار میگیرد.
Code:<link href="<?php echo $mosConfig_live_site;?>/templates/Your Site Name/css/template_css.css" rel="stylesheet" type="text/css" />
کد6:برای فراخوانی آیکون قالب می باشد. این کد مابین تگ HEAD قرار میگیرد.
Code:<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/templates/ Your Site Name /images/favicon.ico" />
کد7: می توان گفت یکی از کدهای ضروری برای قالب مامبو می باشد، زیرا این کد برای شناختن عکس ها، فایل های فلش و اسکریپت هایی که از خارج index.php به قالب اصلی استفاده میشود. اگر از این کد استفاده نشود، عکس و و یا فایل ما در قالب به نمایش در نخواهد آمد.
Code:<?php echo $mosConfig_live_site; ?>
به عنوان مثال:
Code:<img src="<?php echo $mosConfig_live_site; ?>/templates/ Your Site Name /images/img_header.jpg" alt="header image" width="5 00 " height="2 0 0" />
پس از طراحی قالب به صورت HTML و قرار دهی کد های PHP مربوط به قالب مامبو، مرحله آخر آن قرار دادن کد های مربوط به ماژول ها ، فوتر سایت و مطالب صفحه اول میرسد.
موقعیت ماژول ها :
با قرار دادن این کدها و انجام تنظیمات آن در قسمت مدیریت سایت، قسمت مورد نظر در سایت اضافه میشود. نکته مهم این است که شما میتوانید به تعداد دلخواه در سایت و در موقعیت های مختلف کد های ماژول را قرار داده و از آنها استفاده کنید.
برای مشخص کردن نام ماژول از کد زیر استفاده می کنیم:
مهمترین این کد ها عبارتند از :
Code:<?php mosLoadModules('left'); ?>
<?php mosLoadModules('right'); ?>
<?php mosLoadModules('top'); ?>
<?php mosLoadModules('user1'); ?>
<?php mosLoadModules('user 2 '); ?>
<?php mosLoadModules('banner'); ?>
موقعیت قرار گیری مطالب صفحه اصلی:
کد زیر مطالبی که در تنظیمات قسمت مدیریت برای نمایش در صفحه اصلی انتخاب شده است را به نمایش در می آورد.
Code:<?php mosMainBody(); ?>
فوتر سایت (کپی رایت سایت):
این کد برای به نمایش در آمدن کپی رایت مربوط به سایت می باشد. که معمولا در پایین صفحات قرار داده میشود.
Code:<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
نکته ها:
کد زیر برای به نمایش در آمدن مطالبی که برای این بخش در نظر کرفته شده اند به کار میرود.
Code:<?php mosLoadModules('newsflash'); ?>
مسیر مرور سایت PathWay:
این کد برای نمایش در آمدن مسیر گشت و گذار کاربر در سایت میباشد و برای راحتی در بازگشت به بخش های اصلی و راهنمایی به کاربر می باشد.
کد مربوطه:
Code:<?php mosPathWay(); ?>
هم اکنون با دانستن این نکات شما میتوانید به راحتی قالب خود را طراحی و به مامبو تبدیل کنید.
--------------------------------------------------------------------------------
templateDetails.xml
هنگام نصب قالب برای قابل فهم کردن فایل های قالب و قابل شناسایی شدن برای اجرا در سایت، کلیه فایل هایی که در طراحی قالب از آنها استفاده کرده ایم را در یک فایل اکس ام ال قرار می دهیم. اگر فایل اکس ام ال در پوشه قالب قرار نداشته باشد هنگام نصب قالب با مشکل روبرو می شوید.
فایل Index.xml تشکیل شده از :
<?xml version="1.0" encoding="utf-8"?>
ورژن و نوع رمز دهی فایل ما
<mosinstall type="template" version="4.5.3">
این کد معرف این است که فایل های موجود در این بخش مربوط به قالب مامبو 4.5.3 می باشد.
<name>MamboLearn</name>
نام قالب شما
<creationDate>26/01/06</creationDate>
تاریخ طراحی قالب
<author>MamboLearn Team</author>
طراح قالب
<copyright>GNU/GPL</copyright>
مجوز حق نشر
<authorEmail>noreply [at] mambolearn [dot] com</authorEmail>
ایمیل طراح قالب
<authorUrl>http://www.MamboLearn.com</authorUrl>
آدرس وب سایت طراح قالب
<version>1.1</version>
ورژن قالب
<description>The Water and Stone Grey Template optimized for 1024px width resolution for use with any type of website with easy customization</description>
توضیحات اضافی قالب
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
</files>
فایل هایی که در ریشه قالب قرار دارند
<
images>
<filename>images/ 01 .jpg</filename>
<filename>images/ 02 .jpg</filename>
<filename>images/ 03 .jpg</filename>
< / images>
قرار دارند. images فایل هایی که در پوشه
<css>
<filename>css/template_css.css</filename>
</css>
استایل قالب
توجه داشته باشید، اگر پوشه ی دیگری داشتید باید آنرا را به صورت زیر تعریف کنید.
<Your Folder>
<filename>Your Folder/filename.xxx</filename>
</ Your Folder >
کلیه این کد ها بین
<mosinstall type="template" version="4.5.3">
</mosinstall>
قرار میگیرند.
و برای اینکه قالب شما بصورت کامل و بدونه مشکل نصب شود، در صحیح بودن آدرس هاس فایل های موجود در این قسمت دقت کنید.
قالب های مامبو در ها در پوشه templates قرار گرفته اند، که هر قالب نیز به صورت جداگانه در پوشه اختصاصی خود می باشد.
اساساً قالب مامبو بر مبنای HTML می باشد. که با قرار گیری کد های PHP که مربوط به محل قرار گیری ماژول ها، کد نمایش مطالب صفحه اول سایت، نمایش تاریخ، نمایش مسیر مرور سایت (PathWay)، نمایش فوتر و … مورد استفاده قرار می گیرد. قالب سایت ما میتواند ترکیبی از عکس و کدنویسی HTML باشد و یا فایل های فلش، کدهای جاوا، و یا سایر فرمان های PHP در آن بکار برده شود. عموما کسی که در زمینه HTML بتواند بصورت حرفه ای طراحی قالب کند، برای طراحی قالب های مامبو نیز دچار مشکل خاصی نخواهد شد.
*اجزاء قالب مامبو
قالب مامبوی شما همانطور که گفتیم در یک پوشه قرار دارد. به طور معمول در این پوشه میتوان فایل های زیر را مشاهده نمود:
Index.php
templateDetails.xml
template_thumbnail.png
و پوشه های:
Images
Css
که در پوشه Images عکس ها و تصاویر قرار میگیرند.
و در پوشه Css فایل template_css.css قرار دارد.
آموزش طراحی استایل قالب مامبو در بخش آموزشی سایت قرار دارد.
Index.php*
همانطور که گفته شد هسته اصلی قالب از کد های HTML تشکیل شده، یعنی شما میتوانید برای طراحی اولیه ابتدا یک فایل HTML را طراحی کنید و بعد آن را تبدیل به قالب مامبو و PHP کنید.
بعد از طراحی قالب در حالت HTML باید کد های مخصوص قالب مامبو را در محل های خود قرار دهید. که در ادامه به آنها می پردازیم.
کد1: این کد قبل از تگ HEAD قرار میگیرد و نقش ....... دارد.
Code:<?php echo "<?xml version=\"1.0\"?".">"; ?>
<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
?>
کد2: این کد مابین تگ HEAD قرار میگیرد و در نمایش تایتل صفحات موثر می باشد.
Code:<?php mosShowHead(); ?> <?php
if ( $my->id ) {
initEditor();
}
?>
کد 3: این کد نوع رمز دهی صفحات برای نمایش در مرور گر را نشان میدهد. که برای زبان فارسی بصورت زیر میباشد.
این کد مابین تگ HEAD قرار میگیرد.
Code:< META http-equiv=Content-Type content="text/html; charset=utf-8">
کد4: این کد مابین تگ HEAD قرار میگیرد.
Code:<link rel="alternate" title="<?php echo $mosConfig_sitename; ?>" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/index2.php?option=com_rss&no_html=1" type="application/rss+xml" />
کد5:برای فراخوانی فایل استایل قالب می باشد که در پوشه سی اس اس قرار دارد.
این کد مابین تگ HEAD قرار میگیرد.
Code:<link href="<?php echo $mosConfig_live_site;?>/templates/Your Site Name/css/template_css.css" rel="stylesheet" type="text/css" />
کد6:برای فراخوانی آیکون قالب می باشد. این کد مابین تگ HEAD قرار میگیرد.
Code:<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/templates/ Your Site Name /images/favicon.ico" />
کد7: می توان گفت یکی از کدهای ضروری برای قالب مامبو می باشد، زیرا این کد برای شناختن عکس ها، فایل های فلش و اسکریپت هایی که از خارج index.php به قالب اصلی استفاده میشود. اگر از این کد استفاده نشود، عکس و و یا فایل ما در قالب به نمایش در نخواهد آمد.
Code:<?php echo $mosConfig_live_site; ?>
به عنوان مثال:
Code:<img src="<?php echo $mosConfig_live_site; ?>/templates/ Your Site Name /images/img_header.jpg" alt="header image" width="5 00 " height="2 0 0" />
پس از طراحی قالب به صورت HTML و قرار دهی کد های PHP مربوط به قالب مامبو، مرحله آخر آن قرار دادن کد های مربوط به ماژول ها ، فوتر سایت و مطالب صفحه اول میرسد.
موقعیت ماژول ها :
با قرار دادن این کدها و انجام تنظیمات آن در قسمت مدیریت سایت، قسمت مورد نظر در سایت اضافه میشود. نکته مهم این است که شما میتوانید به تعداد دلخواه در سایت و در موقعیت های مختلف کد های ماژول را قرار داده و از آنها استفاده کنید.
برای مشخص کردن نام ماژول از کد زیر استفاده می کنیم:
مهمترین این کد ها عبارتند از :
Code:<?php mosLoadModules('left'); ?>
<?php mosLoadModules('right'); ?>
<?php mosLoadModules('top'); ?>
<?php mosLoadModules('user1'); ?>
<?php mosLoadModules('user 2 '); ?>
<?php mosLoadModules('banner'); ?>
موقعیت قرار گیری مطالب صفحه اصلی:
کد زیر مطالبی که در تنظیمات قسمت مدیریت برای نمایش در صفحه اصلی انتخاب شده است را به نمایش در می آورد.
Code:<?php mosMainBody(); ?>
فوتر سایت (کپی رایت سایت):
این کد برای به نمایش در آمدن کپی رایت مربوط به سایت می باشد. که معمولا در پایین صفحات قرار داده میشود.
Code:<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
نکته ها:
کد زیر برای به نمایش در آمدن مطالبی که برای این بخش در نظر کرفته شده اند به کار میرود.
Code:<?php mosLoadModules('newsflash'); ?>
مسیر مرور سایت PathWay:
این کد برای نمایش در آمدن مسیر گشت و گذار کاربر در سایت میباشد و برای راحتی در بازگشت به بخش های اصلی و راهنمایی به کاربر می باشد.
کد مربوطه:
Code:<?php mosPathWay(); ?>
هم اکنون با دانستن این نکات شما میتوانید به راحتی قالب خود را طراحی و به مامبو تبدیل کنید.
--------------------------------------------------------------------------------
templateDetails.xml
هنگام نصب قالب برای قابل فهم کردن فایل های قالب و قابل شناسایی شدن برای اجرا در سایت، کلیه فایل هایی که در طراحی قالب از آنها استفاده کرده ایم را در یک فایل اکس ام ال قرار می دهیم. اگر فایل اکس ام ال در پوشه قالب قرار نداشته باشد هنگام نصب قالب با مشکل روبرو می شوید.
فایل Index.xml تشکیل شده از :
<?xml version="1.0" encoding="utf-8"?>
ورژن و نوع رمز دهی فایل ما
<mosinstall type="template" version="4.5.3">
این کد معرف این است که فایل های موجود در این بخش مربوط به قالب مامبو 4.5.3 می باشد.
<name>MamboLearn</name>
نام قالب شما
<creationDate>26/01/06</creationDate>
تاریخ طراحی قالب
<author>MamboLearn Team</author>
طراح قالب
<copyright>GNU/GPL</copyright>
مجوز حق نشر
<authorEmail>noreply [at] mambolearn [dot] com</authorEmail>
ایمیل طراح قالب
<authorUrl>http://www.MamboLearn.com</authorUrl>
آدرس وب سایت طراح قالب
<version>1.1</version>
ورژن قالب
<description>The Water and Stone Grey Template optimized for 1024px width resolution for use with any type of website with easy customization</description>
توضیحات اضافی قالب
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
</files>
فایل هایی که در ریشه قالب قرار دارند
<
images>
<filename>images/ 01 .jpg</filename>
<filename>images/ 02 .jpg</filename>
<filename>images/ 03 .jpg</filename>
< / images>
قرار دارند. images فایل هایی که در پوشه
<css>
<filename>css/template_css.css</filename>
</css>
استایل قالب
توجه داشته باشید، اگر پوشه ی دیگری داشتید باید آنرا را به صورت زیر تعریف کنید.
<Your Folder>
<filename>Your Folder/filename.xxx</filename>
</ Your Folder >
کلیه این کد ها بین
<mosinstall type="template" version="4.5.3">
</mosinstall>
قرار میگیرند.
و برای اینکه قالب شما بصورت کامل و بدونه مشکل نصب شود، در صحیح بودن آدرس هاس فایل های موجود در این قسمت دقت کنید.