آموزش تبدیل قالب HTML به قالب جوملا

 

 

برای اینکار به ابزار زیر نیاز داریم:

 

1- برنامه ویرایشگر Notepad ++

 

2- یک برنامه ایجاد سرور مجازی مانند WampServer

 

3- یک نسخه از جوملا (ترجیحا نسخه 1.5.26)

 

4- یک قالب html

 

قبل از هر چیز جوملا را روی لوکال هاست نصب می کنیم. 

 

ابتدا محتویات قالب html شامل فایل های css و js و تصاویر و فایل index (همان فایل html اصلی قالب)  را پوشه قالب های جوملا در مسیر زیر کپی می کنیم :

 

C:\wamp\www\j15\templates

 

توجه کنید نام پوشه ای که فایل های html را در آن کپی می کنید نام قالب شما در جوملا می باشد.

 

حالا فایل index.html را با برنامه Notepad ++ باز می کنیم و از منوی language به منوی P و سپس php را انتخاب می کنیم. حالا از منوی file روی save as کلیک کنید و فایل را ذخیره کنید. بسیار خوب مرحله اول کار یعنی تولید فایل php تمام شد.

 

 

 

 

 

 

حالا  باید فایل xml نصب قالب جوملا را ایجاد کنیم.در برنامه Notepad++ متون زیر را کپی کنید و با نام templateDetails.xml در مسیری که فایل های قالب قرار دارد ذخیره کنید:

 

<?xml version="1.0" encoding="utf-8"?>

 

<install version="1.5" type="template">

 

<name>باید با نام پوشه قالب یکی باشد</name>

 

<version>1.2.0</version>

 

<creationDate>اینجا تاریخ ایجاد قالب را وارد کنید مثلا 2011</creationDate>

 

<author>نام خودتان را وارد کنید</author>

 

<authorEmail>اینجا ایمیل خودتان را وارد کنید</authorEmail>

 

<authorUrl>http://www.rpw.ir</authorUrl>

 

<copyright>CopyRight 2011-2012</copyright>

 

<license>GNU/GPL version 2</license>

 

<description>طراحی قالب توسط رویا پرداز وب</description>

 

<files>

 

<filename>index.php</filename>

 

<filename>style.css</filename>

 

<filename>images/arrow1.gif</filename>

 

<filename>index.html</filename>

 

<filename>templateDetails.xml</filename>

 

</files>

 

<positions>

 

<position>breadcrumbs</position>

 

<position>banner</position>

 

<position>left</position>

 

<position>right</position>

 

<position>top</position>

 

<position>user1</position>

 

<position>user2</position>

 

<position>footer</position>

 

</positions>

 

</install>

 

تمامی فایل هایی را که مربوط به قالب هستند و داخل پوشه قالب قرار دارند (شامل های فایل های عکس، جاوا، استایل ، html، php و ....) را باید بین دو تگ

 

<filename></filename>

 

تعریف کنید همانطور که در تگ های بالا نوشته شده است

 

بین تگ های <position></position> هم باید موقعیت های قالب را تعریف کنیم. این موقعیت ها در بخش ویرایش ماژول ها به صورت یک منوی باز شو به عنوان مکان ماژول نمایش داده می شوند.

 

بسیار خوب بر می گردیم به ویرایش فایل index.php در برنامه Notepad++ . در جوملا نمی توانیم از آدرس دهی مستقیم استفاده کنیم بلکه باید از کد های مخصوص جوملا استفاده نماییم. بنابراین به اول آدرس تمامی فایل های درست بعد از عبارت src=” یا href=” عبارت زیر را اضافه می کنیم :

 

templates/<?php echo $this->template ?>/

 

به عنوان مثال :

 

<link rel="stylesheet" href="/css/style.css" type="text/css">

 

که باید به شکل زیر در بیاید :

 

<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/style.css" type="text/css">

 

به همین ترتیب برای آدرس بقیه فایل ها (css,js,jpg,png,gif,…) این کار را برای آدرس فایل های html و php انجام نمی دهیم.

 

حالا تگ زیر را به جای تگ <title>site title</title> قالب قرار می هیم :

 

<jdoc:include type="head" />

 

این تگ عنوان سایت را نمایش می دهد.

 

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

 

<jdoc:include type="modules" name="top"/>

 

در کد بالا عبارتی که جلوی name نوشته می شود مکان منو را مشخص می کند و باید در بخش ویرایش ماژول مکان ماژول را همین عبارت (در اینجا top) را انتخاب کنیم تا منوی ما در جایی که می خواهیم نمایش داده شود.

 

برای اینکه وقتی در بخش مدیریت ماژولی را غیر فعال کردیم در قالب هم نشان داده نشود باید تگ های مخصوص ماژول جوملا را بین دو عبارت زیر قرار دهیم:

 

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

 

<?php endif; ?>

 

به عنوان مثال :

 

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

 

<div id="navigation">

 

<jdoc:include type="modules" name="top" />

 

</div>

 

<?php endif; ?>

 

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

 

<jdoc:include type="component" />

 

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

 

<jdoc:include type="modules" name="search" style="none" />

 

باز هم توجه کنید که عبارت جلوی name مکان ماژول را که در بخش position ها در فایل xml قالب ایجاد کردیم مشخص می کند و پس از قرار دادن این کد در قالب باید به مدیریت ماژول بروید و در قسمت ویرایش ماژول جستجو مکان آن را همان عبارت جلوی name در اینجا search برگزینیم.

 

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

 

دقت کنید که اگر در مدیریت ماژول ها برای چند ماژول یک مکان مثلا top را انتخاب کنید همه در همان جایی در قالب شما نمایش داده می شوند که شما کد زیر را گذاشته اید :

 

<jdoc:include type="modules" name="top"/>

 

به عنوان نکته پایانی به شما توصیه می کنم که چندین قالب را با این روش تبدیل کنید تا در این کار به یک حرفه ای تبدیل شوید. البته اینکار در قالب های پیچیده کمی مشکل می شود که با تمرین و تحقیق می توانید هر قالبی را به قالب جوملا تبدیل کنید.